/* ===========================================
   ANIMATIONS.CSS - Keyframes & Effects
   =========================================== */

/* --- STAR TWINKLE --- */
@keyframes twinkle {

    0%,
    100% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.7;
    }
}

/* --- TEXT FLICKER --- */
@keyframes text-flicker {
    0% {
        opacity: 0.95;
    }

    5% {
        opacity: 0.75;
    }

    6% {
        opacity: 0.95;
    }

    9% {
        opacity: 0.95;
    }

    10% {
        opacity: 0.6;
    }

    11% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.95;
    }
}

/* --- GLITCH TEXT EFFECT --- */
.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
}

.glitch-text::before {
    left: 2px;
    text-shadow: -1px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
    left: -2px;
    text-shadow: -1px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(11px, 9999px, 86px, 0);
    }

    20% {
        clip: rect(6px, 9999px, 19px, 0);
    }

    40% {
        clip: rect(66px, 9999px, 16px, 0);
    }

    60% {
        clip: rect(98px, 9999px, 6px, 0);
    }

    80% {
        clip: rect(51px, 9999px, 4px, 0);
    }

    100% {
        clip: rect(2px, 9999px, 92px, 0);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(16px, 9999px, 2px, 0);
    }

    20% {
        clip: rect(58px, 9999px, 14px, 0);
    }

    40% {
        clip: rect(94px, 9999px, 51px, 0);
    }

    60% {
        clip: rect(6px, 9999px, 86px, 0);
    }

    80% {
        clip: rect(31px, 9999px, 49px, 0);
    }

    100% {
        clip: rect(10px, 9999px, 94px, 0);
    }
}

/* --- MARQUEE --- */
.marquee-container {
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-muted);
    padding-bottom: 4px;
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    will-change: transform;
    animation: marquee 10s linear infinite;
    font-family: var(--f-pixel);
    font-size: 0.65rem;
    color: var(--wired-pink);
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}