/* Aura — motion layer. Everything here only applies when motion.js has added
   .motion to <html>, which it skips for visitors who prefer reduced motion,
   so the page is fully visible and still without it. */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--wa),var(--sign-yellow));z-index:60;pointer-events:none}
.top{transition:box-shadow .3s ease,background-color .3s ease}
.top.scrolled{box-shadow:0 6px 24px rgba(19,32,59,.08);background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}

.motion [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.motion [data-reveal="left"]{transform:translate3d(-36px,0,0)}
.motion [data-reveal="right"]{transform:translate3d(36px,0,0)}
.motion [data-reveal="pop"]{transform:scale(.92) translate3d(0,14px,0)}
.motion [data-reveal].in{opacity:1;transform:none}

/* Hero entrance: headline rises word by word, then the rest follows. */
.motion .hero .w{display:inline-block;opacity:0;transform:translate3d(0,.5em,0) rotate(2deg);animation:wordUp .9s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(.15s + var(--i)*.06s)}
@keyframes wordUp{to{opacity:1;transform:none}}
.motion .hero .pill,.motion .hero .lede,.motion .hero .cta,.motion .hero .reassure{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.motion .hero .pill{animation-delay:.05s}
.motion .hero .lede{animation-delay:.55s}
.motion .hero .cta{animation-delay:.7s}
.motion .hero .reassure{animation-delay:.85s}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.motion .hero .sign{animation:signIn 1.1s cubic-bezier(.3,1.4,.4,1) .35s both, flicker 2.4s linear 1.3s 1}
@keyframes signIn{from{opacity:0;transform:translate3d(0,-30px,0) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{filter:none}20%,24%,55%{filter:brightness(.55)}}
.motion .hero .phone{animation:phoneIn 1s cubic-bezier(.2,.7,.2,1) .5s both}
@keyframes phoneIn{from{opacity:0;transform:translate3d(0,40px,0) scale(.97)}to{opacity:1;transform:none}}
.motion .hero .switch,.motion .hero .clock{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .65s both}
.motion #headline.swap,.motion #pill.swap{animation:swap .55s cubic-bezier(.2,.7,.2,1)}
@keyframes swap{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}

/* Chat bubbles slide in from their side. */
.motion .m{animation:bubble .4s cubic-bezier(.2,.8,.2,1) both}
.motion .m.me{transform-origin:100% 100%}
.motion .m.bot{transform-origin:0 100%}
@keyframes bubble{from{opacity:0;transform:translate3d(0,10px,0) scale(.94)}to{opacity:1;transform:none}}

/* Hover polish, only where there is a mouse. */
@media (hover:hover) and (pointer:fine){
  .motion .btn{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background-color .2s ease}
  .motion .btn:hover{transform:translate3d(0,-2px,0);box-shadow:0 10px 22px rgba(19,32,59,.18)}
  .motion .creds li,.motion .steps li,.motion .ask{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
  .motion .creds li:hover,.motion .steps li:hover{transform:translate3d(0,-4px,0);box-shadow:0 14px 30px rgba(19,32,59,.10)}
  .motion .ask:hover{transform:translate3d(6px,0,0)}
  .motion .switch button,.motion .chip{transition:transform .2s ease,background-color .2s ease,color .2s ease}
  .motion .switch button:hover,.motion .chip:hover{transform:translate3d(0,-2px,0)}
}

/* FAQ answers ease open. */
.motion .faq details[open] p{animation:fadeUp .45s cubic-bezier(.2,.7,.2,1)}