/* Entropy Garden — keyframes & reduced-motion overrides */

@keyframes fadeInPage { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}

@keyframes spinSnake {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } 
}

@keyframes errorShake { 
    0%, 100% { transform: translate(0, 0) rotate(0deg); } 
    20% { transform: translate(-3px, 0) rotate(-10deg); } 
    40% { transform: translate(3px, 2px) rotate(10deg); } 
    60% { transform: translate(-3px, -1px) rotate(-10deg); } 
    80% { transform: translate(2px, 1px) rotate(10deg); } 
}

@keyframes panopticonHighPulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 0.56; }
}

@keyframes fadeInTerm { to { opacity: 1; } }

@keyframes hintFadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    10% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes animDrop { 0% { transform: translate(-50%, -150px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

@keyframes animRise { 0% { transform: translate(-50%, 150px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

@keyframes animZoom { 0% { transform: translate(-50%, 0) scale(3); opacity: 0; } 100% { transform: translate(-50%, 0) scale(1); opacity: 1; } }

@keyframes animSlide { 0% { transform: translate(-150%, 0) skewX(-20deg); opacity: 0; } 100% { transform: translate(-50%, 0) skewX(0deg); opacity: 1; } }

@keyframes animGlitch {
    0% { transform: translate(-50%, 0); opacity: 0; }
    20% { opacity: 1; transform: translate(-52%, 5px); filter: hue-rotate(90deg); }
    40% { opacity: 0; transform: translate(-48%, -5px); }
    60% { opacity: 1; transform: translate(-50%, 10px); filter: hue-rotate(180deg); }
    80% { opacity: 0; transform: translate(-49%, -2px); }
    100% { opacity: 1; transform: translate(-50%, 0); filter: hue-rotate(0deg); } /* Snaps back to visible */
}

/* UI chrome entrance — off-screen → resting position
   RIGHT: from left (hamburger) | LEFT: from right (settings, terminal)
   UP: from bottom (playlist, eye) | DOWN: from top (HUD, settings) */
@keyframes uiEnterFromLeft {
    0% { transform: translateX(calc(-100% - 48px)); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes uiEnterFromRight {
    0% { transform: translateX(calc(100% + 48px)); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes uiEnterFromBottom {
    0% { transform: translateY(calc(100% + 48px)); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes uiEnterFromTopCenter {
    0% { transform: translate(-50%, -150px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes uiEnterFromBottomCenter {
    0% { transform: translate(-50%, calc(-50% + 72px)); opacity: 0; }
    100% { transform: translate(-50%, -50%); opacity: 0.72; }
}

@keyframes uiDockEnterDesktop {
    0% { transform: translate(-50%, 220px); opacity: 0; }
    100% { transform: translate(-50%, 120px); opacity: 1; }
}

@keyframes uiDockEnterTouch {
    0% { transform: translate(-50%, 96px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

@keyframes flash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(2); } }

@keyframes spin3D { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

@keyframes trophyUnlockFlash {
    0% { opacity: 0; transform: translateX(-50%) scale(0.65); }
    10% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    20% { opacity: 0.12; transform: translateX(-50%) scale(1); }
    30% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    40% { opacity: 0.12; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    60% { opacity: 0; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.95); visibility: hidden; }
}

@keyframes terminalInsultFlash {
    0% { opacity: 0; transform: translateX(-50%) scale(0.65); }
    10% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    20% { opacity: 0.12; transform: translateX(-50%) scale(1); }
    30% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    40% { opacity: 0.12; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
    60% { opacity: 0; transform: translateX(-50%) scale(0.95); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.95); visibility: hidden; }
}

@keyframes fadeInBg { to { opacity: 0.8; } }

@keyframes simpleFade { 
    to { opacity: 1; } 
}

@keyframes btnFadeIn { 
    0% { opacity: 0; transform: translate(-50%, 10px); } 
    100% { opacity: 1; transform: translate(-50%, 0); } 
}

@keyframes crtFlicker {
    0% { opacity: 1; text-shadow: 0 0 15px var(--neon-green); }
    10% { opacity: 0.8; text-shadow: 0 0 10px var(--neon-green), 2px 0 1px rgba(0, 255, 0, 0.4); }
    20% { opacity: 1; text-shadow: 0 0 18px var(--neon-green); }
    30% { opacity: 0.9; text-shadow: 0 0 12px var(--neon-green), -2px 0 1px rgba(0, 255, 255, 0.4); }
    50% { opacity: 1; text-shadow: 0 0 20px var(--neon-green), 1px 0 2px rgba(0, 255, 0, 0.5); }
    60% { opacity: 0.85; text-shadow: 0 0 15px var(--neon-green); }
    80% { opacity: 1; text-shadow: 0 0 22px var(--neon-green), -1px 0 2px rgba(0, 255, 0, 0.4); }
    100% { opacity: 0.95; text-shadow: 0 0 16px var(--neon-green); }
}

@keyframes cocSwapIn {
    0% { transform: translateY(-18px) scale(0.82); opacity: 0.2; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes cocDiceOverlayIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -58%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes cocModPop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes cocDieSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.06); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes cocDieLand {
    0% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes cocSpaceHintIn {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cocAnnounceDropIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -95%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes cocAnnounceFadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -38%);
    }
}

@keyframes track-title-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--marquee-offset, -50%)); }
}

@keyframes pongHintDropIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -24px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes pongHintFadeInOut {
    0% { opacity: 0; transform: translate(-50%, 10px); }
    10% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -10px); }
}

@keyframes pongScoreDropBelow {
    0% { transform: translate(-50%, -10px); opacity: 0; }
    70% { transform: translate(-50%, 3px); opacity: 1; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .god-mode-triangle-layer {
        transition-duration: 0.2s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #grid-canvas {
        transition-duration: 0.5s;
    }

    #grid-canvas.matrix-visible {
        filter:
            grayscale(0%)
            blur(0px)
            var(--chroma-filter-lite);
    }

    body.idle-dissociating #grid-canvas.matrix-visible {
        filter:
            grayscale(100%)
            blur(3px)
            var(--chroma-filter-lite);
    }
}

/* ==========================================
   ACCESSIBILITY: REDUCED MOTION OVERRIDES
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    /* 1. Stop the high-contrast CRT strobing on the poems */
    .poem-line {
        animation: none !important;
        opacity: 1 !important;
        text-shadow: 0 0 10px var(--neon-green) !important;
        color: #fff !important;
    }

    /* 2. Replace the violent HUD glitch with a smooth drop */
    #hud.active.anim-glitch {
        animation: animDrop 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    /* 3. Slow the Ouroboros down to a safe, ambient rotation */
    #ouroboros-svg,
    #loader-leaf {
        animation-duration: 20s !important;
    }

    /* 4. Disable the rapid flashing on reroll */
    #panopticon-eye.flash-anim,
    .flash-anim {
        animation: none !important;
        filter: brightness(1.5) !important;
    }

    #panopticon-eye.dizzy {
        animation: none !important;
    }

    #panopticon-eye.panopticon-high {
        animation: none !important;
        opacity: 0.62;
    }

    #panopticon-eye.visible {
        opacity: 0.55;
        transform: translate(-50%, -50%);
    }

    body:not(.ios-ui) .control-panel.active {
        animation: none !important;
        transform: translateX(0);
    }

    body:not(.ios-ui) #settings-menu.active {
        animation: none !important;
        transform: translateY(0);
    }

    body:not(.ios-ui) #playlist-menu.active {
        animation: none !important;
        transform: translateY(0);
    }

    body:not(.ios-ui) #panopticon-eye.visible {
        animation: none !important;
        transform: translate(-50%, -50%);
    }

    body:not(.ios-ui) #hud.active.anim-drop {
        animation: animDrop 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    body:not(.ios-ui) #terminal-container.fab-ready.reveal-in:not([hidden]),
    body:not(.ios-ui) #terminal-container.fab-ready.active:not([hidden]) {
        transform: translateX(0);
    }

    body.garden-ready #docking-bay {
        animation: none !important;
    }

    /* 5. Disable the violent error shaking on the combo locks */
    .artifact.wrong-slot, 
    .slot {
        animation: none !important;
    }

    /* 6. Stop the pulse on the warning title */
    .warning-title {
        animation: none !important;
        opacity: 1 !important;
    }

    /* 7. Pause GPU-heavy ambient layers */
    body::before,
    #ouroboros-svg,
    #loader-leaf {
        animation-play-state: paused !important;
    }

    /* 8. Disable corrupted-mode glitch / static overlays */
    #corrupt-fx,
    .corrupt-fx-scanlines,
    .corrupt-fx-noise,
    .corrupt-fx-tear,
    .corrupt-fx-blocks,
    .corrupt-fx-vignette {
        display: none !important;
        animation: none !important;
    }

    body.chromatic-active {
        animation: fadeInPage 1.5s ease-out forwards !important;
        filter: none !important;
        text-shadow: none !important;
        transform: none !important;
    }

    body.corrupted.garden-ready::before {
        filter: none !important;
    }

    body.corrupted.garden-ready #grid-canvas.matrix-visible {
        animation: none !important;
    }
}

@keyframes liveFeedItem {
    0% {
        opacity: 0;
        transform: translateY(0.55em);
    }
    14% {
        opacity: 1;
        transform: translateY(0);
    }
    78% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-0.55em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .track-title-marquee.is-scrolling .track-title-scroll {
        animation: none;
    }

    .live-feed-status.is-animating {
        animation: none;
    }
}