/* ============================================
   ASKEVE - ANIMATIONS
   Centralized animation definitions
   ============================================ */

/* --- Fade In / Slide In --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Glow Effects --- */
@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--neon-glow);
    }

    50% {
        box-shadow: 0 0 40px var(--neon-glow), 0 0 60px var(--neon-glow);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* --- Glitch / Tech Effects --- */
@keyframes scanLine {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100vh);
    }
}

@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);
    }
}

@keyframes neonFlicker {

    0%,
    100% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: 0.8;
    }

    94% {
        opacity: 1;
    }

    96% {
        opacity: 0.9;
    }

    98% {
        opacity: 1;
    }
}

/* --- Logo Animations --- */
@keyframes logoBreathing {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes logoBreathingSmall {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.8px);
    }
}

@keyframes productLogoPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 30px rgba(68, 214, 165, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 60px rgba(68, 214, 165, 0.6));
    }
}

/* --- UI Elements --- */
@keyframes scrollPulse {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(0.5);
        opacity: 0.5;
    }
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* --- Utility Classes for Animations --- */
.animate-fade-in-up {
    animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
}

.animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out) forwards;
}

.animate-slide-left {
    animation: slideInLeft var(--duration-slow) var(--ease-out) forwards;
}

.animate-slide-right {
    animation: slideInRight var(--duration-slow) var(--ease-out) forwards;
}

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

.animate-neon-flicker {
    animation: neonFlicker 5s infinite;
}

.logo-breathing {
    animation: logoBreathing 3s ease-in-out infinite;
}

.logo-breathing-small {
    animation: logoBreathingSmall 3s ease-in-out infinite;
}