@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Orbitron:wght@400;700;900&display=swap');

    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        background: #000;
        overflow: hidden;
        font-family: 'Share Tech Mono', monospace;
    }

    #scanlines {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 999;
        background: repeating-linear-gradient(0deg, transparent, transparent 2px,
                rgba(0, 0, 0, 0.055) 2px, rgba(0, 0, 0, 0.055) 4px);
    }

    /* ─── PHASE 1: TERMINAL ─────────────────── */
    #phase-terminal {
        position: fixed;
        inset: 0;
        overflow: hidden;
        padding: 18px 26px 18px 26px;
        transition: opacity 0.28s ease;
    }

    #phase-terminal.out {
        opacity: 0;
        pointer-events: none;
    }

    #tcol {
        width: 66%;
        max-width: 820px;
        display: flex;
        flex-direction: column;
        will-change: transform;
        transition: transform 0.12s ease-out;
    }

    .ln {
        font-size: 11.4px;
        line-height: 1.50;
        white-space: pre;
        opacity: 0;
        animation: show 0.01s forwards;
        flex-shrink: 0;
    }

    @keyframes show {
        to {
            opacity: 1;
        }
    }

    .ln.ok {
        color: #00e676;
    }

    .ln.info {
        color: #9eaaa0;
    }

    .ln.warn {
        color: #c8aa00;
    }

    .ln.fail {
        color: #ef5350;
    }

    .ln.raw {
        color: #4a6650;
    }

    .ln.pkg {
        color: #6a9470;
    }

    .ln.prog {
        color: #00c853;
    }

    /* ─── PHASE 2: BAR ──────────────────────── */
    #phase-load {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    #phase-load.in {
        opacity: 1;
        pointer-events: auto;
    }

    #load-row {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    #load-track {
        width: 320px;
        height: 4px;
        background: #0c0c0c;
        position: relative;
        overflow: hidden;
    }

    #load-track::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(90deg, transparent 0, transparent 9px,
                rgba(255, 255, 255, 0.022) 9px, rgba(255, 255, 255, 0.022) 10px);
    }

    #load-fill {
        height: 100%;
        width: 0%;
        background: #a8ada6;
        position: relative;
        transition: width 0.04s linear;
    }

    #load-fill::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.2) 80%, transparent);
        animation: sheen 1.1s linear infinite;
    }

    @keyframes sheen {
        from {
            transform: translateX(-200%)
        }

        to {
            transform: translateX(300%)
        }
    }

    #load-pct {
        font-family: 'VT323', monospace;
        font-size: 20px;
        color: #70757a;
        width: 54px;
        flex-shrink: 0;
        letter-spacing: 0.04em;
    }

    #load-pct.g {
        animation: gpct 0.07s steps(1) forwards;
    }

    @keyframes gpct {
        0% {
            transform: translate(3px, 0) skewX(7deg);
            color: #70ff80;
            opacity: .75;
        }

        40% {
            transform: translate(-2px, 1px);
            color: #ff8888;
            opacity: .9;
        }

        80% {
            transform: translate(1px, 0);
            color: #70757a;
            opacity: 1;
        }

        100% {
            transform: none;
            color: #70757a;
        }
    }

    /* ─── PHASE 3: LOGO ─────────────────────── */
    #phase-logo {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
    }

    #phase-logo.in {
        pointer-events: auto;
    }

    #logo-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #logo-img {
        display: block;
        max-width: 400px;
        max-height: 300px;
        object-fit: contain;
        position: relative;
        z-index: 2;
        filter: brightness(0.93) contrast(1.05);
    }

    @media (max-width: 768px) {
        #logo-img {
            max-width: 65%;
            max-height: auto;
            width: auto;
        }

        #load-track {
            width: 270px;
        }

        .ln {
            font-size: 8px;
        }
    }

    .gl {
        position: absolute;
        inset: 0;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0;
        z-index: 3;
        pointer-events: none;
    }

    .gl.r {
        animation: glr 0.16s steps(1) forwards;
    }

    .gl.b {
        animation: glb 0.16s steps(1) forwards;
    }

    @keyframes glr {
        0% {
            opacity: .55;
            transform: translate(5px, -2px);
            filter: hue-rotate(120deg) saturate(5);
            clip-path: inset(10% 0 60% 0);
        }

        35% {
            opacity: .3;
            transform: translate(-3px, 2px);
            clip-path: inset(55% 0 5% 0);
        }

        70% {
            opacity: .1;
            clip-path: inset(30% 0 35% 0);
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes glb {
        0% {
            opacity: .45;
            transform: translate(-5px, 3px);
            filter: hue-rotate(260deg) saturate(5);
            clip-path: inset(35% 0 20% 0);
        }

        35% {
            opacity: .22;
            transform: translate(3px, -1px);
            clip-path: inset(5% 0 55% 0);
        }

        70% {
            opacity: .1;
            clip-path: inset(50% 0 12% 0);
        }

        100% {
            opacity: 0;
        }
    }