/* Monster backdrops. Each lives in .fx-layer.fx-<monster>, behind (#fx) or over (#fx-front) the page. */
.fx-layer > * { position: absolute; }
.fx-layer svg { display: block; width: 100%; height: 100%; }

/* eyes glinting in the dark, shared by werewolf and ghoul */
.glint { left: var(--x); top: var(--y); width: 16px; height: 4px; opacity: 0; animation: glint 9s var(--delay) infinite; }
.glint::before, .glint::after { content: ''; position: absolute; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 8px 2px rgba(255, 210, 63, .7); }
.glint::before { left: 0; }
.glint::after { right: 0; }
@keyframes glint { 0%, 70%, 100% { opacity: 0; } 74%, 79% { opacity: .9; } 80%, 81% { opacity: 0; } 82%, 88% { opacity: .9; } }

/* ---------- vampire ---------- */
.fx-vampire .vamp-glow { inset: 0; background: radial-gradient(ellipse at 50% 120%, rgba(196, 16, 47, .4), transparent 60%); }
.fx-vampire .bat { top: var(--y); left: 0; width: 70px; height: 35px; color: #000; scale: var(--s); animation: batfly var(--d) var(--delay) linear infinite; }
.fx-vampire .bat svg { transform-origin: 50% 40%; animation: flap .22s ease-in-out infinite alternate; }
@keyframes batfly { 0% { translate: -10vw 0; } 25% { translate: 25vw -4vh; } 50% { translate: 55vw 3vh; } 75% { translate: 85vw -3vh; } 100% { translate: 115vw 0; } }
@keyframes flap { to { transform: scaleY(.35); } }
.fx-vampire .drip {
  top: 0; left: var(--x); width: var(--w); height: 0; border-radius: 0 0 999px 999px;
  background: linear-gradient(#4a000d, #b3001b); animation: drip var(--d) var(--delay) cubic-bezier(.5, 0, .9, .6) infinite;
}
.fx-vampire .drip::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 150%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #b3001b; }
@keyframes drip { 0% { height: 0; opacity: 1; } 75% { height: var(--h); opacity: 1; } 100% { height: var(--h); opacity: 0; } }

/* ---------- aberration ---------- */
.fx-aberration .abe-sky {
  inset: -20%;
  background: radial-gradient(circle at 30% 30%, rgba(109, 255, 159, .14), transparent 40%), radial-gradient(circle at 70% 60%, rgba(155, 48, 255, .22), transparent 45%);
  animation: hue 20s linear infinite;
}
@keyframes hue { to { filter: hue-rotate(360deg); } }
.fx-aberration .glyph { left: var(--x); top: var(--y); color: rgba(109, 255, 159, .35); font-family: 'Segoe UI Symbol', serif; font-size: var(--fs); animation: drift var(--d) var(--delay) ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(30px, -40px) rotate(40deg); } }
.fx-aberration .eye { left: var(--x); top: var(--y); width: 70px; height: 35px; opacity: .75; scale: var(--s); animation: blink var(--d) var(--delay) infinite; }
@keyframes blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.05); } }
.fx-aberration .tentacle {
  bottom: -5vh; left: var(--x); width: calc(var(--h) * .16); height: var(--h); color: #1d0f2b;
  transform-origin: 50% 100%; rotate: var(--r); animation: sway var(--d) var(--delay) ease-in-out infinite alternate;
}
.stage-3 .fx-aberration .tentacle { color: #2b1244; }
@keyframes sway { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }

/* ---------- werewolf ---------- */
.fx-werewolf .moon {
  bottom: 18vh; right: 5vw; width: 30vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 62% 38%, rgba(0, 0, 0, .08) 0 7%, transparent 8%), radial-gradient(circle at 35% 62%, rgba(0, 0, 0, .07) 0 10%, transparent 11%), radial-gradient(circle at 40% 35%, #fffbe8, #f1df9b 60%, #d9c27a);
  box-shadow: 0 0 60px 18px rgba(241, 223, 155, .35), 0 0 200px 80px rgba(241, 223, 155, .12);
}
.fx-werewolf .cloud { top: var(--y); left: 0; width: 40vmin; height: 9vmin; border-radius: 50%; background: #0b1424; filter: blur(14px); opacity: .85; scale: var(--s); animation: cloud var(--d) var(--delay) linear infinite; }
@keyframes cloud { from { translate: -50vw 0; } to { translate: 120vw 0; } }
.fx-werewolf .pines { left: 0; right: 0; bottom: 0; height: 42vh; }
.fx-werewolf .pines .back { fill: #0d1830; }
.fx-werewolf .pines .front { fill: #03060c; }
.fx-werewolf .ground-mist { left: -10%; right: -10%; bottom: -4vh; height: 20vh; background: radial-gradient(ellipse at 50% 100%, rgba(150, 170, 210, .25), transparent 70%); filter: blur(8px); }

/* ---------- zombie ---------- */
.fx-zombie .stain-sky { inset: 0; background: radial-gradient(ellipse at 50% -10%, rgba(143, 191, 58, .18), transparent 60%); }
.fx-zombie .hand { bottom: 0; left: var(--x); width: 9vmin; height: 18vmin; color: #070b04; transform-origin: 50% 100%; rotate: var(--r); scale: var(--s); animation: rise var(--d) var(--delay) ease-in-out infinite; }
@keyframes rise { 0%, 100% { translate: 0 100%; } 40%, 60% { translate: 0 12%; } 50% { translate: 0 18%; } }
.fx-zombie .fog {
  left: -50%; bottom: calc(-6vh + var(--y)); width: 200%; height: 32vh; opacity: var(--o); filter: blur(16px);
  background: radial-gradient(ellipse at 25% 60%, rgba(143, 191, 58, .35), transparent 55%), radial-gradient(ellipse at 70% 50%, rgba(110, 140, 50, .3), transparent 50%);
  animation: fogslide var(--d) var(--delay) linear infinite alternate;
}
@keyframes fogslide { from { translate: -10% 0; } to { translate: 10% 0; } }

/* ---------- ghost ---------- */
.fx-ghost .cold-light { inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(200, 220, 240, .2), transparent 60%); }
.fx-ghost .apparition { bottom: 5vh; left: 0; width: 14vmin; height: 36vmin; color: #e9f0f6; filter: blur(3px); opacity: 0; animation: walk var(--d) linear infinite; }
@keyframes walk { 0% { translate: -20vw 0; opacity: 0; } 15% { opacity: .25; } 50% { opacity: .08; } 85% { opacity: .25; } 100% { translate: 110vw 0; opacity: 0; } }
.fx-ghost .mist { top: var(--y); left: 0; width: 70vw; height: 30vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(220, 230, 240, .35), transparent 70%); filter: blur(10px); scale: var(--s); animation: mist var(--d) var(--delay) linear infinite; }
@keyframes mist { from { translate: -80vw 0; } to { translate: 110vw 0; } }

/* ---------- wendigo ---------- */
.fx-wendigo .antlers { left: 50%; top: 2vh; width: min(110vmin, 1100px); height: 70vmin; translate: -50% 0; color: #e8e4da; opacity: .12; transition: opacity 3s; }
.stage-3 .fx-wendigo .antlers { opacity: .2; }
.fx-wendigo .deadwood { left: 0; right: 0; bottom: 0; height: 75vh; color: #040608; }
.fx-wendigo .flake { top: -2vh; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: .8; animation: snow var(--d) var(--delay) linear infinite; }
@keyframes snow { to { transform: translate(var(--drift), 104vh); } }
.fx-wendigo .frost-edge { inset: 0; box-shadow: inset 0 0 120px 30px rgba(200, 225, 245, .18); }

/* ---------- succubus / incubus ---------- */
.fx-succubus .smoke { left: var(--x); top: var(--y); width: 50vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 65%); filter: blur(20px); scale: var(--s); animation: smoke var(--d) var(--delay) ease-in-out infinite alternate; }
@keyframes smoke { from { transform: translate(-6vw, 4vh); } to { transform: translate(6vw, -6vh); } }
.fx-succubus .heart { bottom: -5vh; left: var(--x); color: #ff3fa4; font-size: 22px; font-style: normal; scale: var(--s); animation: float var(--d) var(--delay) linear infinite; }
.fx-succubus .heart::before { content: '♥'; }
.fx-succubus .heart:nth-child(3n)::before { content: '❥'; }
@keyframes float { 0% { translate: 0 0; opacity: 0; } 10% { opacity: .8; } 60% { color: #ff3fa4; } 100% { translate: 4vw -110vh; opacity: 0; color: #3a0012; } }
.fx-succubus .heartbeat { inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 63, 164, .28)); animation: beat 1.2s infinite; }
@keyframes beat { 0%, 30%, 100% { opacity: .3; } 10% { opacity: 1; } 20% { opacity: .5; } 25% { opacity: .9; } }

/* ---------- devil ---------- */
.fx-devil .hellglow { inset: 0; background: radial-gradient(ellipse at 50% 110%, rgba(255, 90, 0, .55), rgba(200, 30, 10, .2) 40%, transparent 70%); }
.fx-devil .flame {
  bottom: -6vh; left: var(--x); width: var(--w); height: var(--h); translate: -50% 0;
  border-radius: 50% 50% 35% 35% / 70% 70% 30% 30%; filter: blur(6px); mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 90%, #ffe08a 0 12%, #ff8a00 30%, #d42400 55%, transparent 72%);
  transform-origin: 50% 100%; animation: flick-flame var(--d) var(--delay) ease-in-out infinite alternate;
}
@keyframes flick-flame { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.92, 1.12) skewX(3deg); } 100% { transform: scale(1.05, .9) skewX(-3deg); } }
.fx-devil .ember { bottom: 0; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255, 140, 0, .8); animation: ember var(--d) var(--delay) linear infinite; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--drift), -100vh); opacity: 0; } }

/* ---------- demon ---------- */
.fx-demon .blood-sky { inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255, 42, 26, .14), transparent 60%); }
.fx-demon .sigil { left: 50%; top: 50%; width: min(120vmin, 1000px); aspect-ratio: 1; translate: -50% -50%; color: #ff2a1a; opacity: .22; filter: drop-shadow(0 0 12px rgba(255, 42, 26, .7)); animation: turn 120s linear infinite; transition: opacity 3s; }
.stage-3 .fx-demon .sigil { opacity: .35; }
@keyframes turn { to { rotate: 360deg; } }
.fx-demon .cracks { inset: 0; color: #ff2a1a; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 42, 26, .9)); transition: opacity 3s; }
.stage-3 .fx-demon .cracks { opacity: .55; }

/* ---------- basilisk ---------- */
.fx-basilisk .scales {
  inset: 0; opacity: .85;
  background-image: radial-gradient(circle at 50% 0, transparent 0 58%, rgba(0, 0, 0, .45) 60%, transparent 67%), radial-gradient(circle at 50% 0, transparent 0 58%, rgba(0, 0, 0, .45) 60%, transparent 67%);
  background-size: 48px 28px; background-position: 0 0, 24px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 80%);
}
.fx-basilisk .serpent-eye { left: 50%; top: 3vh; width: min(70vmin, 640px); aspect-ratio: 2; translate: -50% 0; filter: drop-shadow(0 0 30px rgba(212, 232, 48, .25)); animation: lid 8s infinite; }
@keyframes lid { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.04); } }

/* ---------- giant spider ---------- */
.fx-spider .crawler { top: var(--y); left: 0; width: 34px; height: 34px; color: #000; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .35)); scale: var(--s); animation: crawl var(--d) var(--delay) linear infinite; }
.fx-spider .crawler .legs { transform-origin: center; animation: scuttle .14s steps(2) infinite; }
@keyframes scuttle { to { transform: rotate(6deg); } }
@keyframes crawl { 0% { translate: -5vw 0; rotate: 90deg; } 30% { translate: 30vw 6vh; rotate: 100deg; } 60% { translate: 60vw -4vh; rotate: 80deg; } 100% { translate: 110vw 2vh; rotate: 90deg; } }
.fx-spider .web { width: var(--s); height: var(--s); color: rgba(230, 228, 240, .5); }
.fx-spider .web-tl { left: 0; top: 60px; }
.fx-spider .web-tr { right: 0; top: 60px; transform: scaleX(-1); }
.fx-spider .web-bl { left: 0; bottom: 0; transform: scaleY(-1); }
.fx-spider .web-br { right: 0; bottom: 0; transform: scale(-1, -1); }
.fx-spider .dangler { top: 0; left: var(--x); width: 40px; height: var(--drop); animation: dangle var(--d) var(--delay) ease-in-out infinite; }
.fx-spider .dangler .thread { position: absolute; left: 50%; top: -100vh; bottom: 30px; width: 1px; background: rgba(230, 228, 240, .55); }
.fx-spider .dangler svg { position: absolute; left: 0; bottom: 0; width: 40px; height: 40px; color: #000; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .4)); }
@keyframes dangle { 0%, 100% { translate: 0 calc(var(--drop) * -1); } 45%, 60% { translate: 0 0; } }

/* ---------- onryō ---------- */
.fx-onryo .seven { right: 5vw; top: 42vh; color: rgba(255, 255, 255, .06); font-family: 'VT323', monospace; font-size: 22vmin; animation: seven 11s infinite; }
@keyframes seven { 0%, 88%, 100% { opacity: 0; } 90%, 92% { opacity: 1; } 93% { opacity: .2; } 94%, 96% { opacity: 1; } }
.fx-onryo .hair { left: 0; right: 0; top: 0; height: 20vh; color: #000; transition: height 3s; }
.stage-3 .fx-onryo .hair { height: 50vh; }
.fx-onryo .hair g { transform-origin: 50% 0; animation: hairsway 6s ease-in-out infinite alternate; }
@keyframes hairsway { from { transform: skewX(-2deg); } to { transform: skewX(2deg); } }
.fx-onryo .static { inset: -50%; background-image: var(--noise); background-size: 180px; opacity: .14; animation: grain .4s steps(4) infinite; }
.fx-onryo .scanlines { inset: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); }
.fx-onryo .tracking { left: 0; right: 0; height: 9vh; background: linear-gradient(transparent, rgba(255, 255, 255, .09), transparent); animation: track 7s linear infinite; }
@keyframes track { from { top: -10vh; } to { top: 110vh; } }
.fx-onryo .osd { left: 4vw; top: 72px; right: 4vw; bottom: 4vh; color: #e9ecef; font-family: 'VT323', monospace; font-size: 28px; text-shadow: 2px 0 rgba(255, 0, 60, .5), -2px 0 rgba(0, 200, 255, .5); }
.fx-onryo .osd-play { position: absolute; left: 0; top: 0; }
.fx-onryo .osd-time { position: absolute; left: 0; bottom: 0; white-space: pre; }

/* ---------- mummy ---------- */
.fx-mummy .tomb-light { inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(255, 190, 90, .28), transparent 60%); animation: torch 3s ease-in-out infinite alternate; }
@keyframes torch { from { opacity: .7; } to { opacity: 1; } }
.fx-mummy .glyph-band, .fx-mummy .glyph-col { overflow: hidden; color: #c8960f; opacity: .35; white-space: nowrap; font-family: 'Segoe UI Historic', 'Noto Sans Egyptian Hieroglyphs', serif; }
.fx-mummy .glyph-band { left: 0; right: 0; font-size: 34px; letter-spacing: 6px; }
.fx-mummy .band-top { top: 64px; }
.fx-mummy .band-bottom { bottom: 8px; }
.fx-mummy .glyph-col { top: 120px; bottom: 60px; width: 44px; font-size: 30px; writing-mode: vertical-rl; }
.fx-mummy .col-left { left: 10px; }
.fx-mummy .col-right { right: 10px; }
.fx-mummy .dust { left: 0; top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(232, 215, 176, .6); animation: dust var(--d) var(--delay) linear infinite; }
@keyframes dust { from { transform: translate(-5vw, 0); } to { transform: translate(105vw, var(--fall)); } }

/* ---------- invisible man ---------- */
.fx-invisible .whiteout { inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7)); }
.fx-invisible .prints { left: 0; right: 0; bottom: 4vh; height: 38vh; color: rgba(70, 70, 66, .5); }
.fx-invisible .print { opacity: 0; animation: footstep 10s infinite; animation-delay: calc(var(--i) * .55s); }
@keyframes footstep { 0% { opacity: 0; } 3% { opacity: 1; } 40% { opacity: .6; } 60%, 100% { opacity: 0; } }
.fx-invisible .specs { left: 0; top: 18vh; width: 120px; height: 44px; animation: specs 24s ease-in-out infinite; }
@keyframes specs { 0%, 100% { translate: 8vw 0; rotate: -4deg; } 30% { translate: 70vw 4vh; rotate: 6deg; } 55% { translate: 40vw -2vh; rotate: 0deg; } 80% { translate: 80vw 10vh; rotate: -8deg; } }

/* ---------- kaiju ---------- */
.fx-kaiju .alert-sky { inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(255, 77, 0, .4), transparent 60%); animation: alert 2.4s ease-in-out infinite; }
@keyframes alert { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.fx-kaiju .beast { left: 50%; bottom: 10vh; width: min(80vmin, 720px); aspect-ratio: 1; translate: -50% 40%; color: #050507; transition: translate 4s var(--ease); }
.stage-3 .fx-kaiju .beast { translate: -50% 6%; }
.fx-kaiju .eye-glow { fill: #ff6a00; filter: drop-shadow(0 0 6px #ff6a00); animation: alert 2.4s infinite; }
.fx-kaiju .skyline { left: 0; right: 0; bottom: 0; height: 30vh; color: #0b0b10; }
.fx-kaiju .skyline .win { fill: #ffcf6b; }
.fx-kaiju .ticker { left: 0; right: 0; top: 60px; height: 30px; overflow: hidden; background: #c40000; color: #fff; font: 800 14px/30px 'Nunito', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.fx-kaiju .ticker-track { display: inline-block; animation: ticker 40s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- sea monster ---------- */
.fx-sea .godrays {
  inset: 0; background: repeating-linear-gradient(100deg, rgba(47, 211, 198, .07) 0 4vw, transparent 4vw 10vw);
  -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%);
  animation: rays 12s ease-in-out infinite alternate;
}
@keyframes rays { to { transform: translateX(6vw); } }
.fx-sea .water { left: 0; right: 0; bottom: 0; height: 28vh; transition: height 4s var(--ease); }
.stage-3 .fx-sea .water { height: 52vh; }
.fx-sea .wave { position: absolute; left: 0; top: -38px; width: 200%; height: 40px; animation: wave 9s linear infinite; }
.fx-sea .wave.w2 { top: -30px; opacity: .55; animation-duration: 14s; animation-direction: reverse; }
.fx-sea .wave path { fill: #034a66; }
.fx-sea .deep { position: absolute; inset: 0; background: linear-gradient(#034a66, #01121f); }
@keyframes wave { to { transform: translateX(-50%); } }
.fx-sea .leviathan { position: absolute; left: 0; top: 30%; width: 70vmin; height: 20vmin; color: #000d16; opacity: .85; filter: blur(4px); animation: pass 34s linear infinite; }
@keyframes pass { from { translate: -80vmin 0; } to { translate: 120vw 0; } }
.fx-sea .bubble { position: absolute; bottom: 0; left: var(--x); width: var(--s); height: var(--s); border: 1px solid rgba(180, 240, 255, .5); border-radius: 50%; animation: bubble var(--d) var(--delay) linear infinite; }
@keyframes bubble { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--drift), -60vh); opacity: 0; } }

/* ---------- ghoul ---------- */
.fx-ghoul .grave-moon { top: 9vh; left: 10vw; width: 16vmin; aspect-ratio: 1; border-radius: 50%; background: #d8cfae; box-shadow: 0 0 60px 20px rgba(216, 207, 174, .2); opacity: .7; }
.fx-ghoul .graves { left: 0; right: 0; bottom: 0; height: 34vh; color: #050403; }
.fx-ghoul .grave-fog { left: -10%; right: -10%; bottom: 0; height: 18vh; background: radial-gradient(ellipse at 50% 100%, rgba(194, 178, 128, .28), transparent 70%); filter: blur(10px); }

/* ---------- yōkai ---------- */
.fx-yokai .torii { left: 50%; bottom: 0; width: min(110vmin, 1000px); aspect-ratio: 1.25; translate: -50% 12%; color: #5a0d0d; opacity: .5; }
.fx-yokai .lantern {
  top: 0; left: var(--x); width: 54px; height: 76px; margin-top: calc(110px + var(--y));
  border-radius: 46% / 40%; scale: var(--s); transform-origin: 50% -80px;
  background: repeating-linear-gradient(to bottom, rgba(80, 0, 0, .25) 0 2px, transparent 2px 9px), radial-gradient(circle at 50% 45%, #ffd27a, #e2412c 72%);
  box-shadow: 0 0 40px 6px rgba(255, 120, 40, .45);
  animation: swing var(--d) var(--delay) ease-in-out infinite alternate;
}
.fx-yokai .lantern::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 120px; translate: -50% 0; background: #1a0a0a; }
.fx-yokai .lantern::after { content: ''; position: absolute; left: 10px; right: 10px; top: -4px; bottom: -4px; border-top: 6px solid #1a0a0a; border-bottom: 6px solid #1a0a0a; border-radius: 3px; }
@keyframes swing { from { rotate: -6deg; } to { rotate: 6deg; } }
.fx-yokai .ob-eye { position: absolute; left: 50%; top: 28%; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: #fff; animation: blink 5s infinite; }
.fx-yokai .ob-eye::after { content: ''; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: #000; }
.fx-yokai .ob-tongue { position: absolute; left: 50%; top: 62%; width: 12px; height: 26px; translate: -50% 0; border-radius: 0 0 8px 8px; background: #c4103a; transform-origin: top; animation: tongue 3s ease-in-out infinite; }
@keyframes tongue { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1.2); } }
.fx-yokai .foxfire { left: var(--x); top: var(--y); width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #e8fbff, #5ad1ff 40%, rgba(0, 120, 255, 0) 70%); filter: blur(1px); animation: wisp var(--d) var(--delay) ease-in-out infinite alternate; }
@keyframes wisp { 0% { transform: translate(0, 0) scale(1); opacity: .2; } 50% { opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: .3; } }