/* sna.css — DigiXDeal animation toolkit (soft-orange theme).
 * Pure CSS/SVG components. One-shot pieces play when JS adds .sna-play
 * (auto-added on scroll-into-view by sna.js). Honors reduced-motion. */
:root{
  --sna-accent:#ff6a3d; --sna-badge:#ff7548; --sna-rose:#d63d5a;
  --sna-grad:linear-gradient(135deg,#ffa322 0%,#ff6a3d 48%,#d63d5a 100%);
}
@keyframes sna-spin{to{transform:rotate(360deg)}}
@keyframes sna-draw{to{stroke-dashoffset:0}}
@keyframes sna-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes sna-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sna-beat{0%,100%{r:6px;opacity:.5}50%{r:10px;opacity:1}}
@keyframes sna-sheen{to{transform:translateX(40px)}}
@keyframes sna-drop{0%{top:-30px;opacity:0}60%{top:30px;opacity:1}80%{top:22px}100%{top:30px;opacity:0}}
@keyframes sna-floatup{0%{opacity:0;transform:translate(-50%,8px)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
@keyframes sna-pulse{0%{box-shadow:0 0 0 0 rgba(255,106,61,.5)}70%{box-shadow:0 0 0 9px rgba(255,106,61,0)}100%{box-shadow:0 0 0 0 rgba(255,106,61,0)}}
@keyframes sna-rip{to{transform:scale(4);opacity:0}}

/* ERROR ✕ */
.sna-err{width:96px;height:96px;overflow:visible}
.sna-err circle{fill:none;stroke:var(--sna-rose);stroke-width:5;stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226}
.sna-err line{stroke:var(--sna-rose);stroke-width:6;stroke-linecap:round;opacity:0;transform-origin:center}
.sna-play .sna-err circle{animation:sna-draw .5s ease forwards}
.sna-play .sna-err .l1{animation:sna-pop .25s ease .45s forwards}
.sna-play .sna-err .l2{animation:sna-pop .25s ease .6s forwards}

/* VERIFYING radar */
.sna-scan{width:96px;height:96px;overflow:visible}
.sna-scan .base{fill:none;stroke:#ffe0d2;stroke-width:5}
.sna-scan .arc{fill:none;stroke:var(--sna-badge);stroke-width:5;stroke-linecap:round;stroke-dasharray:80 226;transform-origin:center;animation:sna-spin 1.1s linear infinite}
.sna-scan .core{fill:var(--sna-badge);transform-origin:center;animation:sna-beat 1.1s ease-in-out infinite}

/* EMPTY */
.sna-empty{width:110px;height:96px;overflow:visible;animation:sna-bob 2.6s ease-in-out infinite}
.sna-empty .box{fill:#fff7f2;stroke:var(--sna-badge);stroke-width:3}
.sna-empty .lid{fill:#ffe0d2;stroke:var(--sna-badge);stroke-width:3}
.sna-empty .spk{fill:var(--sna-accent);opacity:0;animation:sna-spk 2.6s ease-in-out infinite;transform-origin:center}
@keyframes sna-spk{0%,70%,100%{opacity:0;transform:scale(.4)}80%{opacity:1;transform:scale(1)}}
.sna-shadow{width:70px;height:9px;background:rgba(255,117,72,.18);border-radius:50%;margin:6px auto 0;animation:sna-sh 2.6s ease-in-out infinite}
@keyframes sna-sh{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.8);opacity:.3}}

/* WALLET credit */
.sna-wallet{position:relative;width:120px;height:96px;margin:0 auto}
.sna-wallet .body{position:absolute;bottom:8px;left:10px;width:100px;height:64px;background:var(--sna-grad);border-radius:14px}
.sna-wallet .flap{position:absolute;bottom:30px;right:14px;width:26px;height:18px;background:#fff;border-radius:6px}
.sna-wallet .coin{position:absolute;top:-6px;left:48px;width:26px;height:26px;border-radius:50%;background:#ffd27a;border:2px solid #fff;opacity:0}
.sna-play .sna-wallet .coin{animation:sna-drop .7s cubic-bezier(.5,1.6,.5,1) forwards}
.sna-wallet .chip{position:absolute;top:6px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--sna-accent);opacity:0}
.sna-play .sna-wallet .chip{animation:sna-floatup 1.1s ease .3s forwards}

/* 404 */
.sna-404{font-family:'Space Grotesk',Inter,sans-serif;font-size:50px;font-weight:700;color:var(--sna-badge);display:flex;gap:6px;align-items:center;justify-content:center}
.sna-404 .o{width:46px;height:46px;border:6px solid var(--sna-badge);border-radius:50%;position:relative;animation:sna-bob 2.6s ease-in-out infinite;overflow:hidden}
.sna-404 .o::after{content:"";position:absolute;width:16px;height:6px;background:var(--sna-badge);border-radius:4px;right:-12px;bottom:-2px;transform:rotate(45deg)}
.sna-404 .o::before{content:"";position:absolute;inset:6px;border-radius:50%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);animation:sna-sheen 2.2s linear infinite}

/* COPY → check feedback (works on any button that gets .copied) */
.sna-copyfx.copied{color:#1f7a4a !important;border-color:#bfe3cd !important}
.sna-copyfx.copied svg{stroke:#1f7a4a !important;animation:sna-pop .3s ease}

/* TIMELINE draw */
.sna-tl .sna-fill{width:0;transition:width 1.6s ease}
.sna-tl.sna-play .sna-fill{width:var(--sna-tlw,88%)}
.sna-tl .sna-dot{transition:all .3s}
.sna-tl .sna-dot svg{opacity:0;transform:scale(.4);transition:all .25s}
.sna-tl.sna-play .sna-dot.on{background:var(--sna-badge);border-color:var(--sna-badge)}
.sna-tl.sna-play .sna-dot.on svg{opacity:1;transform:scale(1)}

/* BUTTON ripple + spinner */
.sna-ripple-host{position:relative;overflow:hidden}
.sna-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:sna-rip .6s ease-out;pointer-events:none}
.sna-spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:sna-spin .7s linear infinite;vertical-align:-3px}

/* STATUS PILL pulse */
.sna-pulse{animation:sna-pulse 1.4s ease-out infinite}

/* CONFETTI */
.sna-confetti{position:fixed;width:9px;height:14px;top:0;left:0;border-radius:2px;z-index:9999;pointer-events:none;will-change:transform}

@media (prefers-reduced-motion: reduce){
  .sna-err circle,.sna-err line,.sna-scan .arc,.sna-scan .core,.sna-empty,.sna-empty .spk,.sna-shadow,
  .sna-wallet .coin,.sna-wallet .chip,.sna-404 .o,.sna-404 .o::before,.sna-pulse,.sna-spin{animation:none !important}
  .sna-err circle{stroke-dashoffset:0}.sna-err line{opacity:1}
  .sna-tl .sna-fill{transition:none;width:var(--sna-tlw,88%)}
}