/* --- EASTER EGGS STYLES --- */
.vhs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s;
}

body.vhs-mode #main-content { filter: sepia(0.4) contrast(1.2) brightness(1.2) hue-rotate(-10deg); }
body.vhs-mode .modal-content { filter: sepia(0.4) contrast(1.2) brightness(1.2) hue-rotate(-10deg); }
body.vhs-mode #toast { filter: sepia(0.4) contrast(1.2) brightness(1.2) hue-rotate(-10deg); }
body.vhs-mode .fab-random { filter: sepia(0.4) contrast(1.2) brightness(1.2) hue-rotate(-10deg); }
body.vhs-mode .vhs-overlay { opacity: 1; }
body.vhs-mode * { text-shadow: 1px 0 2px red, -1px 0 2px blue; }

body.noir-mode #main-content { filter: grayscale(100%) contrast(1.3); }
body.noir-mode .modal-content { filter: grayscale(100%) contrast(1.3); }
body.noir-mode #toast { filter: grayscale(100%) contrast(1.3); }
body.noir-mode .fab-random { filter: grayscale(100%) contrast(1.3); }

#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}
body.matrix-mode #matrix-canvas { opacity: 0.3; }
body.matrix-mode #main-content { background: transparent; }

#main-content {
    position: relative;
    z-index: 1;
}

body.barrel-roll { animation: roll 1s ease-in-out; }
@keyframes roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.emoji-rain {
    position: fixed;
    top: -50px;
    font-size: 40px;
    z-index: 9999;
    animation: fall linear forwards;
    pointer-events: none;
}
@keyframes fall { to { transform: translateY(110vh) rotate(360deg); } }