/* CRT power states */
@keyframes crtPowerOn {
    0% { opacity: 0; filter: brightness(0) contrast(0); }
    10% { opacity: 0.3; filter: brightness(0.05) contrast(0.5); }
    30% { opacity: 0.6; filter: brightness(0.3) contrast(0.8); }
    50% { opacity: 0.8; filter: brightness(0.6) contrast(1.1) blur(2px); }
    70% { opacity: 0.9; filter: brightness(0.8) contrast(1.2) blur(1px); }
    85% { opacity: 0.85; filter: brightness(0.7) contrast(1.1) blur(0.5px); }
    100% { opacity: 1; filter: brightness(1) contrast(1) blur(0); }
}

@keyframes crtFlicker {
    0%, 100% { opacity: 1; }
    3% { opacity: 0.85; }
    6% { opacity: 1; }
    7% { opacity: 0.9; }
    8% { opacity: 1; }
    50% { opacity: 0.98; }
    53% { opacity: 0.9; }
    54% { opacity: 1; }
}

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

@keyframes scanlineMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

@keyframes phosphorGlow {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 255, 102, 0.3); }
    50% { text-shadow: 0 0 8px rgba(0, 255, 102, 0.5), 0 0 12px rgba(0, 255, 102, 0.2); }
}

#crt-overlay {
    pointer-events: none;
}

#screen-wrapper {
    transform: rotateX(0.5deg);
}

#crt-overlay.scanlines-on {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.15) 1px,
        rgba(0, 0, 0, 0.15) 2px
    );
}

.screen-curvature {
    border-radius: 12px;
    overflow: hidden;
}

.screen-on #screen-content {
    animation: crtPowerOn 2s ease-out forwards, crtFlicker 8s infinite 2s;
}

.screen-on #crt-overlay {
    animation: crtFlicker 8s infinite 0.1s;
}

/* Vignette using radial gradient */
#screen-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 85%,
        rgba(0, 0, 0, 0.7) 100%
    );
    border-radius: 12px;
}

/* Chromatic aberration border effect */
#screen-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    pointer-events: none;
    box-shadow:
        inset 0 0 30px rgba(0, 255, 102, 0.05),
        inset 0 0 60px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

/* Glass reflection */
#monitor-frame .glass-reflection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.02) 0%,
        transparent 30%,
        transparent 70%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border-radius: 12px;
}