/* FIXD — reveal contracts.

   Five patterns, all built from clip-path / transform / opacity so the
   compositor does the work. They are deliberately short (0.34–0.62s) and
   linear-feeling: this brand does not drift into place.

   reveal.js adds .is-in when an element crosses the viewport. Anything with a
   [data-reveal] attribute starts hidden only when JS is present, so the page
   stays fully readable with scripting off. */

.js [data-reveal] { will-change: transform, opacity, clip-path; }

/* 1 — mask: a hard vertical wipe. The default for headlines. */
.js [data-reveal='mask'] {
  clip-path: inset(0 0 102% 0);
  transform: translateY(.22em);
  transition: clip-path .52s var(--ease-snap), transform .52s var(--ease-snap);
}
.js [data-reveal='mask'].is-in { clip-path: inset(0 0 -2% 0); transform: none; }

/* 2 — up: content blocks step up quickly. */
.js [data-reveal='up'] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .38s linear, transform .44s var(--ease-snap);
}
.js [data-reveal='up'].is-in { opacity: 1; transform: none; }

/* 3 — wipe: an image box opens from one side, image counter-slides. */
.js [data-reveal='wipe'] { clip-path: inset(0 100% 0 0); transition: clip-path .62s var(--ease-snap); }
.js [data-reveal='wipe'].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal='wipe'] img { transform: scale(1.06); transition: transform .9s var(--ease-out); }
.js [data-reveal='wipe'].is-in img { transform: scale(1); }

.js [data-reveal='wipe-left'] { clip-path: inset(0 0 0 100%); transition: clip-path .62s var(--ease-snap); }
.js [data-reveal='wipe-left'].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal='wipe-left'] img { transform: scale(1.06); transition: transform .9s var(--ease-out); }
.js [data-reveal='wipe-left'].is-in img { transform: scale(1); }

/* 4 — line: the signature yellow rule draws left to right. */
.js [data-reveal='line'] { transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--ease-snap); }
.js [data-reveal='line'].is-in { transform: scaleX(1); }

/* 5 — stagger: children step in one after another, 60ms apart. */
.js [data-reveal='stagger'] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .3s linear, transform .4s var(--ease-snap);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-reveal='stagger'].is-in > * { opacity: 1; transform: none; }

/* --- reduced motion ----------------------------------------------------
   Everything resolves instantly and stays exactly where it should be. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .js [data-reveal] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-reveal] img { transform: none !important; }
  .fixd-line { transform: scaleX(1) !important; transition: none !important; }
  .marquee__track { animation: none !important; }
  * { scroll-behavior: auto !important; }
}