/* ========================================
   MODERN ANIMATIONS - Spin Fusion Style
   ======================================== */

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

/* Pulse Glow */
@keyframes pulseGlow {
    0%, 100% { 
        box-shadow: 0 0 20px rgb(0 212 255 / 30%), 0 0 40px rgb(0 212 255 / 10%);
    }
    50% { 
        box-shadow: 0 0 40px rgb(0 212 255 / 60%), 0 0 80px rgb(0 212 255 / 30%);
    }
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale Bounce */
@keyframes scaleBounce {
    0% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Gradient Shift */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

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

/* Glitch Effect */
@keyframes glitch {
    0%, 100% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
}

/* Rotate Continuous */
@keyframes rotateContinuous {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Neon Flicker */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 10px var(--primary-cyan), 0 0 20px var(--primary-cyan),
                     0 0 30px var(--primary-cyan), 0 0 40px var(--primary-blue);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Utility Animation Classes */
.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

.animate-slide-left {
    animation: slideInLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-right {
    animation: slideInRight 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-scale-bounce {
    animation: scaleBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-fade-up {
    animation: fadeInUp 0.8s ease-out;
}

.animate-zoom {
    animation: zoomIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.animate-rotate {
    animation: rotateContinuous 20s linear infinite;
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgb(0 212 255 / 40%);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgb(0 212 255 / 50%), 0 0 60px rgb(0 212 255 / 30%);
}

/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }