/* =========================================
   REDUCED MOTION ACCESSIBILITY STYLES
   Respects prefers-reduced-motion setting
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    /* Disable all CSS animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Replace animated GIFs with static alternatives */
    /* This hides animated backgrounds */
    body {
        background-image: none !important;
        background-color: #000033 !important;
    }

    /* Stop blinking text */
    .blink,
    .new-badge {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Stop scrolling text */
    .scrolling-text span {
        animation: none !important;
        transform: none !important;
    }

    /* Stop under construction animation */
    .under-construction {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Stop rainbow animation */
    .rainbow {
        animation: none !important;
        filter: none !important;
    }

    /* Replace animated GIFs with static message */
    /* Users can also use browser extensions to pause GIFs */
    img[src*=".gif"]::after {
        content: " (animated)";
        font-size: 10px;
        color: #999;
    }

    /* Add note about reduced motion being active */
    body::before {
        content: "Reduced motion mode active - animations disabled";
        display: block;
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.8);
        color: #00ff00;
        padding: 5px 10px;
        font-size: 10px;
        font-family: monospace;
        z-index: 9999;
        border: 1px solid #00ff00;
        pointer-events: none;
    }
}