/* ══════════════════════════════════════════════════════════════════════
   USERNAME EFFECTS — per-letter staggered animations.
   ══════════════════════════════════════════════════════════════════════
   Each <span class="eff-X"> has had every character wrapped in a
   <span class="ec" style="--i:N"> by username_effects.js. CSS targets
   .eff-X .ec with animation-delay: calc(var(--i) * Δs) for stagger.

   This produces *genuinely* different motion per effect:

     wave       — vertical sine bob                  (letters bounce in a wave)
     fire       — per-letter scale-Y flicker         (independent flames)
     glitch     — random per-letter horizontal jolt  + RGB chromatic shadow
     rainbow    — each letter a different hue        + global hue-rotate
     toxic      — cascading drip-down per letter
     blood      — cascading drip-down + red glow
     skull      — cascading opacity phase            (ghost passes through)
     gold       — shine sweeps L→R, letters brighten in sequence
     frost      — cascading freeze (icy → bright)
     sparkle    — staggered per-letter twinkle (scale + flash)
     electric   — random irregular per-letter flicker (broken neon)
     moonlight  — synchronised soft halo breathing
     galaxy     — per-letter hue mapped to position + brightness pulse
     diamond    — per-letter hue rotation cascade
     confetti   — bouncy + tilted, each letter a different bright colour
   ══════════════════════════════════════════════════════════════════════ */

[class^="eff-"], [class*=" eff-"] {
    position: relative;
    font-weight: 700;
    --len: 1;
}
.eff-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The per-letter span. inline-block so transforms work without affecting flow.
   `white-space: pre` keeps spaces visible. */
.eff-frost .ec, .eff-sparkle .ec, .eff-moonlight .ec, .eff-electric .ec,
.eff-wave .ec, .eff-fire .ec, .eff-toxic .ec, .eff-rainbow .ec,
.eff-skull .ec, .eff-glitch .ec, .eff-blood .ec, .eff-gold .ec,
.eff-galaxy .ec, .eff-diamond .ec, .eff-confetti .ec {
    display: inline-block;
    position: relative;
    white-space: pre;
    will-change: transform, color, opacity, filter;
}

/* ── 1. ❄️ Frost — cascading freeze (icy crystalline sweep) ─────── */
.eff-frost .ec {
    color: #5eb8e8;
    text-shadow: 0 0 4px #a8d8f0;
    animation: ec-frost 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.10s);
}
@keyframes ec-frost {
    0%, 75%, 100% { color: #5eb8e8; text-shadow: 0 0 4px #a8d8f0; }
    25%, 45%      { color: #ffffff; text-shadow: 0 0 8px #ffffff, 0 0 18px #5eb8e8; }
}

/* ── 2. ✨ Sparkle — per-letter twinkle (scale + flash) plus actual
                     ✨ glyphs popping in around the name at random ─── */
.eff-sparkle .ec {
    position: relative;
    color: #ffb347;
    text-shadow: 0 0 4px #ffd54a;
    animation: ec-sparkle 1.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.13s);
}
.eff-sparkle .ec:nth-child(3n+1)::before,
.eff-sparkle .ec:nth-child(3n+2)::after {
    content: '✨';
    position: absolute;
    font-size: .55em;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    filter: drop-shadow(0 0 3px #ffd54a);
    animation: ec-sparkle-twk 2.6s ease-in-out infinite;
}
.eff-sparkle .ec:nth-child(3n+1)::before {
    top: -.55em;
    left: -.3em;
    animation-delay: calc(var(--i) * 0.29s);
}
.eff-sparkle .ec:nth-child(3n+2)::after {
    bottom: -.3em;
    right: -.3em;
    animation-delay: calc(var(--i) * 0.43s + .9s);
}
@keyframes ec-sparkle {
    0%, 60%, 100% { color: #ffb347; transform: scale(1); text-shadow: 0 0 4px #ffd54a; }
    25%           { color: #ffffff; transform: scale(1.18); text-shadow: 0 0 10px #ffffff, 0 0 18px #ffd54a; }
}
@keyframes ec-sparkle-twk {
    0%, 100% { opacity: 0;  transform: scale(.3) rotate(0deg); }
    25%      { opacity: 1;  transform: scale(1)  rotate(80deg); }
    55%      { opacity: .6; transform: scale(.75) rotate(170deg); }
    80%      { opacity: 0;  transform: scale(.3) rotate(260deg); }
}

/* ── 3. 🌙 Moonlight — synchronised silvery breathing halo with a
                       real glowing 🌙 hovering above the first letter ── */
.eff-moonlight .ec {
    position: relative;
    color: #c8d8f0;
    text-shadow:
        0 0 5px rgba(220,235,255,.55),
        0 0 14px rgba(170,205,255,.3);
    animation: ec-moon 4.2s ease-in-out infinite;
    /* No stagger — moonlight is calm and uniform. */
}
@keyframes ec-moon {
    0%, 100% { color: #c8d8f0;
               text-shadow: 0 0 4px rgba(200,216,240,.5),
                            0 0 10px rgba(160,195,250,.22);
               opacity: .9; }
    50%      { color: #ffffff;
               text-shadow: 0 0 8px rgba(255,255,255,.95),
                            0 0 18px rgba(190,215,255,.7),
                            0 0 32px rgba(150,185,240,.4);
               opacity: 1; }
}
.eff-moonlight .ec:first-child::before {
    content: '🌙';
    position: absolute;
    bottom: 92%;
    left: 50%;
    font-size: .7em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    animation: ec-moon-orb 4.2s ease-in-out infinite;
}
@keyframes ec-moon-orb {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-6deg);
               filter: drop-shadow(0 0 3px rgba(255,255,230,.55))
                       drop-shadow(0 0 7px rgba(220,230,255,.3)); }
    50%      { transform: translateX(-50%) translateY(-2px) rotate( 6deg);
               filter: drop-shadow(0 0 6px rgba(255,255,230,.95))
                       drop-shadow(0 0 14px rgba(200,220,255,.65))
                       drop-shadow(0 0 22px rgba(170,200,255,.35)); }
}

/* ── 4. ⚡ Electric — broken-neon-bulb random per-letter flicker ── */
.eff-electric .ec {
    color: #00e5ff;
    text-shadow: 0 0 5px #00e5ff, 0 0 10px #00b8d4;
    animation: ec-electric 3.7s steps(1, end) infinite;
    /* Use a fractional stagger that doesn't divide evenly so it feels random. */
    animation-delay: calc(var(--i) * -0.41s);
}
@keyframes ec-electric {
    0%, 6%, 9%, 17%, 21%, 32%, 36%, 51%, 55%, 78%, 82%, 100% {
        opacity: 1; color: #00e5ff;
    }
    7%, 18%   { opacity: .25; }
    33%       { opacity: .65; color: #ffffff; }
    52%, 79%  { opacity: .15; color: #006c7a; }
    81%       { opacity: 1;   color: #ffffff; }
}

/* ── 5. 🌊 Wave — letters bob in a sine wave; a real 🌊 emoji
                  rolls across the name from left to right, bobbing
                  twice as it travels (like a real ocean wave). ── */
.eff-wave {
    display: inline-block;
}
.eff-wave .ec {
    color: #00bcd4;
    text-shadow: 0 0 4px rgba(0,188,212,.6);
    animation: ec-wave 1.3s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
}
.eff-wave::before {
    content: '🌊';
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    filter: drop-shadow(0 0 4px rgba(0,188,212,.7));
    animation: ec-wave-roll 3.6s linear infinite;
    z-index: 2;
}
@keyframes ec-wave {
    0%, 100% { transform: translateY(0); color: #00bcd4; }
    50%      { transform: translateY(-4px); color: #80deea; text-shadow: 0 0 8px #80deea; }
}
@keyframes ec-wave-roll {
    0%   { left:  -8%; transform: translateY(0);    opacity: 0; }
    8%   { opacity: 1; }
    25%  { transform: translateY(-3px); }
    50%  { transform: translateY( 0); }
    75%  { transform: translateY(-3px); }
    92%  { opacity: 1; }
    100% { left: 100%; transform: translateY(0);    opacity: 0; }
}

/* ── 6. 🔥 Fire — per-letter scale-Y + colour flicker, plus a row
                  of real 🔥 glyphs flickering under each letter ── */
.eff-fire .ec {
    position: relative;
    color: #ff5500;
    text-shadow: 0 0 5px #ff8800, 0 -1px 4px #ffaa00;
    transform-origin: 50% 100%;
    animation: ec-fire 0.55s ease-in-out infinite alternate;
    /* Irrational-ish stagger so flames don't sync visually. */
    animation-delay: calc(var(--i) * -0.17s);
}
.eff-fire .ec::after {
    content: '🔥';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: -.45em;
    font-size: .55em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    filter: drop-shadow(0 -1px 4px #ff6600) drop-shadow(0 0 6px rgba(255,140,0,.55));
    transform-origin: 50% 100%;
    animation: ec-fire-flame .5s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.19s);
}
@keyframes ec-fire {
    0%   { transform: scaleY(1)    translateY(0);    color: #ff3300; }
    100% { transform: scaleY(1.18) translateY(-1px); color: #ffb000; text-shadow: 0 0 8px #ffaa00, 0 -2px 6px #ff6600; }
}
@keyframes ec-fire-flame {
    0%   { transform: translateX(-50%) scale(.7)  scaleY(.85); opacity: .65; }
    100% { transform: translateX(-50%) scale(.95) scaleY(1.15); opacity: 1; }
}

/* ── 7. ☠️ Toxic — cascading drip-down per letter, with a single
                    ☣️ biohazard rotating slowly behind the name. ── */
.eff-toxic {
    display: inline-block;
    padding: 0 6px;
}
.eff-toxic::before {
    content: '☣️';
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    line-height: 1;
    opacity: .35;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(57,255,20,.6));
    z-index: 0;
    animation: ec-toxic-spin 5s linear infinite;
}
.eff-toxic .ec {
    position: relative;
    z-index: 1;
    color: #39ff14;
    text-shadow: 0 0 3px #1a8a00, 0 0 8px rgba(57,255,20,.5);
    animation: ec-toxic 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.12s);
}
@keyframes ec-toxic {
    0%, 70%, 100% { transform: translateY(0)    scaleY(1);    color: #39ff14; }
    30%           { transform: translateY(3px)  scaleY(1.25); color: #aaff66;
                    text-shadow: 0 0 6px #39ff14, 0 4px 8px rgba(57,255,20,.7); }
    45%           { transform: translateY(0)    scaleY(.9);   color: #39ff14; }
}
@keyframes ec-toxic-spin {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── 8. 🌈 Rainbow — each letter holds a flowing rainbow gradient
                     (not just a single hue), staggered per letter so
                     the spectrum cascades across the name. ── */
.eff-rainbow .ec {
    background: linear-gradient(90deg,
        #ff3b3b, #ff9a3b, #fff03b, #46e36b, #46c1ff, #b35bff, #ff3b3b);
    background-size: 400% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 3px rgba(255,255,255,.35));
    animation: ec-rainbow 2.4s linear infinite;
    animation-delay: calc(var(--i) * -0.10s);
}
@keyframes ec-rainbow {
    0%   { background-position:   0% center; }
    100% { background-position: 400% center; }
}

/* ── 9. 💀 Skull — cascading opacity dip (ghost passes through) ── */
.eff-skull .ec {
    color: #cfd6cf;
    text-shadow: 0 0 6px rgba(200,220,200,.4);
    animation: ec-skull 3.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.16s);
}
@keyframes ec-skull {
    0%, 70%, 100% { opacity: 1;   color: #cfd6cf; }
    35%           { opacity: .15; color: #ffffff; text-shadow: 0 0 12px #ffffff; }
}

/* ── 10. 🎮 Glitch — per-letter horizontal jolt + RGB chromatic shadow */
.eff-glitch .ec {
    color: #f0fbff;
    text-shadow: -1.5px 0 0 #ff0066, 1.5px 0 0 #00ffff;
    animation: ec-glitch 2.8s steps(1, end) infinite;
    animation-delay: calc(var(--i) * -0.23s);
}
@keyframes ec-glitch {
    0%, 80%, 100% { transform: none;
                    text-shadow: -1.5px 0 0 #ff0066, 1.5px 0 0 #00ffff; }
    82%           { transform: translateX(-3px) skewX(-8deg);
                    text-shadow: -3px 0 0 #ff0066, 3px 0 0 #00ffff; }
    85%           { transform: translateX( 3px);
                    text-shadow:  3px 0 0 #ff0066, -3px 0 0 #00ffff; }
    88%           { transform: translateX(-1px);
                    text-shadow: -2px 0 0 #ffff00, 2px 0 0 #00ffff; }
    91%           { transform: none; }
}

/* ── 11. 🩸 Blood — crimson bleed: each letter pulses red and a
                     bead of blood grows beneath, stretches, drips
                     off, and fades. No bouncing. ── */
.eff-blood .ec {
    position: relative;
    color: #cc0000;
    text-shadow: 0 0 4px rgba(204,0,0,.7), 0 1px 3px #7a0000;
    animation: ec-blood 3s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.18s);
}
@keyframes ec-blood {
    0%, 100% { color: #b30000; text-shadow: 0 0 4px rgba(204,0,0,.7), 0 1px 3px #7a0000; }
    50%      { color: #ff2020; text-shadow: 0 0 8px #cc0000, 0 2px 6px #7a0000; }
}
.eff-blood .ec::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3px;
    height: 0;
    margin-left: -1.5px;
    background: linear-gradient(180deg, #ff2020 0%, #b30000 60%, #5a0000 100%);
    border-radius: 0 0 60% 60% / 0 0 100% 100%;
    box-shadow: 0 0 3px rgba(204,0,0,.6);
    pointer-events: none;
    animation: ec-blood-drip 3.4s ease-in infinite;
    animation-delay: calc(var(--i) * 0.22s);
}
@keyframes ec-blood-drip {
    0%   { height: 0;   bottom: 0;    opacity: 1; }
    30%  { height: 6px;  bottom: 0;    opacity: 1; }
    55%  { height: 9px;  bottom: -8px; opacity: .9; }
    80%  { height: 5px;  bottom: -22px; opacity: 0; }
    100% { height: 0;   bottom: -22px; opacity: 0; }
}

/* ── 12. 👑 Gold — shine sweep, letters brighten in sequence,
                    plus a tiny crown perched on the first letter ──── */
.eff-gold .ec {
    color: #d4a017;
    text-shadow: 0 0 4px rgba(255,215,0,.5);
    animation: ec-gold 2.8s ease-in-out infinite;
    /* Long stagger so the shine takes time to traverse. */
    animation-delay: calc(var(--i) * 0.12s);
}
.eff-gold .ec:first-child {
    position: relative;
}
.eff-gold .ec:first-child::before {
    content: '👑';
    position: absolute;
    bottom: 70%;
    left: 50%;
    transform: translateX(-50%);
    font-size: .7em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
    animation: ec-gold-crown 2.8s ease-in-out infinite;
}
@keyframes ec-gold {
    0%, 60%, 100% { color: #d4a017; text-shadow: 0 0 4px rgba(255,215,0,.5); }
    25%           { color: #fffacd; text-shadow: 0 0 12px #ffffff, 0 0 22px #ffd700; }
    40%           { color: #ffd700; text-shadow: 0 0 6px #ffd700; }
}
@keyframes ec-gold-crown {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-3deg); }
    50%      { transform: translateX(-50%) translateY(-1px) rotate( 3deg); }
}

/* ── 13. 🪐 Galaxy — clean cosmic palette (no glow) with a real 🪐
                     hovering above the first letter and ✦ stars
                     twinkling on every third letter ── */
.eff-galaxy .ec {
    position: relative;
    color: hsl(calc(240deg + var(--i) * 22deg), 80%, 65%);
    animation: ec-galaxy 3.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.18s);
}
@keyframes ec-galaxy {
    0%, 100% { filter: brightness(.85); }
    50%      { filter: brightness(1.35); }
}
.eff-galaxy .ec:first-child::before {
    content: '🪐';
    position: absolute;
    bottom: 95%;
    left: 50%;
    font-size: .7em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    animation: ec-galaxy-planet 5s ease-in-out infinite;
}
@keyframes ec-galaxy-planet {
    0%, 100% { transform: translateX(-50%) translateY(0)    rotate(-8deg); }
    50%      { transform: translateX(-50%) translateY(-2px) rotate( 8deg); }
}
.eff-galaxy .ec:nth-child(3n+2)::after {
    content: '✦';
    position: absolute;
    top: -.45em;
    right: -.25em;
    font-size: .42em;
    line-height: 1;
    color: #fff;
    -webkit-text-fill-color: #fff;
    pointer-events: none;
    text-shadow: 0 0 3px #fff;
    opacity: 0;
    animation: ec-galaxy-star 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.31s);
}
@keyframes ec-galaxy-star {
    0%, 100% { opacity: 0; transform: scale(.3); }
    50%      { opacity: 1; transform: scale(1); }
}

/* ── 14. 💎 Diamond — per-letter hue rotation cascade plus white
                       sparkle stars catching the light at random
                       positions on the letters (diamond facets). ── */
.eff-diamond .ec {
    color: hsl(calc(var(--i) * 35deg), 70%, 72%);
    text-shadow: 0 0 4px currentColor;
    animation: ec-diamond 2.8s linear infinite;
    animation-delay: calc(var(--i) * -0.14s);
}
@keyframes ec-diamond {
    to { filter: hue-rotate(360deg) drop-shadow(0 0 3px rgba(255,255,255,.5)); }
}
.eff-diamond .ec:nth-child(2n+1)::before,
.eff-diamond .ec:nth-child(2n)::after {
    content: '✦';
    position: absolute;
    font-size: .42em;
    line-height: 1;
    pointer-events: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 0 3px #ffffff, 0 0 6px rgba(180,220,255,.85);
    opacity: 0;
    animation: ec-diamond-sparkle 1.9s ease-in-out infinite;
}
.eff-diamond .ec:nth-child(2n+1)::before {
    top: -.25em;
    left: -.15em;
    animation-delay: calc(var(--i) * 0.21s);
}
.eff-diamond .ec:nth-child(2n)::after {
    bottom: -.15em;
    right: -.15em;
    animation-delay: calc(var(--i) * 0.31s + .55s);
}
@keyframes ec-diamond-sparkle {
    0%, 100% { opacity: 0;  transform: scale(.25) rotate(0deg); }
    30%      { opacity: 1;  transform: scale(1)   rotate(120deg); }
    55%      { opacity: .5; transform: scale(.7)  rotate(220deg); }
    80%      { opacity: 0;  transform: scale(.25) rotate(320deg); }
}

/* ── 15. 🎆 Confetti — clean white name with a constant rain of
                       multi-coloured party dots falling around every
                       letter (two streams per letter, varied timing). ── */
.eff-confetti .ec {
    position: relative;
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255,255,255,.55), 0 0 10px rgba(255,255,255,.25);
}
.eff-confetti .ec::before,
.eff-confetti .ec::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 1px;
    pointer-events: none;
    top: 0;
    opacity: 0;
}
.eff-confetti .ec::before {
    left: 25%;
    background: hsl(calc(var(--i) * 47deg), 85%, 60%);
    box-shadow: 0 0 3px hsl(calc(var(--i) * 47deg), 85%, 65%);
    animation: ec-confetti-fall 1.8s linear infinite;
    animation-delay: calc(var(--i) * -0.13s);
}
.eff-confetti .ec::after {
    left: 65%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: hsl(calc(var(--i) * 47deg + 180deg), 85%, 65%);
    box-shadow: 0 0 3px hsl(calc(var(--i) * 47deg + 180deg), 85%, 70%);
    animation: ec-confetti-fall 2.3s linear infinite;
    animation-delay: calc(var(--i) * 0.17s + .7s);
}
@keyframes ec-confetti-fall {
    0%   { transform: translateY(-1.1em) rotate(0deg);   opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY( 1.6em) rotate(360deg); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   Matching emoji icons — perched above the first letter of each effect.
   Each animation echoes its effect's mood (icy spin for ❄️, neon flicker
   for ⚡, water bob for 🌊, etc.). Frost/Electric/Wave/Toxic/Rainbow/
   Skull/Glitch/Blood/Diamond/Confetti only — Gold (👑), Moonlight (🌙),
   Galaxy (🪐), Sparkle (✨ everywhere), Fire (🔥 under each letter)
   already have their icons defined in their effect blocks.
   ══════════════════════════════════════════════════════════════════════ */
.eff-electric .ec:first-child::before {
    position: absolute;
    bottom: 92%;
    left: 50%;
    font-size: .65em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
}
.eff-electric .ec:first-child::before { content: '⚡';  animation: ec-icon-bolt     3.7s steps(1, end)    infinite; }

/* Skull: 💀 covers the first letter and fades in/out, revealing the
   underlying letter as it goes transparent. */
.eff-skull .ec:first-child::before {
    content: '💀';
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 1em;
    line-height: 1;
    pointer-events: none;
    -webkit-text-fill-color: initial;
    color: initial;
    text-shadow: none;
    z-index: 2;
    animation: ec-icon-skull 3.5s ease-in-out infinite;
}

@keyframes ec-icon-bolt {
    0%, 6%, 12%, 18%, 100% { transform: translateX(-50%) rotate(-4deg);
                              filter: drop-shadow(0 0 4px #00e5ff); opacity: 1; }
    7%, 19% { opacity: .25; }
    33%     { transform: translateX(-50%) rotate(8deg); filter: drop-shadow(0 0 8px #ffffff); }
    50%     { opacity: .15; }
    79%     { transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(0 0 10px #00e5ff) drop-shadow(0 0 16px #ffffff); }
}
@keyframes ec-icon-skull {
    0%, 100% { opacity: 1;  filter: drop-shadow(0 0 4px rgba(220,255,220,.5)); }
    50%      { opacity: 0;  filter: drop-shadow(0 0 10px rgba(255,255,255,.7)); }
}
/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [class^="eff-"] .ec, [class*=" eff-"] .ec { animation: none !important; }
}