/* === Retro Animations === */

/* --- CSS Marquee Ticker --- */
@keyframes ticker-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.ticker {
    overflow: hidden;
    white-space: nowrap;
    margin-top: var(--space-lg);
    padding: var(--space-xs) 0;
}

.ticker__content {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
    animation: ticker-scroll 25s linear infinite;
    padding-left: 100%;
}

.ticker:hover .ticker__content {
    animation-play-state: paused;
}

/* --- Blink Effect (for "NEW!" badges) --- */
@keyframes retro-blink {
    0%, 49% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}

.blink {
    animation: retro-blink 1s step-start infinite;
}

.new-badge {
    color: #FF0000;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: bold;
    margin-left: var(--space-xs);
}

/* --- Progress Bar Stripe Animation --- */
@keyframes progress-stripes {
    0%   { background-position: 0 0; }
    100% { background-position: 24px 0; }
}

.progress-bar__fill {
    animation: progress-stripes 0.8s linear infinite;
    background-size: 24px 24px;
}

/* --- Subtle Float (for hero logo) --- */
@keyframes gentle-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.hero-logo-placeholder {
    animation: gentle-float 4s ease-in-out infinite;
}

/* --- Cursor Blink (for Notepad effect) --- */
@keyframes cursor-blink {
    0%, 100% { border-right-color: var(--text-primary); }
    50%      { border-right-color: transparent; }
}

/* --- Construction Stripe March --- */
@keyframes stripe-march {
    0%   { background-position: 0 0; }
    100% { background-position: 32px 0; }
}

.construction-stripe {
    animation: stripe-march 1s linear infinite;
    background-size: 32px 20px;
}

/* --- Respect Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .ticker__content {
        animation: none;
        padding-left: 0;
    }

    .blink {
        animation: none;
    }

    .progress-bar__fill {
        animation: none;
    }

    .hero-logo-placeholder {
        animation: none;
    }

    .construction-stripe {
        animation: none;
    }
}