/* ============ Forge motion layer (added on top of shared styles.css) ============ */

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- announcement rotation ---- */
.announce .msg{opacity:0;transition:opacity .45s ease}
.announce .msg.show{opacity:1}
/* once JS adds .rotating, .show alone controls which slide is visible — this
   overrides the styles.css `.msg:first-child{opacity:1}` initial-paint fallback,
   so message 1 fades out like every other slide instead of staying underneath. */
.announce.rotating .msg{opacity:0}
.announce.rotating .msg.show{opacity:1}

/* ---- trusted-by marquee ---- */
.marquee .track{animation:scrollx 42s linear infinite}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trusted:hover .track{animation-play-state:paused}

/* ---- research marquee (slower) ---- */
.r-track{animation:scrollx 64s linear infinite}
.research:hover .r-track{animation-play-state:paused}

/* ---- hero render float ---- */
.hero-art img{animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(10px)}}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.stat,.r-card,.case,.bl-item,.feature{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.reveal.in .stat,.reveal.in .r-card,.reveal.in .case,.reveal.in .bl-item,.reveal.in .feature{opacity:1;transform:none}
/* stagger children */
.reveal.in .stat:nth-child(2),.reveal.in .case.c2{transition-delay:.08s}
.reveal.in .stat:nth-child(3),.reveal.in .case.c3{transition-delay:.16s}

/* ---- tab panel transition ---- */
.tab-body{transition:opacity .45s var(--ease-out)}
.tab-body.swapping{opacity:0}

/* ---- hover states (interactive) ---- */
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn-secondary:hover{background:#e7edf5;transform:translateY(-2px)}
.nav a:hover{opacity:1;color:#000}
.stat:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(60,90,180,.12)}
.r-card{transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),border-color .35s,background .35s}
.r-card:hover{border-color:#3a3a7a;background:#10103a;transform:translateY(-4px)}
.case{transition:opacity .55s var(--ease-out),transform .45s var(--ease-out),box-shadow .45s}
.case:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(0,0,0,.28)}
.feature{transition:opacity .55s var(--ease-out),transform .45s var(--ease-out),box-shadow .45s}
.feature:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.1)}
.bl-item h4{transition:color .3s}
.bl-item:hover h4{color:#3a6df0}
.tab{transition:color .3s,background .3s}
.tab:hover{color:#000}
.stat .learn,.r-card .rm,.feature .meta .eyebrow{transition:color .3s}
.logo-txt{transition:color .35s,opacity .35s}
.marquee:hover .logo-txt{opacity:.95}