/* Animations de combat (animations.js). Tout est préfixé anim- ; seules transform et opacity sont animées.
   Les couleurs viennent de style.css (:root) avec des valeurs de repli. */

.anim-scene {
  position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden;
  contain: layout paint style;
}
.anim-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.anim-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anim-svg * { transform-box: fill-box; transform-origin: center; }
.anim-p { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.anim-p > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.anim-lueur > svg { filter: drop-shadow(0 0 2px rgba(255, 231, 168, .65)); }

/* ——— Calques plein cadre ——— */
.anim-calque { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.anim-voile { background: radial-gradient(ellipse 46% 52% at 50% 50%, transparent 0 28%, rgba(8, 5, 7, .78) 62%, rgba(5, 3, 4, .95) 100%); }
.anim-voile-sang {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(158, 42, 43, .55) 78%, rgba(90, 20, 22, .85) 100%);
}
.anim-eclair-rose { background: radial-gradient(circle at 50% 50%, rgba(232, 166, 201, .55), rgba(122, 46, 110, .2) 40%, transparent 70%); }
.anim-eclair-or { background: radial-gradient(circle at 50% 50%, rgba(255, 240, 200, .75), rgba(240, 217, 160, .25) 35%, transparent 68%); }
.anim-eclair-os { background: radial-gradient(circle at 50% 52%, rgba(255, 250, 240, .6), rgba(237, 227, 209, .12) 40%, transparent 70%); }
.anim-eclair-ombre { background: radial-gradient(circle at 50% 50%, rgba(199, 123, 192, .55), rgba(58, 20, 56, .35) 45%, transparent 72%); }
.anim-eclair-vert { background: radial-gradient(circle at 50% 50%, rgba(196, 232, 130, .7), rgba(79, 122, 42, .3) 40%, transparent 72%); }
.anim-eclair-crit { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .7), rgba(255, 231, 168, .35) 30%, transparent 65%); mix-blend-mode: screen; }

/* Shaina : le rayon vertical du Serment, l'éclipse et l'ombre pourpre */
.anim-rayon {
  inset: 0 auto 0 50%; width: 24px; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(240, 217, 160, 0), rgba(255, 240, 200, .85) 30%, #FFFFFF 50%, rgba(255, 231, 168, .7) 62%, rgba(240, 217, 160, 0));
  box-shadow: 0 0 30px 6px rgba(240, 217, 160, .35);
  will-change: transform, opacity;
}
.anim-rayon--h {
  inset: 50% 0 auto 0; width: auto !important; height: 10px; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(240, 217, 160, 0), rgba(255, 240, 200, .8) 35%, #FFFFFF 50%, rgba(255, 240, 200, .8) 65%, rgba(240, 217, 160, 0));
}
.anim-halo-or { border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 200, .7), rgba(240, 217, 160, .25) 40%, transparent 70%); }
.anim-eclipse {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, var(--anim-aubergine, #3A1438), #12060F 72%);
  box-shadow: 0 0 0 1.5px rgba(208, 123, 200, .8), 0 0 24px 6px rgba(199, 123, 192, .55), 0 0 60px 12px rgba(122, 46, 110, .45);
}
.anim-ombre { border-radius: 50%; background: radial-gradient(circle, rgba(58, 20, 56, .9) 0 28%, rgba(122, 46, 110, .55) 45%, transparent 70%); }

/* Nikolarz : la fiole luit, puis vapeurs */
.anim-fiole > svg { filter: drop-shadow(0 0 6px rgba(157, 203, 94, .6)); }
.anim-vapeur { border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(170, 214, 100, .62), rgba(96, 150, 52, .32) 38%, rgba(60, 100, 30, .1) 58%, transparent 70%); }
.anim-vapeur--gris { background: radial-gradient(circle, rgba(140, 150, 128, .5), rgba(90, 96, 84, .2) 45%, transparent 70%); }
.anim-vapeur--ombre { background: radial-gradient(circle, rgba(122, 46, 110, .55), rgba(58, 20, 56, .25) 45%, transparent 70%); }

/* ——— Chiffres ——— */
.anim-chiffre {
  position: absolute; left: 50%; top: 52%; opacity: 0; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: .1em; line-height: .9; white-space: nowrap;
  color: var(--anim-c, var(--encre, #EDE3D1));
  font-family: var(--titre, "Cormorant Garamond", Georgia, serif);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .75), 0 0 .4em rgba(0, 0, 0, .9), 0 0 .9em color-mix(in srgb, var(--anim-c, #EDE3D1) 45%, transparent);
  will-change: transform, opacity;
}
.anim-val { font-size: clamp(54px, calc(var(--anim-S, 320px) * .3), 220px); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.anim-nom {
  font-family: var(--etiquette, "IM Fell English SC", Georgia, serif);
  font-size: clamp(15px, calc(var(--anim-S, 320px) * .06), 40px); letter-spacing: .06em;
  color: var(--encre, #EDE3D1); opacity: .9;
}
.anim-chiffre--rate .anim-val { font-style: italic; font-weight: 500; font-size: clamp(40px, calc(var(--anim-S, 320px) * .19), 140px); }
.anim-chiffre--rate { text-shadow: 0 2px 0 rgba(0, 0, 0, .75), 0 0 .5em rgba(0, 0, 0, .9); }
.anim-chiffre--crit .anim-val { font-size: clamp(64px, calc(var(--anim-S, 320px) * .38), 260px); }
.anim-crit-mot {
  font-style: italic; font-weight: 600; font-size: clamp(18px, calc(var(--anim-S, 320px) * .075), 52px);
  color: var(--serment, #F0D9A0);
}

/* Coup de l'ennemi : dégâts encaissés, puis dégâts évités */
.anim-chiffre--ennemi, .anim-chiffre--sobre { top: 50%; }
.anim-chiffre--ennemi { text-shadow: 0 2px 0 rgba(0, 0, 0, .8), 0 0 .35em rgba(30, 4, 6, .95), 0 0 .8em rgba(200, 66, 58, .85); }
.anim-ligne { display: grid; justify-items: center; }
.anim-legende {
  font-family: var(--etiquette, "IM Fell English SC", Georgia, serif);
  font-size: clamp(14px, calc(var(--anim-S, 320px) * .055), 36px); letter-spacing: .06em;
  color: var(--encre-att, #A8998A);
}
.anim-ligne--evite { margin-top: .25em; color: var(--serment, #F0D9A0); text-shadow: 0 2px 0 rgba(0, 0, 0, .8), 0 0 .4em rgba(0, 0, 0, .95); }
.anim-ligne--evite .anim-legende { color: var(--encre, #EDE3D1); }
.anim-ligne--evite .anim-val { font-size: clamp(30px, calc(var(--anim-S, 320px) * .14), 100px); }

/* ——— Version sobre (prefers-reduced-motion) : fondu + chiffre ——— */
.anim-sobre-halo { background: radial-gradient(circle at 50% 50%, var(--anim-h, rgba(237, 227, 209, .25)), transparent 65%); }
.anim-sobre-halo--lynn { --anim-h: rgba(208, 123, 200, .32); }
.anim-sobre-halo--gildong, .anim-sobre-halo--shaina { --anim-h: rgba(240, 217, 160, .3); }
.anim-sobre-halo--kealhin { --anim-h: rgba(199, 123, 192, .32); }
.anim-sobre-halo--azzgur { --anim-h: rgba(237, 227, 209, .22); }
.anim-sobre-halo--nikolarz { --anim-h: rgba(157, 203, 94, .3); }
.anim-sobre-halo--cendre { --anim-h: rgba(168, 153, 138, .16); }
.anim-sobre-halo--sang { --anim-h: rgba(200, 66, 58, .38); }