/* ============================================
   ANIMATIONS CSS - All Animation Keyframes & Classes
   ============================================ */

/* ==================== KEYFRAMES ==================== */

/* Fade Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

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

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

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

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Slide Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* Bounce Animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

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

/* Pulse Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
}

/* Glow Animation */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 40px rgba(37, 99, 235, 0.6); }
}

@keyframes glowAccent {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 40px rgba(245, 158, 11, 0.6); }
}

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

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

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

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

/* Shake Animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Swing Animation */
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Shimmer Animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Background Move Animation */
@keyframes moveBackground {
    0% { transform: translateY(0); }
    100% { transform: translateY(40px); }
}

/* Count Up Animation */
@keyframes countUp {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Flip Animation */
@keyframes flipIn {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}

/* Typing Animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

/* Wave Animation */
@keyframes wave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

/* Ripple Animation */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==================== ANIMATION UTILITY CLASSES ==================== */

/* Fade Classes */
.animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fadeInDown { animation: fadeInDown 0.6s ease-out forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease-out forwards; }
.animate-fadeInRight { animation: fadeInRight 0.6s ease-out forwards; }
.animate-fadeInScale { animation: fadeInScale 0.6s ease-out forwards; }

/* Zoom Classes */
.animate-zoomIn { animation: zoomIn 0.5s ease-out forwards; }
.animate-zoomOut { animation: zoomOut 0.5s ease-out forwards; }

/* Slide Classes */
.animate-slideInUp { animation: slideInUp 0.5s ease-out forwards; }
.animate-slideInDown { animation: slideInDown 0.5s ease-out forwards; }
.animate-slideInLeft { animation: slideInLeft 0.5s ease-out forwards; }
.animate-slideInRight { animation: slideInRight 0.5s ease-out forwards; }

/* Bounce Classes */
.animate-bounce { animation: bounce 1s ease infinite; }
.animate-bounceIn { animation: bounceIn 0.6s ease-out forwards; }
.animate-bounceSoft { animation: bounceSoft 2s ease-in-out infinite; }

/* Pulse Classes */
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-pulseScale { animation: pulseScale 2s ease-in-out infinite; }
.animate-heartbeat { animation: heartbeat 1s ease-in-out infinite; }

/* Float Classes */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-floatSoft { animation: floatSoft 3s ease-in-out infinite; }

/* Rotate Classes */
.animate-rotate { animation: rotate 2s linear infinite; }
.animate-rotateSlow { animation: rotateSlow 10s linear infinite; }

/* Glow Classes */
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-glowAccent { animation: glowAccent 2s ease-in-out infinite; }

/* Other Classes */
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-swing { animation: swing 1s ease-in-out; }
.animate-shimmer { animation: shimmer 2s linear infinite; }

/* ==================== ANIMATION DELAYS ==================== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ==================== ANIMATION DURATIONS ==================== */
.duration-fast { animation-duration: 0.2s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }
.duration-slower { animation-duration: 2s; }

/* ==================== ANIMATION TIMING FUNCTIONS ==================== */
.ease-linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.ease-bounce { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* ==================== ANIMATION FILL MODES ==================== */
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both { animation-fill-mode: both; }

/* ==================== SCROLL ANIMATION CLASSES ==================== */
.scroll-animate {
    opacity: 0;
    transition: all 0.6s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
}

.scroll-animate.fade-up {
    transform: translateY(30px);
}

.scroll-animate.fade-up.visible {
    transform: translateY(0);
}

.scroll-animate.fade-left {
    transform: translateX(-50px);
}

.scroll-animate.fade-left.visible {
    transform: translateX(0);
}

.scroll-animate.fade-right {
    transform: translateX(50px);
}

.scroll-animate.fade-right.visible {
    transform: translateX(0);
}

.scroll-animate.zoom {
    transform: scale(0.9);
}

.scroll-animate.zoom.visible {
    transform: scale(1);
}

/* ==================== HOVER ANIMATIONS ==================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.4);
}

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* ==================== LOADING ANIMATIONS ==================== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

.loading-dots {
    display: flex;
    gap: 8px;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: bounceSoft 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

.loading-bar {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    overflow: hidden;
    border-radius: 2px;
}

.loading-bar::after {
    content: '';
    display: block;
    width: 30%;
    height: 100%;
    background: var(--primary-color);
    animation: slideInRight 1s ease-in-out infinite;
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}