/* =========================================
   APOCALYPTIC CRT MONITOR GLITCH EFFEKTE
   Realistischer alter Bildschirm mit Störungen
   ========================================= */

/* Basis-Styling für Slogan-Effekte */
.slogan-text {
    /* NEU: Verlaufsartiger Hintergrund für bessere Lesbarkeit */
    padding: 12px 40px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent 100%
    );
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: relative;
    
    /* KRITISCH: Blockiere JEDE vertikale Bewegung */
    transform: translateY(0) !important;
    will-change: opacity, filter, letter-spacing; /* Nur diese Properties dürfen sich ändern */
    
    /* Überschreibe fadeInSubtext Animation aus aaw_style.css */
    animation: none !important;
}

/* Extra Sicherheit: Auch in allen States keine vertikale Bewegung */
.slogan-text.glitch-out,
.slogan-text.typing,
.slogan-text.stable,
.slogan-text.scan-line {
    transform: translateY(0) !important;
}

/* =========================================
   GLITCH-OUT EFFEKT (Text verschwindet)
   Wie ein alter CRT-Monitor der ausgeht
   ========================================= */
.slogan-text.glitch-out {
    animation: crtShutdown 0.6s ease-out forwards;
}

@keyframes crtShutdown {
    0% {
        opacity: 0.8;
        filter: none;
        letter-spacing: 4px;
    }
    /* Sanftere horizontale Kompression */
    30% {
        opacity: 0.65;
        filter: brightness(1.15) contrast(1.2);
        letter-spacing: 5px;
    }
    50% {
        opacity: 0.5;
        filter: brightness(1.25) contrast(1.4);
        letter-spacing: 7px;
    }
    /* Subtilerer "Kollaps" */
    70% {
        opacity: 0.3;
        filter: brightness(1.4) contrast(1.6);
        letter-spacing: 10px;
    }
    /* Dezenteres Ausschalten */
    85% {
        opacity: 0.15;
        filter: brightness(1.8) blur(0.5px);
        letter-spacing: 14px;
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.2);
    }
    100% {
        opacity: 0;
        filter: brightness(0);
        letter-spacing: 18px;
    }
}

/* =========================================
   TYPING EFFEKT
   Text erscheint wie auf einem Terminal
   ========================================= */
.slogan-text.typing {
    opacity: 0.85;
}

/* Blinkender Block-Cursor */
.slogan-text.typing::after {
    content: '█';
    animation: terminalCursor 0.6s step-end infinite;
    color: white;
    margin-left: 2px;
    opacity: 0.8;
}

@keyframes terminalCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* =========================================
   SCAN-LINE STÖRUNG
   Horizontale Interferenzlinie wie bei VHS
   ========================================= */
.slogan-text.scan-line {
    position: relative;
}

.slogan-text.scan-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    right: -10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 0 2px rgba(255, 255, 255, 0.4),
        0 0 4px rgba(255, 255, 255, 0.2);
    animation: interferencePass 0.15s linear;
    pointer-events: none;
    z-index: 10;
}

@keyframes interferencePass {
    0% {
        top: 0%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* =========================================
   STABLE STATE (Stabiler Anzeigemodus)
   Subtile CRT-Monitor Simulation
   ========================================= */
.slogan-text.stable {
    opacity: 0.8;
    animation: crtFlicker 4s ease-in-out infinite;
}

/* Sehr subtiles Flackern wie bei alten Monitoren */
@keyframes crtFlicker {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1) contrast(1);
    }
    5% {
        opacity: 0.78;
        filter: brightness(0.98) contrast(1.02);
    }
    10% {
        opacity: 0.81;
        filter: brightness(1.01) contrast(0.99);
    }
    15% {
        opacity: 0.79;
    }
    50% {
        opacity: 0.795;
        filter: brightness(0.99) contrast(1.01);
    }
    85% {
        opacity: 0.805;
    }
}

/* =========================================
   CRT SCAN-LINES OVERLAY
   Permanente horizontale Linien wie bei Röhrenmonitoren
   ========================================= */
.slogan-text.stable::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    right: -5%;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.05) 0px,
        transparent 1px,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px
    );
    pointer-events: none;
    opacity: 0.25;
    animation: scanlineScroll 8s linear infinite;
}

@keyframes scanlineScroll {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(2px);
    }
}

/* =========================================
   POWER-ON EFFEKT (Erster Ladevorgang)
   Wie wenn ein alter Monitor angeht
   ========================================= */
.slogan-text.power-on {
    animation: crtPowerOn 1s ease-out forwards;
}

@keyframes crtPowerOn {
    0% {
        opacity: 0;
        filter: brightness(3) blur(5px);
        letter-spacing: 30px;
    }
    20% {
        opacity: 0.3;
        filter: brightness(2.5) blur(3px);
        letter-spacing: 20px;
    }
    40% {
        opacity: 0.5;
        filter: brightness(2) blur(2px);
        letter-spacing: 10px;
    }
    60% {
        opacity: 0.7;
        filter: brightness(1.5) blur(1px);
        letter-spacing: 6px;
    }
    80% {
        opacity: 0.75;
        filter: brightness(1.2);
        letter-spacing: 5px;
    }
    100% {
        opacity: 0.8;
        filter: brightness(1);
        letter-spacing: 4px;
    }
}

/* =========================================
   HEAVY INTERFERENCE (Starke Störung)
   Für dramatischere Momente
   ========================================= */
.slogan-text.heavy-interference {
    animation: heavyGlitch 0.3s ease-in-out;
}

@keyframes heavyGlitch {
    0%, 100% {
        opacity: 0.8;
        filter: brightness(1);
    }
    10% {
        opacity: 0.3;
        filter: brightness(2) contrast(3);
    }
    20% {
        opacity: 0.9;
        filter: brightness(0.5) contrast(2);
    }
    30% {
        opacity: 0.2;
        filter: brightness(3);
    }
    40% {
        opacity: 0.85;
        filter: brightness(0.8);
    }
    50% {
        opacity: 0.4;
        filter: brightness(2.5);
    }
    60% {
        opacity: 0.8;
        filter: brightness(1);
    }
}

/* =========================================
   PIXEL JITTER (Leichte Zitterbewegung)
   Nur HORIZONTAL - keine vertikale Bewegung
   ========================================= */
.slogan-text.pixel-jitter {
    animation: horizontalJitter 0.1s linear infinite;
}

@keyframes horizontalJitter {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.5px); }
    50% { transform: translateX(0.5px); }
    75% { transform: translateX(-0.3px); }
}

/* =========================================
   RESPONSIVE ANPASSUNGEN
   ========================================= */
@media (max-width: 768px) {
    .slogan-text {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
    
    .slogan-text.typing::after {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .slogan-text {
        font-size: 1rem;
        letter-spacing: 1px;
    }
    
    .slogan-text.stable::before {
        opacity: 0.2; /* Scan-Lines auf Mobile dezenter */
    }
}

/* =========================================
   ZUSÄTZLICHE MONITOR-ÄSTHETIK
   ========================================= */

/* Leichtes Vignetten-Glühen (sehr subtil) */
.slogan-text.stable::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -20px;
    right: -20px;
    bottom: -10px;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(0, 0, 0, 0.05) 100%
    );
    pointer-events: none;
    opacity: 0.2;
}