/* =========================================
   ANIMATION UTILITIES & KEYFRAMES
   ========================================= */

/* Base Settings */
:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Keyframes */

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

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

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

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

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

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(24, 48, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(24, 48, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(24, 48, 255, 0);
    }
}

/* 2. Utility Classes */

.fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: var(--ease-smooth);
}

.fade-in-down {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: var(--ease-smooth);
}

.fade-in {
    animation-name: fadeIn;
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

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

/* 3. Interactive Effects */

/* Text Shimmer Effect (Optional usage for important text) */
.shimmer-text {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s infinite linear;
}

/* Floating Elements */
.floating {
    animation: float 6s ease-in-out infinite;
}

/* Hover Lift */
.hover-lift {
    transition: transform 0.3s var(--ease-smooth);
}
.hover-lift:hover {
    transform: translateY(-5px);
}