/* Intro loading screen */
html.skip-intro #splash-screen {
    display: none;
}

#splash-screen {
    --intro-blue: var(--color-primary, rgb(10, 77, 140));
    --intro-wheat: var(--color-secondary, rgb(255, 152, 0));
    --intro-wheat-dark: var(--color-secondary-dark, #e68900);
    --intro-scan: rgba(255, 66, 52, 0.68);

    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 10000;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 152, 0, 0.14), transparent 18%),
        radial-gradient(circle at 84% 12%, rgba(84, 167, 255, 0.16), transparent 24%),
        radial-gradient(circle at 50% 72%, rgba(47, 143, 104, 0.18), transparent 34%),
        linear-gradient(
            180deg,
            #01070f 0%,
            #061525 18%,
            #083d70 42%,
            #6fb4e8 66%,
            #e7f1fb 100%
        );
    color: #ffffff;
    pointer-events: all;
    opacity: 1;
    transition: opacity 520ms ease, visibility 520ms ease;
    isolation: isolate;
}

#splash-screen.is-hiding {
    opacity: 0;
    pointer-events: none;
}

#splash-screen .intro-title {
    position: absolute;
    top: clamp(4rem, 11vh, 7rem);
    left: 50%;
    transform: translateX(-50%);
    width: min(88vw, 760px);
    margin: 0;
    font-size: clamp(2rem, 6vw, 4.1rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
    z-index: 5;
    text-shadow: 0 18px 40px rgba(3, 20, 36, 0.35);
    animation: introTitleRise 700ms ease-out both;
}

#splash-screen .intro-status {
    position: absolute;
    top: clamp(7.8rem, 21vh, 12rem);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: min(86vw, 520px);
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(0.72rem, 2.3vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.26em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    z-index: 5;
    animation: introTitleRise 700ms 120ms ease-out both;
}

#splash-screen .door-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 74%;
    background:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.08), transparent 32%);
    background-size: 76px 76px, 76px 76px, auto;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.78) 60%, transparent 100%);
    opacity: 0.9;
    z-index: 1;
}

#splash-screen .wheat-pixel-fringe {
    position: absolute;
    top: calc(74% - 24px);
    left: 0;
    width: 100%;
    height: 28px;
    z-index: 4;
    background-image: 
        repeating-linear-gradient(90deg, var(--intro-wheat) 0 5px, transparent 5px 20px),
        repeating-linear-gradient(90deg, #ffbd62 8px 12px, transparent 12px 25px),
        repeating-linear-gradient(90deg, var(--intro-wheat-dark) 3px 7px, transparent 7px 15px);
    background-size: 100% 28px, 100% 18px, 100% 11px;
    background-repeat: repeat-x;
    background-position: bottom left;
}

#splash-screen .door-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 26%;
    background:
        linear-gradient(180deg, var(--intro-wheat) 0%, var(--intro-wheat) 36%, var(--intro-wheat-dark) 100%);
    z-index: 2;
}

#splash-screen .wheat-floor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--intro-wheat);
    background-image: 
        linear-gradient(to top, rgba(214, 119, 0, 0.95), rgba(255, 152, 0, 0.34)),
        repeating-linear-gradient(85deg, transparent, transparent 12px, rgba(255, 255, 255, 0.08) 12px, rgba(255, 255, 255, 0.08) 14px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.18'/%3E%3C/svg%3E");
    box-shadow: 0 -10px 30px rgba(255, 152, 0, 0.2);
}

#splash-screen .intro-satellite-container {
    position: absolute;
    top: 38%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -8%);
    z-index: 6;
    animation: introSatelliteDrift 2300ms ease-in-out infinite alternate;
}

#splash-screen .intro-satellite-container img {
    width: clamp(110px, 18vw, 168px);
    height: auto;
    filter:
        drop-shadow(0 18px 18px rgba(2, 16, 30, 0.28))
        drop-shadow(0 0 14px rgba(255, 88, 76, 0.36));
}

#splash-screen .intro-scan-cone {
    width: clamp(168px, 32vw, 300px);
    height: min(42vh, 360px);
    margin-top: -8px;
    background:
        linear-gradient(to bottom, var(--intro-scan) 0%, rgba(255, 66, 52, 0.16) 72%, transparent 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    filter: blur(0.2px);
    mix-blend-mode: screen;
    transform-origin: 50% 0;
    animation: introPulseRedScan 1150ms infinite alternate ease-in-out;
}

@keyframes introPulseRedScan {
    0% {
        opacity: 0.42;
        transform: scaleX(0.86);
    }
    100% {
        opacity: 0.92;
        transform: scaleX(1.06);
    }
}

@keyframes introSatelliteDrift {
    from {
        transform: translate(-50%, -8%);
    }

    to {
        transform: translate(calc(-50% + 8px), -12%);
    }
}

@keyframes introTitleRise {
    from {
        opacity: 0;
        transform: translate(-50%, 14px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 640px) {
    #splash-screen .intro-title {
        top: 4.5rem;
        letter-spacing: 0.055em;
    }

    #splash-screen .intro-status {
        top: 8.3rem;
        letter-spacing: 0.16em;
    }

    #splash-screen .intro-satellite-container {
        top: 42%;
    }

    #splash-screen .intro-scan-cone {
        height: 36vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    #splash-screen,
    #splash-screen .intro-title,
    #splash-screen .intro-status,
    #splash-screen .intro-satellite-container,
    #splash-screen .intro-scan-cone {
        animation: none;
        transition-duration: 120ms;
    }
}