/* =====================================================================
   Scriptify — animations.css
   Motion only: keyframes, transitions, transforms, the scroll-driven
   choreography and the reduced-motion overrides. Every rule here is one
   whose declarations are purely about movement, so deleting this file
   leaves a complete, static site.
   Loads after site.css.
   ===================================================================== */

.btn:active{transform:translateY(1px)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ok-soft)}70%{box-shadow:0 0 0 7px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.q tr.in{animation:rowin .5s var(--ease-out) both}
@keyframes rowin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .q tr.in{animation:none}
  .pulse{animation:none}
  html{scroll-behavior:auto}
}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.stage-panel.on{animation:none}}
.stage-panel.on[data-panel="1"] .ipad-submit{animation:submitArm 3.5s steps(1,end) forwards}
@keyframes submitArm{
  0%{background:var(--bg-soft);color:var(--ink-subtle);border-color:var(--border)}
  82%{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  100%{background:var(--ok);color:#fff;border-color:var(--ok)}
}
.stage-panel.on[data-panel="1"] .ipad-submit .lbl-wait{animation:fadeOut .01s linear 2.9s forwards}
.stage-panel.on[data-panel="1"] .ipad-submit .lbl-go{opacity:0;animation:fadeIn .01s linear 2.9s forwards,fadeOut .18s linear 3.4s forwards}
.stage-panel.on[data-panel="1"] .ipad-submit .lbl-done{animation:fadeIn .28s ease 3.5s forwards}
.stage-panel.on[data-panel="1"] .tapdot{animation:tapRipple .8s cubic-bezier(.2,.7,.3,1) 3.3s forwards}
@keyframes tapRipple{0%{opacity:.45;transform:translate(-50%,-50%) scale(.2)}70%{opacity:.18}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
@media(prefers-reduced-motion:reduce){
  .pl-bars span{transition:none}
}
.sketch .ink path{stroke-dashoffset:var(--len,0)}
.sketch svg{transition:opacity .7s ease}
@keyframes nib{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

@keyframes riseIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes fadeOut{to{opacity:0}}
@keyframes popIn{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes drawPath{to{stroke-dashoffset:0}}
@keyframes writeIn{from{clip-path:inset(0 100% 0 0);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes caret{50%{opacity:0}}
.step[aria-selected="true"].timing .sbar{animation:sbar linear forwards;animation-duration:var(--dur,7s)}
@keyframes sbar{to{width:100%}}
@keyframes noteIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.stage-panel.on[data-panel="0"] .pt-stats div{animation:riseIn .45s var(--ease-out) forwards;animation-delay:calc(var(--i) * .12s + .2s)}
.stage-panel.on[data-panel="0"] .pt-row{animation:riseIn .45s var(--ease-out) forwards;animation-delay:calc(var(--i) * .18s + .8s)}
.stage-panel.on[data-panel="1"] .consent{animation:riseIn .4s var(--ease-out) forwards;animation-delay:calc(var(--i) * .3s + .18s)}
.stage-panel[data-panel="1"] .consent .seal{transform:scale(0);opacity:0}
.stage-panel.on[data-panel="1"] .consent .seal{animation:popIn .42s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i) * .3s + .56s)}
.stage-panel.on[data-panel="1"] .consent .lines i{animation:lineGrow .34s var(--ease-out) forwards;animation-delay:calc(var(--i) * .3s + .32s)}
@keyframes lineGrow{to{width:100%}}
.stage-panel.on[data-panel="1"] .consent .lines i:nth-child(2){animation-name:lineGrow2}
.stage-panel.on[data-panel="1"] .consent .lines i:nth-child(3){animation-name:lineGrow3}
@keyframes lineGrow2{to{width:78%}}
@keyframes lineGrow3{to{width:56%}}
.stage-panel.on[data-panel="1"] .sigpad{animation:riseIn .45s var(--ease-out) 1.3s forwards}
.sigpad svg path{stroke-dasharray:1700;stroke-dashoffset:1700}
.stage-panel.on[data-panel="1"] .sigpad svg path{animation:drawPath 1.15s cubic-bezier(.4,0,.25,1) 1.55s forwards}
.stage-panel.on[data-panel="1"] .sigline{animation:fadeIn .4s ease 2.8s forwards}
.stage-panel.on[data-panel="1"] .sig-tick{animation:popIn .45s cubic-bezier(.34,1.56,.64,1) 2.8s forwards}
.stage-panel.on[data-panel="3"] .pt-row{animation:riseIn .4s var(--ease-out) forwards;animation-delay:calc(var(--i) * .14s + .2s)}
.stage-panel.on[data-panel="4"] .toast{animation:toastLife 8s cubic-bezier(.3,0,.2,1) infinite}
@keyframes toastLife{
  0%,14%{opacity:0;transform:translateY(-14px) scale(.97)}
  20%{opacity:1;transform:translateY(0) scale(1)}
  88%{opacity:1;transform:translateY(0) scale(1)}
  96%,100%{opacity:0;transform:translateY(-10px) scale(.97)}
}
.stage-panel.on[data-panel="3"] .bell .badge{animation:badgePop 8s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes badgePop{0%,16%{opacity:0;transform:scale(0)}22%{opacity:1;transform:scale(1.3)}26%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
.stage-panel.on[data-panel="3"] .pt-row.fresh{animation:riseIn .4s var(--ease-out) .48s forwards,freshIn 8s ease infinite}
@keyframes freshIn{0%,18%{background:transparent}24%,92%{background:var(--cyan-ghost)}100%{background:transparent}}
.stage-panel.on[data-panel="3"] .pt-row.fresh .newdot,
.stage-panel.on[data-panel="3"] .pt-row.fresh .act{animation:freshBits 8s ease infinite}
@keyframes freshBits{0%,20%{opacity:0}26%,92%{opacity:1}100%{opacity:0}}
.stage-panel.on[data-panel="4"] .pt-row{animation:riseIn .4s var(--ease-out) forwards;animation-delay:calc(var(--i) * .14s + .2s)}
.stage-panel.on[data-panel="4"] .portal[data-view="note"] .soap-row{animation:writeIn .55s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i) * .18s + .35s)}
.stage-panel.on[data-panel="4"] .portal[data-view="list"] .cursor-hint{animation:pointer 2.6s var(--ease-out) .9s forwards}
@keyframes pointer{
  0%{opacity:0;transform:translate(40px,60px) scale(.9)}
  25%{opacity:1;transform:translate(10px,18px) scale(1)}
  70%{opacity:1;transform:translate(0,0) scale(1)}
  78%{opacity:1;transform:translate(0,0) scale(.82)}
  90%,100%{opacity:0;transform:translate(0,0) scale(1)}
}
.stage-panel.on[data-panel="5"] .stmt-row{animation:riseIn .42s var(--ease-out) forwards;animation-delay:calc(var(--i) * .22s + .3s)}
.stage-panel.on[data-panel="5"] .stmt-total{animation:riseIn .5s var(--ease-out) 1.8s forwards}
.stage-panel[data-panel="5"] .stmt-total .v{transform:scale(.7)}
.stage-panel.on[data-panel="5"] .stmt-total .v{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) 2s forwards}
.stage-panel.on .ip-island{animation:islandExpand 13s cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes islandExpand{
  0%{transform:translateX(-50%) scaleX(.55);width:30%}
  4%{transform:translateX(-50%) scaleX(1);width:52%}
  96%{transform:translateX(-50%) scaleX(1);width:52%}
  100%{transform:translateX(-50%) scaleX(.55);width:30%}
}
.stage-panel.on .ip-island > *{animation:islandContent 13s ease infinite}
@keyframes islandContent{0%{opacity:0}6%{opacity:1}95%{opacity:1}100%{opacity:0}}
.stage-panel.on .ip-isl-wave span{animation:eq .9s ease-in-out var(--d) infinite alternate}
@keyframes eq{0%{height:18%;opacity:.6}100%{height:92%;opacity:1}}
.stage-panel.on .ip-notif{animation:notifLife 13s cubic-bezier(.3,0,.2,1) infinite}
@keyframes notifLife{
  0%{opacity:0;transform:translateY(-22%) scale(.96)}
  3%{opacity:1;transform:translateY(0) scale(1)}
  17%{opacity:1;transform:translateY(0) scale(1)}
  22%{opacity:0;transform:translateY(-26%) scale(.92)}
  100%{opacity:0;transform:translateY(-26%) scale(.92)}
}
@keyframes acceptRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.22);opacity:0}}
.stage-panel.on .ip-app{animation:appIn 13s cubic-bezier(.25,.8,.35,1) infinite}
@keyframes appIn{
  0%,18%{opacity:0;transform:scale(.98)}
  24%{opacity:1;transform:scale(1)}
  97%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.98)}
}
.stage-panel.on .ip-call{animation:callGlow 2.4s ease-in-out infinite,callPop 13s cubic-bezier(.4,.05,.2,1) infinite}
@keyframes callGlow{
  0%,100%{box-shadow:0 0 0 3px var(--ok-soft),0 12px 24px -12px rgba(16,179,122,.35)}
  50%{box-shadow:0 0 0 4px var(--ok-soft),0 14px 28px -10px rgba(16,179,122,.55),0 0 20px 4px rgba(16,179,122,.28)}
}
@keyframes callPop{
  0%,30%{transform:translate3d(0,0,0) scale(1);z-index:1}
  35%{transform:translate3d(-15%,-3%,0) scale(1.42);z-index:10}
  55%{transform:translate3d(-15%,-3%,0) scale(1.42);z-index:10}
  59%,100%{transform:translate3d(0,0,0) scale(1);z-index:1}
}
.stage-panel.on .ip-call-status i{animation:callDot 1.6s ease-in-out infinite}
@keyframes callDot{0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.stage-panel.on .ip-call-wave span{animation:callWave 1.2s ease-in-out var(--d) infinite}
@keyframes callWave{0%,100%{height:3px;opacity:.6}50%{height:11px;opacity:1}}
.stage-panel.on .ip-line{animation:transIn 13s var(--ease-out) infinite}
/* five staggered reveals inside the 13s cycle (≈4.6s → 6.2s) */
@keyframes transIn{0%,35%{opacity:0;transform:translateY(5px)}39%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5px)}}
.stage-panel.on .ip-line:nth-child(1){animation-name:transIn1}
.stage-panel.on .ip-line:nth-child(2){animation-name:transIn2}
.stage-panel.on .ip-line:nth-child(3){animation-name:transIn3}
.stage-panel.on .ip-line:nth-child(4){animation-name:transIn4}
.stage-panel.on .ip-line:nth-child(5){animation-name:transIn5}
@keyframes transIn1{0%,35%{opacity:0;transform:translateY(5px)}38%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes transIn2{0%,38%{opacity:0;transform:translateY(5px)}41%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes transIn3{0%,41%{opacity:0;transform:translateY(5px)}44%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes transIn4{0%,44%{opacity:0;transform:translateY(5px)}47%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes transIn5{0%,47%{opacity:0;transform:translateY(5px)}50%,96%{opacity:1;transform:none}100%{opacity:0}}
.stage-panel.on .ip-dex{animation:dexPop 13s cubic-bezier(.4,.05,.2,1) infinite}
@keyframes dexPop{
  0%,59%{transform:translate3d(0,0,0) scale(1);z-index:1}
  64%{transform:translate3d(15%,4%,0) scale(1.42);z-index:10}
  80%{transform:translate3d(15%,4%,0) scale(1.42);z-index:10}
  84%,100%{transform:translate3d(0,0,0) scale(1);z-index:1}
}
.stage-panel.on .ip-dex-read b{animation:numPulse 13s ease infinite}
@keyframes numPulse{
  0%,66%{background:transparent;color:var(--ink)}
  70%,78%{background:var(--cyan);color:#fff;box-shadow:0 0 0 4px var(--cyan-ghost)}
  82%,100%{background:transparent;color:var(--ink)}
}
.stage-panel.on .ip-trace{animation:traceCycle 13s cubic-bezier(.4,0,.2,1) infinite}
@keyframes traceCycle{0%,20%{stroke-dashoffset:900}38%,100%{stroke-dashoffset:0}}
.stage-panel.on .ip-dot{animation:dotIn 13s ease infinite}
@keyframes dotIn{0%,36%{opacity:0}42%,100%{opacity:1}}
.stage-panel.on .ip-halo{animation:haloPulse 1.8s ease-in-out infinite}
@keyframes haloPulse{0%,100%{opacity:.32;r:8}50%{opacity:.08;r:14}}
.stage-panel.on .ip-chip{animation:chipGlow 13s cubic-bezier(.4,0,.2,1) infinite}
@keyframes chipGlow{
  0%,86%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,184,232,0)}
  91%{transform:scale(1.04);box-shadow:0 0 0 9px rgba(34,184,232,.22)}
  96%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,184,232,0)}
}

/* ---------- reduced motion: show every end state, animate nothing ---------- */
@media(prefers-reduced-motion:reduce){
  .stage-panel *,
  .stage-panel.on *{animation:none !important;opacity:1 !important;transform:none !important;
    clip-path:none !important;stroke-dashoffset:0 !important}
  
  .stage-panel .cursor-hint{display:none}
  .ip-island{transform:translateX(-50%) !important}
  .ip-notif{display:none}
  .consent .lines i{width:100% !important}
  .consent .lines i:nth-child(2){width:78% !important}
  .consent .lines i:nth-child(3){width:56% !important}
  .sketch .ink path{stroke-dashoffset:0 !important}
  .sketch .letters text{opacity:1 !important}
  .sketch-cap i{animation:none}
}
.menu-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.3px) rotate(-45deg)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sketch .ink path{stroke-dashoffset:var(--len,0)}
.sketch svg{transition:opacity .7s ease}
.scroll-cue svg{animation:cueBob 2.2s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
.typer.done .caret{animation:blink .75s step-end infinite,fadeOut .3s linear 1.4s forwards}
@keyframes blink{50%{opacity:0}}
.say-grid .lede{opacity:0;transform:translateY(10px)}
.say-grid.revealed .lede{animation:riseUp .7s var(--ease-out) .35s forwards}
@keyframes riseUp{to{opacity:1;transform:none}}
.say-grid.revealed .btn-row{animation:fadeIn .6s ease .8s forwards}
@keyframes slideX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto;cursor:auto}}
.flow-scroll .stage-panel.on{animation:none}
/* the cards pop a little less far at this size, so they stay inside the step */
.flow-scroll .ip-call{animation:callGlow 2.4s ease-in-out infinite,callPopLg 13s cubic-bezier(.4,.05,.2,1) infinite}
@keyframes callPopLg{
  0%,30%{transform:translate3d(0,0,0) scale(1);z-index:1}
  35%{transform:translate3d(-13%,6%,0) scale(1.26);z-index:10}
  55%{transform:translate3d(-13%,6%,0) scale(1.26);z-index:10}
  59%,100%{transform:translate3d(0,0,0) scale(1);z-index:1}
}
.flow-scroll .ip-dex{animation:dexPopLg 13s cubic-bezier(.4,.05,.2,1) infinite}
@keyframes dexPopLg{
  0%,59%{transform:translate3d(0,0,0) scale(1);z-index:1}
  64%{transform:translate3d(13%,-2%,0) scale(1.28);z-index:10}
  80%{transform:translate3d(13%,-2%,0) scale(1.28);z-index:10}
  84%,100%{transform:translate3d(0,0,0) scale(1);z-index:1}
}
.ask-a > *{opacity:0;animation:riseIn .45s var(--ease-out) forwards;animation-delay:calc(var(--i) * .16s + .1s)}

/* =====================================================================
   HEADER — icon-only theme switch, wordless menu, tab reveal
   ===================================================================== */
.logo .logo-mark{opacity:0;transition:opacity .35s ease}
.tabs-peek.show a{animation:tabIn .4s var(--ease-out) forwards;animation-delay:calc(var(--i) * .09s)}
@keyframes tabIn{to{opacity:1;transform:none}}
.door-leaf{transform-origin:270px 278px;transform:scaleX(1)}
.sketch.opening .door-leaf{animation:doorSwing .72s cubic-bezier(.5,0,.2,1) forwards}
@keyframes doorSwing{to{transform:scaleX(.18)}}
.sketch.opening .door-light{animation:doorGlow .8s ease .12s forwards}
@keyframes doorGlow{to{opacity:1}}
.sketch.receding svg{animation:sketchOut .8s cubic-bezier(.5,0,.2,1) forwards}
@keyframes sketchOut{to{opacity:0;transform:scale(1.5)}}
#flyLogo.burst{animation:logoBurst .8s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes logoBurst{
  0%{opacity:0;transform:var(--t0) scale(.06)}
  32%{opacity:1}
  100%{opacity:1;transform:var(--t1) scale(1)}
}
.scroll-cue{transition:opacity .4s ease}
.on .mf-dot{animation:popDot .3s var(--ease-out) forwards;animation-delay:calc(var(--i)*.13s + .2s)}
@keyframes popDot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.on .mf-rx{animation:popDot .34s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i)*.13s + .35s)}
.on .mf-md{animation:popDot .4s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i)*.13s + 1.9s)}
.on .mf-key{animation:fadeIn .5s ease 2.1s forwards}
.on .mm-coin{animation:coinRun 2.9s linear infinite;animation-delay:calc(var(--i)*.62s)}
@keyframes coinRun{
  0%{opacity:0;offset-distance:0%}
  12%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;offset-distance:100%}
}
.on .mm-x{animation:fadeIn .5s ease 2.2s forwards}
.on .me-step{animation:stepUp .55s var(--ease-out) forwards;animation-delay:calc(var(--i)*.45s + .2s)}
@keyframes stepUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.me-track{stroke-dasharray:420;stroke-dashoffset:420}
.on .me-track{animation:drawPath 2.1s ease .1s forwards}
.on .mr-pay{animation:payIn 4.4s ease infinite;animation-delay:calc(var(--i)*.8s)}
@keyframes payIn{0%{opacity:0;transform:translateY(10px) scale(.85)}12%{opacity:1;transform:none}70%{opacity:1}85%,100%{opacity:0}}
.on .mr-tot{animation:fadeIn .6s ease 2.4s forwards}
.on .ma-pulse{animation:apiPulse 2.4s ease-in-out infinite}
@keyframes apiPulse{0%,100%{opacity:.2;r:4}50%{opacity:1;r:6}}
.on .ma-flow{animation:maFlow 1.1s linear infinite}
@keyframes maFlow{to{stroke-dashoffset:-11}}
@keyframes flowDash{to{stroke-dashoffset:-13}}
.on .mg-bottle{animation:slide 3.6s cubic-bezier(.4,0,.5,1) infinite}
@keyframes slide{0%{opacity:0;transform:translateX(0)}8%{opacity:1}55%{opacity:1;transform:translateX(150px)}90%,100%{opacity:0;transform:translateX(150px)}}
.on .mg-val{animation:valDrop 3.6s cubic-bezier(.4,0,.5,1) infinite}
@keyframes valDrop{0%,10%{opacity:0}18%{opacity:1}55%{opacity:1}72%{opacity:1}90%,100%{opacity:0}}
.on .mg-fall{animation:fallIn 3.6s ease infinite}
@keyframes fallIn{0%,55%{opacity:0;transform:translateY(-6px)}66%{opacity:1;transform:translateY(0)}88%{opacity:1}100%{opacity:0}}
.stage-panel.on[data-panel="1"] .sched{animation:fadeIn .45s ease 4.2s forwards}
.stage-panel.on[data-panel="1"] .ipad-consent{animation:fadeOut .45s ease 4.2s forwards}
.stage-panel.on[data-panel="1"] .day.pick{animation:dayPick .4s var(--ease-out) 4.9s forwards}
@keyframes dayPick{to{opacity:1;border-color:var(--cyan);background:var(--cyan-ghost)}}
.stage-panel.on[data-panel="1"] .day:not(.pick){animation:fadeIn .35s ease forwards;opacity:0;animation-delay:calc(var(--i)*.06s + 4.6s)}
.stage-panel.on[data-panel="1"] .slot{animation:fadeIn .3s ease forwards;animation-delay:calc(var(--i)*.055s + 5.4s)}
.stage-panel.on[data-panel="1"] .slot.take{animation:fadeIn .3s ease 5.7s forwards,slotPick .45s var(--ease-out) 6.7s forwards}
@keyframes slotPick{to{border-color:var(--cyan);background:var(--cyan);color:#fff}}
.stage-panel.on[data-panel="1"] .slot.take .tapdot{animation:tapRipple .8s cubic-bezier(.2,.7,.3,1) 6.6s forwards}
.stage-panel.on[data-panel="1"] .sched-cta{animation:schedArm .45s var(--ease) 7.4s forwards}
@keyframes schedArm{to{background:var(--ok);border-color:var(--ok);color:#fff}}
.stage-panel.on[data-panel="1"] .sched-cta .s-wait{animation:fadeOut .2s linear 7.4s forwards}
.stage-panel.on[data-panel="1"] .sched-cta .s-done{animation:fadeIn .3s ease 7.5s forwards}
.stage-panel.on .chk div{animation:riseIn .4s var(--ease-out) forwards;animation-delay:calc(var(--i)*.4s + .4s)}
.stage-panel.on .fu{animation:riseIn .48s var(--ease-out) forwards;animation-delay:calc(var(--i) * .22s + .25s)}
.stage-panel .pop{opacity:0;transform:scale(.6)}
.stage-panel.on .pop{animation:popIn .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--d,1.6) * 1s)}
.on .ac-box{animation:acBox 9s ease infinite}
@keyframes acBox{
  0%,30%   {stroke:var(--border-strong);fill:rgba(34,184,232,0);filter:none}
  36%      {stroke:var(--cyan);fill:rgba(34,184,232,.16);filter:drop-shadow(0 0 16px rgba(34,184,232,.7))}
  44%,88%  {stroke:var(--cyan);fill:rgba(34,184,232,.1);filter:drop-shadow(0 0 10px rgba(34,184,232,.45))}
  100%     {stroke:var(--border-strong);fill:rgba(34,184,232,0);filter:none}
}
.on .ac-label{animation:acLabel 9s ease infinite}
@keyframes acLabel{
  0%,30%{fill:var(--ink-muted)}
  36%,88%{fill:var(--cyan-dark)}
  100%{fill:var(--ink-muted)}
}
[data-theme="dark"] .on .ac-label{animation-name:acLabelDark}
@keyframes acLabelDark{0%,30%{fill:var(--ink-muted)}36%,88%{fill:var(--cyan)}100%{fill:var(--ink-muted)}}
.on .ac-sub{animation:acSub 9s ease infinite}
@keyframes acSub{0%,34%{opacity:0}40%,88%{opacity:1}100%{opacity:0}}
.on .ac-spoke{
  animation:acSpoke 9s ease infinite, acDash 1.3s linear infinite;
  animation-delay:calc(var(--i) * .055s), 0s;
}
@keyframes acSpoke{
  0%,32%{stroke:var(--border-strong);opacity:.5}
  40%,88%{stroke:var(--cyan);opacity:1}
  100%{stroke:var(--border-strong);opacity:.5}
}
@keyframes acDash{to{stroke-dashoffset:-18}}
.on .ac-node{animation:acNode 9s ease infinite;animation-delay:calc(var(--i) * .055s)}
@keyframes acNode{
  0%,34%  {fill:var(--bg);stroke:var(--border-strong);filter:none}
  42%     {fill:var(--cyan);stroke:var(--cyan);filter:drop-shadow(0 0 9px rgba(34,184,232,.85))}
  56%,72% {fill:var(--cyan);stroke:var(--cyan);filter:drop-shadow(0 0 4px rgba(34,184,232,.5))}
  64%,88% {fill:var(--cyan);stroke:var(--cyan);filter:drop-shadow(0 0 10px rgba(34,184,232,.8))}
  100%    {fill:var(--bg);stroke:var(--border-strong);filter:none}
}
.on .ac-pill{animation:acPill 9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes acPill{
  0%    {opacity:0;transform:translateY(-92px) scale(.85)}
  10%   {opacity:1;transform:translateY(-62px) scale(1)}
  22%   {opacity:1;transform:translateY(-62px) scale(1)}
  32%   {opacity:1;transform:translateY(0) scale(.58)}
  37%   {opacity:0;transform:translateY(0) scale(.5)}
  100%  {opacity:0;transform:translateY(0) scale(.5)}
}
@media(prefers-reduced-motion:reduce){
  .on .ac-box,.on .ac-node,.on .ac-spoke,.on .ac-pill,.on .ac-label,.on .ac-sub{animation:none}
  .ac-pill{opacity:0}
}
.on .ac-logo{animation:acLogo 9s cubic-bezier(.35,0,.2,1) infinite}
@keyframes acLogo{
  0%   {opacity:0;transform:translateX(-240px) scale(1)}
  8%   {opacity:1;transform:translateX(-150px) scale(1)}
  22%  {opacity:1;transform:translateX(0) scale(1)}
  28%  {opacity:1;transform:translateX(0) scale(1)}
  34%  {opacity:.55;transform:translateX(0) scale(.52)}
  38%  {opacity:0;transform:translateX(0) scale(.42)}
  100% {opacity:0;transform:translateX(0) scale(.42)}
}

/* ---------- margin: the chronic-patient contribution line ---------- */
.mg-base{stroke-dasharray:220;stroke-dashoffset:220}
.on .mg-base{animation:drawPath 1.1s ease .2s forwards}
.on .mg-lift{animation:fadeIn .45s ease 1.3s forwards}
.mg-up{stroke-dasharray:260;stroke-dashoffset:260}
.on .mg-up{animation:drawPath 1.5s cubic-bezier(.4,0,.2,1) 1.6s forwards}
.mg-dot{opacity:0;transform-origin:386px 46px}
.on .mg-dot{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) 3s forwards}

/* ---------- NPS gauge ---------- */
.nps-arc{stroke-dasharray:283;stroke-dashoffset:283}
.on .nps-arc{animation:npsFill 1.6s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes npsFill{to{stroke-dashoffset:96}}
.nps-needle{transform-origin:186px 160px;transform:rotate(-46deg)}
.on .nps-needle{animation:npsSwing 1.6s cubic-bezier(.4,0,.2,1) .3s forwards}
@keyframes npsSwing{to{transform:rotate(0deg)}}
.on .nps-jump{animation:riseIn .6s var(--ease-out) 1.7s forwards}

/* ---------- onboarding steps ---------- */

/* ---------- pharmacist work visuals ---------- */
.wn-l{opacity:0;transform-origin:left center}
.on .wn-l{animation:lineIn .45s var(--ease-out) forwards;animation-delay:calc(var(--i)*.28s + .4s)}
@keyframes lineIn{from{opacity:0;transform:scaleX(.1)}to{opacity:1;transform:none}}
.on .wh-slot{animation:fadeIn .4s ease forwards;animation-delay:calc(var(--i)*.18s + .4s)}
.rm-pan{transform:translateX(0)}
.on .rm-pan{animation:rmPan 12s cubic-bezier(.45,0,.2,1) infinite}
@keyframes rmPan{
  0%,14%  {transform:translateX(0)}
  30%,92% {transform:translateX(-166px)}
  100%    {transform:translateX(0)}
}
.on .rm-walk{animation:rmWalk 12s cubic-bezier(.4,0,.5,1) infinite}
@keyframes rmWalk{
  0%   {opacity:1;transform:translateX(0)}
  16%  {opacity:1;transform:translateX(108px)}
  22%  {opacity:0;transform:translateX(118px)}
  96%  {opacity:0;transform:translateX(118px)}
  100% {opacity:1;transform:translateX(0)}
}
.on .rm-seated{animation:rmIn 12s ease infinite}
.on .rm-cap{animation:rmIn 12s ease infinite;animation-delay:.3s}
@keyframes rmIn{0%,26%{opacity:0}34%,92%{opacity:1}100%{opacity:0}}
.rm-link{stroke-dasharray:6 7;opacity:0}
.on .rm-link{animation:rmLink 12s ease infinite, flowDash 1.3s linear infinite}
@keyframes rmLink{0%,38%{opacity:0}46%,92%{opacity:.95}100%{opacity:0}}
.on .rm-pill{animation:rmPill2 12s ease infinite}
@keyframes rmPill2{0%,42%{opacity:0;transform:translateY(-10px)}50%,92%{opacity:1;transform:none}100%{opacity:0}}
.stage-panel.on .sq-signin{opacity:1;animation:fadeOut .45s ease 4.2s forwards}
.stage-panel.on .sq-2{animation:fadeIn .5s ease 4.5s forwards, fadeOut .45s ease 9s forwards}
.stage-panel.on .sq-3{animation:fadeIn .5s ease 9.4s forwards}
.stage-panel.on .typed-a{animation:typeIn 1s steps(24,end) .6s forwards}
.stage-panel.on .typed-b{animation:typeIn .7s steps(12,end) 2s forwards}
@keyframes typeIn{to{width:100%}}
.stage-panel.on .signin-btn{animation:btnGo .4s ease 3.3s forwards}
@keyframes btnGo{to{background:var(--cyan);color:#06202b}}
.stage-panel.on .chips span.pick{animation:chipPick .45s var(--ease-out) forwards;animation-delay:calc(var(--i)*.22s + 5.4s)}
@keyframes chipPick{to{opacity:1;border-color:var(--cyan);background:var(--cyan-ghost);color:var(--cyan-dark)}}
[data-theme="dark"] .stage-panel.on .chips span.pick{animation-name:chipPickDark}
@keyframes chipPickDark{to{opacity:1;border-color:var(--cyan);background:var(--cyan-ghost);color:var(--cyan)}}
.stage-panel.on .avail-grid .cell.on-slot{animation:slotOn .4s var(--ease-out) forwards;animation-delay:calc(var(--i)*.09s + 10.2s)}
@keyframes slotOn{to{opacity:1;background:var(--cyan);border-color:var(--cyan)}}
.stage-panel.on .avail-foot{animation:riseIn .5s var(--ease-out) 12.6s forwards}
.stage-panel.on[data-panel="0"] .ph-signin{animation:fadeOut .5s ease 4s forwards}
.door-stage .sketch svg{transform-origin:50% 57.3%;will-change:transform;transition:none}
.logo .logo-mark{opacity:0;transition:none}
.sketch.opening .door-leaf{animation:doorSwing .9s cubic-bezier(.5,0,.2,1) forwards}
@keyframes doorSwing{to{transform:scaleX(.06)}}
@media(prefers-reduced-motion:reduce){
 .hero-full{height:auto}
 .door-stage{position:relative;top:0;height:65svh}
 .sketch.opening .door-leaf{animation:none;transform:scaleX(.06)}
 .door-stage .scroll-cue{display:none}
}

/* Centered lockup, then the pill opens into the pharmacy. */
.activate.on .ac-logo{animation:acCentered 8s ease-in-out infinite}
@keyframes acCentered{0%,15%{opacity:1;transform:none}23%,94%{opacity:0;transform:none}100%{opacity:1;transform:none}}
.ac-opening{opacity:0;transform:translate(167px,170px)}
.activate.on .ac-opening{animation:acOpening 8s ease-in-out infinite}
@keyframes acOpening{0%,14%{opacity:0;transform:translate(167px,170px)}18%{opacity:1;transform:translate(167px,170px)}28%,38%{opacity:1;transform:translate(230px,170px)}44%,100%{opacity:0;transform:translate(230px,170px)}}
.activate.on .ac-half-left{animation:acLeft 8s ease-in-out infinite}
.activate.on .ac-half-right{animation:acRight 8s ease-in-out infinite}
@keyframes acLeft{0%,28%,100%{transform:none}40%,94%{transform:translateX(-40px) scaleY(2.5)}}
@keyframes acRight{0%,28%,100%{transform:none}40%,94%{transform:translateX(40px) scaleY(2.5)}}
.activate.on .ac-dots{animation:acDots 8s ease infinite}
@keyframes acDots{0%,28%{opacity:1}36%,100%{opacity:0}}
.activate.on .ac-box{transform-origin:230px 170px;animation:acBecomeBox 8s ease-in-out infinite}
@keyframes acBecomeBox{0%,30%{opacity:0;transform:scale(.45,.38)}42%,88%{opacity:1;transform:scale(1);stroke:var(--cyan);fill:rgba(34,184,232,.1)}95%,100%{opacity:0;transform:scale(1)}}
@keyframes acRevealLabel{0%,40%,100%{opacity:0}47%,88%{opacity:1}95%{opacity:0}}
.activate.on .ac-web{animation:acRevealWeb 8s ease infinite}
@keyframes acRevealWeb{0%,43%,100%{opacity:0}54%,88%{opacity:1}95%{opacity:0}}
.activate.on .ac-node,.activate.on .ac-spoke{animation-duration:8s}
@media(prefers-reduced-motion:reduce){.activate.on .ac-logo,.activate.on .ac-opening{animation:none;opacity:0}.activate.on .ac-box,.activate.on .ac-label,.activate.on .ac-sub,.activate.on .ac-web,.activate.on .ac-foot2{animation:none;opacity:1}.activate.on .ac-foot{animation:none;opacity:0}}

/* The pill settles above the pharmacy instead of becoming its frame. */
@keyframes acOpening{
  0%,14%{opacity:0;transform:translate(167px,170px)}
  18%{opacity:1;transform:translate(167px,170px)}
  36%,88%{opacity:1;transform:translate(230px,149px) scale(.6)}
  95%,100%{opacity:0;transform:translate(230px,149px) scale(.6)}
}
.activate.on .ac-half-left,.activate.on .ac-half-right,.activate.on .ac-dots{animation:none;transform:none;opacity:1}
@keyframes acBecomeBox{
  0%,28%{opacity:0;transform:none}
  40%,88%{opacity:1;transform:none;stroke:var(--cyan);fill:rgba(34,184,232,.1)}
  95%,100%{opacity:0;transform:none}
}

/* Hold the inactive grey pharmacy before the network activates. */
@keyframes acBecomeBox{
  0%,28%{opacity:0;transform:none;stroke:var(--ink-muted);fill:rgba(136,147,163,.08)}
  36%,52%{opacity:1;transform:none;stroke:var(--ink-muted);fill:rgba(136,147,163,.08)}
  62%,88%{opacity:1;transform:none;stroke:var(--cyan);fill:rgba(34,184,232,.1)}
  95%,100%{opacity:0;transform:none;stroke:var(--ink-muted);fill:rgba(136,147,163,.08)}
}
.activate.on .ac-label{animation:acGreyLabel 8s ease infinite}
@keyframes acGreyLabel{0%,32%,100%{opacity:0;fill:var(--ink-muted)}40%,52%{opacity:1;fill:var(--ink-muted)}62%,88%{opacity:1;fill:var(--cyan)}95%{opacity:0;fill:var(--cyan)}}
.activate.on .ac-sub{animation:acActivatedText 8s ease infinite}
@keyframes acActivatedText{0%,52%,100%{opacity:0}62%,88%{opacity:1}95%{opacity:0}}
@keyframes acRevealWeb{0%,52%,100%{opacity:0}62%,88%{opacity:1}95%{opacity:0}}
.activate.on .ac-foot2{animation:acFootLive 8s ease infinite}
@keyframes acFootGrey{0%,32%,100%{opacity:0}37%,53%{opacity:1}59%{opacity:0}}
@keyframes acFootLive{0%,59%,100%{opacity:0}64%,88%{opacity:1}94%{opacity:0}}

/* Grey connections arrive with the grey box; dots activate later. */
.activate.on .ac-web{animation:none;opacity:1}
.activate.on .ac-spoke{animation:acGreyConnections 8s ease infinite,acDash 1.1s linear infinite;animation-delay:0s}
@keyframes acGreyConnections{
  0%,28%,100%{opacity:0;stroke:var(--ink-muted)}
  36%,52%{opacity:.65;stroke:var(--ink-muted)}
  62%,88%{opacity:1;stroke:var(--cyan)}
  95%{opacity:0;stroke:var(--cyan)}
}
.activate.on .ac-node{animation:acPatientSpawn 8s ease infinite;animation-delay:0s}
@keyframes acPatientSpawn{
  0%,28%,100%{opacity:0;fill:var(--ink-muted);stroke:var(--ink-muted);filter:none}
  36%,52%{opacity:.65;fill:var(--ink-muted);stroke:var(--ink-muted);filter:none}
  62%,88%{opacity:1;fill:var(--cyan);stroke:var(--cyan);filter:drop-shadow(0 0 7px rgba(34,184,232,.65))}
  95%{opacity:0;fill:var(--cyan);stroke:var(--cyan);filter:none}
}
@media(prefers-reduced-motion:reduce){.activate.on .ac-spoke,.activate.on .ac-node{animation:none;opacity:1;stroke:var(--cyan)}}
.counter-art .ca-d{stroke-dasharray:900;stroke-dashoffset:900}
.counter-art.on .ca-d{animation:caDraw 1.5s cubic-bezier(.35,0,.2,1) forwards}
.counter-art.on .ca-ink .ca-d{animation-delay:calc(.05s * var(--n,0))}
.counter-art.on .ca-person .ca-d{animation-duration:1s;animation-delay:.75s}
.counter-art.on .ca-bottle .ca-d{animation-duration:.7s;animation-delay:calc(var(--i) * .09s + 1.5s)}
.counter-art.on .ca-counterpill .ca-d{animation-duration:.7s;animation-delay:calc(var(--i) * .12s + 2.7s)}
.counter-art.on .ca-person{animation:caBreathe 5.4s ease-in-out 3.2s infinite}
@keyframes caBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes caDraw{to{stroke-dashoffset:0}}
.counter-art.on .ca-word{animation:fadeIn .6s ease 1s forwards}
@media(prefers-reduced-motion:reduce){
  .counter-art .ca-d{stroke-dashoffset:0}
  .counter-art .ca-word{opacity:1}
}
.sup-card:hover{opacity:1;transform:translateY(-2px)}
@keyframes cuePulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.scroll-cue span{animation:none;opacity:1}}
.escal.on .es-g{animation:fadeIn .5s var(--ease-out) forwards;animation-delay:calc(var(--i) * .22s + .15s)}
.escal.on .es-out{stroke-dasharray:6 5;animation:acDash 1.1s linear infinite}
@media(prefers-reduced-motion:reduce){.es-g{opacity:1}.escal.on .es-g,.escal.on .es-out{animation:none}}
.ca-badge .ca-d{stroke-dasharray:900;stroke-dashoffset:900}
.counter-art.on .ca-badge .ca-d{animation:caDraw .7s cubic-bezier(.35,0,.2,1) 2.1s forwards}
@media(prefers-reduced-motion:reduce){.ca-badge .ca-d{stroke-dashoffset:0}}
.counter-art.on .ca-rph{animation:fadeIn .5s ease 2.2s forwards}
@media(prefers-reduced-motion:reduce){.ca-rph{opacity:1}}
.team-view{animation:fadeIn .3s ease}
.tm-card:hover .tm-meta,.tm-card:focus-within .tm-meta{opacity:1;transform:none}

@media(hover:none){
  .tm-meta{opacity:1;transform:none}}
@keyframes bubblePop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
/* first half, then second half, then the patient answers once both have cleared */
.ca-bub-a,.ca-bub-b{transform-origin:496px 116px}
.ca-bub-c{transform-origin:676px 240px}
.counter-art.on .ca-bub-a{animation:bubblePop .5s cubic-bezier(.34,1.4,.64,1) 2.3s forwards,fadeOut .3s ease 4.6s forwards}
.counter-art.on .ca-bub-b{animation:bubblePop .5s cubic-bezier(.34,1.4,.64,1) 5s forwards,fadeOut .3s ease 7.3s forwards}
.counter-art.on .ca-bub-c{animation:fadeIn .55s ease 7.7s forwards}
@media(prefers-reduced-motion:reduce){.ca-bub{animation:none}.ca-bub-b,.ca-bub-c{opacity:1}}
.to-top.on{opacity:1;visibility:visible;transform:none}
.sv-pin[data-dragging] .sv-panel,.sv-pin[data-dragging] .sv-frame{transition:none}
.sv-panel.on,.sv-frame.on{will-change:transform}
.sv-frame.on{opacity:1;transform:none}
.sv-frame.past{transform:translateX(-34px)}
.sv-panel.on{opacity:1;transform:none;pointer-events:auto}
.sv-panel.past{transform:translateX(-52px)}
@media(prefers-reduced-motion:reduce){
  .sv-frame,.sv-panel{transition:none}
}
.sv-frame.on .cl-rph{animation:fadeIn .5s var(--ease-out) forwards;opacity:0}
.sv-frame.on .cl-rph{animation-delay:calc(var(--i) * .1s + .15s)}
@media(prefers-reduced-motion:reduce){.sv-frame .cl-rph{opacity:1;animation:none}}

/* =====================================================================
   AMBIENT BACKGROUND — the drift
   Ported from the Tailwind `animate-blob` utility: one 7s loop, three
   copies staggered 0s / 2s / 4s so they never line up.
   ===================================================================== */
@keyframes blob{
  0%  {transform:translate(0,0) scale(1)}
  20% {transform:translate(80px,-100px) scale(1.2)}
  40% {transform:translate(-80px,60px) scale(.85)}
  60% {transform:translate(100px,80px) scale(1.15)}
  80% {transform:translate(-60px,-80px) scale(.9)}
  100%{transform:translate(0,0) scale(1)}
}
.blob{animation:blob 7s infinite;will-change:transform}
.blob-2{animation-delay:2s}
.blob-3{animation-delay:4s}

@media(prefers-reduced-motion:reduce){
  .blob{animation:none}
}