/*
 * animations.css - All Animations
 * Contains glitch, typewriter, and other animation keyframes
 */

/* ============================================
   GLITCH ANIMATION
   ============================================ */

/* Glitch layer 1 - Purple/Magenta shift */
@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-3px, 1px);
        opacity: 1;
    }

    20% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(3px, -1px);
        opacity: 1;
    }

    40% {
        clip-path: inset(40% 0 50% 0);
        transform: translate(-3px, 2px);
        opacity: 1;
    }

    60% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(3px, -2px);
        opacity: 1;
    }

    80% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(-2px, 3px);
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0);
        opacity: 0;
    }
}

/* Glitch layer 2 - Cyan shift */
@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(10% 0 60% 0);
        transform: translate(3px, -1px);
        opacity: 1;
    }

    20% {
        clip-path: inset(30% 0 20% 0);
        transform: translate(-3px, 2px);
        opacity: 1;
    }

    40% {
        clip-path: inset(70% 0 20% 0);
        transform: translate(3px, -2px);
        opacity: 1;
    }

    60% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(-3px, 1px);
        opacity: 1;
    }

    80% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(3px, 2px);
        opacity: 1;
    }

    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(0);
        opacity: 0;
    }
}

/* ============================================
   LOGO GLITCH ANIMATION (for .online text)
   ============================================ */

@keyframes logo-glitch-1 {

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

    5% {
        transform: translate(-3px, 1px);
        opacity: 0.8;
    }

    10% {
        transform: translate(3px, -1px);
        opacity: 0.6;
    }

    15% {
        transform: translate(-2px, 2px);
        opacity: 0.9;
    }

    20% {
        transform: translate(2px, -2px);
        opacity: 0.5;
    }

    25%,
    100% {
        transform: translate(0);
        opacity: 0;
    }
}

@keyframes logo-glitch-2 {

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

    7% {
        transform: translate(3px, -1px);
        opacity: 0.7;
    }

    14% {
        transform: translate(-3px, 2px);
        opacity: 0.8;
    }

    21% {
        transform: translate(2px, 1px);
        opacity: 0.6;
    }

    28%,
    100% {
        transform: translate(0);
        opacity: 0;
    }
}

@keyframes logo-glitch-continuous-1 {

    0%,
    40%,
    100% {
        transform: translate(0);
        opacity: 0;
    }

    42% {
        transform: translate(-4px, 1px);
        opacity: 0.9;
    }

    44% {
        transform: translate(4px, -1px);
        opacity: 0.7;
    }

    46% {
        transform: translate(-3px, 2px);
        opacity: 0.8;
    }

    48% {
        transform: translate(3px, -2px);
        opacity: 0.6;
    }

    50%,
    100% {
        transform: translate(0);
        opacity: 0;
    }
}

@keyframes logo-glitch-continuous-2 {

    0%,
    45%,
    100% {
        transform: translate(0);
        opacity: 0;
    }

    47% {
        transform: translate(3px, 1px);
        opacity: 0.8;
    }

    49% {
        transform: translate(-3px, -1px);
        opacity: 0.7;
    }

    51% {
        transform: translate(2px, -2px);
        opacity: 0.9;
    }

    53%,
    100% {
        transform: translate(0);
        opacity: 0;
    }
}

/* ============================================
   TYPEWRITER CURSOR BLINK
   ============================================ */

@keyframes blink-cursor {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ============================================
   BURGER MENU ANIMATIONS
   ============================================ */

@keyframes menu-slide-in {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

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

@keyframes menu-slide-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* ============================================
   FADE IN ANIMATIONS
   ============================================ */

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

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

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

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

/* Animation delays for staggered effects */
.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;
}