/* Sphoton · phone site motion. Light, CSS-driven, and off under reduced motion. */
/* buttons: calmer sizes */
.bt{min-height:44px;padding:0 18px;font-size:14.5px}
.row.sm{gap:10px}
.row.sm .bt{flex:0 0 auto}
.row.sm.col .bt{align-self:flex-start}
.bt.wide{min-height:46px}
.tot .bt{min-height:42px;padding:0 16px;font-size:14px}
.bt-p{box-shadow:0 8px 22px -10px rgba(91,79,207,.9)}

/* kicker line grows in */
.k{display:flex;align-items:center;gap:10px}
.k::before{content:"";width:0;height:1.5px;background:var(--pur-lt);transition:width .6s cubic-bezier(.25,.8,.25,1) .1s}
.k.in::before{width:18px}

/* hero: words rise, the key phrase gets a drawn underline */
.hw .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);animation:wIn .7s cubic-bezier(.25,.8,.25,1) var(--d,0s) both}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}
.ul{position:relative;white-space:normal}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-.04em;height:.08em;border-radius:.08em;background:linear-gradient(90deg,var(--pur-lt),var(--teal-br));transform:scaleX(0);transform-origin:0 50%;animation:ulIn .9s cubic-bezier(.25,.8,.25,1) 1.3s forwards}
@keyframes ulIn{to{transform:none}}

/* hero step 01: files fall into a module */
.hs-files .f{opacity:0;transform:translateX(-8px)}
.hs-i.in .hs-files .f{opacity:1;transform:none;transition:opacity .4s ease-out,transform .5s cubic-bezier(.25,.8,.25,1)}
.hs-i.in .hs-files .f:nth-child(2){transition-delay:.12s}.hs-i.in .hs-files .f:nth-child(3){transition-delay:.24s}.hs-i.in .hs-files .f:nth-child(4){transition-delay:.36s}
.hs-files .arr{opacity:0}
.hs-i.in .hs-files .arr{animation:arr 1.6s ease-in-out .6s infinite}
@keyframes arr{0%,100%{opacity:.3;transform:translateY(-2px)}50%{opacity:1;transform:translateY(2px)}}
.hs-files .mod{opacity:0;transform:scale(.94)}
.hs-i.in .hs-files .mod{opacity:1;transform:none;transition:opacity .5s ease-out .7s,transform .6s cubic-bezier(.3,1.3,.5,1) .7s}
/* step 02: the signature stamps in */
.hs-sig{position:relative;overflow:hidden}
.hs-sig::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(22,201,144,.25),transparent 70%);transform:translateX(-100%)}
.hs-i.in .hs-sig::after{animation:sweep 1.1s ease-out .5s}
@keyframes sweep{to{transform:translateX(100%)}}
.hs-sig span{opacity:0}
.hs-i.in .hs-sig span{opacity:1;transition:opacity .3s ease-out .9s}
/* step 03: knowledge flows to both readers */
.hs-use span{position:relative;overflow:hidden}
.hs-use span::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,transparent,var(--pur-lt),transparent);transform:translateX(-100%)}
.hs-i.in .hs-use span::before{animation:flow 2.4s ease-in-out .4s infinite}
.hs-i.in .hs-use span:last-child::before{animation-delay:1.6s}
@keyframes flow{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* films: portraits breathe, play buttons ring */
.flc.in .flc-img img{animation:breathe 6s ease-in-out infinite}
.flc:nth-child(n) .flc-img img{animation-delay:calc(var(--fi,0) * -1.5s)}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04) translateY(-2px)}}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--pur-lt);animation:ring 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.flc{transition:transform .2s ease-out,border-color .15s}
.flc:active{transform:scale(.985)}
.pv.on .pv-stage{animation:pvIn .35s cubic-bezier(.25,.8,.25,1)}
@keyframes pvIn{from{opacity:0;transform:scale(.96)}}

/* security: a beam crosses the record each time it changes sides */
.sx{position:relative}
.sx-beam{position:absolute;top:44px;bottom:66px;left:0;width:2px;z-index:2;background:linear-gradient(180deg,transparent,#fff,transparent);box-shadow:0 0 14px 3px rgba(127,119,221,.7);opacity:0;pointer-events:none}
.sx.run .sx-beam{animation:beam .8s cubic-bezier(.45,0,.2,1)}
.sx.back .sx-beam{animation:beamB .8s cubic-bezier(.45,0,.2,1)}
@keyframes beam{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes beamB{0%{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:0;opacity:0}}
.sx-st{transition:color .3s,border-color .3s}
.pts li::before{opacity:.3;transform:scale(.6);transition:opacity .4s ease-out,transform .4s cubic-bezier(.3,1.4,.5,1)}
.pts li.in::before{opacity:1;transform:none;transition-delay:.25s}
.hold>div:not(.hold-h){opacity:0;transform:translateX(-6px)}
.hold.in>div{opacity:1;transform:none;transition:opacity .3s ease-out calc(var(--r,0) * 70ms),transform .35s ease-out calc(var(--r,0) * 70ms)}

/* pricing: the total ticks, the count bumps */
.tot-v.tick{animation:tick .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes tick{0%{transform:translateY(4px);opacity:.4}100%{transform:none;opacity:1}}
.stp output.bump{animation:bump .25s ease-out}
@keyframes bump{50%{transform:scale(1.35);color:var(--pur-lt)}}
.seg{position:relative}
.seg button{position:relative;z-index:1;transition:color .2s}
.seg button[aria-selected="true"]{background:none}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);border-radius:999px;background:var(--pur);transition:transform .3s cubic-bezier(.25,.8,.25,1)}
.seg.r::before{transform:translateX(calc(100% + 4px))}
.pl:not([hidden]){animation:plIn .35s ease-out}
@keyframes plIn{from{opacity:0;transform:translateY(8px)}}

/* onboarding: the line fills as you read down */
.ob::after{content:"";position:absolute;left:15px;top:20px;width:2px;height:calc((100% - 40px) * var(--ob,0));background:linear-gradient(var(--pur-lt),var(--teal-br));box-shadow:0 0 10px rgba(127,119,221,.6);transition:height .15s linear}
.ob::before{background:rgba(159,176,196,.18)}
.ob li.pass .dot{background:var(--pur);border-color:var(--pur);color:var(--ink);transition:background .3s,border-color .3s,color .3s}

/* founder: key words underline, the last line is highlighted */
.fd b{position:relative}
.fd b::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:2px;border-radius:2px;background:var(--teal-br);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.25,.8,.25,1)}
.fk.in b::after{transform:none}
.fk.in b:nth-of-type(2)::after{transition-delay:.25s}.fk.in b:nth-of-type(3)::after{transition-delay:.5s}
.fd strong.hl{background:none;position:relative;z-index:0}
.fd strong.hl::before{content:"";position:absolute;inset:.06em -.12em 0;z-index:-1;border-radius:3px;background:rgba(127,119,221,.35);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.25,.8,.25,1) .4s}
.rv.in strong.hl::before{transform:none}
.sig b{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.6,0,.3,1) .2s}
.sig.in b{clip-path:inset(0 0 0 0)}

/* join: the check draws itself */
.jf-step:not([hidden]){animation:plIn .35s ease-out}
.jf-done .ok svg{width:22px;height:22px;fill:none;stroke:#05231a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:chk .5s ease-out .2s forwards}
@keyframes chk{to{stroke-dashoffset:0}}
.jf-done .ok{animation:pop .4s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.days button,.times button{transition:background .15s,border-color .15s,transform .1s}
.days button:active,.times button:active{transform:scale(.96)}

@media(prefers-reduced-motion:reduce){
 .hw .w,.ul::after,.hs-files .f,.hs-files .mod,.hs-sig span,.hold>div:not(.hold-h),.sig b{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;clip-path:none!important}
 .ul::after{transform:none}
 .flc-img img,.play::before,.hs-files .arr,.hs-use span::before,.sx-beam,.tot-v.tick,.stp output.bump,.pl,.jf-step,.pv-stage{animation:none!important}
 .hs-files .arr{opacity:1}
 .jf-done .ok svg{stroke-dashoffset:0;animation:none}
}