/* ============================================
   CRT-EFFECTS.CSS - Retro Monitor Effects
   Scanlines, Flicker, Glow, Curvature, Vignette
   ============================================ */

/* ---- CRT Screen Container ---- */
.crt-screen {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /* Subtle CRT curvature via border-radius */
    border-radius: 18px / 12px;
    /* Slight perspective warp for curvature illusion */
    transform: perspective(1200px) rotateX(0.4deg);
    animation: flicker 4s infinite;
}

/* Vignette overlay - darkened edges like a real CRT */
.crt-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Rauschen ueber dem Verlauf = Dithering: Auf dem dunklen Grund gibt es nur
       ~10 Helligkeitsstufen bis Schwarz, ohne Rauschen entstehen breite Treppen.
       Verlauf mit vielen Stuetzpunkten (weiche Kurve statt drei Knicke). */
    background:
        var(--crt-noise),
        radial-gradient(
            ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.02) 61%,
            rgba(0, 0, 0, 0.05) 67%,
            rgba(0, 0, 0, 0.09) 73%,
            rgba(0, 0, 0, 0.14) 79%,
            rgba(0, 0, 0, 0.19) 85%,
            rgba(0, 0, 0, 0.24) 91%,
            rgba(0, 0, 0, 0.30) 100%
        );
    pointer-events: none;
    z-index: 100;
}

/* Feines Graustufen-Rauschen (inline SVG, keine externe Datei) */
:root {
    --crt-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.35 0 0 0 0 0.35 0 0 0 0 0.35 0 0 0 0 0 0 0 0 0.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Scanlines ---- */
.scanlines {
    position: relative;
}

.scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.15) 1px,
        rgba(0, 0, 0, 0.15) 2px
    );
    pointer-events: none;
    z-index: 99;
}

/* Thicker scanlines variant */
.scanlines-thick::after {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.2) 2px,
        rgba(0, 0, 0, 0.2) 4px
    );
}

/* ---- Flicker Animation ---- */
@keyframes flicker {
    0% { opacity: 0.98; }
    5% { opacity: 1.0; }
    10% { opacity: 0.98; }
    15% { opacity: 0.99; }
    20% { opacity: 1.0; }
    50% { opacity: 0.99; }
    55% { opacity: 0.97; }
    60% { opacity: 1.0; }
    80% { opacity: 0.99; }
    85% { opacity: 0.97; }
    90% { opacity: 1.0; }
    95% { opacity: 0.99; }
    100% { opacity: 0.98; }
}

/* ---- Text Glow Animation ---- */
@keyframes textGlow {
    0% {
        text-shadow:
            0 0 4px var(--glow-color-subtle),
            0 0 8px var(--glow-color-subtle);
    }
    50% {
        text-shadow:
            0 0 6px var(--glow-color),
            0 0 14px var(--glow-color),
            0 0 24px var(--glow-color-subtle);
    }
    100% {
        text-shadow:
            0 0 4px var(--glow-color-subtle),
            0 0 8px var(--glow-color-subtle);
    }
}

/* Glow text class */
.glow-text {
    text-shadow:
        0 0 4px var(--glow-color-subtle),
        0 0 10px var(--glow-color);
    animation: textGlow 3s ease-in-out infinite;
}

/* Subtle glow - less intense version */
.glow-text-subtle {
    text-shadow:
        0 0 3px var(--glow-color-subtle),
        0 0 6px var(--glow-color-subtle);
    animation: textGlow 5s ease-in-out infinite;
}

/* Static glow without animation */
.glow-text-static {
    text-shadow:
        0 0 4px var(--glow-color-subtle),
        0 0 10px var(--glow-color);
}

/* ---- Box/Border Glow ---- */
@keyframes boxGlow {
    0% {
        box-shadow:
            0 0 4px var(--glow-color-subtle),
            inset 0 0 4px var(--glow-color-subtle);
    }
    50% {
        box-shadow:
            0 0 8px var(--glow-color),
            0 0 16px var(--glow-color-subtle),
            inset 0 0 6px var(--glow-color-subtle);
    }
    100% {
        box-shadow:
            0 0 4px var(--glow-color-subtle),
            inset 0 0 4px var(--glow-color-subtle);
    }
}

.glow-box {
    box-shadow:
        0 0 6px var(--glow-color-subtle),
        inset 0 0 4px var(--glow-color-subtle);
    animation: boxGlow 3s ease-in-out infinite;
}

.glow-box-static {
    box-shadow:
        0 0 6px var(--glow-color-subtle),
        inset 0 0 4px var(--glow-color-subtle);
}

/* ---- Screen Turn-On Effect ---- */
@keyframes screenOn {
    0% {
        transform: scale(1, 0.01);
        opacity: 0;
        filter: brightness(10);
    }
    40% {
        transform: scale(1, 0.01);
        opacity: 1;
        filter: brightness(10);
    }
    60% {
        transform: scale(1, 0.8);
        filter: brightness(2);
    }
    80% {
        transform: scale(1, 1);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1);
    }
}

.screen-on {
    animation: screenOn 0.8s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* ---- Horizontal Line Glitch ---- */
@keyframes hLineGlitch {
    0%, 100% { clip-path: none; }
    92% { clip-path: none; }
    93% {
        clip-path: polygon(
            0 0, 100% 0, 100% 45%, 0 45%,
            0 47%, 100% 47%, 100% 100%, 0 100%
        );
    }
    95% { clip-path: none; }
    96% {
        clip-path: polygon(
            0 0, 100% 0, 100% 70%, 0 70%,
            0 72%, 100% 72%, 100% 100%, 0 100%
        );
    }
    97% { clip-path: none; }
}

.glitch-occasional {
    animation: hLineGlitch 12s linear infinite;
}

/* ---- Phosphor Persistence (text trails) ---- */
@keyframes phosphorFade {
    0% {
        opacity: 1;
        text-shadow: 0 0 8px var(--glow-color);
    }
    100% {
        opacity: 0;
        text-shadow: 0 0 2px var(--glow-color-subtle);
    }
}

.phosphor-fade {
    animation: phosphorFade 1.5s ease-out forwards;
}

/* ==========================================================================
   Effekte an/aus (data-crt am <html>, UI.setCrtLevel). AN = Grundregeln oben.
   ========================================================================== */

/* AUS: klares Bild */
[data-crt="off"] .crt-screen {
    animation: none;
    transform: none;
    border-radius: 0;
}

[data-crt="off"] .crt-screen::before,
[data-crt="off"] .scanlines::after {
    display: none;
}

/* ==========================================================================
   Momente (UI.crtMoment): Einschalten, Stoerzeile, Ausschalten
   ========================================================================== */
/* Einschalten: ruhiges Einblenden aus dem Nichts (frueher Roehre klappt auf, screenOn) */
@keyframes screenFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.screen.crt-on {
    animation: screenFadeIn 2s ease-out;
}

@keyframes screenOff {
    0%   { transform: scale(1, 1); filter: brightness(1); opacity: 1; }
    45%  { transform: scale(1, 0.006); filter: brightness(4); opacity: 1; }
    80%  { transform: scale(0.02, 0.006); filter: brightness(8); opacity: 1; }
    100% { transform: scale(0, 0); filter: brightness(8); opacity: 0; }
}

.screen.crt-off {
    animation: screenOff 0.7s ease-in forwards;
}

/* Stoerzeile: Bild zuckt seitlich, ein heller Balken laeuft durch */
@keyframes crtJitter {
    0%, 100% { transform: translateX(0); filter: none; }
    15%  { transform: translateX(-7px) skewX(-2deg); filter: brightness(1.4); }
    30%  { transform: translateX(5px); }
    45%  { transform: translateX(-3px) skewX(1deg); filter: brightness(1.2) contrast(1.3); }
    60%  { transform: translateX(2px); }
    80%  { transform: translateX(-1px); filter: none; }
}

.crt-glitch .screen.active {
    animation: crtJitter 0.45s steps(8);
}

@keyframes crtBar {
    0%   { top: -8%; opacity: 0.55; }
    100% { top: 108%; opacity: 0.2; }
}

.crt-glitch-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 7%;
    background: linear-gradient(to bottom, transparent, var(--glow-color-strong), transparent);
    pointer-events: none;
    z-index: 101;
    animation: crtBar 0.45s linear forwards;
}

/* ---- Reduced Motion Preference ---- */
@media (prefers-reduced-motion: reduce) {
    .crt-screen {
        animation: none;
    }

    .glow-text,
    .glow-text-subtle {
        animation: none;
    }

    .glow-box {
        animation: none;
    }

    .scanlines::after {
        display: none;
    }

    .screen-on {
        animation: none;
    }

    .glitch-occasional {
        animation: none;
    }
}