@keyframes loady {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.animate-loady {
    animation: loady 2.5s ease-in-out forwards;
}

.glitch-effect {
    position: relative;
    animation: glitch 3s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
        text-shadow: none;
    }

    2% {
        transform: translate(-2px, 0);
        text-shadow: 2px 0 var(--color-magenta);
    }

    4% {
        transform: translate(2px, 0);
        text-shadow: -2px 0 var(--color-green);
    }

    6% {
        transform: translate(0);
        text-shadow: none;
    }

    100% {
        transform: translate(0);
        text-shadow: none;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-black);
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--h-green) var(--s-green) 15%);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-green);
}

/* Animated Progress Bar */
.progress-bar-animated {
    background: linear-gradient(90deg,
            var(--color-green) 0%,
            var(--color-magenta) 50%,
            var(--color-green) 100%);
    background-size: 200% 100%;
    animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* Critical Pulse */
.pulse-critical {
    animation: criticalPulse 0.5s ease-in-out infinite alternate;
}

@keyframes criticalPulse {
    from {
        text-shadow: 0 0 10px hsl(var(--h-red) var(--s-red) var(--l-red));
        color: hsl(var(--h-red) var(--s-red) 80%);
        transform: scale(1);
    }

    to {
        text-shadow: 0 0 30px hsl(var(--h-red) var(--s-red) var(--l-red)),
            0 0 10px hsl(var(--h-yellow) var(--s-yellow) var(--l-yellow));
        color: hsl(var(--h-red) var(--s-red) var(--l-red));
        transform: scale(1.1);
    }
}

/* ========== PREMIUM TAB TRANSITIONS ========== */

/* Tab Content Base - Prepare for animations */
.tab-content {
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        filter 300ms ease;
    will-change: opacity, transform, filter;
}

/* Fade Out - Exit animation */
.fade-out {
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
    filter: blur(2px);
    pointer-events: none;
}

/* Fade In - Enter animation with glow pulse */
.fade-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    animation: tabEnterGlow 600ms ease-out;
}

/* Glow pulse on tab enter */
@keyframes tabEnterGlow {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
        filter: blur(3px);
    }

    50% {
        filter: blur(0) drop-shadow(0 0 15px hsla(var(--h-green), var(--s-green), var(--l-green), 0.4));
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) drop-shadow(0 0 0 transparent);
    }
}

/* Alternative: Red glow for Final Zone tab */
#tab_final_zone.fade-in {
    animation: tabEnterGlowRed 600ms ease-out;
}

@keyframes tabEnterGlowRed {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
        filter: blur(3px);
    }

    50% {
        filter: blur(0) drop-shadow(0 0 20px hsla(var(--h-red), var(--s-red), var(--l-red), 0.5));
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) drop-shadow(0 0 0 transparent);
    }
}

/* ========== LEGENDARY CARD ANIMATIONS ========== */

/* Golden Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.card-legendary-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 215, 0, 0.1) 25%,
            rgba(255, 215, 0, 0.3) 50%,
            rgba(255, 215, 0, 0.1) 75%,
            transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Glow Pulse Border */
@keyframes legendaryPulse {

    0%,
    100% {
        box-shadow:
            0 0 5px rgba(255, 215, 0, 0.5),
            0 0 15px rgba(255, 215, 0, 0.3),
            inset 0 0 10px rgba(255, 215, 0, 0.05);
    }

    50% {
        box-shadow:
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.4),
            0 0 60px rgba(255, 215, 0, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
}

.card-legendary {
    animation: legendaryPulse 2s ease-in-out infinite;
    border-color: #ffd700 !important;
}

/* Floating Icon Animation */
@keyframes floatIcon {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

.icon-float {
    animation: floatIcon 2s ease-in-out infinite;
}

/* Gradient Text for Legendary */
.text-legendary {
    background: linear-gradient(90deg, #ffd700, #ffec8b, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: shimmer 2s linear infinite;
}

/* ========== SHAKE ANIMATION ========== */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
}

.animate-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

/* Intensive Glitch Animation */
@keyframes glitch-intense {
    0% {
        transform: translate(0);
        text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9;
    }
    2% {
        transform: translate(-2px, 2px);
        text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9;
    }
    4% {
        transform: translate(2px, -2px);
        text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9;
    }
    6% {
        transform: translate(0);
        text-shadow: none;
    }
    8% {
        transform: translate(2px, 2px);
        text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9;
    }
    10% {
        transform: translate(0);
        text-shadow: none;
    }
    100% {
        transform: translate(0);
    }
}

.animate-glitch-intense {
    animation: glitch-intense 0.3s cubic-bezier(.25, .46, .45, .94) infinite both;
}

/* Screen Shake Animation */
@keyframes shake-screen {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.animate-shake-screen {
    animation: shake-screen 0.5s infinite;
}