/* animations.css — Cloudless Sky
   All combat animation styles. Pure CSS keyframes only —
   positions and travel distances are set by JS at runtime
   using real portrait coordinates from getBoundingClientRect().
   Depends on: tokens.css */

/* ── STAGE ───────────────────────────────────────────────── */

#anim-stage {
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        var(--z-raised);
  overflow:       hidden;
}

/* All animated elements are position:fixed so they sit relative
   to the viewport, matching getBoundingClientRect() coordinates. */
#anim-stage > * {
  position: fixed;
}

/* ── IMPACT FLASH (shared) ───────────────────────────────── */
/* A quick bright burst centred on the target portrait.
   Size and colour are set per-animation via JS. */

.anim-impact {
  border-radius:   50%;
  transform:       translate(-50%, -50%);
  animation:       impactPulse 0.55s ease-out forwards;
  transform-origin: center;
}

@keyframes impactPulse {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.2); }
  35%  { opacity: 1;   transform: translate(-50%, -50%) scale(1);   }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.8); }
}

/* ── SLASH (Attack) ──────────────────────────────────────── */

.anim-slash {
  height:          4px;
  border-radius:   2px;
  transform-origin: left center;
  /* width, top, left, transform set by JS */
  animation:       slashStrike 0.45s var(--ease-out) forwards;
}

@keyframes slashStrike {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  65%  { clip-path: inset(0 0% 0 0); opacity: 1; }
  100% { clip-path: inset(0 0% 0 0); opacity: 0; }
}

.anim-slash-2 {
  height:          3px;
  border-radius:   2px;
  transform-origin: left center;
  animation:       slashStrike 0.45s var(--ease-out) 60ms forwards;
}

/* Impact X marks */
.anim-slash-mark {
  width:            0;
  height:           0;
  transform:        translate(-50%, -50%);
  animation:        markPop 0.5s ease-out forwards;
}

.anim-slash-mark::before,
.anim-slash-mark::after {
  content:       '';
  position:      absolute;
  width:         32px;
  height:        3px;
  border-radius: 2px;
  background:    #f5e090;
  top:           -1.5px;
  left:          -16px;
}

.anim-slash-mark::before { transform: rotate(45deg);  }
.anim-slash-mark::after  { transform: rotate(-45deg); }

@keyframes markPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

/* ── TRAVELLING PROJECTILE (shared base) ─────────────────── */
/* JS sets --tx/--ty (translate to target) via custom properties. */


@keyframes projectileTravel {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.5); }
  12%  { opacity: 1; }
  80%  { opacity: 1;   transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.3); }
}

/* ── FIREBALL ────────────────────────────────────────────── */


.anim-ember {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #f5a020;
  /* --ex/--ey set per ember by JS */
  animation:     emberFly 0.7s ease-out forwards;
}

@keyframes emberFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ex)), calc(-50% + var(--ey))) scale(0.2); }
}


/* ── FROST BOLT ──────────────────────────────────────────── */


.anim-frost-crystal {
  width:      9px;
  height:     9px;
  background: #c8eeff;
  clip-path:  polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* --cx/--cy/--cr set by JS */
  animation:  crystalShard 0.7s ease-out forwards;
}

@keyframes crystalShard {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(0.2) rotate(var(--cr)); }
}

/* ── WIND GUST ───────────────────────────────────────────── */

.anim-wind-line {
  height:        3px;
  border-radius: 2px;
  /* background, width, top, left set by JS */
  animation:     windSweep 0.7s ease-out forwards;
  transform-origin: left center;
}

@keyframes windSweep {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  18%  { opacity: 0.9; }
  70%  { opacity: 0.7; clip-path: inset(0 0% 0 0); }
  100% { opacity: 0;   clip-path: inset(0 0% 0 0); }
}

.anim-wind-spiral {
  width:         52px;
  height:        52px;
  border:        3px solid transparent;
  border-top-color:   #60c870;
  border-right-color: #90e0a0;
  border-radius: 50%;
  transform:     translate(-50%, -50%);
  animation:     windSpin 0.78s linear forwards;
}

@keyframes windSpin {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  20%  { opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1.2) rotate(320deg); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.5) rotate(420deg); opacity: 0; }
}

/* ── HOLY STRIKE ─────────────────────────────────────────── */

.anim-holy-beam {
  width:          56px;
  transform:      translateX(-50%);
  /* top set to 0, height set to reach target, by JS */
  background:     linear-gradient(180deg, transparent 0%, #fff8a0 25%, #f5d020 65%, transparent 100%);
  transform-origin: top center;
  animation:      holyBeam 0.9s ease-out forwards;
}

@keyframes holyBeam {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.15) scaleY(0); }
  22%  { opacity: 1; transform: translateX(-50%) scaleX(1)    scaleY(0.5); }
  65%  { opacity: 0.9; transform: translateX(-50%) scaleX(1)  scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.3)  scaleY(1); }
}

.anim-holy-ring {
  border-radius: 50%;
  border:        2.5px solid #f5d020;
  transform:     translate(-50%, -50%);
  animation:     holyRing 0.9s ease-out forwards;
}

@keyframes holyRing {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.15); }
  55%  { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.9); }
}


/* ── ENEMY ATTACK ────────────────────────────────────────── */

.anim-claw-group {
  transform: translate(-50%, -50%);
  animation: clawStrike 0.6s var(--ease-out) forwards;
}

@keyframes clawStrike {
  0%   { opacity: 0; transform: translate(calc(-50% + 50px), calc(-50% - 30px)) rotate(-35deg) scale(0.5); }
  30%  { opacity: 1; }
  65%  { transform: translate(-50%, -50%) rotate(0deg) scale(1.05); opacity: 1; }
  100% { transform: translate(calc(-50% - 8px), calc(-50% + 6px)) rotate(4deg); opacity: 0; }
}

.anim-claw-line {
  height:        3px;
  border-radius: 2px;
  margin:        6px 0;
  /* background, width set by JS */
}

.anim-claw-line:nth-child(1) { transform: rotate(-14deg); width: 52px; }
.anim-claw-line:nth-child(2) { transform: rotate(0deg);   width: 68px; }
.anim-claw-line:nth-child(3) { transform: rotate(14deg);  width: 58px; }

/* ── BLIZZARD (Ice) ──────────────────────────────────────── */

.anim-blizzard-shard {
  width:         8px;
  height:        28px;
  background:    linear-gradient(180deg, #ffffff, #a8dcf0 40%, #1e7cbf);
  border-radius: 2px 2px 5px 5px;
  box-shadow:    0 0 6px 2px rgba(100,200,255,0.5);
  /* top, left, --rot, --fall set by JS */
  animation:     blizzardFall var(--fall-dur, 0.8s) ease-in forwards;
}

@keyframes blizzardFall {
  0%   { opacity: 0; transform: rotate(var(--rot)) translateY(-30px); }
  15%  { opacity: 1; }
  85%  { opacity: 1; transform: rotate(var(--rot)) translateY(var(--fall)); }
  100% { opacity: 0; transform: rotate(var(--rot)) translateY(calc(var(--fall) + 12px)); }
}

/* ── THUNDER CLAP (Wind/Lightning) ──────────────────────── */

.anim-lightning-bolt {
  width:         3px;
  border-radius: 2px;
  background:    linear-gradient(180deg, #fff8a0, #c8f020, #fff8a0);
  box-shadow:    0 0 8px 3px rgba(200,240,30,0.8);
  transform-origin: top center;
  /* top, left, height, --angle set by JS */
  animation:     lightningStrike 0.55s ease-out forwards;
}

@keyframes lightningStrike {
  0%   { opacity: 0; transform: rotate(var(--angle)) scaleY(0); }
  15%  { opacity: 1; transform: rotate(var(--angle)) scaleY(0.4); }
  45%  { opacity: 1; transform: rotate(var(--angle)) scaleY(1); }
  65%  { opacity: 0.6; }
  100% { opacity: 0; transform: rotate(var(--angle)) scaleY(1); }
}

.anim-lightning-branch {
  width:         2px;
  height:        28px;
  border-radius: 1px;
  background:    linear-gradient(180deg, #c8f020, transparent);
  box-shadow:    0 0 5px 2px rgba(200,240,30,0.6);
  transform-origin: top center;
  animation:     lightningBranch 0.55s ease-out forwards;
}

@keyframes lightningBranch {
  0%   { opacity: 0; transform: rotate(var(--bangle)) scaleY(0); }
  25%  { opacity: 1; transform: rotate(var(--bangle)) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--bangle)) scaleY(1); }
}

/* ── STONE SPIKE (Earth) ─────────────────────────────────── */

.anim-spike {
  border-radius: 2px 2px 0 0;
  background:    linear-gradient(180deg, #a0784a, #7a5a30 50%, #5a4020);
  transform-origin: bottom center;
  /* left, bottom, width, height, --delay set by JS */
  animation:     spikeRise 0.5s var(--ease-out) var(--delay, 0ms) forwards;
  box-shadow:    2px 0 4px rgba(0,0,0,0.3);
}

@keyframes spikeRise {
  0%   { opacity: 0; transform: scaleY(0); }
  25%  { opacity: 1; transform: scaleY(1.05); }
  55%  { transform: scaleY(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); }
}

.anim-dirt-chunk {
  width:         6px;
  height:        6px;
  background:    #8b6040;
  border-radius: 1px;
  /* --dx/--dy set by JS */
  animation:     dirtFly 0.7s ease-out forwards;
}

@keyframes dirtFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3) rotate(45deg); }
}

/* ── SHADOW BOLT (Dark) ──────────────────────────────────── */


.anim-shadow-tendril {
  width:         3px;
  border-radius: 2px;
  background:    linear-gradient(90deg, rgba(100,40,160,0.8), transparent);
  transform-origin: left center;
  /* top, left, width, --tangle, --delay set by JS */
  animation:     tendrilSnake 0.7s ease-out forwards;
}

@keyframes tendrilSnake {
  0%   { opacity: 0; transform: rotate(var(--tangle)) scaleX(0); }
  20%  { opacity: 0.8; }
  60%  { transform: rotate(var(--tangle)) scaleX(1); opacity: 0.7; }
  100% { opacity: 0; transform: rotate(var(--tangle)) scaleX(1.1); }
}


/* ── INFERNO (Fire) ──────────────────────────────────────── */

.anim-inferno-pillar {
  border-radius: 40% 40% 0 0;
  background:    linear-gradient(180deg, transparent 0%, #fff5a0 15%, #f5a020 40%, #c03000 75%, transparent 100%);
  transform-origin: bottom center;
  animation:     infernoPillar 0.92s ease-out forwards;
}

@keyframes infernoPillar {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.2) scaleY(0); }
  20%  { opacity: 1; transform: translateX(-50%) scaleX(1)   scaleY(0.5); }
  55%  { opacity: 1; transform: translateX(-50%) scaleX(1.1) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.3) scaleY(1.1); }
}

.anim-inferno-ring {
  border-radius: 50%;
  border:        3px solid #f5a020;
  transform:     translate(-50%, -50%);
  animation:     infernoRing 0.85s ease-out forwards;
}

@keyframes infernoRing {
  0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.1); }
  50%  { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2);   }
}

/* ── THORN WALL (Earth) ──────────────────────────────────── */

.anim-thorn {
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation:     thornRise 0.55s var(--ease-out) var(--delay, 0ms) forwards;
}

@keyframes thornRise {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0) rotate(var(--tilt, 0deg)); }
  30%  { opacity: 1; transform: translateX(-50%) scaleY(1.05) rotate(var(--tilt, 0deg)); }
  65%  { transform: translateX(-50%) scaleY(1) rotate(var(--tilt, 0deg)); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1) rotate(var(--tilt, 0deg)); }
}

/* ── SACRED SEAL (Light) ─────────────────────────────────── */

.anim-seal-circle {
  border-radius: 50%;
  border:        2.5px solid #f5d020;
  transform:     translate(-50%, -50%);
  animation:     sealDraw 1.0s ease-out forwards;
}

@keyframes sealDraw {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(-90deg); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1)   rotate(0deg); }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(30deg); }
}

.anim-seal-ray {
  height:          2px;
  border-radius:   1px;
  background:      linear-gradient(90deg, transparent, #f5d020, transparent);
  transform-origin: center;
  animation:       sealRay 0.7s ease-out forwards;
}

@keyframes sealRay {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-angle)) scaleX(0); }
  30%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ray-angle)) scaleX(1); }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-angle)) scaleX(1.4); }
}

/* ── VOID GRASP (Dark) ───────────────────────────────────── */

.anim-void-hand {
  transform-origin: bottom center;
  animation:       voidRise 0.6s var(--ease-out) var(--delay, 0ms) forwards;
}

@keyframes voidRise {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
  25%  { opacity: 1; transform: translateX(-50%) scaleY(1.05); }
  60%  { transform: translateX(-50%) scaleY(1); opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

.anim-void-finger {
  border-radius:   3px 3px 0 0;
  background:      linear-gradient(180deg, #6a20a0, #3a0a60);
  position:        absolute;
  bottom:          100%;
  transform-origin: bottom center;
  animation:       voidFinger 0.6s var(--ease-out) var(--delay, 0ms) forwards;
}

@keyframes voidFinger {
  0%   { opacity: 0; transform: scaleY(0); }
  30%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; }
}

.anim-void-pulse {
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(100,20,160,0.8), transparent 65%);
  transform:     translate(-50%, -50%);
  animation:     voidPulse 0.5s ease-out forwards;
}

@keyframes voidPulse {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2);   }
}

/* ── EMBER RAIN (Fire) ───────────────────────────────────── */

.anim-ember-drop {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    radial-gradient(circle, #fff5a0, #f5a020);
  box-shadow:    0 0 6px 2px rgba(240,120,0,0.6);
  animation:     emberDrop var(--drop-dur, 0.6s) ease-in var(--drop-delay, 0ms) forwards;
}

@keyframes emberDrop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scaleX(0.8); }
  15%  { opacity: 1; }
  80%  { opacity: 1; transform: translate(-50%, calc(-50% + var(--drop-dist))) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--drop-dist) + 10px)) scale(0.3); }
}

/* ── GLACIAL LANCE (Ice) ─────────────────────────────────── */

.anim-glacial-lance {
  width:         14px;
  border-radius: 3px 3px 8px 8px;
  background:    linear-gradient(180deg, #ffffff, #80d4f0 30%, #1060a0);
  box-shadow:    0 0 14px 5px rgba(80,200,255,0.7);
  transform-origin: top center;
  animation:     lanceDrive var(--lance-dur, 0.5s) var(--ease-out) forwards;
}

@keyframes lanceDrive {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0) rotate(var(--lance-angle)); }
  20%  { opacity: 1; transform: translateX(-50%) scaleY(0.5) rotate(var(--lance-angle)); }
  65%  { opacity: 1; transform: translateX(-50%) scaleY(1) rotate(var(--lance-angle)); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.05) rotate(var(--lance-angle)); }
}

/* ── CYCLONE (Wind) ──────────────────────────────────────── */

.anim-cyclone-ring {
  border-radius: 50%;
  border:        2.5px solid rgba(100,220,130,0.8);
  transform:     translate(-50%, -50%) scale(0);
  animation:     cycloneRing var(--cyc-dur, 0.7s) ease-out var(--cyc-delay, 0ms) forwards;
}

@keyframes cycloneRing {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.1) rotate(0deg); }
  60%  { opacity: 0.7; transform: translate(-50%,-50%) scale(1)   rotate(270deg); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.6) rotate(400deg); }
}

.anim-cyclone-debris {
  width:         5px;
  height:        5px;
  border-radius: 1px;
  background:    #90e0a0;
  animation:     cycloneDebris 0.7s ease-out forwards;
}

@keyframes cycloneDebris {
  0%   { opacity: 1; transform: translate(-50%,-50%) rotate(var(--dangle)) translateX(0px); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(calc(var(--dangle) + 360deg)) translateX(var(--dradius)); }
}

/* ── ROCKSLIDE (Earth) ───────────────────────────────────── */

.anim-boulder {
  border-radius: 40% 50% 45% 55%;
  background:    radial-gradient(circle at 35% 35%, #c0905a, #8b5a2b 55%, #5a3a18);
  box-shadow:    2px 3px 6px rgba(0,0,0,0.4);
  animation:     boulderFall var(--b-dur, 0.55s) ease-in var(--b-delay, 0ms) forwards;
}

@keyframes boulderFall {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(0deg) scale(0.5); }
  15%  { opacity: 1; }
  80%  { opacity: 1; transform: translate(-50%, calc(-50% + var(--b-dist))) rotate(var(--b-spin)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--b-dist) + 12px)) rotate(var(--b-spin)) scale(0.8); }
}

/* ── RADIANCE (Light) ────────────────────────────────────── */

.anim-radiance-burst {
  border-radius: 50%;
  background:    radial-gradient(circle, #ffffff, #fff8a0 25%, rgba(255,240,100,0.4) 55%, transparent 70%);
  transform:     translate(-50%,-50%);
  animation:     radianceBurst 0.65s ease-out forwards;
}

@keyframes radianceBurst {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.1); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}

.anim-radiance-ray {
  height:          2px;
  border-radius:   1px;
  background:      linear-gradient(90deg, rgba(255,240,100,0.9), transparent);
  transform-origin: left center;
  animation:       radianceRay 0.65s ease-out forwards;
}

@keyframes radianceRay {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--ray)) scaleX(0); }
  25%  { opacity: 1; transform: translate(-50%,-50%) rotate(var(--ray)) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--ray)) scaleX(1.5); }
}

/* ── ECLIPSE (Dark) ──────────────────────────────────────── */

.anim-eclipse-disc {
  border-radius: 50%;
  background:    radial-gradient(circle, #1a0530 30%, #4a1a80 65%, transparent 80%);
  transform:     translate(-50%,-50%);
  animation:     eclipseExpand 0.8s ease-out forwards;
}

@keyframes eclipseExpand {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.1); }
  25%  { opacity: 1; transform: translate(-50%,-50%) scale(0.8); }
  70%  { opacity: 0.85; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); }
}

.anim-eclipse-ring {
  border-radius: 50%;
  border:        2px solid rgba(140,60,220,0.7);
  transform:     translate(-50%,-50%);
  animation:     eclipseRing 0.8s ease-out forwards;
}

@keyframes eclipseRing {
  0%   { opacity: 0.8; transform: translate(-50%,-50%) scale(0.2); }
  60%  { opacity: 0.5; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(2);   }
}


/* ── MAGMA SURGE (Fire ultimate) ─────────────────────────── */

.anim-magma-crack {
  height:        4px;
  border-radius: 2px;
  background:    linear-gradient(90deg, transparent, #ff6010, #ff8000, transparent);
  box-shadow:    0 0 8px 3px rgba(255,80,0,0.6);
  transform-origin: left center;
  animation:     magmaCrack 0.6s ease-out forwards;
}

@keyframes magmaCrack {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  20%  { opacity: 1; }
  70%  { clip-path: inset(0 0% 0 0); opacity: 1; }
  100% { opacity: 0; }
}

.anim-magma-geyser {
  border-radius: 30% 30% 0 0;
  background:    linear-gradient(180deg, #fff5a0 0%, #ff8000 30%, #c03000 70%, transparent);
  transform-origin: bottom center;
  box-shadow:    0 0 20px 8px rgba(255,80,0,0.5);
  animation:     magmaGeyser 0.7s var(--ease-out) var(--delay,0ms) forwards;
}

@keyframes magmaGeyser {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0) scaleX(0.3); }
  25%  { opacity: 1; transform: translateX(-50%) scaleY(1.05) scaleX(1); }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.1) scaleX(1.2); }
}

/* ── ABSOLUTE ZERO (Ice ultimate) ────────────────────────── */

.anim-freeze-shell {
  border-radius: 50%;
  border:        3px solid #a8dcf0;
  background:    rgba(168, 220, 240, 0.15);
  transform:     translate(-50%, -50%);
  box-shadow:    0 0 20px 8px rgba(80,200,255,0.4), inset 0 0 20px rgba(80,200,255,0.2);
  animation:     freezeShell 0.7s ease-out forwards;
}

@keyframes freezeShell {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.1); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  65%  { opacity: 0.9; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); }
}

/* ── STORM OF AGES (Wind ultimate) ───────────────────────── */

.anim-storm-band {
  height:        6px;
  border-radius: 3px;
  background:    linear-gradient(90deg, transparent, rgba(100,220,130,0.9), rgba(200,255,200,0.8), transparent);
  transform-origin: left center;
  animation:     stormBand 0.6s ease-out forwards;
}

@keyframes stormBand {
  0%   { opacity: 0; transform: translate(-4px,-50%) rotate(var(--sangle)) scaleX(0); }
  20%  { opacity: 1; }
  70%  { clip-path: inset(0); opacity: 0.9; transform: translate(-4px,-50%) rotate(var(--sangle)) scaleX(1); }
  100% { opacity: 0; transform: translate(-4px,-50%) rotate(var(--sangle)) scaleX(1.1); }
}

/* ── WORLD BREAKER (Earth ultimate) ──────────────────────── */

.anim-fault-line {
  height:        6px;
  border-radius: 3px;
  background:    linear-gradient(90deg, transparent, #8b5a2b, #c09050, transparent);
  box-shadow:    0 2px 8px rgba(100,60,20,0.6);
  transform-origin: left center;
  animation:     faultLine 0.65s ease-out forwards;
}

@keyframes faultLine {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  15%  { opacity: 1; }
  75%  { clip-path: inset(0 0% 0 0); opacity: 1; }
  100% { opacity: 0; }
}

.anim-tectonic-slab {
  border-radius: 3px 3px 0 0;
  background:    linear-gradient(180deg, #c09050, #8b5a2b 40%, #5a3a18);
  transform-origin: bottom center;
  box-shadow:    3px 0 8px rgba(0,0,0,0.4);
  animation:     tectonicRise 0.65s var(--ease-out) var(--delay,0ms) forwards;
}

@keyframes tectonicRise {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
  25%  { opacity: 1; transform: translateX(-50%) scaleY(1.05); }
  65%  { transform: translateX(-50%) scaleY(1); opacity: 1; }
  100% { opacity: 0; }
}

/* ── DIVINE JUDGMENT (Light ultimate) ───────────────────── */

.anim-judgment-beam {
  transform:      translateX(-50%);
  background:     linear-gradient(180deg, transparent, #ffffff 10%, #fff8a0 40%, #f5d020 70%, transparent);
  transform-origin: top center;
  box-shadow:     0 0 40px 15px rgba(255,240,100,0.5);
  animation:      judgmentBeam 0.8s ease-out forwards;
}

@keyframes judgmentBeam {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.1) scaleY(0); }
  20%  { opacity: 1; transform: translateX(-50%) scaleX(1)   scaleY(0.6); }
  60%  { opacity: 1; transform: translateX(-50%) scaleX(1.2) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.4) scaleY(1); }
}

/* ── OBLIVION (Dark ultimate) ────────────────────────────── */

.anim-oblivion-void {
  border-radius: 50%;
  background:    radial-gradient(circle, #000000 20%, #1a0530 50%, transparent 75%);
  transform:     translate(-50%, -50%);
  box-shadow:    0 0 40px 20px rgba(60,0,120,0.6);
  animation:     oblivionVoid 0.9s ease-out forwards;
}

@keyframes oblivionVoid {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  20%  { opacity: 1; transform: translate(-50%,-50%) scale(0.6); }
  65%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }
}

.anim-oblivion-ring {
  border-radius: 50%;
  border:        3px solid rgba(120,40,220,0.8);
  transform:     translate(-50%,-50%);
  box-shadow:    0 0 12px 4px rgba(100,20,200,0.5);
  animation:     oblivionRing 0.9s ease-out forwards;
}

@keyframes oblivionRing {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.1); }
  50%  { opacity: 0.7; transform: translate(-50%,-50%) scale(1.05); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(2.2); }
}

/* ── THORN SKIN spikes ───────────────────────────────────── */
.anim-thorn {
  position:   fixed;
  width:      4px;
  height:     0px;
  background: linear-gradient(to top, #2a7a2a, #66cc44);
  transform-origin: bottom center;
  transform:  translate(-50%, -50%) rotate(var(--thorn-angle, 0deg));
  animation:  thornSpike 0.5s ease-out forwards;
  border-radius: 2px 2px 0 0;
}

@keyframes thornSpike {
  0%   { height: 0;   opacity: 1; }
  60%  { height: 40px; opacity: 1; }
  100% { height: 40px; opacity: 0; }
}

/* ── FLOATING HIT LABELS ─────────────────────────────────── */

.anim-float-label {
  position:       fixed;
  font-family:    var(--font-display);
  font-weight:    700;
  pointer-events: none;
  z-index:        var(--z-hud-label);
  white-space:    nowrap;
  transform:      translateX(-50%);
  animation:      float-label 1.4s ease-out forwards;
}

@keyframes float-label {
  0%   { opacity: 0;   transform: translateX(-50%) translateY(0)    scale(0.5); }
  15%  { opacity: 1;   transform: translateX(-50%) translateY(-10px) scale(1.2); }
  40%  { opacity: 1;   transform: translateX(-50%) translateY(-24px) scale(1.0); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-60px) scale(0.9); }
}