/* ==========================================================================
   SEGTI — Animations
   Scroll-reveal system used across every page via the .reveal class.
   JS in js/animations.js adds the .in class when an element enters view.
   ========================================================================== */

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}

.page-hero .eyebrow{opacity:0;transform:translateY(12px);animation:pageHeroIn .65s var(--ease) .08s forwards;}
.page-hero h1{opacity:0;transform:translateY(18px);animation:pageHeroIn .75s var(--ease) .18s forwards;}
.page-hero .lede,.page-hero .institutional-fact{opacity:0;transform:translateY(16px);animation:pageHeroIn .75s var(--ease) .3s forwards;}
@keyframes pageHeroIn{to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .page-hero .eyebrow,.page-hero h1,.page-hero .lede,.page-hero .institutional-fact,.hero-side-card{animation:none;opacity:1;transform:none;}
}

/* ==========================================================================
   Homepage hero entrance
   The headline uses word-by-word kinetic reveal (see .kinetic-headline in
   style.css). Everything else fades and rises in after the words land.
   ========================================================================== */

.hero-eyebrow{opacity:0;transform:translateY(10px);animation:heroIn .55s var(--ease) .05s forwards;}
.hero .lede{opacity:0;transform:translateY(16px);animation:heroIn .6s var(--ease) .18s forwards;}
.hero-ctas{opacity:0;transform:translateY(16px);animation:heroIn .6s var(--ease) .28s forwards;}
.hero-note{opacity:0;animation:heroIn .6s var(--ease) .38s forwards;}

@keyframes heroIn{to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .hero-eyebrow,.hero .lede,.hero-ctas,.hero-note{animation:none;opacity:1;transform:none;}
  .kinetic-headline .kw span{animation:none;transform:none;}
  .hero-bg img{transition:opacity .01s linear;}
}

/* The final CTA banner reuses .hero-ctas for layout only — it should not replay the entrance animation */
.cta-banner .hero-ctas{opacity:1;animation:none;transform:none;justify-content:center;}