/* ============================================
   ANIMATIONS
   Keyframe animations and motion design
   ============================================ */

/* ===== FADE & SLIDE ANIMATIONS ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* ===== SCALE & ZOOM ANIMATIONS ===== */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.85);
    }
}

@keyframes scaleBreathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* ===== ROTATION ANIMATIONS ===== */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* ===== MOVEMENT ANIMATIONS ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-12px) scale(1.05);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes badgeBounce {
    0%, 100% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(-16px);
    }
    75% {
        transform: translateY(-8px);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(0.95);
    }
    20%, 40%, 60%, 80% {
        transform: scale(1.05);
    }
    50%, 70% {
        transform: scale(1);
    }
}

@keyframes waveIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== PULSE & GLOW ANIMATIONS ===== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.4), 0 0 50px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 80px rgba(255, 215, 0, 0.5);
    }
}

@keyframes glowPulsePremium {
    0%, 100% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 60px rgba(255, 215, 0, 0.8), 0 0 120px rgba(0, 217, 255, 0.5);
    }
}

@keyframes glowIntense {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 217, 255, 0.8), 0 0 40px rgba(0, 217, 255, 0.5);
    }
}

@keyframes shadowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.6));
    }
}

@keyframes neonPulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.2);
    }
    50% {
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 215, 0, 0.4);
    }
}

@keyframes neonFlicker {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.6),
            0 0 20px rgba(255, 215, 0, 0.4),
            0 0 40px rgba(0, 217, 255, 0.2);
    }
    50% {
        text-shadow:
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.6),
            0 0 80px rgba(0, 217, 255, 0.4);
    }
}

/* ===== GRADIENT & COLOR ANIMATIONS ===== */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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

@keyframes colorChange {
    0% {
        color: var(--color-accent-purple-light);
    }
    50% {
        color: var(--color-accent-blue-light);
    }
    100% {
        color: var(--color-accent-purple-light);
    }
}

/* ===== BORDER & OUTLINE ANIMATIONS ===== */
@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(168, 85, 247, 0.3);
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
    }
    50% {
        border-color: rgba(59, 130, 246, 0.5);
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
    }
}

@keyframes borderCycle {
    0%, 100% {
        border-color: rgba(168, 85, 247, 0.3);
    }
    50% {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

/* ===== SHIMMER & SHINE ANIMATIONS ===== */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes shimmerText {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes textShimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ===== BLUR & FOCUS ANIMATIONS ===== */
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes blurOut {
    from {
        opacity: 1;
        filter: blur(0px);
    }
    to {
        opacity: 0;
        filter: blur(10px);
    }
}

/* ===== SPECIAL EFFECT ANIMATIONS ===== */
@keyframes rippleExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0px) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) scale(0.5);
        opacity: 0;
    }
}

@keyframes magnetPull {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1.2) rotate(360deg);
    }
}

@keyframes chromaticAberration {
    0%, 100% {
        text-shadow:
            3px 0 0 rgba(168, 85, 247, 0.5),
            -3px 0 0 rgba(59, 130, 246, 0.5);
    }
    50% {
        text-shadow:
            6px 0 0 rgba(168, 85, 247, 0.6),
            -6px 0 0 rgba(59, 130, 246, 0.6);
    }
}

@keyframes letterReveal {
    from {
        opacity: 0;
        transform: translateY(25px) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

@keyframes tilt3D {
    0% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    }
}

@keyframes underlineExpand {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes badgeRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== PRELOADER ANIMATION ===== */
@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* ===== FADE-IN CLASSES ===== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
}

.fade-in.visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* ===== ANIMATION DELAYS FOR STAGGERED EFFECTS ===== */
.service-card:nth-child(1) { animation: waveIn 0.6s ease-out 0s both; }
.service-card:nth-child(2) { animation: waveIn 0.6s ease-out 0.1s both; }
.service-card:nth-child(3) { animation: waveIn 0.6s ease-out 0.2s both; }
.service-card:nth-child(4) { animation: waveIn 0.6s ease-out 0.3s both; }
.service-card:nth-child(5) { animation: waveIn 0.6s ease-out 0.4s both; }
.service-card:nth-child(6) { animation: waveIn 0.6s ease-out 0.5s both; }

.genre-badge:nth-child(1) { animation-delay: 0s; }
.genre-badge:nth-child(2) { animation-delay: 0.1s; }
.genre-badge:nth-child(3) { animation-delay: 0.15s; }
.genre-badge:nth-child(4) { animation-delay: 0.2s; }
.genre-badge:nth-child(5) { animation-delay: 0.25s; }
.genre-badge:nth-child(6) { animation-delay: 0.3s; }
.genre-badge:nth-child(7) { animation-delay: 0.35s; }
.genre-badge:nth-child(8) { animation-delay: 0.4s; }
.genre-badge:nth-child(9) { animation-delay: 0.45s; }
.genre-badge:nth-child(10) { animation-delay: 0.5s; }

.social-icon-wrapper:nth-child(1) { animation: waveIn 0.6s ease-out 0s both; }
.social-icon-wrapper:nth-child(2) { animation: waveIn 0.6s ease-out 0.1s both; }
.social-icon-wrapper:nth-child(3) { animation: waveIn 0.6s ease-out 0.2s both; }
.social-icon-wrapper:nth-child(4) { animation: waveIn 0.6s ease-out 0.3s both; }
.social-icon-wrapper:nth-child(5) { animation: waveIn 0.6s ease-out 0.4s both; }

nav a:nth-child(1) { animation: slideInLeft 0.8s ease-out 0.1s backwards; }
nav a:nth-child(2) { animation: slideInLeft 0.8s ease-out 0.2s backwards; }
nav a:nth-child(3) { animation: slideInLeft 0.8s ease-out 0.3s backwards; }
nav a:nth-child(4) { animation: slideInLeft 0.8s ease-out 0.4s backwards; }

/* ===== DYNAMIC BACKGROUND ANIMATIONS (MOBILE-FRIENDLY) ===== */

/* FLOWING GRADIENT BACKGROUND */
@keyframes flowingGradient {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    75% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* PULSING GRADIENT BACKGROUND */
@keyframes pulsingGradient {
    0% {
        background-size: 150% 150%;
        background-position: 0% 50%;
    }
    50% {
        background-size: 200% 200%;
        background-position: 100% 50%;
    }
    100% {
        background-size: 150% 150%;
        background-position: 0% 50%;
    }
}

/* DIAGONAL WAVE BACKGROUND */
@keyframes diagonalWave {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 200%;
    }
}

/* RADIAL PULSE BACKGROUND */
@keyframes radialPulse {
    0% {
        background-size: 100% 100%;
    }
    50% {
        background-size: 120% 120%;
    }
    100% {
        background-size: 100% 100%;
    }
}

/* AURORA BOREALIS EFFECT */
@keyframes auroraFlow {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* SHIMMER WAVE BACKGROUND */
@keyframes shimmerWave {
    0% {
        background-position: -200% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* BREATHING BACKGROUND */
@keyframes breathingBG {
    0%, 100% {
        opacity: 1;
        filter: saturate(1);
    }
    50% {
        opacity: 0.85;
        filter: saturate(1.2);
    }
}

/* ROTATING CONIC GRADIENT */
@keyframes conicRotate {
    0% {
        background: conic-gradient(from 0deg, #ffd700, #00d9ff, #ff006e, #ffd700);
    }
    50% {
        background: conic-gradient(from 180deg, #ff006e, #ffd700, #00d9ff, #ff006e);
    }
    100% {
        background: conic-gradient(from 360deg, #00d9ff, #ff006e, #ffd700, #00d9ff);
    }
}

/* LIQUID SWIRL BACKGROUND */
@keyframes liquidSwirl {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* NEON FLARE BACKGROUND */
@keyframes neonFlare {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(255, 215, 0, 0.5),
            0 0 20px rgba(0, 217, 255, 0.3);
        filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.3));
    }
    50% {
        text-shadow:
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(0, 217, 255, 0.6);
        filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.6));
    }
}

/* PLASMA WAVE */
@keyframes plasmaWave {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* SOFT GLOW PULSE */
@keyframes softGlowPulse {
    0%, 100% {
        box-shadow: inset 0 0 30px rgba(255, 215, 0, 0.1);
        background-color: rgba(26, 26, 46, 1);
    }
    50% {
        box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.2), inset 0 0 100px rgba(0, 217, 255, 0.1);
        background-color: rgba(26, 26, 46, 0.95);
    }
}

/* VORTEX SPIRAL */
@keyframes vortexSpiral {
    0% {
        background-size: 200% 200%;
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* FROSTED GLASS EFFECT ANIMATION */
@keyframes frostEffect {
    0%, 100% {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    50% {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
}

/* DYNAMIC COLOR SHIFT */
@keyframes dynamicColorShift {
    0% {
        background-color: rgba(26, 26, 46, 1);
    }
    25% {
        background-color: rgba(30, 20, 50, 1);
    }
    50% {
        background-color: rgba(20, 40, 50, 1);
    }
    75% {
        background-color: rgba(40, 25, 45, 1);
    }
    100% {
        background-color: rgba(26, 26, 46, 1);
    }
}

/* GRADIENT MESH FLOW */
@keyframes gradientMeshFlow {
    0% {
        background-position: 0% 0%, 100% 100%;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
    }
    100% {
        background-position: 0% 0%, 100% 100%;
    }
}

/* ===== BACKGROUND ANIMATION CLASSES ===== */

/* Flowing gradient section */
.bg-flowing-gradient {
    background: linear-gradient(-45deg, #ffd700, #00d9ff, #ff006e, #9c27b0);
    background-size: 400% 400%;
    animation: flowingGradient 8s ease infinite;
}

/* Pulsing gradient section */
.bg-pulsing-gradient {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 217, 255, 0.1) 50%, rgba(255, 6, 110, 0.1) 100%);
    background-size: 200% 200%;
    animation: pulsingGradient 6s ease-in-out infinite;
}

/* Diagonal wave background */
.bg-diagonal-wave {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 215, 0, 0.05) 10px, rgba(255, 215, 0, 0.05) 20px),
        linear-gradient(135deg, #1a1a2e 0%, #2a2a4e 100%);
    background-size: 100% 100%, 100% 100%;
    animation: diagonalWave 12s linear infinite;
}

/* Radial pulse background */
.bg-radial-pulse {
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.15), rgba(0, 217, 255, 0.08), rgba(26, 26, 46, 1));
    animation: radialPulse 7s ease-in-out infinite;
}

/* Aurora borealis effect */
.bg-aurora {
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.1) 20%, transparent 40%),
        linear-gradient(90deg, transparent 40%, rgba(0, 217, 255, 0.1) 60%, transparent 80%),
        linear-gradient(180deg, #1a1a2e 0%, #2d1b4e 50%, #1a1a2e 100%);
    background-size: 200% 100%, 200% 100%, 100% 100%;
    animation: auroraFlow 10s ease-in-out infinite;
}

/* Shimmer wave background */
.bg-shimmer-wave {
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.1) 50%, transparent 100%),
        linear-gradient(135deg, #1a1a2e 0%, #2a2a4e 100%);
    background-size: 200% 100%, 100% 100%;
    animation: shimmerWave 5s ease-in-out infinite;
}

/* Breathing background */
.bg-breathing {
    background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4e 50%, #1a1a2e 100%);
    animation: breathingBG 6s ease-in-out infinite;
}

/* Plasma wave background */
.bg-plasma {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), rgba(0, 217, 255, 0.1), rgba(255, 6, 110, 0.1), rgba(255, 215, 0, 0.1));
    background-size: 200% 100%;
    animation: plasmaWave 8s ease-in-out infinite;
}

/* Soft glow pulse background */
.bg-soft-glow {
    background-color: rgba(26, 26, 46, 1);
    animation: softGlowPulse 5s ease-in-out infinite;
}

/* Vortex spiral background */
.bg-vortex {
    background:
        radial-gradient(circle at 30% 50%, rgba(255, 215, 0, 0.1), transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(0, 217, 255, 0.1), transparent 50%),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: vortexSpiral 10s ease-in-out infinite;
}

/* Dynamic color shift */
.bg-dynamic-color {
    animation: dynamicColorShift 12s ease-in-out infinite;
}

/* Gradient mesh flow */
.bg-gradient-mesh {
    background:
        linear-gradient(45deg, rgba(255, 215, 0, 0.05), transparent),
        linear-gradient(-45deg, rgba(0, 217, 255, 0.05), transparent),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: gradientMeshFlow 10s ease-in-out infinite;
}

/* Cyberpunk circuit board effect */
.bg-cyberpunk {
    background:
        linear-gradient(90deg, transparent 24%, rgba(0, 217, 255, 0.05) 25%, rgba(0, 217, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 217, 255, 0.05) 75%, rgba(0, 217, 255, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(rgba(0, 217, 255, 0.05), rgba(0, 217, 255, 0.05));
    background-size: 50px 50px;
    animation: liquidSwirl 15s ease-in-out infinite;
    background-color: #1a1a2e;
}

/* Neon grid pulse */
.bg-neon-grid {
    background-image:
        linear-gradient(0deg, transparent 24%, rgba(255, 215, 0, 0.05) 25%, rgba(255, 215, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 215, 0, 0.05) 75%, rgba(255, 215, 0, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(0, 217, 255, 0.05) 25%, rgba(0, 217, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 217, 255, 0.05) 75%, rgba(0, 217, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    background-color: #0f0f1e;
    animation: softGlowPulse 6s ease-in-out infinite;
}

/* Infinite tunnel depth effect */
@keyframes infiniteTunnel {
    0% {
        background-size: 100% 100%;
    }
    100% {
        background-size: 200% 200%;
    }
}

.bg-infinite-tunnel {
    background: radial-gradient(ellipse at center, rgba(255, 215, 0, 0.15) 0%, rgba(0, 217, 255, 0.08) 30%, rgba(26, 26, 46, 1) 100%);
    animation: infiniteTunnel 8s ease-in-out infinite;
}

/* Crystalline structure */
@keyframes crystalline {
    0%, 100% {
        filter: hue-rotate(0deg);
        background-position: 0% 0%;
    }
    50% {
        filter: hue-rotate(60deg);
        background-position: 100% 100%;
    }
}

.bg-crystalline {
    background:
        linear-gradient(45deg, rgba(255, 215, 0, 0.1), transparent),
        linear-gradient(-45deg, rgba(0, 217, 255, 0.1), transparent),
        linear-gradient(135deg, rgba(255, 6, 110, 0.08), transparent),
        linear-gradient(#1a1a2e, #2a2a4e);
    background-size: 100px 100px, 100px 100px, 100px 100px, 100% 100%;
    animation: crystalline 10s ease-in-out infinite;
}

/* Electric storm */
@keyframes electricStorm {
    0%, 100% {
        background-position: 0% 0%;
        filter: brightness(1);
    }
    50% {
        background-position: 100% 100%;
        filter: brightness(1.1);
    }
}

.bg-electric-storm {
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 10px, rgba(0, 217, 255, 0.1) 10px, rgba(0, 217, 255, 0.1) 20px),
        repeating-linear-gradient(0deg, transparent 0, transparent 10px, rgba(255, 215, 0, 0.05) 10px, rgba(255, 215, 0, 0.05) 20px),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    animation: electricStorm 7s ease-in-out infinite;
}

/* Holographic scan */
@keyframes holoScan {
    0% {
        background-position: 0% 0%, 100% 100%;
    }
    50% {
        background-position: 100% 100%, 0% 0%;
    }
    100% {
        background-position: 0% 0%, 100% 100%;
    }
}

.bg-holo-scan {
    background:
        linear-gradient(90deg, transparent 0%, rgba(0, 217, 255, 0.1) 50%, transparent 100%),
        linear-gradient(-90deg, transparent 0%, rgba(255, 215, 0, 0.1) 50%, transparent 100%),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 200% 100%, 200% 100%, 100% 100%;
    animation: holoScan 8s ease-in-out infinite;
}

/* Liquid metal ripple */
@keyframes liquidRipple {
    0%, 100% {
        background-position: 0% 0%, 0% 100%;
    }
    25% {
        background-position: 100% 0%, 0% 100%;
    }
    50% {
        background-position: 100% 100%, 100% 0%;
    }
    75% {
        background-position: 0% 100%, 100% 100%;
    }
}

.bg-liquid-ripple {
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 217, 255, 0.1), transparent 50%),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: liquidRipple 12s ease-in-out infinite;
}

/* Quantum entanglement */
@keyframes quantumEntangle {
    0%, 100% {
        opacity: 0.8;
        background-position: 0% 0%;
    }
    50% {
        opacity: 1;
        background-position: 100% 100%;
    }
}

.bg-quantum {
    background:
        repeating-linear-gradient(45deg, rgba(255, 6, 110, 0.05) 0px, rgba(255, 6, 110, 0.05) 2px, transparent 2px, transparent 4px),
        repeating-linear-gradient(-45deg, rgba(0, 217, 255, 0.05) 0px, rgba(0, 217, 255, 0.05) 2px, transparent 2px, transparent 4px),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    animation: quantumEntangle 9s ease-in-out infinite;
}

/* Solar flare burst */
@keyframes solarFlare {
    0%, 100% {
        background-size: 100% 100%;
        filter: saturate(0.8);
    }
    50% {
        background-size: 150% 150%;
        filter: saturate(1.2);
    }
}

.bg-solar-flare {
    background: radial-gradient(ellipse 600px 400px at 50% 50%, rgba(255, 215, 0, 0.15), transparent);
    background-color: #1a1a2e;
    animation: solarFlare 8s ease-in-out infinite;
}

/* Cosmic dust cloud */
@keyframes cosmicDust {
    0% {
        background-position: 0% 0%, 0% 100%, 100% 0%;
    }
    100% {
        background-position: 100% 0%, 100% 100%, 0% 100%;
    }
}

.bg-cosmic-dust {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 6, 110, 0.1), transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(0, 217, 255, 0.1), transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 215, 0, 0.05), transparent 50%),
        linear-gradient(135deg, #1a1a2e, #2a2a4e);
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
    animation: cosmicDust 14s ease-in-out infinite;
}

/* Depth of field blur pulse */
@keyframes depthBlur {
    0%, 100% {
        filter: blur(0px);
    }
    50% {
        filter: blur(0.5px);
    }
}

.bg-depth-blur {
    background: linear-gradient(135deg, rgba(26, 26, 46, 1), rgba(42, 42, 78, 1));
    animation: depthBlur 6s ease-in-out infinite;
}

/* ===== OVERLAY ANIMATIONS ===== */
.animated-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.overlay-flowing {
    background: linear-gradient(-45deg, rgba(255, 215, 0, 0.05), rgba(0, 217, 255, 0.05), rgba(255, 6, 110, 0.05), rgba(156, 39, 176, 0.05));
    background-size: 400% 400%;
    animation: flowingGradient 15s ease infinite;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.will-animate {
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .bg-flowing-gradient,
    .bg-pulsing-gradient,
    .bg-diagonal-wave,
    .bg-radial-pulse,
    .bg-aurora,
    .bg-shimmer-wave,
    .bg-breathing,
    .bg-plasma,
    .bg-soft-glow,
    .bg-vortex,
    .bg-dynamic-color,
    .bg-gradient-mesh,
    .bg-cyberpunk,
    .bg-neon-grid,
    .bg-infinite-tunnel,
    .bg-crystalline,
    .bg-electric-storm,
    .bg-holo-scan,
    .bg-liquid-ripple,
    .bg-quantum,
    .bg-solar-flare,
    .bg-cosmic-dust,
    .bg-depth-blur,
    .overlay-flowing {
        animation: none !important;
    }
}