/* C64 Font */
	@font-face {
		font-family: 'C64ProMono';
		src: url('/assets/fonts/C64_Pro_Mono-STYLE.woff2') format('woff2'),
			 url('/assets/fonts/C64_Pro_Mono-STYLE.woff') format('woff');
		font-weight: normal;
		font-style: normal;
	}

    body {
        margin: 0;
        background-color: #000;
        height: 100vh;
        overflow: hidden;
    }

    /* Fullscreen loader overlay */
    #loader {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 4px solid #ff3300;
        box-shadow: 0 0 20px #ff3300;
        animation: borderGlow 2s infinite alternate;
        z-index: 9999;
    }

    @keyframes borderGlow {
        from { box-shadow: 0 0 10px #ff3300; }
        to { box-shadow: 0 0 25px #ff6600; }
    }

    .logo {
        width: 200px;
        height: 200px;
        background: url('/assets/images/flaming-c.png') no-repeat center/contain;
        animation: pulse 2s infinite ease-in-out;
        margin: 0 auto;
        z-index: 4;
    }

    .title {
        font-family: 'C64ProMono', monospace;
        font-size: 1.5rem;
        color: #ffcc00;
        margin-top: 15px;
        text-shadow: 0 0 8px #ff6600;
        z-index: 4;
    }

    .title::after {
        content: "█";
        margin-left: 5px;
        animation: blinkCursor 1s steps(1) infinite;
    }

    @keyframes blinkCursor {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }

    .loading-text {
        font-family: 'Courier New', monospace;
        font-size: 1rem;
        letter-spacing: 2px;
        margin-top: 10px;
        animation: flickerText 1.5s infinite;
        z-index: 4;
    }

    @keyframes pulse {
        0%, 100% { filter: drop-shadow(0 0 10px #ff6600); }
        50% { filter: drop-shadow(0 0 25px #ff3300); }
    }

    @keyframes flickerText {
        0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
        20%, 22%, 24%, 55% { opacity: 0.4; }
    }

    /* Scanlines overlay */
    #loader::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        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%;
        z-index: 2;
        pointer-events: none;
        opacity: 1;
    }

    /* Flicker overlay */
    #loader::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(18, 16, 16, 0.1);
        opacity: 0;
        z-index: 3;
        pointer-events: none;
        animation: flicker 0.15s infinite;
    }

    @keyframes flicker {
        0% {opacity: 0.28;} 5% {opacity: 0.35;} 10% {opacity: 0.23;}
        15% {opacity: 0.90;} 20% {opacity: 0.18;} 25% {opacity: 0.83;}
        30% {opacity: 0.65;} 35% {opacity: 0.67;} 40% {opacity: 0.26;}
        45% {opacity: 0.84;} 50% {opacity: 0.96;} 55% {opacity: 0.08;}
        60% {opacity: 0.20;} 65% {opacity: 0.71;} 70% {opacity: 0.53;}
        75% {opacity: 0.37;} 80% {opacity: 0.71;} 85% {opacity: 0.70;}
        90% {opacity: 0.70;} 95% {opacity: 0.36;} 100% {opacity: 0.24;}
    }

    /* CRT shutdown effect with linger */
    .crt-off {
        animation: crtOff 2.5s forwards, phosphorFade 2.5s forwards;
        transform-origin: center center;
    }

    @keyframes crtOff {
        0%   { transform: scale(1,1); opacity: 1; }
        50%  { transform: scale(1,0.02); opacity: 1; background-color: white; }
        80%  { transform: scale(0.02,0.02); opacity: 1; background-color: white; }
        90%  { transform: scale(0.02,0.02); opacity: 1; background-color: white; } /* linger */
        100% { transform: scale(0,0); opacity: 0; background-color: black; }
    }

    @keyframes phosphorFade {
        0%   { filter: brightness(1); }
        50%  { filter: brightness(1.5); }
        90%  { filter: brightness(1); }
        100% { filter: brightness(0); }
    }

    /* Fade scanlines and flicker out during collapse */
    .scanlines-off::before { animation: scanlineFade 2s forwards; }
    @keyframes scanlineFade { from { opacity: 1; } to { opacity: 0; } }

    .flicker-off::after { animation: flickerFade 2s forwards; }
    @keyframes flickerFade { from { opacity: 1; } to { opacity: 0; } }