/* cosmetic-effects.css - render-CSS for equipped effects på avatars.
 *
 * Effekter er rank-låste cosmetics (se reward-catalog.json + xp-engine.js
 * RANK_UP_COSMETICS). Tidligere var equipped.effect lagret men IKKE
 * visualiseret - bruger så ingen forskel. Nu render-klasser:
 *
 *   <div class="fx-effect fx-effect-fx1"> ... avatar ... </div>
 *
 * Brug via helper: applyFxClass(el, effectId) - sætter klasse på element.
 * Effects auto-grant'es ved rank-up (Mester=fx1, Legende=fx5).
 *
 * Designet 2026-05-18 som del af XP v2-rework. Se [[project_xp_rework]].
 */

/* fx1 - Glow (Mester, 21k karriere-XP) */
.fx-effect-fx1 {
    position: relative;
    filter: drop-shadow(0 0 6px rgba(255, 196, 64, 0.55))
            drop-shadow(0 0 12px rgba(255, 196, 64, 0.35));
    animation: fx-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes fx-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 196, 64, 0.55)) drop-shadow(0 0 12px rgba(255, 196, 64, 0.35)); }
    50%      { filter: drop-shadow(0 0 10px rgba(255, 196, 64, 0.75)) drop-shadow(0 0 20px rgba(255, 196, 64, 0.5)); }
}

/* fx2 - Sparkle (mid-tier) */
.fx-effect-fx2 {
    position: relative;
}
.fx-effect-fx2::before,
.fx-effect-fx2::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    animation: fx-sparkle 2.4s ease-in-out infinite;
}
.fx-effect-fx2::before {
    top: 10%;
    right: 12%;
    animation-delay: 0s;
}
.fx-effect-fx2::after {
    bottom: 18%;
    left: 8%;
    animation-delay: 1.2s;
}
@keyframes fx-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50%      { opacity: 1; transform: scale(1.2); }
}

/* fx3 - Fire-aura (mid-high tier) */
.fx-effect-fx3 {
    position: relative;
    filter: drop-shadow(0 -4px 8px rgba(255, 100, 30, 0.7))
            drop-shadow(0 0 6px rgba(255, 60, 30, 0.45));
    animation: fx-fire-flicker 0.4s ease-in-out infinite;
}
@keyframes fx-fire-flicker {
    0%, 100% { filter: drop-shadow(0 -4px 8px rgba(255, 100, 30, 0.7)) drop-shadow(0 0 6px rgba(255, 60, 30, 0.45)); }
    50%      { filter: drop-shadow(0 -6px 10px rgba(255, 140, 50, 0.85)) drop-shadow(0 0 8px rgba(255, 80, 30, 0.6)); }
}

/* fx4 - Pulsate (subtil rhythmic scale) */
.fx-effect-fx4 {
    animation: fx-pulsate 2.2s ease-in-out infinite;
}
@keyframes fx-pulsate {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* fx5 - Legendary Glow (Legende, 40k karriere-XP)
 * Rainbow-gradient halo + extra brightness. Forbeholdt top-tier.
 */
.fx-effect-fx5 {
    position: relative;
    animation: fx-legendary-pulse 3s linear infinite;
}
.fx-effect-fx5::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #ff6b6b, #ffd93d, #6BCB77, #4D96FF, #9B72FF, #ff6b6b);
    filter: blur(6px);
    opacity: 0.6;
    z-index: -1;
    animation: fx-legendary-rotate 4s linear infinite;
}
@keyframes fx-legendary-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)); }
    50%      { filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.95)); }
}
@keyframes fx-legendary-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── Konkurrence-progress evolution-pulse (Fase 6 - 2026-05-18) ───
 * Triggeres når en deltagers progress passerer 25/50/75/100% af mål.
 * JS-helper (_maybeEvoPulse i competition-wizard.js) tracker last-seen-tier
 * pr. emp og applikerer klassen i 1.5s ved nye milepæle. Auto-removes via
 * animationend-event. Pure CSS - ingen JS-animation-loop.
 */
.cd-leader-avatar.evo-pulse-25,
.cd-leader-avatar.evo-pulse-50,
.cd-leader-avatar.evo-pulse-75,
.cd-leader-avatar.evo-pulse-100,
.cpres-avatar.evo-pulse-25,
.cpres-avatar.evo-pulse-50,
.cpres-avatar.evo-pulse-75,
.cpres-avatar.evo-pulse-100 {
    animation: comp-evo-pulse 1.5s ease-out forwards;
}
.cd-leader-avatar.evo-pulse-25, .cpres-avatar.evo-pulse-25 { --evo-color: rgba(59, 158, 255, 0.7); }
.cd-leader-avatar.evo-pulse-50, .cpres-avatar.evo-pulse-50 { --evo-color: rgba(168, 85, 247, 0.75); }
.cd-leader-avatar.evo-pulse-75, .cpres-avatar.evo-pulse-75 { --evo-color: rgba(251, 191, 36, 0.85); }
.cd-leader-avatar.evo-pulse-100, .cpres-avatar.evo-pulse-100 { --evo-color: rgba(34, 197, 94, 0.95); }

@keyframes comp-evo-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--evo-color, rgba(34,197,94,.95)); }
    30%  { transform: scale(1.15); box-shadow: 0 0 0 8px transparent; }
    60%  { transform: scale(1.05); box-shadow: 0 0 16px 4px var(--evo-color, rgba(34,197,94,.95)); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}

/* ─── Accessibility - respekter prefers-reduced-motion (2026-05-18) ───
 * WCAG 2.1 Success Criterion 2.3.3. Vestibulær-sensitive brugere skal kunne
 * suppress alle motion-effekter via OS-setting. Disabler keyframe-animations
 * + transitions for fx-effekter + evo-pulse. Visual identitet bevares via
 * stationær glow (drop-shadow uden animation).
 */
@media (prefers-reduced-motion: reduce) {
    .fx-effect-fx1,
    .fx-effect-fx2::before,
    .fx-effect-fx2::after,
    .fx-effect-fx3,
    .fx-effect-fx4,
    .fx-effect-fx5,
    .fx-effect-fx5::before,
    .cd-leader-avatar.evo-pulse-25,
    .cd-leader-avatar.evo-pulse-50,
    .cd-leader-avatar.evo-pulse-75,
    .cd-leader-avatar.evo-pulse-100,
    .cpres-avatar.evo-pulse-25,
    .cpres-avatar.evo-pulse-50,
    .cpres-avatar.evo-pulse-75,
    .cpres-avatar.evo-pulse-100 {
        animation: none !important;
    }
    /* Bevarer stationær glow så user stadig ser "noget specielt" - bare uden bevægelse */
    .fx-effect-fx5::before { opacity: 0.5; }
}

/* Sæson-titel-pille (vises ved navn på leaderboards/profil) */
.season-title-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: var(--color-warn);
    line-height: 1.4;
    white-space: nowrap;
}