/* Motion for the order → pay → panel wizard. Everything here is decoration: the pages work without it,
   and prefers-reduced-motion turns it off (see the end of the file). */
@keyframes sn-rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sn-pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes sn-flash{0%{color:var(--violet2);text-shadow:0 0 18px rgba(168,85,247,.7)}100%{color:inherit;text-shadow:none}}
@keyframes sn-glow{0%{box-shadow:0 0 0 0 rgba(168,85,247,.55)}100%{box-shadow:0 0 0 18px rgba(168,85,247,0)}}
@keyframes sn-shimmer{from{background-position:0 0}to{background-position:40px 0}}
@keyframes sn-draw{to{stroke-dashoffset:0}}
@keyframes sn-fill{from{width:0}to{width:100%}}
@keyframes sn-build{0%,8%{opacity:0;transform:translateY(10px) scale(.98)}22%,78%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}

/* ---- order wizard: steps come in one after another, finished steps light up */
.m-steps > .stepbox,.m-steps ~ aside,.m-hero > *{animation:sn-rise .7s cubic-bezier(.2,.7,.2,1) both}
.m-hero > *:nth-child(2){animation-delay:.06s}.m-hero > *:nth-child(3){animation-delay:.12s}
.m-steps > .stepbox:nth-of-type(1){animation-delay:.12s}.m-steps > .stepbox:nth-of-type(2){animation-delay:.2s}
.m-steps > .stepbox:nth-of-type(3){animation-delay:.28s}.m-steps > .stepbox:nth-of-type(4){animation-delay:.36s}
.m-steps ~ aside{animation-delay:.3s}
.stepbox{transition:border-color .4s,box-shadow .4s}
.stepbox h2 i{transition:background .3s,color .3s,border-color .3s}
.stepbox.done h2 i{background:var(--violet);border-color:var(--violet);color:#fff;animation:sn-pop .4s cubic-bezier(.3,1.6,.5,1)}
.stepbox.done h2 i{font-size:0}.stepbox.done h2 i::after{content:"✓";font-size:.9rem;font-weight:700}
.stepbox.next{border-color:rgba(168,85,247,.45);box-shadow:0 0 0 1px rgba(168,85,247,.18),0 20px 60px -30px rgba(168,85,247,.55)}
.opt input:checked + .in{animation:sn-pop .3s cubic-bezier(.3,1.6,.5,1)}
.namehint.ok,.namehint.bad{animation:sn-rise .35s both}
.flash{animation:sn-flash .9s ease-out}

/* ---- pay: hand-off into the panel once the payment is seen */
.handoff{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;text-align:center;
  background:radial-gradient(50rem 40rem at 50% 40%,rgba(168,85,247,.22),rgba(14,13,18,.94));backdrop-filter:blur(10px);animation:sn-rise .45s both}
.handoff svg{width:96px;height:96px;margin:0 auto 22px;display:block}
.handoff circle{fill:none;stroke:var(--violet);stroke-width:4;stroke-dasharray:290;stroke-dashoffset:290;animation:sn-draw .7s .1s cubic-bezier(.6,0,.3,1) forwards}
.handoff path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:sn-draw .45s .7s ease-out forwards}
.handoff h2{font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.03em}
.handoff p{color:var(--text2);margin-top:8px}
.handoff .line{width:min(260px,70vw);height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin:26px auto 0;overflow:hidden}
.handoff .line i{display:block;height:100%;background:var(--violet);animation:sn-fill 1.7s .3s cubic-bezier(.4,0,.2,1) both}
.track li.done .dot{animation:sn-pop .4s cubic-bezier(.3,1.6,.5,1)}

/* ---- panel: the website assembles while it's being set up, the preview slides in */
.build{width:min(340px,80%);display:grid;gap:10px;margin:0 auto 22px}
.build i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(168,85,247,.55),rgba(192,132,252,.25));animation:sn-build 2.8s ease-in-out infinite both}
.build .h{height:26px;width:55%}.build .t{width:85%}.build .s{width:65%}
.build .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.build .row i{height:54px;border-radius:10px}
.build > :nth-child(2){animation-delay:.15s}.build > :nth-child(3){animation-delay:.3s}
.build .row i:nth-child(1){animation-delay:.45s}.build .row i:nth-child(2){animation-delay:.55s}.build .row i:nth-child(3){animation-delay:.65s}
.build > :nth-child(5){animation-delay:.8s}
.screen iframe{animation:sn-rise .6s cubic-bezier(.2,.7,.2,1) both}
.screen.live{animation:sn-glow 1.1s ease-out}
.prog:not(.err) .bar i{background:repeating-linear-gradient(-45deg,var(--violet) 0 10px,#9333ea 10px 20px);background-size:40px 100%;animation:sn-shimmer .8s linear infinite}
.prog.ok .bar i{background:var(--ok);animation:none}
.prog p{transition:color .3s}.prog.ok p{color:var(--ok)}
.studio > *{animation:sn-rise .6s cubic-bezier(.2,.7,.2,1) both}.studio > .pv{animation-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .m-steps > .stepbox,.m-steps ~ aside,.m-hero > *,.stepbox.done h2 i,.opt input:checked + .in,.namehint.ok,.namehint.bad,.flash,
  .handoff,.track li.done .dot,.screen iframe,.screen.live,.studio > *,.prog .bar i,.build i{animation:none!important}
  .handoff circle,.handoff path{stroke-dashoffset:0;animation:none}
  .handoff .line i{animation:none;width:100%}
  .build i{opacity:1}
}