/* ============================================================================
   Van Baelen Interieur — bewegingslaag
   Eén gebaar: de ladeveeg. Subtiel, traag, nooit afleidend.
   JS zet klassen en custom properties; dit bestand beslist wat er gebeurt.
   ========================================================================== */

/* --- Fotoreveal: korte, rustige fade -----------------------------------------
   (De eerdere veeg + zoom gaf GPU-naden en een glitchy gevoel; beelden
   faden nu pas in wanneer ze gedecodeerd zijn.) */
html.js-reveal [data-lade].wacht {
  opacity: 0;
  transition: opacity 480ms ease-out;
  transition-delay: var(--vertraging, 0ms);
}

html.js-reveal [data-lade].is-open { opacity: 1; }

/* --- Zachte tekst-reveal ----------------------------------------------------- */
html.js-reveal [data-zacht].wacht {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 450ms var(--ease-out),
    transform 450ms var(--ease-out);
  transition-delay: var(--vertraging, 0ms);
}

html.js-reveal [data-zacht].is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Regelmaskers voor de hero-titel ----------------------------------------- */
.held__titel .lijn { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

html.js-reveal .held__titel .lijn__in {
  display: inline-block;
  transform: translate3d(0, 0.95em, 0);
  opacity: 0;
  transition: transform 820ms var(--ease-out), opacity 500ms linear;
}

html.js-reveal .is-geladen .held__titel .lijn__in {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.held__titel .lijn:nth-child(2) .lijn__in { transition-delay: 90ms; }
.held__titel .lijn:nth-child(3) .lijn__in { transition-delay: 180ms; }

html.js-reveal .held__lead,
html.js-reveal .held__acties,
html.js-reveal .held__cue {
  opacity: 0;
  transition: opacity 500ms linear 420ms;
}

html.js-reveal .is-geladen .held__lead,
html.js-reveal .is-geladen .held__acties,
html.js-reveal .is-geladen .held__cue { opacity: 1; }

/* Hero: minimale zoom — meer opschaling maakt het beeld merkbaar onscherp. */
.held .cinema > img {
  transform: scale(calc(1.02 - var(--hp, 0) * 0.02)) translate3d(0, calc(var(--hp, 0) * 3%), 0);
}

.held__inhoud {
  transform: translate3d(0, calc(var(--hp, 0) * -9vh), 0);
  opacity: calc(1 - var(--hp, 0) * 0.85);
}

.held__cue { opacity: calc(1 - var(--hp, 0) * 14) !important; }

/* --- Maskerwissel voor cijfers ------------------------------------------------ */
.masker-uit {
  transform: translate3d(0, -0.55em, 0);
  opacity: 0;
  transition: transform 280ms var(--ease-inout), opacity 280ms var(--ease-inout);
}

.masker-in {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform var(--d-3) var(--ease-out) 120ms, opacity var(--d-3) var(--ease-out) 120ms;
}

.masker-wacht {
  transform: translate3d(0, 0.55em, 0);
  opacity: 0;
  transition: none;
}

/* --- Materialenbank: beeldwissel ------------------------------------------------ */
.materialen__beeld img {
  transition: opacity var(--d-3) cubic-bezier(0.4, 0, 0.2, 1), transform var(--d-3) cubic-bezier(0.4, 0, 0.2, 1);
}

.materialen__beeld img.is-weg { opacity: 0; transform: scale(1.03); }
.materialen__beeld img.is-nieuw { opacity: 0; transform: scale(1.04); }

/* --- Parallax binnen de eigen doorgang (JS schrijft --e) ------------------------ */
[data-parallax] { transform: translate3d(0, calc(var(--e, 0.5) * -8% + 4%), 0); }
[data-parallax='tegen'] { transform: translate3d(0, calc(var(--e, 0.5) * 6% - 3%), 0); }

/* Parallax op een beeld ín een kader: beeld is groter dan zijn venster. */
.mount__beeld [data-parallax],
.cinema [data-parallax] { height: 112%; }

/* --- Hairlines die zichzelf tekenen ---------------------------------------------- */
html.js-reveal [data-hairline].wacht {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-5) var(--ease-inout) var(--vertraging, 0ms);
}

html.js-reveal [data-hairline].is-open { transform: scaleX(1); }

/* --- Reduced motion: de tweede lay-out -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html.js-reveal [data-lade],
  html.js-reveal [data-lade='spiegel'],
  html.js-reveal [data-zacht],
  html.js-reveal [data-hairline].wacht {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.js-reveal [data-lade].is-open::after { display: none; }

  html.js-reveal .held__titel .lijn__in,
  html.js-reveal .held__lead,
  html.js-reveal .held__acties,
  html.js-reveal .held__cue { transform: none; opacity: 1; }

  .held .cinema > img,
  .held__inhoud { transform: none !important; opacity: 1 !important; }
  .held__cue-lijn::after { animation: none; }

  .belofte { height: auto; }
  .belofte__pin { position: static; height: auto; transform: none; padding-block: calc(var(--stap) * 2.5); }
  .regel__inkt { clip-path: inset(0 0 0 0) !important; }
  .regel__zaag { display: none; }

  .materialen { height: auto; }
  .materialen__stage { position: static; height: auto; }

  .mount__beeld > img, .cinema > img { transform: none !important; }
  [data-parallax], [data-parallax='tegen'] { transform: none !important; }
  .mount__beeld [data-parallax], .cinema [data-parallax] { height: 100%; }
}