:root {
                --scanline: rgba(0, 0, 0, 0.12);
            --scanline-color: rgba(0, 0, 0, 0.12);
            --vignette-dark: rgba(0, 0, 0, 0.6);
            --crt-green: #0f0;
        }

        html,
        body {
            min-height: 100vh;
            margin: 0;
            font-family: 'VT323', monospace;
            color: var(--crt-green);

           
            background:
                radial-gradient(1200px 700px at 50% 30%, rgba(0,255,120,0.045), transparent 20%),
                repeating-linear-gradient(
                    to bottom,
                    rgba(0, 255, 120, 0.06) 0px,
                    rgba(0, 255, 120, 0.06) 1px,
                    transparent 1px,
                    transparent 5px
                ),
                linear-gradient(180deg, rgba(0,18,0,0.85), rgba(0,0,0,1) 65%),
                #000000;

            background-attachment: fixed;
            background-size: cover, auto, cover, cover;
            background-position: center 0, 0 0, center center, center center;
            background-blend-mode: screen, normal, normal, normal;

            /* dark inner curve like an old CRT */
            box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.92);
            overflow: hidden;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;

            /* animate scanlines subtly */
            animation: scanlineScroll 8s linear infinite;
            position: relative;
        }

        /* faint phosphor/vignette to simulate curvature and glow */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background:
                radial-gradient(ellipse at 50% 35%, rgba(0,255,120,0.06), rgba(0,255,120,0.01) 18%, transparent 30%),
                radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%);
            mix-blend-mode: multiply;
            opacity: 1;
            transform: translateZ(0);
        }

        /* soft RGB ghosting / chromatic aberration for that retro scan separation */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            background: linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,0,0.03), rgba(0,0,255,0.02));
            mix-blend-mode: screen;
            filter: blur(6px) saturate(1.15);
            opacity: 0.7;
            transform: translateX(-2px);
            animation: rgbDrift 6s ease-in-out infinite;
        }

        /* subtle movement to the chroma split */
        @keyframes rgbDrift {
            0%   { transform: translateX(-2px) translateY(0); }
            50%  { transform: translateX(2px) translateY(0); }
            100% { transform: translateX(-2px) translateY(0); }
        }

        /* scanline vertical motion (moves the repeating-linear-gradient layer) */
        @keyframes scanlineScroll {
            0% { background-position: center 0, 0 0, center center, center center; }
            100% { background-position: center 1000px, 0 1000px, center center, center center; }
        }

        #consoleText {
          
            position: fixed;
            top: 15%;
            left: 8%;
            width: 80%;
            z-index: 50;
            font-size: 1.4rem;
            letter-spacing: 3px;
            line-height: 1.6;
            text-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0, 255, 120, 0.4);
            white-space: pre;
            opacity: 1;
            transition: opacity 1s ease, visibility 1s ease;
            animation: textFlicker 2s infinite;
            visibility: visible;
        }
        #consoleText.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        @keyframes textFlicker {
            0%,
            18%,
            22%,
            25%,
            53%,
            57%,
            100% {
                opacity: 1;
                text-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0, 255, 120, 0.5),
                    0 0 24px rgba(0, 255, 120, 0.3);
            }
            20%,
            24%,
            55% {
                opacity: 0.8;
                text-shadow: 0 0 4px #00ff88, 0 0 10px rgba(0, 255, 120, 0.2);
            }
        }

        .screen {
           
            position: fixed;
            inset: 0;
            display: block;
            opacity: 0;
            transition: opacity 2s ease;
            pointer-events: auto;
        }
        body.ready .screen {
            opacity: 1;
            /* pointer-events already enabled by default; keep for clarity */
            pointer-events: auto;
        }

        .bg-image {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            filter: contrast(140%) saturate(120%) brightness(0.85)
                drop-shadow(0 0 30px rgba(80, 255, 168, 0.35));
            pointer-events: none;
        }

        .crt {
            position: fixed;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            background: repeating-linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0) 0px,
                    rgba(0, 0, 0, 0) 2px,
                    var(--scanline-color) 2px,
                    var(--scanline-color) 3px
                ),
                radial-gradient(
                    ellipse at center,
                    rgba(0, 0, 0, 0) 25%,
                    rgba(0, 0, 0, 0.05) 50%,
                    var(--vignette-dark) 100%
                );
            mix-blend-mode: multiply;
            opacity: 0.95;
            animation: scanMove 8s linear infinite, flicker 3s infinite;
        }

        .crt::before,
        .crt::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            mix-blend-mode: screen;
            opacity: 0.06;
            background: linear-gradient(
                90deg,
                rgba(255, 0, 0, 1),
                rgba(0, 255, 0, 1),
                rgba(0, 0, 255, 1)
            );
            filter: blur(6px) saturate(1.4);
        }
        .crt::before {
            transform: translateX(-2px);
        }
        .crt::after {
            transform: translateX(2px);
            opacity: 0.04;
            filter: blur(10px) saturate(1.1);
        }

        body.transition::after {
            content: '';
            position: fixed;
            inset: 0;
            background: radial-gradient(circle, #0f0 0%, black 90%);
            animation: pulseOut 1.5s ease-in-out forwards;
            z-index: 100;
            pointer-events: none; /* <-- allow clicks through the transition overlay */
        }

        @keyframes pulseOut {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
            100% {
                opacity: 0;
                transform: scale(2);
            }
        }

        @keyframes scanMove {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 0 2000px;
            }
        }
        @keyframes flicker {
            0% {
                opacity: 0.96;
            }
            5% {
                opacity: 0.85;
            }
            7% {
                opacity: 0.98;
            }
            10% {
                opacity: 0.9;
            }
            70% {
                opacity: 0.96;
            }
            100% {
                opacity: 0.95;
            }
        }

        /* === Glitchy Sigil === */
        .sigil {
            opacity: 0.75;
            position: absolute;
            top: 50%;
            left: 51%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            z-index: 10;
            cursor: pointer;
        }

        .sigil svg {
            width: 100%;
            height: 100%;
            fill: none;
            stroke: #0f0;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 0 6px #0f0) drop-shadow(0 0 12px #0f0);
            animation: pulse 2s infinite alternate, glitch 3s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.85;
            }
            100% {
                transform: scale(1.1);
                opacity: 1;
            }
        }

        @keyframes glitch {
            0% {
                stroke-dashoffset: 0;
            }
            20% {
                stroke-dashoffset: 5;
            }
            40% {
                stroke-dashoffset: 2;
            }
            60% {
                stroke-dashoffset: 7;
            }
            80% {
                stroke-dashoffset: 3;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        .sigil-link {
            display: inline-block;
            width: 100%;
            height: 100%;
            pointer-events: auto; /* ensure the sigil link accepts clicks */
        }
        .glow-rotate {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
            animation: sigil-rotate 10s linear infinite,
                sigil-glow 2.2s ease-in-out infinite;
            filter: drop-shadow(0 0 8px #00ff88)
                drop-shadow(0 0 18px rgba(0, 255, 120, 0.35));
            will-change: transform, filter;
        }
        @keyframes sigil-rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes sigil-glow {
            0%,
            100% {
                filter: drop-shadow(0 0 8px #00ff88)
                    drop-shadow(0 0 18px rgba(0, 255, 120, 0.35));
            }
            50% {
                filter: drop-shadow(0 0 16px #00ff88)
                    drop-shadow(0 0 32px rgba(0, 255, 120, 0.6));
            }
        }

                    /* position the enter text below the sigil */
                    .sigil {
                        position: absolute;
                    }
                    .enter-link {
                        position: absolute;
                        left: 51%;
                        top: calc(100% + 16px);
                        transform: translateX(-50%);
                        color: var(--crt-green);
                        font-family: 'VT323', monospace;
                        font-size: 1.6rem;
                        letter-spacing: 6px;
                        text-decoration: none;
                        display: inline-flex;
                        align-items: center;
                        gap: 6px;
                        z-index: 12;
                        cursor: pointer;
                        user-select: none;
                        text-shadow: 0 0 8px #00ff88, 0 0 16px rgba(0, 255, 120, 0.35);
                        transition: filter 0.15s ease;
                        pointer-events: auto; /* ensure enter link accepts clicks */
                    }
                    .enter-link:hover {
                        filter: brightness(1.15) saturate(1.1);
                    }

                    .enter-link .cursor {
                        display: inline-block;
                        margin-left: 2px;
                        animation: blink 1s steps(1, start) infinite;
                        opacity: 1;
                        transform-origin: center;
                        color: var(--crt-green);
                        text-shadow: 0 0 8px #00ff88;
                    }
                    @keyframes blink {
                        0%,
                        50% {
                            opacity: 1;
                        }
                        51%,
                        100% {
                            opacity: 0;
                        }
                    }

                    /* glitch animation applied to typed text when active */
                    .enter-glitch {
                        animation: glitchText 1.2s infinite;
                    }
                    @keyframes glitchText {
                        0% {
                            transform: translateX(0);
                            text-shadow: 2px 0 #ff3, -2px 0 rgba(0, 255, 255, 0.6);
                        }
                        20% {
                            transform: translateX(-1px);
                            text-shadow: -2px 0 #ff3, 2px 0 rgba(0, 255, 255, 0.6);
                        }
                        40% {
                            transform: translateX(1px);
                            text-shadow: 3px 0 #ff3, -3px 0 rgba(0, 255, 255, 0.6);
                        }
                        60% {
                            transform: translateX(-0.5px);
                            text-shadow: -1px 0 #ff3, 1px 0 rgba(0, 255, 255, 0.6);
                        }
                        100% {
                            transform: translateX(0);
                            text-shadow: 2px 0 #ff3, -2px 0 rgba(0, 255, 255, 0.6);
                        }
                    }

                    /* subtle scale on reveal */
                    .enter-link .reveal {
                        display: inline-block;
                        transform-origin: left center;
                    }