/* ============================================================
   THE LOST MEMORIES, "De Reel" (homepage)
   De homepage als filmstrook: genummerde frames en een
   full-screen video als de spelende reel. Zwart = zaal,
   groen = projectorlicht, off-white = filmpapier, amber = verleden.
   ============================================================ */

:root {
  --bg: #0a0c0a;
  --bg-2: #0e110e;
  --line: rgba(239,241,236,.10);
  --green: #35663E;        /* natuurlijk bosgroen (afgeleid van RAL 6001) */
  --green-lift: #41794B;   /* hover op groene vlakken */
  --green-text: #6FA37D;   /* zacht bladgroen voor kleine tekst en lijntjes */
  --on-green: #f4f0e6;     /* lichte tekst op groen vlak */
  --paper: #f2ebdd;
  --paper-ink: #1a1a17;
  --amber: #d99a4e;
  --ink: #eff1ec;
  --muted: #9aa29a;
  --dim: #7b8179;

  /* Een lettertype voor de hele site. De aliassen blijven bestaan zodat
     bestaande regels blijven werken, maar wijzen alle drie naar Space Grotesk. */
  --font: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --serif: var(--font);
  --sans: var(--font);
  --mono: var(--font);

  --container: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: var(--on-green); }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; line-height: 1.03; letter-spacing: -.032em; margin: 0 0 .4em; }
.mono { font-family: var(--font); letter-spacing: .06em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px){ .wrap { padding: 0 16px; } }

.frame { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
/* De scheiding tussen twee frames loopt aan beide kanten weg, zodat de secties
   in elkaar overlopen in plaats van als losse blokken op elkaar te stapelen. */
.frame::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--line) 14%, var(--line) 86%, transparent 100%);
}
.frame:first-of-type::before { display: none; }
.frame__label { display: flex; align-items: center; gap: 12px; font-family: var(--font); font-weight: 600; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-text); margin-bottom: 26px; }
.frame__label::before { content: ""; width: 22px; height: 1px; background: var(--green-text); }

.big { font-size: clamp(2.1rem, 5.2vw, 4rem); }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: var(--muted); max-width: 58ch; }

.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 700; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; padding: 15px 26px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.btn--primary { background: var(--green); color: var(--on-green); }
.btn--primary:hover { transform: translateY(-2px); background: var(--green-lift); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--green-text); color: var(--green-text); }
.btn--ink { background: var(--paper); color: #16301d; }
.btn--ink:hover { transform: translateY(-2px); background: #fffaf1; }
.btn--ink-ghost { border-color: rgba(244,240,230,.5); color: var(--paper); }
.btn--ink-ghost:hover { border-color: var(--paper); }

.tlink { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.tlink span { transition: transform .3s var(--ease); }
.tlink:hover span { transform: translateX(5px); }

/* ---------- Film-leader nav ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 90px; display: flex; align-items: center; background: linear-gradient(180deg, rgba(8,10,8,.82), rgba(8,10,8,.4)); border-bottom: 1px solid var(--line); transition: height .3s var(--ease), background .3s; }
.site-header.scrolled { height: 72px; background: rgba(9,11,9,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo { height: 46px; width: auto; transition: height .3s var(--ease); }
.site-header.scrolled .brand-logo { height: 38px; }
.brand b { font-family: var(--font); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; white-space: nowrap; }
.brand small { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.btn) { position: relative; font-family: var(--font); font-weight: 600; font-size: .88rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 10px 15px; transition: color .4s var(--ease); }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px; height: 2px; background: var(--green-text); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn).active { color: var(--ink); }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn).active::after { transform: scaleX(1); }
.nav-cta { margin-left: 12px; }
.nav-links .nav-cta .btn { padding: 12px 22px; font-size: .82rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 54px; height: 54px; position: relative; z-index: 40; }
.nav-toggle span { display: block; width: 32px; height: 3px; background: var(--ink); margin: 6px auto; transition: transform .35s var(--ease), opacity .25s; }
.nav-toggle.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity: 0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* ---------- HERO: de reel speelt ---------- */
.reel-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.reel-hero__video { position: absolute; inset: 0; z-index: 0; }
.reel-hero__video video { width: 100%; height: 100%; object-fit: cover; }
.gate-weave .reel-hero__video video { animation: weave 6s steps(1) infinite; }
@keyframes weave { 0%,100%{transform:translateY(0)} 33%{transform:translateY(1px)} 66%{transform:translateY(-1px)} }
/* projector gate + grain */
.reel-hero__gate { display: none; }
.reel-hero__grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); }
.reel-hero__grad { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,8,6,.45) 0%, rgba(6,8,6,.32) 26%, rgba(6,8,6,.66) 58%, rgba(6,8,6,.9) 82%, var(--bg) 100%),
    linear-gradient(90deg, rgba(6,8,6,.92) 0%, rgba(6,8,6,.72) 42%, rgba(6,8,6,.3) 68%, rgba(6,8,6,0) 88%); }
.reel-hero__inner { position: relative; z-index: 3; max-width: var(--container); margin: 0 auto; width: 100%; padding: 0 40px 12vh; }
.reel-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin-bottom: 24px; }
.reel-tag .lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--green-text); box-shadow: 0 0 12px var(--green-text); animation: flicker 3.2s infinite; }
@keyframes flicker { 0%,100%{opacity:1} 45%{opacity:.5} 47%{opacity:1} 60%{opacity:.35} 62%{opacity:1} }
.reel-hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.4rem); font-weight: 700; max-width: 15ch; margin-bottom: 32px; text-shadow: 0 2px 16px rgba(0,0,0,.75), 0 16px 48px rgba(0,0,0,.55); }
.reel-hero h1 em { font-style: normal; color: var(--green-text); }
.reel-hero .lead { color: #e8e6dd; margin-bottom: 30px; }
.reel-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-hint { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-hint .l { width: 1px; height: 34px; background: linear-gradient(var(--green-text), transparent); }
@media (max-width: 720px){ .reel-hero__inner { padding: 0 20px 14vh; } .reel-hero__gate { inset: 10px; } }

/* ---------- Frame 01: manifest + feiten ---------- */
.manifest { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.manifest h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 700; }
.manifest h2 em { font-style: normal; color: var(--green-text); }
.facts { border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .88rem; }
.facts dt { color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.facts dd { margin: 0; color: var(--ink); text-align: right; }
@media (max-width: 760px){ .manifest { grid-template-columns: 1fr; } }

/* ---------- Contact-sheet (DJ-sets) ---------- */
.sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 760px){ .sheet { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; } .sheet > * { scroll-snap-align: start; } }
.cell { position: relative; background: #0d100d; border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.cell::before, .cell::after { content: ""; position: absolute; left: 10px; right: 10px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='8'%3E%3Crect x='7' width='16' height='8' rx='2' fill='%23f2ebdd' opacity='0.14'/%3E%3C/svg%3E") repeat-x center; }
.cell::before { top: 5px; } .cell::after { bottom: 5px; }
.cell__top { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font); font-weight: 500; font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--dim); letter-spacing: .08em; margin: 8px 0 12px; }
.cell__top .tc { color: var(--green-text); }
.cell__still { border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; margin-bottom: 14px; border: 1px solid var(--line); }
.cell__still img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) sepia(.18) hue-rotate(55deg) saturate(.9) brightness(.9); }
.cell h3 { font-size: 1.3rem; font-weight: 700; margin: 0 0 6px; }
.cell p { font-family: var(--sans); color: var(--muted); font-size: .9rem; margin: 0; }

/* ---------- Polaroid ---------- */
.polaroid { display: inline-block; background: var(--paper); padding: 12px 12px 44px; border-radius: 3px; box-shadow: 0 24px 50px -22px rgba(0,0,0,.7); transform: rotate(-2deg); position: relative; }
.polaroid.r { transform: rotate(2deg); }
.polaroid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; filter: grayscale(.45) sepia(.2) hue-rotate(55deg) saturate(.95) brightness(.9); }
.polaroid .cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: var(--font); font-weight: 500; font-size: .88rem; letter-spacing: .01em; color: #4a463c; }
.polaroid .stamp { position: absolute; top: 16px; right: 16px; font-family: var(--font); font-weight: 600; font-size: .6rem; letter-spacing: .06em; color: #8a5a1f; border: 1px solid rgba(138,90,31,.55); border-radius: 3px; padding: 3px 6px; transform: rotate(6deg); }
.polaroid.warm img { filter: sepia(.45) saturate(1.15) brightness(1.02); }
/* De foto van 5 mei is donker en tegen het licht in geschoten. Die krijgt een
   lichtere zetting en een uitsnede die op de DJ staat in plaats van op het midden. */
.polaroid.lift img { object-position: 28% 42%; filter: grayscale(.22) sepia(.12) hue-rotate(52deg) saturate(1.25) brightness(1.62) contrast(1.16); }

/* ---------- Los Andreas frame ---------- */
.andreas { display: grid; grid-template-columns: 300px 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.andreas .bio h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
@media (max-width: 760px){ .andreas { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- Bruiloften: het lichte frame ---------- */
.lightframe { background: var(--paper); color: var(--paper-ink); border-radius: 14px; padding: clamp(34px, 5vw, 60px); display: grid; grid-template-columns: 1fr 280px; gap: clamp(28px, 5vw, 56px); align-items: center; }
.lightframe .frame__label { color: #6d5d3a; }
.lightframe .frame__label::before { background: #6d5d3a; }
.lightframe h2 { color: var(--paper-ink); font-size: clamp(1.9rem, 4vw, 3.1rem); }
.lightframe h2 em { font-style: normal; color: #7d6330; }
.lightframe .lead { color: #5c5344; font-size: 1.04rem; line-height: 1.6; max-width: 46ch; margin: 16px 0 0; }
.lightframe .sets { font-family: var(--mono); font-size: .82rem; color: #6a604f; display: grid; gap: 8px; margin: 20px 0 22px; }
.lightframe .tlink { color: #7d6330; }
@media (max-width: 760px){ .lightframe { grid-template-columns: 1fr; } }

/* ---------- Meer: twee stills ---------- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.still-card { border: 1px solid var(--line); border-radius: 8px; padding: 26px; background: #0d100d; }
.still-card h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.still-card p { color: var(--muted); font-size: .95rem; }
@media (max-width: 640px){ .two { grid-template-columns: 1fr; } }

/* ---------- Instagram: de laatste drie berichten ----------
   Het raster staat op hidden tot de berichten binnen zijn, zodat er
   nooit een leeg vak op de pagina staat. De volgregel blijft altijd. */
.iggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
.iggrid[hidden] { display: none; }
.iggrid a { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; aspect-ratio: 1; background: var(--bg-2); }
.iggrid img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .7s var(--ease); }
.iggrid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,8,6,0) 52%, rgba(6,8,6,.78) 100%); opacity: 0; transition: opacity .5s var(--ease); }
.iggrid a:hover img { transform: scale(1.05); filter: brightness(1.08); }
.iggrid a:hover::after { opacity: 1; }
.iggrid .igcap { position: absolute; z-index: 1; left: 13px; right: 13px; bottom: 12px; font-size: .8rem; line-height: 1.38; color: var(--paper); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iggrid a:hover .igcap { opacity: 1; transform: none; }
.igfollow { margin: 0; }
/* Zolang er nog geen berichten binnenkomen blijft het raster weg. Het blok
   krijgt dan minder hoogte, anders staat er een groot gat op de pagina. */
.frame:has(.iggrid[hidden]) { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 640px){ .iggrid { gap: 10px; } }

/* ---------- Referenties: contact-sheet strip ---------- */
.refstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.refcell { position: relative; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.refcell img { width: 100%; aspect-ratio: 5/3; object-fit: cover; filter: grayscale(.5) sepia(.2) hue-rotate(55deg) saturate(.9) brightness(.85); }
.refcell span { position: absolute; left: 10px; bottom: 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--paper); background: rgba(6,8,6,.6); padding: 4px 9px; border-radius: 3px; }
@media (max-width: 640px){ .refstrip { grid-template-columns: 1fr; } }

/* ---------- Slotframe: het licht staat aan ---------- */
.slot { position: relative; background: var(--green); color: var(--on-green); text-align: center; padding: clamp(92px, 12vw, 150px) 24px clamp(60px, 10vw, 120px); }
/* Het zwart zakt in het groen weg in plaats van er hard tegenaan te stoppen */
.slot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(70px, 9vw, 120px); pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(53,102,62,0) 100%);
}
.slot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(50px, 6vw, 84px); pointer-events: none;
  background: linear-gradient(180deg, rgba(53,102,62,0) 0%, var(--bg) 100%);
}
.slot > * { position: relative; z-index: 1; }
.slot .frame__label { color: rgba(242,235,221,.92); justify-content: center; }
.slot .frame__label::before { background: rgba(242,235,221,.92); }
.slot h2 { color: var(--on-green); font-size: clamp(2.2rem, 6vw, 4.4rem); max-width: 16ch; margin: 0 auto .5em; }
.slot__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: linear-gradient(180deg, var(--bg) 0%, #060706 40%); padding: 84px 0 34px; }
.foot { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 46px; }
.site-footer h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-family: var(--font); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--muted); font-size: .95rem; transition: color .4s var(--ease); }
.site-footer a:hover { color: var(--green-text); }
.footer-brand p { color: var(--muted); font-size: .95rem; max-width: 320px; }
.footer-brand .brand { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: .85rem; }
@media (max-width: 900px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 720px){ .foot { padding: 0 20px; } }
@media (max-width: 480px){ .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Reveal: polaroid ontwikkelt ---------- */
[data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(7px) saturate(.45); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.3s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
/* ---------- Mobiel menu ---------- */
@media (max-width: 1024px){
  .nav-links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 8px; background: var(--bg); transform: translateX(100%); transition: transform .4s var(--ease); padding: 40px; }
  .nav-links.open { transform: none; }
  /* Zie style.css: met backdrop-filter op de balk wordt het uitklapmenu
     afgeknepen tot de hoogte van die balk. */
  .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(9,11,9,.97); }
  /* De maat en kleur moeten op dezelfde selector staan als de basisregel,
     anders wint die basisregel en blijven de links klein en grijs. */
  .nav-links a:not(.btn) { font-size: 1.35rem; letter-spacing: .06em; padding: 14px 20px; color: var(--ink); }
  .nav-links a:not(.btn).active { color: var(--green-text); }
  .nav-links a:not(.btn)::after { left: 20px; right: 20px; bottom: 6px; }
  .nav-links .nav-cta .btn { font-size: .95rem; padding: 16px 32px; }
  .nav-links .nav-cta { margin: 12px 0 0; }   /* in het inklapmenu staat de knop onder elkaar, niet ernaast */
  .nav-toggle { display: block; }
}

/* ============================================================
   SMOOTH ANIMATIES (v2)
   Vloeiende hover-interacties + gestaggerde reveals
   ============================================================ */

/* Vloeiendere reveal-curve */
[data-reveal] { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.3s var(--ease); }

/* Gestaggerd: laat de kinderen animeren i.p.v. de hele groep */
.facts[data-reveal], .sheet[data-reveal], .refstrip[data-reveal] { opacity: 1; transform: none; filter: none; }
.facts > div, .sheet > .cell, .refstrip > .refcell { opacity: 0; transform: translateY(22px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
.facts.in > div, .sheet.in > .cell, .refstrip.in > .refcell { opacity: 1; transform: none; }
.facts.in > div:nth-child(2), .sheet.in > .cell:nth-child(2), .refstrip.in > .refcell:nth-child(2) { transition-delay: .1s; }
.facts.in > div:nth-child(3), .sheet.in > .cell:nth-child(3), .refstrip.in > .refcell:nth-child(3) { transition-delay: .2s; }
.facts.in > div:nth-child(4) { transition-delay: .3s; }

/* Hover: DJ-set frames liften, still zoomt zacht in */
.cell { transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease; }
.cell:hover { transform: translateY(-7px); border-color: rgba(111,163,125,.55); }
.cell__still img { transition: transform 1s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.cell:hover .cell__still img { transform: scale(1.07); }

/* Hover: polaroid komt recht te hangen en licht op */
.polaroid { transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.polaroid:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 34px 60px -20px rgba(0,0,0,.8); }

/* Hover: referentie-stills zoomen zacht */
.refcell img { transition: transform 1s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.refcell:hover img { transform: scale(1.06); filter: grayscale(.35) sepia(.18) hue-rotate(55deg) saturate(1) brightness(.95); }

/* Hover: "meer" kaarten liften */
.still-card { transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, background .4s ease; }
.still-card:hover { transform: translateY(-6px); border-color: rgba(111,163,125,.5); background: #10130f; }

/* Hover: logo knipoogt */
.brand-logo { transition: height .3s var(--ease), transform .5s cubic-bezier(.34,1.56,.64,1); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); }

/* Zachte deining op de scroll-hint */
.scroll-hint { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(6px); } }

/* Slot: ondertitel onder de kop */
.slot__lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: rgba(244,240,230,.9); max-width: 46ch; margin: 0 auto 28px; }

/* ---------- Beperkte beweging ----------
   Alles staat in een blok, helemaal achteraan. Zou dit hoger in het bestand staan,
   dan zetten de animatieregels eronder de bewegingen gewoon weer aan. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .facts > div, .sheet > .cell, .refstrip > .refcell { opacity: 1; transform: none; transition: none; }
  .cell, .cell__still img, .polaroid, .brand-logo, .btn, .tlink span, .nav-links a::after { transition: none; }
  .iggrid img, .iggrid a::after, .iggrid .igcap { transition: none; }
  .iggrid a:hover img { transform: none; }
  .reel-tag .lamp, .gate-weave .reel-hero__video video, .scroll-hint { animation: none; }
}

/* ============================================================
   OVERGANG TUSSEN PAGINA'S
   Browsers die dit ondersteunen laten de ene pagina in de andere
   overvloeien in plaats van hard om te schakelen. Browsers die het
   niet kennen negeren dit blok en laden gewoon zoals altijd.
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tlm-uit .34s var(--ease) both; }
::view-transition-new(root) { animation: tlm-in .46s var(--ease) both; }
@keyframes tlm-uit { to { opacity: 0; } }
@keyframes tlm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1ms; animation-name: none; }
}