/* ============================================================
   lux.css, scroll-choreografie laag (na v2.css)
   Hero-entree · hero-parallax-exit · manifest-scrollmoment ·
   per-woord titel-reveals · kaart-drift.
   Alles additief: zonder lux.js (of met reduced motion) rendert
   de pagina exact als voorheen. lux.js zet .lux-on op <html>.
   ============================================================ */

/* De basisstijlen van de woord-spans (.lw / .lw__in / .lw__in--grad) staan
   in base.css: ook pagina's zónder deze choreografielaag splitsen koppen
   per woord via grad-words.js. Hier alleen de bewegingsregels. */

/* dezelfde no-blank failsafe-filosofie als base.css: als een trigger ooit
   uitblijft, staat elk woord er na een paar seconden gewoon */
@keyframes luxFailsafe {
  to {
    opacity: 1;
    transform: none;
    /* none i.p.v. blur(0): een blijvend filter dwingt WebKit de
       gradient-woorden (background-clip: text) permanent te rasteren,
       wat spookfragmenten van glyfen kan achterlaten */
    filter: none;
  }
}

/* ---------- 1. Hero-entree: woord-cascade na de intro-landing ----------
   lux.js zet .lux-hero op de hero, splitst de h1 en markeert de subtitel,
   knoppen en scroll-cue als .lux-seq. .is-enter start de choreografie
   (direct bij intro-skip, anders op air:intro-done). */
.lux-on[data-motion="on"] .lux-hero h1 .reveal,
.lux-on[data-motion="on"] .lux-hero h1.is-split {
  /* de blok-reveal van de kop gaat uit; de woorden nemen het over */
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  animation: none;
}
.lux-on[data-motion="on"] .lux-hero h1 .lw__in {
  opacity: 0;
  transform: translateY(0.55em);
  filter: blur(10px);
  transition: opacity 0.9s var(--ease-out) var(--wd, 0s),
    transform 0.9s var(--ease-out) var(--wd, 0s),
    filter 0.9s var(--ease-out) var(--wd, 0s);
  animation: luxFailsafe 0.5s var(--ease-out) 8.5s forwards;
}
.lux-on[data-motion="on"] .lux-hero.is-enter h1 .lw__in {
  opacity: 1;
  transform: none;
  filter: none;
}
/* eigen composietlaag voor de gesplitste kop: WebKit hertekent hem dan
   als één geheel en laat geen verweesde glyph-slivers achter naast de
   titel (Safari-bug bij background-clip: text + per-woord animaties) */
.lux-on[data-motion="on"] .lux-hero h1.is-split {
  transform: translateZ(0);
}
/* subtitel, knoppen en scroll-cue volgen ná de woorden (delay via --ld) */
.lux-on[data-motion="on"] .lux-hero .lux-seq {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-out) var(--ld, 0s),
    transform 0.9s var(--ease-out) var(--ld, 0s),
    filter 0.9s var(--ease-out) var(--ld, 0s);
  animation: luxFailsafe 0.5s var(--ease-out) 8.5s forwards;
}
.lux-on[data-motion="on"] .lux-hero.is-enter .lux-seq {
  opacity: 1;
  transform: none;
  filter: none;
}
/* de glow bloeit mee op met de landing */
.lux-on[data-motion="on"] .lux-hero .hero__glow {
  opacity: 0;
  transition: opacity 1.6s var(--ease-out) 0.3s;
}
.lux-on[data-motion="on"] .lux-hero.is-enter .hero__glow {
  opacity: 1;
}

/* ---------- 2. Hero-exit: lux.js schrijft translate/opacity op
   .hero__inner en de glow-spans (aparte properties, geen transform-clash).
   Hier alleen de compositing-hint tijdens de scrub. ---------- */
.lux-on[data-motion="on"] .lux-hero .hero__inner {
  will-change: translate, opacity;
}
/* de twee glow-bollen schuiven mee in de uitloop; zonder eigen laag tekent
   WebKit het radiale verloop bij elke scrollstap opnieuw */
.lux-on[data-motion="on"] .lux-hero .hero__glow span {
  will-change: translate;
}

/* ---------- 3. Manifest: gepind statement, woorden lichten op ---------- */
.manifesto {
  position: relative;
  /* de scrol-lengte van het moment; de pin blijft één viewport hoog */
  min-height: 240vh;
}
/* Telefoon: 200vh gaf maar ~20px scroll per woord, een duimveeg zette dan
   een hele zin tegelijk aan. 280vh geeft ~37px, net als op desktop. */
@media (max-width: 767px) {
  .manifesto {
    min-height: 280vh;
  }
}
.manifesto__pin {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* aura die aanzwelt met de overtuiging (lux.js schrijft --mp 0→1) */
.manifesto__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(72vw, 900px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Geen filter: blur(). De dekking verandert bij elke scrollstap (--mp) en
     WebKit rastert een geblurde laag dan elke stap opnieuw: gemeten 40 fps
     op iPhone in dit stuk, 60 zonder. Het verloop zelf levert de zachte rand. */
  background: radial-gradient(
    circle closest-side,
    var(--accent-glow) 0%,
    color-mix(in srgb, var(--accent-glow) 88%, transparent) 18%,
    color-mix(in srgb, var(--accent-glow) 66%, transparent) 32%,
    color-mix(in srgb, var(--accent-glow) 42%, transparent) 46%,
    color-mix(in srgb, var(--accent-glow) 22%, transparent) 58%,
    color-mix(in srgb, var(--accent-glow) 9%, transparent) 68%,
    color-mix(in srgb, var(--accent-glow) 2%, transparent) 78%,
    transparent 86%
  );
  opacity: calc(var(--mp, 0) * 0.42);
  pointer-events: none;
}
.manifesto__eyebrow {
  justify-content: center;
  margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
}
.manifesto .container {
  text-align: center;
}
.manifesto__text {
  position: relative;
  margin-inline: auto;
  max-width: 21ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1rem + 3.6vw, 3.8rem);
  font-weight: 620;
  letter-spacing: -0.032em;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}
.manifesto__key {
  font-weight: 700;
}
/* zonder JS / zonder motion: gewoon volledig leesbaar (geen regels nodig);
   met lux.js dimmen de woorden en licht de scroll ze op */
.lux-on[data-motion="on"] .manifesto__text .lw__in {
  opacity: 0.13;
  transition: opacity 0.45s var(--ease-out);
}
.lux-on[data-motion="on"] .manifesto__text .lw__in.is-lit {
  opacity: 1;
}
/* de drie kernwoorden kleuren pas bij oplichten in de merkgradient */
.lux-on[data-motion="on"] .manifesto__key .lw__in.is-lit {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* de em-woorden ("vaste collega") volgen dezelfde choreografie: de
   site-brede .lw__in--grad (base.css) verft ze anders al blauw vóór het
   oplichten, hier gedimd als gewone inkt tot hun is-lit-moment */
.lux-on[data-motion="on"] .manifesto__text .lw__in--grad:not(.is-lit) {
  background: none;
  /* expliciete inkt: het omliggende em erft color:transparent uit de
     gradient-styling, dus inherit/currentColor zou onzichtbaar zijn */
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .lux-on[data-motion="on"] .manifesto__key .lw__in.is-lit {
    -webkit-text-fill-color: currentColor;
    color: var(--accent-deep);
  }
}

/* ---------- 4. Sectiekoppen: per-woord reveal ----------
   lux.js splitst h2's en zet .is-split; de bestaande .reveal-observer
   (is-in) blijft de trigger, hier alleen de gestaggerde kinderen. */
.lux-on[data-motion="on"] main h2.is-split .lw__in {
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(8px);
  transition: opacity 0.75s var(--ease-out) var(--wd, 0s),
    transform 0.75s var(--ease-out) var(--wd, 0s),
    filter 0.75s var(--ease-out) var(--wd, 0s);
  animation: luxFailsafe 0.5s var(--ease-out) 2.4s forwards;
}
.lux-on[data-motion="on"] main .is-in h2.is-split .lw__in,
.lux-on[data-motion="on"] main h2.is-split.is-in .lw__in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ---------- 5. Kaart-drift: kinderen van [data-drift] landen met
   verschillende snelheden. lux.js schrijft --dy per kaart; de aparte
   translate-property botst niet met de reveal-transform. ---------- */
.lux-on[data-motion="on"] [data-drift] > * {
  translate: 0 var(--dy, 0px);
}

/* ---------- 6. Zweef-parallax: lux.js schrijft --fy op [data-float] ---------- */
.lux-on[data-motion="on"] [data-float] {
  translate: 0 var(--fy, 0px);
}

/* ---------- Reduced motion: alles hierboven is al gegated op
   [data-motion="on"]; sticky-manifest blijft, maar statisch leesbaar. */