/* ==========================================================================
   SpeedL Custom Animations & Effects
   ========================================================================== */

/* Golden Lightning Effect for Interactive Elements */
@keyframes lightning {
    0%, 100% { 
        box-shadow: 0 0 8px var(--speedl-gold);
    }
    50% { 
        box-shadow: 
            0 0 25px var(--speedl-gold),
            0 0 35px var(--speedl-gold-bright),
            0 0 45px var(--speedl-copper);
    }
}

/* Electric Border Animation */
@keyframes electric-border {
    0% { 
        border-color: var(--speedl-gold);
        box-shadow: 0 0 12px rgba(184, 134, 11, 0.4);
    }
    25% { 
        border-color: var(--speedl-copper);
        box-shadow: 0 0 24px rgba(184, 115, 51, 0.6);
    }
    50% { 
        border-color: var(--speedl-gold-bright);
        box-shadow: 0 0 36px rgba(217, 158, 16, 0.5);
    }
    75% { 
        border-color: var(--speedl-bronze);
        box-shadow: 0 0 24px rgba(161, 84, 42, 0.6);
    }
    100% { 
        border-color: var(--speedl-gold);
        box-shadow: 0 0 12px rgba(184, 134, 11, 0.4);
    }
}

/* Golden Glowing Text Animation */
@keyframes text-glow {
    0%, 100% {
        text-shadow: 
            0 0 8px rgba(184, 134, 11, 0.6),
            0 0 16px rgba(184, 134, 11, 0.4);
    }
    50% {
        text-shadow: 
            0 0 16px rgba(184, 134, 11, 0.9),
            0 0 32px rgba(184, 134, 11, 0.6),
            0 0 48px rgba(217, 158, 16, 0.4);
    }
}

/* Floating Animation */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Power-up Animation */
@keyframes power-up {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Utility Classes for Animations */
.speedl-lightning {
    animation: lightning 2s ease-in-out infinite !important;
}

.speedl-electric-border {
    animation: electric-border 3s ease-in-out infinite !important;
}

.speedl-text-glow {
    animation: text-glow 2s ease-in-out infinite !important;
}

.speedl-float {
    animation: float 3s ease-in-out infinite !important;
}

.speedl-power-up {
    animation: power-up 0.6s ease-out !important;
}

/* Hover Effects */
.speedl-hover-lightning:hover {
    animation: lightning 0.8s ease-in-out 3 !important;
}

.speedl-hover-glow:hover {
    animation: text-glow 1s ease-in-out 2 !important;
}