/* ══ DE MUUR — masonry-galerie, foto's eerst ═══════════════════════════
   2026-08-05: herontwerp. Minimalist + funky: de doeken vullen het scherm,
   de chrome verdwijnt, de marker-accenten blijven. Native CSS masonry
   (columns), scroll-reveals via animation-timeline, cross-document view
   transitions naar work.html. Geen JS erbij. Laadt NA site.css/rots-funk.css
   en wint dus op specificiteit waar nodig. */

/* de foto vloeit door naar de detailpagina (Chrome/Safari; elders gewoon een klik) */
@view-transition { navigation: auto; }

/* ── de muur zelf ─────────────────────────────────────────────────── */
.wall {
  columns: 2;
  column-gap: 10px;
  margin-top: var(--space-4, 16px);
}
@media (min-width: 720px)  { .wall { columns: 3; column-gap: 14px; } }
@media (min-width: 1200px) { .wall { columns: 4; column-gap: 16px; } }

.tile {
  break-inside: avoid;
  margin: 0 0 18px;
  position: relative;
}
@media (min-width: 720px) { .tile { margin-bottom: 22px; } }

/* scroll-reveal: tegel komt omhoog terwijl hij het beeld in scrollt */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tile {
      animation: tile-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes tile-rise {
  from { opacity: 0; transform: translateY(22px) rotate(-0.4deg); }
  to   { opacity: 1; transform: none; }
}

.tile__art {
  display: block;
  position: relative;
  line-height: 0;
  background: var(--color-neutral-100, #eee);
}
.tile__art img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--funk-ink, #111);
  box-shadow: 4px 4px 0 var(--funk-ink, #111);
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .tile__art:hover img {
    transform: translate(-2px, -2px) rotate(-0.5deg);
    box-shadow: 7px 7px 0 var(--color-accent, #e33);
  }
}

/* geclaimd: stempel schuin over de hoek, foto iets stiller */
.tile[data-claimed="true"] .tile__art img { filter: saturate(.55) contrast(.92); }
.tile__stamp {
  position: absolute;
  top: 10px; left: -6px;
  z-index: 2;
  font-family: "Permanent Marker", cursive;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: var(--funk-ink, #111);
  padding: 5px 10px 6px;
  transform: rotate(-4deg);
  max-width: 85%;
}

/* meta: één regel titel + claim, één regel voor-wie */
.tile__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 2px 0;
}
.tile__t {
  font: 800 15px/1.2 var(--font-heading, sans-serif);
  color: inherit;
  text-decoration: none;
}
.tile__t:hover { color: var(--color-accent, #e33); }
.tile__claim {
  font-family: "Permanent Marker", cursive;
  font-size: 13px;
  line-height: 1;
  color: var(--color-accent-700, #a11);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  white-space: nowrap;
  transform: rotate(-1.5deg);
  text-decoration: underline 2px var(--color-accent, #e33);
  text-underline-offset: 3px;
}
.tile__claim:hover { transform: rotate(-1.5deg) scale(1.08); }
.tile__voor {
  margin: 3px 2px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-neutral-600, #666);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── kop boven de muur: één schreeuw, geen sectie-meubilair ───────── */
.wallhead { padding-top: calc(1.2 * var(--leading, 28px)); }
.wallhead h1 {
  font-family: var(--font-heading, sans-serif);
  font-weight: 800;
  font-size: clamp(34px, 7vw, 88px);
  line-height: .95;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.wallhead h1 em {
  font-style: normal;
  color: var(--color-accent, #e33);
}
.wallhead p {
  max-width: 56ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-neutral-700, #444);
  text-wrap: pretty;
}

/* filterregel: klein, één rij, scrollt mee weg */
.wallbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.wallbar .count-line { margin-left: auto; }

/* mobiel: muur edge-to-edge, de rest compact */
@media (max-width: 719px) {
  .wall { column-gap: 8px; }
  .tile { margin-bottom: 14px; }
  .tile__art img { border-width: 1.5px; box-shadow: 3px 3px 0 var(--funk-ink, #111); }
  .tile__t { font-size: 14px; }
  .tile__voor { font-size: 12px; }
  /* de wrap-padding opheffen zodat de foto's de schermrand raken;
     de koptekst krijgt zijn ademruimte terug */
  .wallwrap { margin-inline: calc(-1 * var(--edge, 16px)); padding-inline: 8px; }
  .wallhead { padding-inline: calc(var(--edge, 16px) - 8px); }
}

/* ══ funk-laag 2 + het digitale magazijn ═══════════════════════════════ */

/* elke tegel hangt nét even anders — zoals doeken aan een echte muur */
.tile:nth-child(3n+1) .tile__art img { transform: rotate(-0.7deg); }
.tile:nth-child(3n+2) .tile__art img { transform: rotate(0.5deg); }
.tile:nth-child(4n)   .tile__art img { transform: rotate(0.9deg); }
@media (hover: hover) {
  /* hover-schaduw wisselt van kleur per positie: rood, blauw, geel */
  .tile .tile__art:hover img { transform: translate(-2px,-2px) rotate(0deg); box-shadow: 7px 7px 0 var(--color-accent, #e33); }
  .tile:nth-child(3n+1) .tile__art:hover img { box-shadow: 7px 7px 0 #2456d6; }
  .tile:nth-child(4n)   .tile__art:hover img { box-shadow: 7px 7px 0 #f0a800; }
}

/* soort-schakelaar: twee grote marker-woorden */
.kindswitch { display: flex; gap: 4px; }
.chip--kind {
  font-family: "Permanent Marker", cursive;
  font-size: 15px;
  transform: rotate(-1deg);
}
.chip--kind[aria-pressed="false"] { opacity: .55; }
.chip--kind:nth-child(2) { transform: rotate(1deg); }

/* digitaal werk: geen doekrand maar een scherm — gradientrand, zachte gloed */
.tile[data-kind="digital"] .tile__art img {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(120deg, #2456d6, var(--color-accent, #e33), #f0a800) border-box;
  box-shadow: 0 6px 22px rgba(36, 86, 214, .25);
  border-radius: 6px;
}
@media (hover: hover) {
  .tile[data-kind="digital"] .tile__art:hover img { box-shadow: 0 10px 30px rgba(36, 86, 214, .4); }
}
.tile__digi {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  font-family: "Permanent Marker", cursive;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  background: #2456d6;
  padding: 4px 8px 5px;
  border-radius: 999px;
  transform: rotate(2deg);
}

/* ══ de digitale kamer ═════════════════════════════════════════════════
   Schakel je naar Digitaal, dan wordt de sectie een donkere ruimte:
   werk-op-een-scherm hoort op een scherm-achtergrond. De wissel zelf
   loopt via document.startViewTransition (zachte crossfade). */
#galerie { transition: background .35s ease, color .35s ease; }
#galerie[data-kind="digital"] {
  background: #101016;
  color: #f2f2f5;
  padding-bottom: calc(1.5 * var(--leading, 28px));
}
#galerie[data-kind="digital"] .wallhead h1 { color: #f2f2f5; }
#galerie[data-kind="digital"] .wallhead h1 em { color: #7aa2ff; }
#galerie[data-kind="digital"] .wallhead p { color: #b9b9c6; }
#galerie[data-kind="digital"] .count-line { color: #8b8b99; }
#galerie[data-kind="digital"] .chip {
  background: transparent; color: #d5d5e0; border-color: #3a3a48;
}
#galerie[data-kind="digital"] .chip[aria-pressed="true"] {
  background: #7aa2ff; color: #0d0d12; border-color: #7aa2ff;
}
#galerie[data-kind="digital"] .tile__t { color: #f2f2f5; }
#galerie[data-kind="digital"] .tile__voor { color: #9a9aa8; }
#galerie[data-kind="digital"] .tile__claim { color: #7aa2ff; text-decoration-color: #7aa2ff; }
#galerie[data-kind="digital"] .tile__art img {
  border: none;
  border-radius: 8px;
  background: none;
  box-shadow: 0 0 0 1px #2c2c3a, 0 14px 40px rgba(122, 162, 255, .22);
}
@media (hover: hover) {
  #galerie[data-kind="digital"] .tile__art:hover img {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px #7aa2ff, 0 20px 55px rgba(122, 162, 255, .4);
  }
}

/* volle breedte voor de donkere kamer, ook op desktop */
#galerie.wallwrap { border-radius: 0; }
@media (min-width: 720px) {
  #galerie[data-kind="digital"] {
    margin-inline: calc(-1 * var(--edge, 24px));
    padding-inline: var(--edge, 24px);
    border-radius: 14px;
  }
}

/* ══ ze hangen echt ════════════════════════════════════════════════════
   Spijkertje + touwtje boven elk fysiek doek; het hele werk draait om dat
   spijkertje (transform-origin bovenin) en wiegt heel traag — elk doek met
   z'n eigen scheefte (--tilt) en tempo (--dur), berekend uit het id. */
.tile__hang {
  display: block;
  width: 62%;
  height: 16px;
  margin: 0 auto;
  overflow: visible;
  stroke: var(--funk-ink, #111);
  stroke-width: 1.4;
  fill: var(--funk-ink, #111);
}
.tile[data-kind="physical"] .tile__art {
  transform-origin: 50% 4px;              /* het spijkertje */
  rotate: var(--tilt, 0deg);
}
@media (prefers-reduced-motion: no-preference) {
  .tile[data-kind="physical"] .tile__art {
    animation: sway var(--dur, 8s) ease-in-out infinite alternate;
  }
  @keyframes sway {
    from { rotate: calc(var(--tilt, 0deg) - 0.6deg); }
    to   { rotate: calc(var(--tilt, 0deg) + 0.6deg); }
  }
  /* aanraken = een duwtje: even flink slingeren */
  @media (hover: hover) {
    .tile[data-kind="physical"] .tile__art:hover {
      animation: push .9s ease-in-out infinite alternate;
    }
    @keyframes push {
      from { rotate: calc(var(--tilt, 0deg) - 1.6deg); }
      to   { rotate: calc(var(--tilt, 0deg) + 1.6deg); }
    }
  }
}
/* de oude vaste nth-child-scheefte op de img is nu dubbelop: eraf */
.tile:nth-child(3n+1) .tile__art img,
.tile:nth-child(3n+2) .tile__art img,
.tile:nth-child(4n)   .tile__art img { transform: none; }

/* geclaimd: hangt er zichtbaar half af, één touwtje geknapt */
.tile[data-claimed="true"] .tile__hang line:first-of-type {
  stroke-dasharray: 4 5;
  opacity: .55;
}

/* digitaal hangt niet — het zweeft */
@media (prefers-reduced-motion: no-preference) {
  .tile[data-kind="digital"] .tile__art {
    animation: float calc(var(--dur, 8s) / 2) ease-in-out infinite alternate;
  }
  @keyframes float {
    from { translate: 0 0; }
    to   { translate: 0 -7px; }
  }
}