/* Motion layer, loaded after site.css. Everything here is gated on the
   .sos-anim root class that site-animate.js adds, so content stays readable
   when JavaScript never runs and the reduced-motion media query fully
   disables every effect. Only transform and opacity are animated. */

.sos-anim [data-reveal]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);transition-delay:var(--sos-delay,0ms)}
.sos-anim [data-reveal]:not(.sos-in){will-change:opacity,transform}
.sos-anim [data-reveal].sos-in{opacity:1;transform:none}
.sos-anim [data-reveal="figure"]{transform:translate3d(0,22px,0) scale(.985)}
.sos-anim [data-reveal="figure"].sos-in{opacity:1;transform:none}

/* Restrained hero ambience: two soft gradient blobs drifting on the compositor. */
.sos-anim .hero{position:relative;isolation:isolate}
.sos-anim .hero::before,.sos-anim .hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.sos-anim .hero::before{width:min(52%,420px);aspect-ratio:1/1;left:4%;top:2%;background:radial-gradient(circle at 40% 40%,rgba(29,191,115,.26),rgba(29,191,115,0) 70%);animation:sos-ambient-a 15s ease-in-out infinite alternate}
.sos-anim .hero::after{width:min(44%,340px);aspect-ratio:1/1;right:3%;bottom:4%;background:radial-gradient(circle at 55% 45%,rgba(8,122,76,.18),rgba(8,122,76,0) 70%);animation:sos-ambient-b 19s ease-in-out infinite alternate}
@keyframes sos-ambient-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(18px,-16px,0)}}
@keyframes sos-ambient-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(-16px,14px,0)}}

/* Micro-interactions: brief springy feedback on buttons and cards. */
.button{transition:transform .2s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.button:hover{transform:translate3d(0,-2px,0);box-shadow:0 14px 30px rgba(0,0,0,.16)}
.button:active{transform:translate3d(0,0,0) scale(.98)}
.steps li,.price-card,.account-card,.tool-callout,.guide-card{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,border-color .2s ease}
.steps li:hover,.price-card:hover,.account-card:hover,.tool-callout:hover{transform:translate3d(0,-3px,0);box-shadow:var(--shadow)}

/* Nav and footer link underline that grows in from the left. */
.nav nav a:not(.nav-cta),footer nav a{position:relative;text-decoration:none}
.nav nav a:not(.nav-cta)::after,footer nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav nav a:not(.nav-cta):hover,footer nav a:hover{text-decoration:none}
.nav nav a:not(.nav-cta):hover::after,footer nav a:hover::after{transform:scaleX(1)}

/* Single scroll-linked touch: a thin top progress bar written by rAF. */
.sos-progress{position:fixed;left:0;top:0;z-index:80;width:100%;height:3px;pointer-events:none;background:transparent}
.sos-progress>span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--green),var(--green-dark));will-change:transform}

/* Second copy of the reduced-motion guard so this file stands alone; site.css
   carries the same guard for the clip-level reset. */
@media(prefers-reduced-motion:reduce){
.sos-anim [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.sos-anim .hero::before,.sos-anim .hero::after{display:none!important;animation:none!important}
.sos-progress{display:none!important}
}