/* CRT Visual Effects */
/* mjpawluk.dev - Scanlines, Flicker, Vignette, Glow */

/* Scanline Overlay */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
}

/* Flicker Effect */
.flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 101;
    background: transparent;
    animation: flicker 0.15s infinite;
    opacity: 0;
}

@keyframes flicker {
    0% {
        opacity: 0.02;
        background: rgba(255, 255, 255, 0.03);
    }
    5% {
        opacity: 0;
    }
    10% {
        opacity: 0.01;
        background: rgba(0, 255, 0, 0.02);
    }
    15% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 0.02;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Vignette Effect */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 80%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* Screen Curvature (subtle) */
#crt-container {
    /* Subtle screen curve simulation via box-shadow */
    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.5),
        inset 0 0 50px rgba(0, 0, 0, 0.3);
}

/* Phosphor Persistence / Text Afterglow */
#output .line {
    position: relative;
}

/* Additional ambient glow on the whole screen */
#crt-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 255, 0, 0.03) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* Matrix Rain Effect */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    pointer-events: none;
}

/* Screen "off" animation for rm -rf */
.screen-off {
    animation: screenOff 2s ease-out forwards;
}

@keyframes screenOff {
    0% {
        filter: brightness(1);
        transform: scale(1, 1);
    }
    50% {
        filter: brightness(1.5);
        transform: scale(1, 1);
    }
    70% {
        filter: brightness(2);
        transform: scale(1, 0.01);
    }
    100% {
        filter: brightness(0);
        transform: scale(0, 0);
    }
}

/* Power back on animation */
.screen-on {
    animation: screenOn 0.5s ease-out forwards;
}

@keyframes screenOn {
    0% {
        filter: brightness(0);
        transform: scale(0, 0);
    }
    30% {
        filter: brightness(2);
        transform: scale(1, 0.01);
    }
    60% {
        filter: brightness(1.5);
        transform: scale(1, 1);
    }
    100% {
        filter: brightness(1);
        transform: scale(1, 1);
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .scanlines,
    .flicker {
        display: none;
    }

    .cursor {
        animation: none;
        opacity: 1;
    }

    .screen-off,
    .screen-on {
        animation: none;
    }
}