/* ==========================================================================
   EFFECTS.CSS // FX-ENGINE MASTER
   Logik: FX sind standardmäßig aktiv, Deaktivierung über Body-Klassen.
   ========================================================================== */

/* ==========================================
   01 // AMBIENT GLOW (Hintergrund-Glühen)
   ========================================== */
body:not(.no-fx):not(.raw-mode) .viewport {
    background: radial-gradient(circle at 50% 50%, rgba(255, 150, 50, 0.03) 0%, transparent 100%);
    transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   02 // GLOBAL SCANLINES (CRT-Effekt Overlay)
   ========================================== */
body:not(.no-fx):not(.raw-mode)::after {
    content: "";
    position: fixed;
    inset: 0; /* Ersetzt top/left/width/height */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%);
    background-size: 100% 4px;
    z-index: 100000;
    pointer-events: none;
    opacity: 0.15;
    transition: opacity 0.8s ease;
}

/* ==========================================
   03 // CRT FLICKER (Bildschirm-Flimmern)
   ========================================== */
@keyframes utopian-flicker {
    0%, 10%, 100% {
        filter: brightness(1);
    }

    5% {
        filter: brightness(1.04);
    }

    15% {
        filter: brightness(1.02);
    }
}

/* Flimmern aktiv: Wenn FX an UND NICHT im Light-Mode/Focus-Mode */
body:not(.no-fx):not(.light-mode):not(.focus-mode) {
    animation: utopian-flicker 0.15s infinite;
}

/* ==========================================
   04 // FOCUS MODE OVERRIDES
   ========================================== */
/* Globale Animationen deaktivieren */
body.focus-mode {
    animation: none !important;
}

    /* Dunkelt ab und sättigt Farben ab */
    body.focus-mode .viewport {
        background: #040506 !important;
        filter: saturate(0.5) brightness(0.7);
        transition: all 0.8s ease;
    }

    /* Scanlines im Focus Mode fast unsichtbar machen */
    body.focus-mode::after {
        opacity: 0.03;
    }