:root{--vital:#4ade80;--beat-amp:.6}
.fx-ecg{position:fixed;left:0;right:0;bottom:0;height:56px;z-index:40;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.fx-ecg canvas{width:100%;height:100%;display:block}
.fx-ecg-label{position:absolute;right:14px;bottom:6px;font:600 9px/1 var(--mono,monospace);letter-spacing:.2em;color:var(--vital);opacity:.75}
.fx-vitals{position:fixed;left:14px;bottom:62px;z-index:41;display:flex;flex-direction:column;gap:4px;pointer-events:none}
.fx-vital{font:600 10px/1.2 var(--mono,monospace);letter-spacing:.22em;color:#e3201b;opacity:0;animation:vitIn .25s forwards}
.fx-vital.ok{color:var(--vital);text-shadow:0 0 8px rgba(74,222,128,.5);animation:vitIn .25s forwards,vitFlick .5s .25s 2}
.fx-vital.out{opacity:0!important;transition:opacity .7s}
@keyframes vitIn{to{opacity:.95}}@keyframes vitFlick{0%,100%{opacity:.95}40%{opacity:.35}60%{opacity:1}}
body.fx-life::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:39;background:radial-gradient(ellipse at 50% 100%,rgba(74,222,128,.10),transparent 60%);animation:lifeFl .7s ease-out forwards}
@keyframes lifeFl{0%{opacity:0}20%{opacity:1}35%{opacity:.3}50%{opacity:.8}100%{opacity:0}}
body.fx-thump .fx-pulse-sync{animation:thump .45s ease-out}
@keyframes thump{0%{box-shadow:0 0 0 0 rgba(227,32,27,.75),0 0 28px rgba(227,32,27,.5);transform:scale(1.03)}100%{box-shadow:0 0 0 22px rgba(227,32,27,0),0 0 18px rgba(227,32,27,.25);transform:none}}
body.fx-boom{animation:boom .5s ease-out}
@keyframes boom{0%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,0)}100%{transform:none}}
.fx-scan-host{position:relative;overflow:hidden}
.fx-scan-sweep{position:absolute;left:0;right:0;top:-12%;height:12%;pointer-events:none;z-index:6;background:linear-gradient(to bottom,transparent,rgba(227,32,27,.18) 70%,rgba(255,90,80,.9) 96%,transparent);box-shadow:0 6px 18px rgba(227,32,27,.5);animation:sweep var(--d,1400ms) cubic-bezier(.5,0,.5,1) forwards}
@keyframes sweep{to{top:100%}}
.fx-shock{position:fixed;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid #e3201b;z-index:45;pointer-events:none;animation:shock 1s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes shock{0%{transform:scale(1);opacity:1;box-shadow:0 0 30px rgba(227,32,27,.8)}100%{transform:scale(60);opacity:0;border-width:.3px}}
body.fx-charging::before{content:"";position:fixed;inset:0;z-index:38;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(227,32,27,.35));animation:charge 1.6s ease-in-out infinite alternate}
@keyframes charge{from{opacity:.25}to{opacity:1}}
.fx-burst{position:fixed;inset:0;z-index:46;pointer-events:none;background:radial-gradient(circle at center,rgba(255,80,70,.9),rgba(227,32,27,.5) 30%,transparent 70%);animation:burst .85s ease-out forwards}
@keyframes burst{0%{opacity:0;transform:scale(.6)}15%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
.fx-black{position:fixed;inset:0;background:#000;z-index:60;opacity:0;transition:opacity .85s ease}.fx-black.on{opacity:1}
.fx-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-embers i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);background:#e3201b;box-shadow:0 0 6px #e3201b;opacity:0;animation:ember var(--d) linear var(--delay) infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx),-110vh);opacity:0}}
.fx-trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:44;pointer-events:none}
/* oil-pop sparks */
.fx-pop{position:absolute;width:3px;height:3px;background:#ffb3ad;border-radius:50%;pointer-events:none;z-index:7;animation:pop .5s ease-out forwards}
@keyframes pop{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--px),var(--py));opacity:0}}
/* wallet ring + button sweep */
.fx-ring{position:relative}
.fx-ring::after{content:"";position:absolute;inset:-4px;border:1px solid rgba(227,32,27,.55);pointer-events:none;animation:ring 2.4s ease-in-out infinite}
@keyframes ring{0%,100%{opacity:.3;inset:-3px}50%{opacity:1;inset:-7px;box-shadow:0 0 18px rgba(227,32,27,.35)}}
.fx-ring:hover{box-shadow:0 0 24px rgba(227,32,27,.45)}
.fx-sweepbtn{position:relative;overflow:hidden}
.fx-sweepbtn::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:btnSweep 3.2s ease-in-out infinite}
@keyframes btnSweep{0%,55%{left:-50%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.fx-ecg canvas{opacity:.6}.fx-vital,.fx-scan-sweep,.fx-shock,.fx-burst,.fx-embers,.fx-ring::after,.fx-sweepbtn::before,body.fx-charging::before,body.fx-boom,body.fx-thump .fx-pulse-sync,body.fx-life::after{animation:none!important}.fx-vital{opacity:.9}}