/* Animation Keyframes and Classes */

/* Core Keyframes */
@keyframes slideUp {
    0% { 
        transform: translateY(150px); 
        opacity: 0; 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

@keyframes slideLeft {
    0% { 
        transform: translateX(-150px); 
        opacity: 0; 
    }
    100% { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@keyframes slideRight {
    0% { 
        transform: translateX(150px); 
        opacity: 0; 
    }
    100% { 
        transform: translateX(0); 
        opacity: 1; 
    }
}

@keyframes slideDown {
    0% { 
        transform: translateY(-150px); 
        opacity: 0; 
    }
    100% { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

@keyframes zoomIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

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

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

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

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

/* Background Animations */
@keyframes backgroundMove {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -20px) rotate(1deg); }
    50% { transform: translate(-20px, 30px) rotate(-0.5deg); }
    75% { transform: translate(40px, 10px) rotate(0.8deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes backgroundShift {
    0% { 
        background-position: 0 0, 50px 50px, 100px 100px;
        opacity: 0.8;
    }
    50% { 
        background-position: 100px 0, -50px 100px, 200px -50px;
        opacity: 0.6;
    }
    100% { 
        background-position: 200px 50px, 150px -100px, -100px 200px;
        opacity: 0.9;
    }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes glow {
    0%, 100% { text-shadow: 0 0 5px rgba(250, 204, 21, 0.5); }
    50% { text-shadow: 0 0 20px rgba(250, 204, 21, 0.8), 0 0 30px rgba(250, 204, 21, 0.6); }
}

/* Animation Classes */
.animate-slide-up {
    animation: slideUp 1.5s ease-out forwards !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity;
}

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

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

.animate-slide-left {
    animation: slideLeft 1.5s ease-out forwards !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity;
}

.animate-slide-right {
    animation: slideRight 1.5s ease-out forwards !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity;
}

.animate-slide-down {
    animation: slideDown 1.5s ease-out forwards !important;
    animation-fill-mode: both !important;
    will-change: transform, opacity;
}

.animate-zoom-in {
    animation: zoomIn 1s ease-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

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

.animate-rotate-slow {
    animation: rotate-slow 10s linear infinite;
}

.animate-gradient-shift {
    animation: gradient-shift 3s ease infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

/* Animation Delay Utilities */
.delay-0 { animation-delay: 0s; }
.delay-02 { animation-delay: 0.2s; }
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }
.delay-1s { animation-delay: 1s; }
.delay-2s { animation-delay: 2s; }
.delay-3s { animation-delay: 3s; }
.delay-4s { animation-delay: 4s; }

/* Negative delays for staggered effects */
.delay-neg-1s { animation-delay: -1s; }
.delay-neg-2s { animation-delay: -2s; }
.delay-neg-3s { animation-delay: -3s; }
.delay-neg-4s { animation-delay: -4s; }

/* Specific delay classes */
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-800 { animation-delay: 0.8s; }
.animation-delay-900 { animation-delay: 0.9s; }
.animation-delay-1000 { animation-delay: 1s; }

/* Additional delay classes for existing animations */
.delay-400 { animation-delay: 0.4s; }

/* Transition Classes */
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }

.duration-300 { transition-duration: 0.3s; }
.duration-500 { transition-duration: 0.5s; }

/* Hover Transforms */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.hover\:rotate-12:hover { transform: rotate(12deg); }

/* Background Pattern */
.background-pattern {
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(250, 204, 21, 0.03) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(59, 130, 246, 0.02) 50%, transparent 60%),
        linear-gradient(90deg, transparent 30%, rgba(250, 204, 21, 0.02) 50%, transparent 70%);
    background-size: 200px 200px, 150px 150px, 300px 300px;
    background-position: 0 0, 50px 50px, 100px 100px;
    animation: backgroundMove 25s linear infinite, backgroundShift 35s ease-in-out infinite alternate;
}