/* =========================================================================
   Matrix Insight — motion.

   Principles:
   • Subtle and purposeful: things arrive, they don't dance.
   • Every animation is gated by html.mi-motion, which a tiny script in the
     <head> sets ONLY if the visitor has not asked their device for reduced
     motion. No script → no animation → everything is simply visible.
   • Only opacity and transform are animated, so it stays smooth on phones.
   ========================================================================= */

@keyframes miFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes miFadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes miBob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes miGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes miGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes miSpin{to{rotate:360deg}}
@keyframes miMarquee{to{transform:translateX(-50%)}}
@keyframes miPulse{
  0%{box-shadow:0 16px 34px rgba(18,104,232,.3),0 0 0 0 rgba(18,104,232,.35)}
  70%{box-shadow:0 16px 34px rgba(18,104,232,.3),0 0 0 18px rgba(18,104,232,0)}
  100%{box-shadow:0 16px 34px rgba(18,104,232,.3),0 0 0 0 rgba(18,104,232,0)}
}

/* ---- 1. Page heroes: text rises in line by line ----------------------- */
html.mi-motion :is(.mi-hero-copy,.mi-proj-hero-copy,.mi-sol-hero-copy,.mi-ins-hero-copy,.mi-founder-hero-copy) > *{
  animation:miFadeUp .75s cubic-bezier(.2,.7,.2,1) both
}
html.mi-motion :is(.mi-hero-copy,.mi-proj-hero-copy,.mi-sol-hero-copy,.mi-ins-hero-copy,.mi-founder-hero-copy) > :nth-child(2){animation-delay:.08s}
html.mi-motion :is(.mi-hero-copy,.mi-proj-hero-copy,.mi-sol-hero-copy,.mi-ins-hero-copy,.mi-founder-hero-copy) > :nth-child(3){animation-delay:.16s}
html.mi-motion :is(.mi-hero-copy,.mi-proj-hero-copy,.mi-sol-hero-copy,.mi-ins-hero-copy,.mi-founder-hero-copy) > :nth-child(4){animation-delay:.24s}
html.mi-motion :is(.mi-hero-copy,.mi-proj-hero-copy,.mi-sol-hero-copy,.mi-ins-hero-copy,.mi-founder-hero-copy) > :nth-child(5){animation-delay:.32s}

/* ---- 2. Hero visuals ---------------------------------------------------- */
html.mi-motion :is(.mi-screen-art,.mi-case-stack,.mi-hub,.mi-article-stack,.mi-founder-visual){
  animation:miFadeIn .9s .2s cubic-bezier(.2,.7,.2,1) both
}

/* laptop bars grow from the baseline */
html.mi-motion .mi-screen-bars i{transform-origin:bottom;animation:miGrowY .7s cubic-bezier(.2,.7,.2,1) both}
html.mi-motion .mi-screen-bars i:nth-child(1){animation-delay:.45s}
html.mi-motion .mi-screen-bars i:nth-child(2){animation-delay:.5s}
html.mi-motion .mi-screen-bars i:nth-child(3){animation-delay:.55s}
html.mi-motion .mi-screen-bars i:nth-child(4){animation-delay:.6s}
html.mi-motion .mi-screen-bars i:nth-child(5){animation-delay:.65s}
html.mi-motion .mi-screen-bars i:nth-child(6){animation-delay:.7s}
html.mi-motion .mi-screen-bars i:nth-child(7){animation-delay:.75s}
html.mi-motion .mi-screen-bars i:nth-child(8){animation-delay:.8s}
html.mi-motion .mi-screen-bars i:nth-child(9){animation-delay:.85s}
html.mi-motion .mi-screen-bars i:nth-child(10){animation-delay:.9s}

/* stacked cards drift gently (uses `translate`, so their tilt is kept) */
html.mi-motion :is(.mi-case-card,.mi-article-mock){animation:miBob 6s ease-in-out infinite}
html.mi-motion :is(.mi-case-c2,.mi-am2){animation-delay:-2s}
html.mi-motion :is(.mi-case-c3,.mi-am3){animation-delay:-4s}
html.mi-motion .mi-case-bar i{animation:miGrowX 1.1s .7s cubic-bezier(.2,.7,.2,1) both}
html.mi-motion .mi-case-c2 .mi-case-bar i{animation-delay:.9s}
html.mi-motion .mi-case-c3 .mi-case-bar i{animation-delay:1.1s}

/* the growth hub: orbit ring turns slowly, nodes float, the core breathes */
html.mi-motion .mi-hub-rings i:nth-child(1){animation:miSpin 60s linear infinite}
html.mi-motion figure.mi-hub-node{animation:miBob 5s ease-in-out infinite}
html.mi-motion .mi-hub-n2{animation-delay:-.8s}html.mi-motion .mi-hub-n3{animation-delay:-1.6s}
html.mi-motion .mi-hub-n4{animation-delay:-2.4s}html.mi-motion .mi-hub-n5{animation-delay:-3.2s}
html.mi-motion .mi-hub-n6{animation-delay:-4s}
html.mi-motion p.mi-hub-core{animation:miPulse 2.8s ease-out infinite}

/* ---- 3. Experience strip glides; pauses when you hover it --------------- */
html.mi-motion .mi-marquee-track{animation:miMarquee 40s linear infinite}
html.mi-motion .mi-marquee:hover .mi-marquee-track{animation-play-state:paused}

/* ---- 4. Scroll reveal (JavaScript adds .mi-anim only to things below the fold,
          so nothing you already see ever blinks) ------------------------- */
html.mi-motion .mi-anim{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--mi-i,0) * 90ms)
}
html.mi-motion .mi-anim.mi-in{opacity:1;transform:none}
html.mi-motion .mi-tl-item.mi-anim{transform:translateX(-22px)}
html.mi-motion .mi-tl-item.mi-anim.mi-in{transform:none}

/* ---- 5. Micro-interactions --------------------------------------------- */
.wp-block-button__link,.mi-btn{position:relative;overflow:hidden}
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after,.mi-btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after,.mi-btn-primary:hover::after{left:120%}

/* ---- Accessibility: reduced motion always wins ------------------------ */
@media (prefers-reduced-motion:reduce){
  html.mi-motion *,html.mi-motion *::before,html.mi-motion *::after{animation:none!important;transition:none!important}
  html.mi-motion .mi-anim{opacity:1!important;transform:none!important}
}