/* =============================================================================
   ANIMATIONS - All @keyframes definitions
   Cross-browser optimized (Chrome, Firefox, Safari, Edge)
   ============================================================================= */

/* =============================================================================
   GLOBAL ANIMATION OPTIMIZATION
   ============================================================================= */

/* Firefox: promote actively-animating elements to compositor.
   Removed expensive [style*="animation"] and [class*="animate"] attribute
   selectors that forced O(n) string scans on every style recalc. */

/* Name effects: rely on text-shadow for glow (no CSS filter needed).
   transform-based effects get will-change:transform from their class. */

/* =============================================================================
   BASIC UI ANIMATIONS
   ============================================================================= */

@keyframes fadeInUp { 
    from { opacity: 0; transform: translate3d(0, 20px, 0); } 
    to { opacity: 1; transform: translate3d(0, 0, 0); } 
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 
    0%, 100% { transform: translate3d(0, 0, 0); } 
    50% { transform: translate3d(0, -6px, 0); } 
}
@keyframes pulse-green { 0%, 100% { text-shadow: 0 0 5px rgba(76, 175, 80, 0.2); opacity: 1; } 50% { text-shadow: 0 0 20px rgba(76, 175, 80, 0.8); opacity: 0.8; } }
@keyframes popIn { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shineScroll { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes banner-wave { 
    0% { transform: rotate(0deg) translateY(0) skewY(0deg); } 
    15% { transform: rotate(1.5deg) translateY(-2px) skewY(0.5deg); } 
    30% { transform: rotate(0.5deg) translateY(-3px) skewY(-0.5deg); } 
    45% { transform: rotate(-1deg) translateY(-1px) skewY(-1deg); } 
    60% { transform: rotate(-0.5deg) translateY(1px) skewY(0deg); } 
    75% { transform: rotate(0.5deg) translateY(-1px) skewY(0.5deg); } 
    90% { transform: rotate(0.2deg) translateY(0) skewY(0.2deg); } 
    100% { transform: rotate(0deg) translateY(0) skewY(0deg); } 
}
@keyframes mythicPulse {
    0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(187,134,252,0.3)); transform: scale(1); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 25px rgba(79,195,247,0.9)) drop-shadow(0 0 5px #fff); transform: scale(1.05); }
}
@keyframes avatar-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 5px currentColor; } 50% { transform: scale(1.08); box-shadow: 0 0 20px currentColor; } }
@keyframes pulse-red-glow { 0%, 100% { text-shadow: 0 0 3px rgba(255,51,51,0.4); opacity: 1; transform: scale(1); } 50% { text-shadow: 0 0 8px rgba(255,51,51,0.6), 0 0 3px rgba(255,255,255,0.4); opacity: 1; transform: scale(1.02); } }
@keyframes pulse-green-glow { 0%, 100% { text-shadow: 0 0 3px rgba(76,175,80,0.4); opacity: 1; transform: scale(1); } 50% { text-shadow: 0 0 8px rgba(76,175,80,0.6), 0 0 3px rgba(255,255,255,0.4); opacity: 1; transform: scale(1.02); } }
@keyframes badgePulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,51,51,0.7); } 70% { transform: scale(1.2); box-shadow: 0 0 0 6px transparent; } 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } }

/* =============================================================================
   NAME EFFECT ANIMATIONS
   ============================================================================= */

@keyframes effect-rainbow { 0% { color: #f33; } 20% { color: #f90; } 40% { color: #ff3; } 60% { color: #3f3; } 80% { color: #39f; } 100% { color: #f3f; } }
@keyframes effect-fire { 0%, 100% { text-shadow: 0 0 5px #f90, 0 -2px 5px #f00; transform: skewX(-1deg); } 50% { text-shadow: 0 -5px 15px #f00, 0 0 10px #f90; transform: skewX(1deg); } }
@keyframes effect-ice { 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #0ff; } 50% { text-shadow: 0 0 20px #0ff, 0 0 5px #fff; } }
@keyframes effect-glitch { 0% { clip-path: inset(50% 0 30% 0); transform: translate(-2px,2px); } 20% { clip-path: inset(15% 0 60% 0); transform: translate(2px,-2px); } 40% { clip-path: inset(80% 0 5% 0); transform: translate(-2px,1px); } 60% { clip-path: inset(40% 0 40% 0); transform: translate(2px,2px); } 80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px,-2px); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(1px,1px); } }
@keyframes effect-matrix { 0% { text-shadow: 0 0 3px #0f0; opacity:1; } 50% { text-shadow: 0 5px 10px #0f0, 2px 0 2px #000; opacity:0.8; } 100% { text-shadow: 0 0 3px #0f0; opacity:1; } }
@keyframes effect-cosmic { 0% { text-shadow: 0 0 10px #8000ff, 0 0 20px #8000ff; color: #c040ff; } 33% { text-shadow: 0 0 10px #ff0080, 0 0 20px #ff0080; color: #ff40a0; } 66% { text-shadow: 0 0 10px #0080ff, 0 0 20px #0080ff; color: #40a0ff; } 100% { text-shadow: 0 0 10px #8000ff, 0 0 20px #8000ff; color: #c040ff; } }
@keyframes effect-lightning { 0%, 90% { text-shadow: none; color: inherit; } 91% { text-shadow: 0 0 10px #fff, 0 0 20px #ffeb3b; color: #fff; } 92% { text-shadow: none; color: inherit; } 94% { text-shadow: 0 0 10px #fff, 0 0 20px #ffeb3b; color: #fff; } 100% { text-shadow: none; color: inherit; } }
@keyframes effect-blood { 0% { text-shadow: 0 0 5px #f00; color: #800000; } 50% { text-shadow: 0 3px 10px #f00; color: #f00; } 100% { text-shadow: 0 0 5px #f00; color: #800000; } }
@keyframes effect-neon { 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent), 0 0 30px var(--accent); } 50% { text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px var(--accent), 0 0 15px var(--accent); } }
@keyframes effect-terminal { 0%, 50% { border-right: 3px solid #0f0; } 51%, 100% { border-right: 3px solid transparent; } }
@keyframes effect-shadow { 0%, 100% { text-shadow: 0 0 10px #000, 0 0 15px rgba(0,0,0,0.5); } 50% { text-shadow: 0 0 20px #000, 0 0 30px rgba(0,0,0,0.7), 0 0 40px rgba(0,0,0,0.3); } }

/* =============================================================================
   LEGENDARY NAME EFFECTS
   ============================================================================= */

@keyframes effect-cyber { 0%, 100% { text-shadow: 2px 0 #0ff, -2px 0 #f0f; } 25% { text-shadow: -2px 0 #0ff, 2px 0 #f0f; } 50% { text-shadow: 2px 2px #0ff, -2px -2px #f0f; } 75% { text-shadow: -2px 2px #0ff, 2px -2px #f0f; } }
@keyframes effect-wave { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 50% { transform: translateY(0); } 75% { transform: translateY(3px); } }
@keyframes effect-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } }
@keyframes effect-pulse-grow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes effect-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes effect-rotate { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg); } }
@keyframes effect-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes effect-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } }
@keyframes effect-typewriter { 0%, 100% { border-right-color: transparent; } 50% { border-right-color: currentColor; } }
@keyframes effect-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes effect-jello { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(0.95, 1.05); } 50% { transform: scale(1.05, 0.95); } 75% { transform: scale(0.98, 1.02); } }
@keyframes effect-rubberband { 0%, 100% { transform: scaleX(1); } 30% { transform: scaleX(1.15); } 40% { transform: scaleX(0.9); } 50% { transform: scaleX(1.05); } 65% { transform: scaleX(0.95); } 75% { transform: scaleX(1.03); } }
@keyframes effect-static { 0% { text-shadow: 1px 1px 0 #fff, -1px -1px 0 #000; } 25% { text-shadow: -1px 1px 0 #fff, 1px -1px 0 #000; } 50% { text-shadow: 1px -1px 0 #fff, -1px 1px 0 #000; } 75% { text-shadow: -1px -1px 0 #fff, 1px 1px 0 #000; } }
@keyframes effect-vaporwave { 0%, 100% { text-shadow: 2px 2px 0 #ff71ce, 4px 4px 0 #01cdfe; } 50% { text-shadow: -2px -2px 0 #ff71ce, -4px -4px 0 #01cdfe; } }
@keyframes effect-synthwave { 0% { text-shadow: 0 0 10px #f0f, 0 0 20px #0ff, 0 0 30px #f0f; } 50% { text-shadow: 0 0 20px #0ff, 0 0 40px #f0f, 0 0 60px #0ff; } 100% { text-shadow: 0 0 10px #f0f, 0 0 20px #0ff, 0 0 30px #f0f; } }
@keyframes effect-electric { 0%, 100% { text-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffeb3b; } 10% { text-shadow: 0 0 10px #fff, 0 0 30px #ffeb3b, 0 0 50px rgba(255,235,59,0.4); } 11% { text-shadow: 0 0 5px #ffeb3b; } 50% { text-shadow: 0 0 5px #ffeb3b; } 51% { text-shadow: 0 0 15px #fff, 0 0 40px #ffeb3b, 0 0 60px rgba(255,235,59,0.5); } 52% { text-shadow: 0 0 5px #ffeb3b; } }
@keyframes effect-retro { 0%, 100% { text-shadow: 3px 3px 0 #000; } 50% { text-shadow: 4px 4px 0 #333, 2px 2px 0 #000; } }
@keyframes effect-neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--accent), 0 0 40px var(--accent); opacity: 1; } 20%, 24%, 55% { text-shadow: none; opacity: 0.5; } }
@keyframes effect-dissolve { 0%, 100% { opacity: 1; text-shadow: none; } 50% { opacity: 0.5; text-shadow: 0 0 4px currentColor; } }
@keyframes effect-ghost { 0%, 100% { opacity: 0.3; text-shadow: 0 0 6px currentColor; } 50% { opacity: 1; text-shadow: none; } }
@keyframes effect-acid { 0% { color: #7fff00; text-shadow: 0 0 8px #7fff00; } 25% { color: #00ff7f; text-shadow: 0 0 8px #00ff7f; } 50% { color: #00ffff; text-shadow: 0 0 8px #00ffff; } 75% { color: #7f00ff; text-shadow: 0 0 8px #7f00ff; } 100% { color: #7fff00; text-shadow: 0 0 8px #7fff00; } }
@keyframes effect-magma { 0%, 100% { text-shadow: 0 0 5px #f00, 0 0 10px #f90, 0 2px 2px #000; color: #ff4500; } 50% { text-shadow: 0 0 20px #f00, 0 0 40px #f90, 0 3px 3px #000; color: #ffd700; } }
@keyframes effect-aurora { 0% { text-shadow: 0 0 10px #00ff87, 0 0 20px #00ff87; color: #00ff87; } 33% { text-shadow: 0 0 10px #60efff, 0 0 20px #60efff; color: #60efff; } 66% { text-shadow: 0 0 10px #ff77e9, 0 0 20px #ff77e9; color: #ff77e9; } 100% { text-shadow: 0 0 10px #00ff87, 0 0 20px #00ff87; color: #00ff87; } }
@keyframes effect-void { 0%, 100% { text-shadow: 0 0 10px #4b0082, 0 0 20px #000, 0 0 30px rgba(75,0,130,0.3); } 50% { text-shadow: 0 0 30px #4b0082, 0 0 50px #000, 0 0 60px rgba(75,0,130,0.5); } }
@keyframes effect-divine { 0%, 100% { text-shadow: 0 0 10px #ffd700, 0 0 20px #fff8dc, 0 0 30px rgba(255,215,0,0.3); } 50% { text-shadow: 0 0 30px #ffd700, 0 0 60px #fff8dc, 0 0 80px rgba(255,248,220,0.5); } }
@keyframes effect-toxic-drip { 0%, 100% { text-shadow: 0 0 5px #0f0, 0 2px 0 #0a0; transform: skewY(0deg); } 50% { text-shadow: 0 3px 10px #0f0, 0 5px 0 #0a0; transform: skewY(-1deg); } }
@keyframes effect-frost-bite { 0%, 100% { text-shadow: 0 0 5px #b3e5fc, 0 0 10px #fff; } 50% { text-shadow: 0 0 15px #b3e5fc, 0 0 30px #fff, -2px 0 2px #0ff, 2px 0 2px #0ff, 0 0 40px rgba(179,229,252,0.4); } }
@keyframes effect-ember-glow { 0%, 100% { text-shadow: 0 0 5px #ff5722, 0 0 10px #ff9800; color: #ffcc80; } 50% { text-shadow: 0 0 20px #ff5722, 0 0 40px #ff9800; color: #ffffff; } }
@keyframes effect-candy { 0% { color: #ff6b9d; text-shadow: 0 0 5px #ff6b9d; } 25% { color: #c44569; text-shadow: 0 0 5px #c44569; } 50% { color: #ff8e53; text-shadow: 0 0 5px #ff8e53; } 75% { color: #ffbe76; text-shadow: 0 0 5px #ffbe76; } 100% { color: #ff6b9d; text-shadow: 0 0 5px #ff6b9d; } }
@keyframes effect-ocean { 0%, 100% { text-shadow: 0 0 10px #006994, 0 0 20px #40a4c8; transform: translateY(0); } 50% { text-shadow: 0 0 20px #006994, 0 0 40px #40a4c8; transform: translateY(-2px); } }
@keyframes effect-sunset { 0% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; } 33% { color: #ffa500; text-shadow: 0 0 10px #ffa500; } 66% { color: #da70d6; text-shadow: 0 0 10px #da70d6; } 100% { color: #ff6b6b; text-shadow: 0 0 10px #ff6b6b; } }
@keyframes effect-prism { 0% { text-shadow: -2px 0 #f00, 2px 0 #00f, 0 -2px #0f0, 0 2px #ff0; } 25% { text-shadow: 2px 0 #f00, -2px 0 #00f, 0 2px #0f0, 0 -2px #ff0; } 50% { text-shadow: -2px 0 #00f, 2px 0 #f00, 0 -2px #ff0, 0 2px #0f0; } 75% { text-shadow: 2px 0 #00f, -2px 0 #f00, 0 2px #ff0, 0 -2px #0f0; } }

/* =============================================================================
   ANNOUNCEMENT & BANNER ANIMATIONS
   ============================================================================= */

@keyframes announcement-slide-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =============================================================================
   MODAL ANIMATIONS
   ============================================================================= */

@keyframes modalSlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(-20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* =============================================================================
   PICKER & UI ELEMENT ANIMATIONS
   ============================================================================= */

@keyframes pickerPop {
    from { opacity: 0; transform: scale(0.8) translateY(5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* =============================================================================
   HIGHLIGHT & FLASH ANIMATIONS
   ============================================================================= */

@keyframes highlightFlash {
    0% { 
        background: inherit;
        box-shadow: none;
        transform: scale(1);
    }
    10% {
        background: rgba(255,152,0,0.35);
        box-shadow: 0 0 30px rgba(255,152,0,0.5), inset 0 0 20px rgba(255,152,0,0.1);
        transform: scale(1.01);
    }
    30% { 
        background: rgba(255,152,0,0.25);
        box-shadow: 0 0 25px rgba(255,152,0,0.4);
        transform: scale(1);
    }
    50% {
        background: rgba(255,152,0,0.3);
        box-shadow: 0 0 30px rgba(255,152,0,0.5);
    }
    70% { 
        background: rgba(255,152,0,0.2);
        box-shadow: 0 0 20px rgba(255,152,0,0.3);
    }
    100% { 
        background: inherit;
        box-shadow: none;
        transform: scale(1);
    }
}

/* =============================================================================
   NOTIFICATION ANIMATIONS
   ============================================================================= */

@keyframes notificationHighlight {
    0% { 
        box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
        background: rgba(255, 152, 0, 0.15);
    }
    50% { 
        box-shadow: 0 0 20px 10px rgba(255, 152, 0, 0.3);
        background: rgba(255, 152, 0, 0.2);
    }
    100% { 
        box-shadow: 0 0 0 0 transparent;
        background: transparent;
    }
}

@keyframes notificationPulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(255,152,0,0.4), inset 0 0 20px rgba(255,152,0,0.1);
    }
    50% { 
        box-shadow: 0 0 50px rgba(255,152,0,0.6), inset 0 0 30px rgba(255,152,0,0.2);
    }
}

/* =============================================================================
   TOAST ANIMATIONS
   ============================================================================= */

@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

/* =============================================================================
   CLAN BANNER ANIMATIONS
   ============================================================================= */

@keyframes glassShine {
    0%, 100% {
        left: -50%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        left: 100%;
        opacity: 1;
    }
    60%, 100% {
        opacity: 0;
    }
}

@keyframes bannerWaveLeft {
    0%, 100% {
        transform: scale(1.05) skewX(0deg) translateX(0px) rotate(0deg);
    }
    20% {
        transform: scale(1.08) skewX(3deg) translateX(4px) rotate(0.5deg);
    }
    40% {
        transform: scale(1.04) skewX(1deg) translateX(2px) rotate(0deg);
    }
    60% {
        transform: scale(1.06) skewX(-2deg) translateX(-2px) rotate(-0.3deg);
    }
    80% {
        transform: scale(1.03) skewX(-1deg) translateX(-1px) rotate(0deg);
    }
}

@keyframes bannerWaveRight {
    0%, 100% {
        transform: scale(1.05) skewX(0deg) translateX(0px) rotate(0deg);
    }
    20% {
        transform: scale(1.03) skewX(-2deg) translateX(-2px) rotate(-0.3deg);
    }
    40% {
        transform: scale(1.06) skewX(-1deg) translateX(-1px) rotate(0deg);
    }
    60% {
        transform: scale(1.08) skewX(3deg) translateX(4px) rotate(0.5deg);
    }
    80% {
        transform: scale(1.04) skewX(1deg) translateX(2px) rotate(0deg);
    }
}

@keyframes diamondPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@keyframes clanTitleShimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 0% 100%; }
}

@keyframes clanTitleGleam {
    0%, 100% { background-position: -200% center; }
    50% { background-position: 200% center; }
}

@keyframes clanNameShine {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 200% center; }
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =============================================================================
   PWA ANIMATIONS
   ============================================================================= */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =============================================================================
   PROFILE ANIMATIONS
   ============================================================================= */

@keyframes gradient-shift-bg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes border-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 5px currentColor; }
    50% { transform: scale(1.08); box-shadow: 0 0 20px currentColor; }
}