/* Pro Marketing 360 — bewegingslaag (fase 4)
   - Hero: laadsequentie in puur CSS, klaar binnen 1.2s; werkt ook als JavaScript faalt.
   - Onder de vouw: entrances per sectie. js/main.js zet data-enter op de delen en daarna
     html.motion-on; zonder die klasse is niets verborgen. Na afloop haalt main.js data-enter weg,
     zodat de gewone overgangen (druk, hover) weer gelden.
   - Alleen transform en opacity. Minder beweging: geen verplaatsing of schaal, alleen een korte fade. */

/* ======================= Hero: laden ======================= */
.hero__title .line { display: block; overflow: clip; padding-block: 0.12em; margin-block: -0.12em; }
.hero__title .line__in { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .line__in { animation: rise-line 900ms var(--ease-expo) 100ms backwards; }
  .js .hero__title .line:nth-child(2) .line__in { animation-delay: 190ms; }
  /* de zin onder de kop staat er meteen: hij zegt wat dit is (en is het grootste tekstblok, LCP) */
  .js .hero__cta { animation: rise-small 500ms var(--ease-out) 480ms backwards; }
  .js .hero__figure { animation: settle 1000ms var(--ease-expo) 150ms backwards; }
}
/* alleen een begintoestand (fill backwards): na afloop gelden de gewone stijlen weer, dus de
   knop kan meteen indrukken */
@keyframes rise-line { from { transform: translateY(110%); } }
@keyframes rise-small { from { opacity: 0; transform: translateY(12px); } }
@keyframes settle { from { opacity: 0; transform: scale(0.96); } }

/* ======================= Entrances onder de vouw ======================= */
/* line: de regel komt uit zijn eigen masker (het element is het masker, het kind beweegt) */
[data-enter="line"] { display: block; overflow: clip; padding-block: 0.12em; margin-block: -0.12em; }
[data-enter="line"] > * { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* pic: het kader (picture.mask) krijgt een gordijn in de kleur van het vlak, dat omhoog wegtrekt */
  .motion-on [data-enter="pic"]::after {
    content: ""; position: absolute; inset: 0;
    background: var(--field);
    transform-origin: 50% 0;
    pointer-events: none;
  }
  .motion-on [data-enter="rise"]:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .motion-on [data-enter="settle"]:not(.is-in) { opacity: 0; transform: scale(0.96); }
  .motion-on [data-enter="line"]:not(.is-in) > * { transform: translateY(110%); }
  .motion-on [data-enter="pic"]:not(.is-in) .foto { transform: scale(1.08); }

  .motion-on [data-enter="rise"].is-in {
    transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform var(--t-reveal) var(--ease-expo) var(--d, 0ms);
  }
  .motion-on [data-enter="settle"].is-in {
    transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 1000ms var(--ease-expo) var(--d, 0ms);
  }
  .motion-on [data-enter="line"].is-in > * {
    transition: transform 900ms var(--ease-expo) var(--d, 0ms);
  }
  .motion-on [data-enter="pic"]::after { transition: transform var(--t-open) var(--ease-in-out) var(--d, 0ms); }
  .motion-on [data-enter="pic"].is-in::after { transform: scaleY(0); }
  .motion-on [data-enter="pic"].is-in .foto { transition: transform 1300ms var(--ease-soft) var(--d, 0ms); }
}

/* minder beweging: geen verplaatsing, geen schaal, geen gordijn; alleen een korte fade */
@media (prefers-reduced-motion: reduce) {
  .motion-on [data-enter]:not(.is-in) { opacity: 0; }
  .motion-on [data-enter].is-in { transition: opacity 300ms ease var(--d, 0ms); }
}