/* Yegly landing motion. Everything here sits behind html.motion, which is only
   set when the visitor hasn't asked for reduced motion. Only opacity and
   transforms animate, so it stays smooth on phones. */
:root{--ease:cubic-bezier(.16,1,.3,1)}

/* Scroll progress + nav */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#B9F3E4,#7C6CF2);pointer-events:none}
html.motion .nav{transition:background .4s,box-shadow .4s}
html.motion .nav.scrolled{background:rgba(18,15,38,.94);box-shadow:0 10px 30px rgba(10,8,30,.28)}

/* Until motion.js is ready, hold the hero (with a failsafe if the script never runs) */
html.motion:not(.ready) .hero-copy,html.motion:not(.ready) .stage{opacity:0;animation:failsafe 0s 2.5s forwards}
@keyframes failsafe{to{opacity:1}}

/* Reveal on scroll */
html.motion .rv{opacity:0;transform:translate3d(0,32px,0);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
html.motion .rv.in{opacity:1;transform:none}
html.motion .rv.rise{transform:translate3d(0,80px,0) scale(.97)}
html.motion .rv.rise.in{transform:none}

/* Hero headline: words lift out of a soft blur */
html.motion .hero h1 .w{color:inherit;display:inline-block;opacity:0;transform:translate3d(0,.45em,0);filter:blur(10px)}
html.motion.ready .hero h1 .w{animation:wordIn 1.1s var(--ease) forwards;animation-delay:calc(120ms + var(--i) * 90ms)}
@keyframes wordIn{to{opacity:1;transform:none;filter:blur(0)}}

/* Dashboard leans back, then settles flat as you scroll */
html.motion .stage{perspective:1800px}
html.motion .browser{transform-origin:50% 0;transform:rotateX(var(--tilt,0deg)) scale(var(--sc,1));will-change:transform}
html.motion .float{animation:bob 7s ease-in-out infinite}
html.motion .f2{animation-delay:-3.5s}
html.motion .float,html.motion .phone,html.motion .drive-phone{will-change:translate}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
html.motion .eyebrow i{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(185,243,228,.45)}70%,100%{box-shadow:0 0 0 10px rgba(185,243,228,0)}}

/* Product tour: panels cross-fade when you switch tabs */
html.motion .panel.enter .tour-text{animation:panelIn .7s var(--ease) both}
html.motion .panel.enter .shot{animation:panelIn .8s var(--ease) .06s both}
@keyframes panelIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
html.motion .tab{transition:background .3s,color .3s}

/* Step 1 ring draws itself */
html.motion .step .viz circle[stroke-dasharray]{stroke-dasharray:0 239;transition:stroke-dasharray 1.8s var(--ease) .35s}
html.motion .step.in .viz circle[stroke-dasharray]{stroke-dasharray:179 239}

/* Cards: lift + a soft light that follows the cursor */
html.motion .step,html.motion .trust .item,html.motion .who .card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity 1s var(--ease);transition-delay:0ms,0ms,var(--d,0ms)}
html.motion .step.rv,html.motion .trust .item.rv,html.motion .who .card.rv{transition:transform 1s var(--ease),opacity 1s var(--ease),box-shadow .5s var(--ease);transition-delay:var(--d,0ms),var(--d,0ms),0ms}
@media (hover:hover){
  html.motion .step.in:hover,html.motion .who .card.in:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(31,27,58,.12)}
  html.motion .trust .item.in:hover{transform:translateY(-6px)}
  html.motion .step,html.motion .who .card{background-image:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(124,108,242,.10),transparent 45%)}
  html.motion .trust .item{background-image:radial-gradient(380px circle at var(--mx,-999px) var(--my,-999px),rgba(185,243,228,.10),transparent 45%)}
}

/* Hooray: confetti drops in when the section arrives */
html.motion .hooray .confetti i{opacity:0}
html.motion .hooray.in .confetti i{animation:drop 1.4s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(200ms + var(--i) * 70ms)}
@keyframes drop{from{opacity:0;translate:0 -140px;rotate:-160deg}to{opacity:1;translate:0 0;rotate:0deg}}

/* Founder quote lights up word by word as you read down */
html.motion .founder blockquote .w{opacity:.18;transition:opacity .45s ease}
html.motion .founder blockquote .w.lit{opacity:1}

@media (prefers-reduced-motion: reduce){.progress{display:none}}