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

/* CRT glow effect */
.crt-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 80%,
        rgba(0, 0, 0, 0.6) 100%
    );
    z-index: 5;
}

/* Screen flicker (subtle) */
@keyframes flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.95; }
    94% { opacity: 1; }
}

.terminal {
    animation: flicker 4s infinite;
}

/* Phosphor persistence effect */
.terminal-char {
    transition: opacity 0.05s ease-out;
}

/* Screen curvature simulation */
.crt-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    border-radius: 20px;
    z-index: 15;
}

/* Text glow effect on hover/focus */
.terminal:focus-within .terminal-char {
    text-shadow:
        0 0 5px var(--amber),
        0 0 10px rgba(255, 176, 0, 0.5);
}

/* Power-on animation */
@keyframes powerOn {
    0% {
        filter: brightness(0);
        transform: scaleY(0.01);
    }
    50% {
        filter: brightness(1.5);
        transform: scaleY(0.01);
    }
    70% {
        filter: brightness(1);
        transform: scaleY(1);
    }
    100% {
        filter: brightness(1);
        transform: scaleY(1);
    }
}

.terminal-content {
    animation: powerOn 0.5s ease-out;
}

/* Slight color shift for more authentic CRT look */
.crt-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.02),
        rgba(0, 255, 0, 0.01),
        rgba(0, 0, 255, 0.02)
    );
    pointer-events: none;
    border-radius: 20px;
    z-index: 12;
    mix-blend-mode: overlay;
}