/* bang — LET IT BANG button + explosion. Motion language: charge → hold → release.
   Charge = the real wait while the wallet signs and the tx confirms (never a fake delay).
   Tokens match BRAND.md. Pair with let-it-bang.js. */
:root { --red:#FF2D1A; --ink:#0D0C0B; --paper:#F1EBE0; --yel:#E9FF2B;
        --out:cubic-bezier(.15,.7,.3,1); }

/* ---------- the button ---------- */
.bang-btn { position:relative; display:inline-flex; align-items:center; gap:.45em;
  padding:.62em 1.15em .58em; border:3px solid var(--ink); border-radius:999px;
  background:var(--red); color:var(--ink); box-shadow:6px 6px 0 var(--ink);
  font:900 clamp(18px,2.2vw,26px)/1 "Archivo",system-ui,sans-serif; font-stretch:125%;
  letter-spacing:.01em; text-transform:uppercase; cursor:pointer; user-select:none;
  transition:transform .08s, box-shadow .08s; -webkit-tap-highlight-color:transparent; }
.bang-btn__mark { width:.62em; height:1em; flex:none; transform-origin:50% 100%; overflow:visible; }
.bang-mark__coin, .bang-mark__dot { transform-box:fill-box; transform-origin:center; }
.bang-btn:hover .bang-btn__mark { animation:bang-tremble .1s steps(3) infinite; }          /* the "!" trembles */
.bang-btn:active, .bang-btn.is-pressed { transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }  /* press */
.bang-btn:focus-visible { outline:3px solid var(--blu,#2B4DFF); outline-offset:4px; }
.bang-btn[disabled] { filter:grayscale(.6); cursor:not-allowed; box-shadow:3px 3px 0 var(--ink); }

/* ---------- charge (wallet signing + tx confirming) / hold / fail ---------- */
.bang-btn.is-charging { cursor:progress; }
.bang-btn.is-charging .bang-btn__mark { animation:bang-tremble 1s steps(30) infinite; }   /* ±1.5px @30fps */
.bang-btn.is-charging .bang-mark__dot { animation:bang-glow .6s ease-in-out infinite alternate; }
.bang-btn.is-holding * { animation-play-state:paused !important; }                     /* 120 ms freeze on confirm */
.bang-btn.is-failed .bang-mark__dot, .bang-btn.is-failed .bang-mark__coin { animation:bang-drop 600ms cubic-bezier(.3,1.6,.5,1) both; } /* dot drops back, no rings */
.bang-btn[disabled].is-charging { filter:none; box-shadow:0 0 0 var(--ink); transform:translate(6px,6px); }  /* stays pressed while charging */
.bang-error { margin:.6em 0 0; font:700 13px/1.3 "JetBrains Mono",ui-monospace,monospace; color:var(--red); }

/* ---------- release (spawned by JS at the button centre) ---------- */
.bang-fx { position:fixed; left:var(--x); top:var(--y); width:0; height:0; pointer-events:none; z-index:9999; }
.bang-fx__dot { position:absolute; width:26px; height:26px; margin:-13px; border-radius:50%;
  background:var(--yel); box-shadow:0 0 0 6px var(--ink); animation:bang-dot 170ms var(--out) forwards; }
.bang-fx__ring { position:absolute; width:90px; height:90px; margin:-45px; border:3px solid var(--ink); border-radius:50%;
  opacity:0; animation:bang-ring 450ms var(--out) forwards; animation-delay:calc(170ms + var(--i) * 60ms); }
.bang-fx__shard { position:absolute; width:var(--s); height:var(--s); margin:calc(var(--s) / -2); background:var(--c);
  opacity:0; animation:bang-shard 760ms var(--out) forwards; animation-delay:170ms; }
.bang-fx__shard--tri { clip-path:polygon(50% 0,100% 100%,0 100%); }
.bang-fx__shard--bang { background:none; color:var(--c); width:auto; height:auto; margin:0;
  font:900 calc(var(--s) * 1.6)/1 "Archivo",sans-serif; font-stretch:125%; }
.bang-fx__shard--bang::before { content:"!"; }
.bang-fx__pulse { position:absolute; width:520px; height:520px; margin:-260px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,45,26,.4),rgba(255,45,26,0)); opacity:0;
  animation:bang-pulse 380ms ease-out forwards; animation-delay:170ms; }            /* max 40%, once. no white flash */
.bang-shake { animation:bang-shake 220ms linear; }                                   /* 6px, decaying */

/* ---------- keyframes ---------- */
@keyframes bang-tremble{ 0%{transform:translate(0,0)} 33%{transform:translate(1.5px,-1px)} 66%{transform:translate(-1.5px,1px)} 100%{transform:translate(1px,1.5px)} }
@keyframes bang-drop   { 0%{transform:translateY(0)} 35%{transform:translateY(7px)} 65%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
@keyframes bang-glow   { from { filter:drop-shadow(0 0 0 rgba(233,255,43,0)); } to { filter:drop-shadow(0 0 5px rgba(233,255,43,1)); } }
@keyframes bang-dot    { 0%{transform:translateY(0) scale(1)} 85%{transform:translateY(-110px) scale(1.25); opacity:1} 100%{transform:translateY(-120px) scale(.2); opacity:0} }
@keyframes bang-ring   { 0%{transform:translateY(-120px) scale(0); opacity:1} 100%{transform:translateY(-120px) scale(3.2); opacity:0} }
@keyframes bang-pulse  { 0%{transform:translateY(-120px) scale(.4); opacity:1} 100%{transform:translateY(-120px) scale(1.2); opacity:0} }
@keyframes bang-shard  { 0%   { transform:translate(0,-120px) rotate(0); opacity:1; }
                         55%  { transform:translate(calc(var(--dx) * .8), calc(-120px + var(--dy) * .8)) rotate(calc(var(--r) * .6)); opacity:1; }
                         100% { transform:translate(var(--dx), calc(-120px + var(--dy) + 90px)) rotate(var(--r)); opacity:0; } } /* gravity */
@keyframes bang-shake  { 0%{transform:translate(0,0)} 15%{transform:translate(-6px,3px)} 30%{transform:translate(5px,-4px)} 45%{transform:translate(-4px,2px)}
                         60%{transform:translate(3px,-2px)} 75%{transform:translate(-2px,1px)} 90%{transform:translate(1px,0)} 100%{transform:translate(0,0)} }

/* ---------- reduced motion: no shake, jitter, shards; rings shown at final frame, then fade ---------- */
@media (prefers-reduced-motion: reduce) {
  .bang-btn:hover .bang-btn__mark, .bang-btn.is-charging .bang-btn__mark, .bang-btn.is-failed .bang-mark__dot, .bang-btn.is-failed .bang-mark__coin, .bang-shake { animation:none; }
  .bang-fx__shard, .bang-fx__dot, .bang-fx__pulse { display:none; }
  .bang-fx__ring { animation:bang-ring-rm 500ms ease-out forwards; animation-delay:calc(var(--i) * 40ms); }
  @keyframes bang-ring-rm { from { transform:translateY(-120px) scale(3.2); opacity:.9; } to { transform:translateY(-120px) scale(3.2); opacity:0; } }
}