/* ==========================================================================
   Motion system
   Principles: reveals are "fabrication" moves — panels slide/wipe into place,
   images uncover from an edge, numbers tick up. One easing family, short
   durations, no bouncing. Everything collapses to static under
   prefers-reduced-motion.
   ========================================================================== */

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loadbar { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }

/* --- Scroll reveals ------------------------------------------------------
   Elements carry data-reveal="<variant>"; main.js adds .is-in when in view.
   Variants: up (default), wipe (image uncover), line (rule grows), fade.
   Optional data-delay="120" (ms) staggers siblings. */
[data-reveal] { --d: 0ms; transition-delay: var(--d); }
[data-reveal="up"], [data-reveal=""] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-out) var(--d), transform .8s var(--ease-out) var(--d);
}
[data-reveal="fade"] { opacity: 0; transition: opacity .9s var(--ease-out) var(--d); }
/* Wipes clip the CHILDREN, not the observed box: Chrome's IntersectionObserver
   treats a fully clip-path'd element as not intersecting, so clipping the box
   itself would never trigger the reveal. */
[data-reveal="wipe"] > *, [data-reveal="wipe-left"] > * { transition: clip-path .9s var(--ease-in-out) var(--d), opacity .7s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal="wipe"] > * { clip-path: inset(0 0 100% 0); }
[data-reveal="wipe-left"] > * { clip-path: inset(0 100% 0 0); }
[data-reveal="wipe"].is-in > *, [data-reveal="wipe-left"].is-in > * { clip-path: inset(0 0 0 0); }
[data-reveal="line"] { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-in-out) var(--d); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Split headline: words rise behind a mask */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; }
.split-words .w i { display: inline-block; font-style: normal; transform: translateY(110%); transition: transform .9s var(--ease-out); }
.split-words.is-in .w i { transform: none; }

/* Hero entrance (runs after loader completes; .is-ready set on <html>) */
.hero-copy > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.hero-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-in-out) .15s; }
.hero-specs { opacity: 0; transition: opacity .8s var(--ease-out) .9s; }
html.is-ready .hero-copy > * { opacity: 1; transform: none; }
html.is-ready .hero-copy > :nth-child(1) { transition-delay: .35s; }
html.is-ready .hero-copy > :nth-child(2) { transition-delay: .45s; }
html.is-ready .hero-copy > :nth-child(3) { transition-delay: .6s; }
html.is-ready .hero-copy > :nth-child(4) { transition-delay: .7s; }
html.is-ready .hero-media { clip-path: inset(0 0 0 0); }
html.is-ready .hero-specs { opacity: 1; }
html.no-js .hero-copy > *, html.no-js .hero-specs { opacity: 1; transform: none; }
html.no-js .hero-media { clip-path: none; }

/* Counters */
[data-count] { font-variant-numeric: tabular-nums; }

/* Reduced motion: remove all transforms/animations, keep content visible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  [data-reveal], [data-reveal] > *, .split-words .w i, .hero-copy > *, .hero-specs { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-media { clip-path: none !important; }
  .marquee-track { animation: none; }
  .hero-slide img { transform: none !important; }
  .loader { display: none; }
}