/*   CSS FILE HEADER #
 *
 *   File:         [fx-dano.css]
 *   Author(s):    ['Pedro H.F Matias']
 *   Date:         ['06.10.2026']
 *   Version:      ['0.4.0']
 *   Description:  ['DOM veils and flashes of the cast animations in js/fx/dano.js (opacity driven by GSAP).']
 */

/* ---------- flashes: light burst over the card, centred on (--x, --y) ---------- */
.fxd-clarao {
    --c1: rgba(255, 255, 245, .95);
    --c2: rgba(255, 240, 200, .3);
    background: radial-gradient(circle at var(--x, 50%) var(--y, 45%), var(--c1), var(--c2) 40%, transparent 78%);
    mix-blend-mode: screen;
}
.fxd-clarao.fxd-amarelo { --c1: rgba(255, 250, 210, 1); --c2: rgba(255, 225, 80, .4); }
.fxd-clarao.fxd-violeta { --c1: rgba(235, 225, 255, .9); --c2: rgba(170, 140, 255, .35); }
.fxd-clarao.fxd-gelo { --c1: rgba(235, 250, 255, .95); --c2: rgba(140, 210, 255, .4); }
.fxd-clarao.fxd-branco { --c1: rgba(255, 255, 255, 1); --c2: rgba(228, 236, 255, .6); }
.fxd-clarao.fxd-ouro { --c1: rgba(255, 252, 240, 1); --c2: rgba(255, 215, 120, .45); }
/* light paper: the flash becomes a tinted glow */
body:not([data-tom="escuro"]) .fxd-clarao { mix-blend-mode: multiply; --c1: rgba(255, 236, 190, .9); --c2: rgba(240, 210, 150, .3); }
body:not([data-tom="escuro"]) .fxd-clarao.fxd-amarelo { --c1: rgba(255, 215, 70, .75); --c2: rgba(255, 230, 140, .3); }
body:not([data-tom="escuro"]) .fxd-clarao.fxd-violeta { --c1: rgba(190, 160, 255, .65); --c2: rgba(220, 205, 255, .3); }
body:not([data-tom="escuro"]) .fxd-clarao.fxd-gelo { --c1: rgba(150, 210, 255, .7); --c2: rgba(200, 235, 255, .3); }
body:not([data-tom="escuro"]) .fxd-clarao.fxd-branco { --c1: rgba(170, 182, 215, .6); --c2: rgba(215, 222, 240, .3); }
body:not([data-tom="escuro"]) .fxd-clarao.fxd-ouro { --c1: rgba(255, 205, 90, .7); --c2: rgba(255, 228, 160, .3); }

/* ---------- veils: tint the card while the effect plays ---------- */
.fxd-brasa {
    box-shadow: inset 0 -46px 60px -18px rgba(255, 100, 20, .6), inset 0 0 22px rgba(255, 140, 40, .25), 0 0 34px rgba(255, 110, 25, .45);
    background: linear-gradient(0deg, rgba(255, 90, 20, .22), transparent 55%);
}
.fxd-acido {
    box-shadow: inset 0 0 36px 6px rgba(120, 220, 40, .4), 0 0 22px rgba(120, 220, 40, .3);
    background: linear-gradient(180deg, rgba(120, 220, 40, .16), transparent 70%);
}
.fxd-gelo {
    box-shadow: inset 0 0 0 1.5px rgba(225, 248, 255, .85), inset 0 0 46px 10px rgba(150, 210, 255, .55), 0 0 24px rgba(150, 210, 255, .4);
    background: linear-gradient(160deg, rgba(225, 245, 255, .35), transparent 35%, transparent 65%, rgba(205, 235, 255, .35));
    backdrop-filter: saturate(.35) brightness(1.08) hue-rotate(-12deg);
}
.fxd-necro {
    background: radial-gradient(ellipse at 50% 55%, rgba(10, 22, 12, .1), rgba(6, 12, 8, .72) 100%);
    box-shadow: inset 0 0 40px 10px rgba(30, 70, 40, .55);
    backdrop-filter: grayscale(.85) brightness(.75);
}
.fxd-alvo {
    box-shadow: inset 0 0 0 1px rgba(240, 245, 255, .9), inset 0 0 50px 8px rgba(205, 220, 255, .45), 0 0 46px rgba(220, 230, 255, .55);
}
.fxd-puro {
    box-shadow: inset 0 0 0 1px rgba(255, 238, 190, .9), inset 0 0 46px 10px rgba(255, 210, 115, .42), 0 0 42px rgba(255, 220, 140, .5);
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 250, 235, .3), transparent 70%);
}
/* Radiante: the card blinded by white light, brightest under the pillar */
.fxd-cegar { background: radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 1), rgba(240, 245, 255, .92) 45%, rgba(220, 230, 255, .7)); }
.fxd-cura {
    box-shadow: inset 0 0 42px 8px rgba(110, 220, 140, .45), inset 0 -60px 60px -30px rgba(255, 220, 130, .35), 0 0 30px rgba(110, 220, 140, .35);
}
body:not([data-tom="escuro"]) .fxd-brasa,
body:not([data-tom="escuro"]) .fxd-acido,
body:not([data-tom="escuro"]) .fxd-alvo,
body:not([data-tom="escuro"]) .fxd-puro,
body:not([data-tom="escuro"]) .fxd-cura { mix-blend-mode: multiply; }

/* gilded sheen for Puro: a white-gold band sweeping across the card */
.fxd-puro { overflow: hidden; }
.fxd-puro > i {
    position: absolute; inset: -20% -60%; display: block;
    background: linear-gradient(115deg, transparent 36%, rgba(255, 215, 120, .35) 44%, rgba(255, 252, 240, .65) 50%, rgba(255, 215, 120, .35) 56%, transparent 64%);
    mix-blend-mode: screen;
}
body:not([data-tom="escuro"]) .fxd-puro > i { mix-blend-mode: multiply; opacity: .45; }

/* ice cracks (Gélido), traced with DrawSVG */
.fxd-racha { overflow: hidden; }
.fxd-racha path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fxd-racha .racha path { stroke: rgba(240, 252, 255, .95); stroke-width: 1.3; }
.fxd-racha .racha-brilho path { stroke: rgba(130, 200, 255, .75); stroke-width: 5; filter: blur(2px); }
body:not([data-tom="escuro"]) .fxd-racha .racha path { stroke: rgba(40, 90, 140, .9); }
body:not([data-tom="escuro"]) .fxd-racha .racha-brilho path { stroke: rgba(90, 160, 220, .5); }