/* =====================================================================
   Motion system
   Single source of truth for animation timing/easing + the hero's
   reveal system (word-mask title, Ken Burns background, progress ring
   on the active dot). Site-wide reduced-motion handling already lives
   in style.css (a global `*{...!important}` block) so nothing here
   needs its own reduced-motion query — it inherits that override.
   ===================================================================== */

:root{
  --dur-fast:180ms;
  --dur-base:420ms;
  --dur-slow:760ms;
  --dur-hero:1200ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --stagger:70ms;
}

/* ---------------------------------------------------------------------
   Hero — word-mask title reveal
   Mirrors the .section-head h2 word-mask pattern (built by main.js)
   but sized for the display-scale hero heading. motion.js wraps each
   word of .hero h1 the same way; this just styles the mask + triggers
   off .hero-content.in-view instead of a fixed animation-delay chain,
   so it's driven by the same IntersectionObserver as every other
   .reveal element on the site instead of a one-off keyframe chain.
   --------------------------------------------------------------------- */
.hero h1{opacity:1;animation:none;} /* supersedes the old fixed fadeUp keyframe from style.css */
.hero h1 .word-mask{display:inline-block;overflow:hidden;vertical-align:top;}
.hero h1 .word-mask>span{display:inline-block;transform:translateY(112%);transition:transform var(--dur-slow) var(--ease-out);}
.hero-content.in-view h1 .word-mask>span{transform:translateY(0);}

/* Eyebrow / paragraph / actions now ride the same .reveal + stagger
   utility the rest of the site uses (classes added in the markup),
   instead of their own hard-coded animation-delay chain. */
.hero-eyebrow.reveal,
.hero p.reveal,
.hero-actions.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);}
.hero-eyebrow.reveal.in-view,
.hero p.reveal.in-view,
.hero-actions.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------------------------------------------------------------------
   Hero — Ken Burns background
   Alternates a slow pan+zoom direction per slide (odd/even) instead of
   the old "just zoom out once to scale(1)" — the motion continues for
   as long as the slide stays active, so a slide shown for longer than
   8s doesn't visibly stop moving.
   --------------------------------------------------------------------- */
.hero-slide{
  position:absolute;inset:0;opacity:0;transform:scale(1.08);
  transition:opacity 1.4s var(--ease-out);
  background-size:cover;background-position:center;will-change:transform,opacity;
}
.hero-slide.active{opacity:1;animation:kenBurnsA 14s var(--ease-inout) forwards;}
.hero-slide.active:nth-child(even){animation-name:kenBurnsB;}
@keyframes kenBurnsA{
  from{transform:scale(1.08) translate(0,0);}
  to{transform:scale(1.18) translate(-1.4%,-1%);}
}
@keyframes kenBurnsB{
  from{transform:scale(1.08) translate(0,0);}
  to{transform:scale(1.18) translate(1.4%,1%);}
}

/* ---------------------------------------------------------------------
   Hero — progress ring on the active dot
   Each dot gets a thin bottom bar (already in style.css via width/
   background) — this layers a fill animation timed to match the
   5.5s autoplay interval in main.js, so the active dot visibly fills
   up as a countdown to the next slide. motion.js restarts the
   animation on manual dot clicks so it never looks out of sync.
   --------------------------------------------------------------------- */
.hero-dots button{position:relative;overflow:hidden;}
.hero-dots button.active::after{
  content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--accent-500);
}
.hero-dots button.active.dot-progress::after{animation:dotProgress 5.5s linear forwards;}
@keyframes dotProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}