/* ═══ EFECTOS DE DETERIORO ═══ */

/* Nivel 0-2: Limpio */
.deterioration-0 {}

/* Nivel 3-4: Primeros síntomas */
.deterioration-low #narrative-text {
    animation: subtle-flicker 8s ease-in-out infinite;
}

@keyframes subtle-flicker {
    0%, 97%, 100% { opacity: 1; }
    98% { opacity: 0.95; }
    99% { opacity: 1; }
}

/* Nivel 5-6: Deterioro medio */
.deterioration-mid #narrative-text {
    animation: text-glitch 6s ease-in-out infinite;
}

.deterioration-mid .interactable {
    animation: color-drift 4s ease-in-out infinite alternate;
}

@keyframes text-glitch {
    0%, 89%, 100% { transform: translateX(0); filter: none; }
    90% { transform: translateX(-1px); filter: hue-rotate(5deg); }
    91% { transform: translateX(1px); }
    92% { transform: translateX(0); filter: none; }
}

@keyframes color-drift {
    0% { color: var(--interactable-act1); }
    100% { color: var(--interactable-act2); }
}

/* Nivel 7-8: Deterioro alto */
.deterioration-high {
    position: relative;
}

.deterioration-high #narrative-viewport::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.03) 2px,
        rgba(0,0,0,0.03) 4px
    );
    pointer-events: none;
    animation: scanlines 0.5s linear infinite;
}

@keyframes scanlines {
    0% { background-position: 0 0; }
    100% { background-position: 0 4px; }
}

.deterioration-high #side-panel {
    animation: panel-shake 12s ease-in-out infinite;
}

@keyframes panel-shake {
    0%, 94%, 100% { transform: translateX(0); }
    95% { transform: translateX(-2px); }
    96% { transform: translateX(2px); }
    97% { transform: translateX(0); }
}

/* Nivel 9-10: Crítico */
.deterioration-critical #header-bar .system-name {
    animation: name-glitch 3s step-end infinite;
}

@keyframes name-glitch {
    0%, 60%, 100% { content: 'S.A.M. — SISTEMA ACTIVO'; color: var(--text-oracle); }
    61% { color: var(--danger); letter-spacing: 6px; }
    62% { letter-spacing: 4px; }
    63% { color: var(--text-oracle); letter-spacing: 4px; }
}

.deterioration-critical #narrative-text {
    animation: critical-glitch 4s ease-in-out infinite;
}

@keyframes critical-glitch {
    0%, 85%, 100% { transform: none; filter: none; opacity: 1; }
    86% { transform: skewX(-2deg) translateX(-3px); filter: hue-rotate(30deg); }
    87% { transform: skewX(1deg) translateX(3px); filter: hue-rotate(-20deg); }
    88% { transform: none; filter: none; }
    89% { opacity: 0.7; }
    90% { opacity: 1; }
}

.corrupt-text {
    color: var(--danger);
    font-family: var(--font-system);
    font-size: 12px;
    opacity: 0.7;
}

/* ═══ ACTO 3 — filtros por nivel exacto (6-9) ═══ */
.deterioration-6 #game-container { filter: hue-rotate(5deg); }
.deterioration-7 #game-container { filter: hue-rotate(10deg) saturate(0.8); }
.deterioration-8 #game-container { filter: hue-rotate(15deg) saturate(0.6) brightness(0.9); }
.deterioration-9 #game-container { filter: hue-rotate(20deg) saturate(0.4) brightness(0.85); }

.deterioration-6 #narrative-text,
.deterioration-7 #narrative-text,
.deterioration-8 #narrative-text,
.deterioration-9 #narrative-text {
    font-family: 'Courier New', monospace;
}

@keyframes glitch-text {
    0%, 95%, 100% { transform: none; opacity: 1; }
    96% { transform: translateX(-2px); opacity: 0.8; }
    97% { transform: translateX(2px); opacity: 0.9; }
    98% { transform: none; opacity: 0.7; }
}

.deterioration-8 #narrative-text,
.deterioration-9 #narrative-text {
    animation: glitch-text 8s infinite;
}