/* Loading screen: a space shuttle lifts off through its own clouds in the night sky. No logo and no name. */
body fuse-splash-screen {
    display: block;
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 100%, #1d2a4a 0%, #0a1122 38%, #04070f 100%);
    color: #e2e8f0;
    z-index: 999999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1);
    --sp-t: 6s;
}

body:not(.fuse-splash-screen-hidden) { overflow: hidden; }
body.fuse-splash-screen-hidden fuse-splash-screen { visibility: hidden; opacity: 0; }

/* ---- Stars: two layers that twinkle, and streaks that rush past once the rocket is climbing ---- */
fuse-splash-screen .sp-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
        radial-gradient(1px 1px at 30% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, #cfe8ff, transparent),
        radial-gradient(1px 1px at 72% 62%, #fff, transparent),
        radial-gradient(2px 2px at 88% 28%, #fff, transparent),
        radial-gradient(1px 1px at 20% 90%, #cfe8ff, transparent),
        radial-gradient(1.5px 1.5px at 92% 85%, #fff, transparent),
        radial-gradient(1px 1px at 45% 45%, #fff, transparent);
    background-size: 380px 380px;
    animation: sp-twinkle 3s ease-in-out infinite alternate;
}
fuse-splash-screen .sp-stars-2 { background-size: 230px 230px; background-position: 90px 60px; opacity: 0.6; animation-duration: 4.2s; }
@keyframes sp-twinkle { from { opacity: 0.35; } to { opacity: 1; } }

fuse-splash-screen .sp-streaks {
    position: absolute;
    inset: -20% 0;
    opacity: 0;
    background-image:
        linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55), transparent),
        linear-gradient(to bottom, transparent, rgba(180, 215, 255, 0.45), transparent),
        linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 2px 90px, 1.5px 120px, 2px 70px;
    background-repeat: repeat-y, repeat-y, repeat-y;
    background-position: 14% 0, 47% 0, 83% 0;
    animation: sp-streaks-fade var(--sp-t) ease-in infinite, sp-streaks-move 0.45s linear infinite;
}
@keyframes sp-streaks-fade { 0%, 20% { opacity: 0; } 55% { opacity: 0.55; } 88% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes sp-streaks-move { to { background-position: 14% 240px, 47% 300px, 83% 180px; } }

/* ---- The planet below, with a thin glowing atmosphere ---- */
fuse-splash-screen .sp-planet-rim {
    position: absolute;
    left: 50%;
    bottom: -118vw;
    width: 150vw;
    height: 150vw;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 8%, #16294d 0%, #0a1426 40%, #050a14 70%);
    box-shadow: 0 0 0 2px rgba(120, 180, 255, 0.35), 0 -10px 60px 6px rgba(80, 150, 255, 0.35), 0 -2px 18px rgba(170, 215, 255, 0.55);
}

/* ---- Launch pad ---- */
fuse-splash-screen .sp-pad {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    width: min(260px, 70vw);
    height: 14px;
    transform: translate(-50%, 100%);
    border-radius: 3px;
    background: linear-gradient(#586377, #232b3a);
    box-shadow: 0 0 40px 6px rgba(255, 160, 60, 0.0), 0 8px 18px rgba(0, 0, 0, 0.6);
    animation: sp-pad-glow var(--sp-t) ease-out infinite;
}
@keyframes sp-pad-glow { 0%, 8% { box-shadow: 0 0 0 0 rgba(255, 160, 60, 0), 0 8px 18px rgba(0, 0, 0, 0.6); } 24% { box-shadow: 0 0 70px 20px rgba(255, 150, 50, 0.55), 0 8px 18px rgba(0, 0, 0, 0.6); } 60%, 100% { box-shadow: 0 0 20px 2px rgba(255, 150, 50, 0.08), 0 8px 18px rgba(0, 0, 0, 0.6); } }

/* ---- Clouds at the pad: they boil up and out, bright on top and lit orange from the fire below ---- */
fuse-splash-screen .sp-bank {
    position: absolute;
    left: 50%;
    bottom: calc(12vh - 30px);
    width: 140vw;
    height: 120px;
    transform: translateX(-50%) scale(0.2, 0.1);
    transform-origin: 50% 100%;
    opacity: 0;
    background:
        radial-gradient(ellipse 14% 60% at 12% 70%, rgba(236, 240, 248, 0.95), transparent 72%),
        radial-gradient(ellipse 18% 80% at 28% 62%, rgba(250, 252, 255, 0.98), transparent 72%),
        radial-gradient(ellipse 16% 70% at 44% 72%, rgba(255, 214, 160, 0.9), transparent 72%),
        radial-gradient(ellipse 16% 70% at 56% 72%, rgba(255, 200, 140, 0.9), transparent 72%),
        radial-gradient(ellipse 18% 80% at 72% 62%, rgba(250, 252, 255, 0.98), transparent 72%),
        radial-gradient(ellipse 14% 60% at 88% 70%, rgba(236, 240, 248, 0.95), transparent 72%);
    filter: blur(9px);
    animation: sp-bank var(--sp-t) ease-out infinite;
}
@keyframes sp-bank { 0%, 14% { opacity: 0; transform: translateX(-50%) scale(0.2, 0.1); } 34% { opacity: 1; transform: translateX(-50%) scale(0.8, 0.9); } 70% { opacity: 0.9; transform: translateX(-50%) scale(1, 1.15); } 100% { opacity: 0; transform: translateX(-50%) scale(1.05, 1.2); } }

fuse-splash-screen .sp-smoke { position: absolute; left: 50%; bottom: 12vh; width: 0; height: 0; }
fuse-splash-screen .sp-puff {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: min(190px, 46vw);
    height: min(190px, 46vw);
    margin-left: calc(min(190px, 46vw) / -2);
    border-radius: 50%;
    background:
        radial-gradient(circle closest-side at 40% 32%, #ffffff, #eef2f9 30%, rgba(205, 215, 235, 0.7) 60%, rgba(255, 175, 110, 0.22) 82%, transparent 100%);
    filter: blur(5px);
    opacity: 0;
    transform: translate(0, 0) scale(0.2);
    animation: sp-puff var(--sp-t) ease-out infinite;
}
fuse-splash-screen .sp-puff:nth-child(1) { --dx: -150px; --dy: -10px; --s: 1.9; animation-delay: 0.8s; }
fuse-splash-screen .sp-puff:nth-child(2) { --dx: 150px; --dy: -10px; --s: 1.9; animation-delay: 0.9s; }
fuse-splash-screen .sp-puff:nth-child(3) { --dx: -95px; --dy: -70px; --s: 1.6; animation-delay: 1s; }
fuse-splash-screen .sp-puff:nth-child(4) { --dx: 95px; --dy: -70px; --s: 1.6; animation-delay: 1.1s; }
fuse-splash-screen .sp-puff:nth-child(5) { --dx: -230px; --dy: 6px; --s: 2.2; animation-delay: 1.25s; }
fuse-splash-screen .sp-puff:nth-child(6) { --dx: 230px; --dy: 6px; --s: 2.2; animation-delay: 1.35s; }
fuse-splash-screen .sp-puff:nth-child(7) { --dx: -40px; --dy: -120px; --s: 1.7; animation-delay: 1.15s; }
fuse-splash-screen .sp-puff:nth-child(8) { --dx: 40px; --dy: -130px; --s: 1.7; animation-delay: 1.3s; }
fuse-splash-screen .sp-puff:nth-child(9) { --dx: -310px; --dy: 12px; --s: 2.4; animation-delay: 1.5s; }
fuse-splash-screen .sp-puff:nth-child(10) { --dx: 310px; --dy: 12px; --s: 2.4; animation-delay: 1.55s; }
fuse-splash-screen .sp-puff:nth-child(11) { --dx: -190px; --dy: -60px; --s: 2; animation-delay: 1.7s; }
fuse-splash-screen .sp-puff:nth-child(12) { --dx: 190px; --dy: -60px; --s: 2; animation-delay: 1.75s; }
fuse-splash-screen .sp-puff:nth-child(13) { --dx: -20px; --dy: -170px; --s: 1.8; animation-delay: 1.6s; }
fuse-splash-screen .sp-puff:nth-child(14) { --dx: 360px; --dy: 20px; --s: 2.5; animation-delay: 1.9s; }
@keyframes sp-puff {
    0% { opacity: 0; transform: translate(0, 0) scale(0.2); }
    6% { opacity: 0.98; }
    55% { opacity: 0.7; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
    85%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) - 40px)) scale(calc(var(--s) * 1.25)); }
}

/* a flash of firelight when the engines light, and the lit sky that follows */
fuse-splash-screen .sp-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 82%, rgba(255, 170, 80, 0.55), rgba(255, 110, 40, 0.18) 40%, transparent 70%); animation: sp-flash var(--sp-t) ease-out infinite; }
@keyframes sp-flash { 0%, 12% { opacity: 0; } 24% { opacity: 1; } 55% { opacity: 0.45; } 100% { opacity: 0; } }

/* soft clouds that stream past while the shuttle climbs through them */
fuse-splash-screen .sp-drift { position: absolute; inset: -30% 0; opacity: 0; animation: sp-drift-fade var(--sp-t) ease-in infinite; }
fuse-splash-screen .sp-drift i { position: absolute; width: 46vw; height: 14vh; border-radius: 50%; background: radial-gradient(ellipse closest-side, rgba(200, 215, 240, 0.28), transparent); filter: blur(6px); animation: sp-drift 1.1s linear infinite; }
fuse-splash-screen .sp-drift i:nth-child(1) { left: -8vw; animation-delay: 0s; }
fuse-splash-screen .sp-drift i:nth-child(2) { left: 52vw; width: 52vw; animation-delay: 0.35s; }
fuse-splash-screen .sp-drift i:nth-child(3) { left: 18vw; width: 36vw; animation-delay: 0.7s; }
fuse-splash-screen .sp-drift i:nth-child(4) { left: 70vw; animation-delay: 0.9s; }
@keyframes sp-drift { from { top: -20%; } to { top: 120%; } }
@keyframes sp-drift-fade { 0%, 40% { opacity: 0; } 65%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* the launch tower beside the shuttle, a dark steel lattice with an arm */
fuse-splash-screen .sp-tower {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    width: 22px;
    height: min(250px, 62vw);
    margin-left: calc(min(120px, 30vw) / 2 + 22px);
    background:
        repeating-linear-gradient(45deg, transparent 0 9px, rgba(255, 150, 70, 0.55) 9px 10.5px),
        repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255, 150, 70, 0.55) 9px 10.5px),
        linear-gradient(90deg, #3a2a22, #1b1411);
    border-left: 2px solid #8a5a3a;
    border-right: 2px solid #8a5a3a;
    animation: sp-tower var(--sp-t) ease-out infinite;
}
fuse-splash-screen .sp-arm { position: absolute; right: 100%; top: 38%; width: 28px; height: 6px; background: #8a5a3a; animation: sp-arm var(--sp-t) ease-in-out infinite; transform-origin: 100% 50%; }
@keyframes sp-arm { 0%, 20% { transform: rotate(0); } 28%, 100% { transform: rotate(-70deg); } }
@keyframes sp-tower { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---- The rocket ---- */
fuse-splash-screen .sp-rocket-wrap {
    position: absolute;
    left: 50%;
    bottom: 12vh;
    width: min(120px, 30vw);
    height: min(240px, 60vw);
    margin-left: calc(min(120px, 30vw) / -2);
    animation: sp-lift var(--sp-t) cubic-bezier(0.55, 0, 0.9, 0.5) infinite;
}
@keyframes sp-lift {
    0%, 22% { transform: translateY(0); }
    92% { transform: translateY(calc(-100vh - 330px)); }
    100% { transform: translateY(calc(-100vh - 330px)); }
}
fuse-splash-screen .sp-shake { width: 100%; height: 100%; animation: sp-shake var(--sp-t) linear infinite; transform-origin: 50% 100%; }
@keyframes sp-shake {
    0% { transform: translate(0, 0); }
    2% { transform: translate(-0.6px, 0.4px); } 4% { transform: translate(0.7px, -0.4px); } 6% { transform: translate(-0.8px, 0.5px); } 8% { transform: translate(0.9px, -0.5px); }
    10% { transform: translate(-1.1px, 0.6px); } 12% { transform: translate(1.2px, -0.6px); } 14% { transform: translate(-1.4px, 0.7px); } 16% { transform: translate(1.5px, -0.7px); }
    18% { transform: translate(-1.7px, 0.8px); } 20% { transform: translate(1.8px, -0.8px); } 22% { transform: translate(-1px, 0.5px); }
    30% { transform: translate(0.5px, 0); } 40% { transform: translate(-0.5px, 0); } 50% { transform: translate(0.4px, 0); } 60% { transform: translate(-0.4px, 0); } 100% { transform: translate(0, 0); }
}
fuse-splash-screen .sp-rocket { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)); }

/* flame and the glow it throws on the rocket */
fuse-splash-screen .sp-engine { position: absolute; left: 50%; top: 100%; width: 100%; transform: translateX(-50%); margin-top: -4px; pointer-events: none; }
fuse-splash-screen .sp-flame-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 0; animation: sp-burn var(--sp-t) ease-out infinite; }
fuse-splash-screen .sp-flame-core, fuse-splash-screen .sp-flame-mid, fuse-splash-screen .sp-flame-out { transform-box: fill-box; transform-origin: 50% 0; }
fuse-splash-screen .sp-flame-out { animation: sp-flicker 0.11s ease-in-out infinite alternate; }
fuse-splash-screen .sp-flame-mid { animation: sp-flicker 0.09s ease-in-out infinite alternate-reverse; }
fuse-splash-screen .sp-flame-core { animation: sp-flicker 0.07s ease-in-out infinite alternate; }
@keyframes sp-flicker { from { transform: scale(0.94, 0.9); } to { transform: scale(1.04, 1.12); } }
@keyframes sp-burn {
    0%, 6% { transform: scale(0.15, 0.1); opacity: 0; }
    16% { transform: scale(0.55, 0.45); opacity: 1; }
    24% { transform: scale(0.9, 1); }
    60% { transform: scale(1.05, 1.5); }
    90% { transform: scale(1.1, 1.8); opacity: 1; }
    100% { transform: scale(1.1, 1.8); opacity: 0; }
}
fuse-splash-screen .sp-glow {
    position: absolute;
    left: 50%;
    top: 98%;
    width: 300%;
    height: 220%;
    transform: translate(-50%, -20%);
    background: radial-gradient(ellipse closest-side at 50% 22%, rgba(255, 170, 70, 0.55), rgba(255, 90, 20, 0.2) 45%, transparent 100%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: sp-glow var(--sp-t) ease-out infinite;
}
@keyframes sp-glow { 0%, 8% { opacity: 0; } 24% { opacity: 1; } 90% { opacity: 0.9; } 100% { opacity: 0; } }

/* the long exhaust trail behind the climbing rocket */
fuse-splash-screen .sp-trail {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 60%;
    height: 90vh;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(255, 190, 110, 0.55), rgba(230, 235, 245, 0.35) 18%, rgba(180, 195, 220, 0.16) 55%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
    border-radius: 40% 40% 50% 50%;
    opacity: 0;
    transform-origin: 50% 0;
    animation: sp-trail var(--sp-t) ease-in infinite;
}
@keyframes sp-trail { 0%, 24% { opacity: 0; transform: translateX(-50%) scaleY(0.1); } 45% { opacity: 0.75; transform: translateX(-50%) scaleY(0.6); } 90% { opacity: 0.9; transform: translateX(-50%) scaleY(1); } 100% { opacity: 0; transform: translateX(-50%) scaleY(1); } }

/* sparks thrown off at ignition */
fuse-splash-screen .sp-spark { position: absolute; left: 50%; bottom: 12vh; width: 3px; height: 3px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px rgba(255, 170, 60, 0.8); opacity: 0; animation: sp-spark var(--sp-t) ease-out infinite; }
fuse-splash-screen .sp-spark-1 { --x: -90px; --y: -60px; animation-delay: 0.9s; }
fuse-splash-screen .sp-spark-2 { --x: 110px; --y: -80px; animation-delay: 1s; }
fuse-splash-screen .sp-spark-3 { --x: -140px; --y: -30px; animation-delay: 1.1s; }
fuse-splash-screen .sp-spark-4 { --x: 150px; --y: -40px; animation-delay: 1.2s; }
@keyframes sp-spark { 0% { opacity: 0; transform: translate(0, 0); } 4% { opacity: 1; } 14% { opacity: 0; transform: translate(var(--x), var(--y)); } 100% { opacity: 0; } }

/* a thin progress line, without words */
fuse-splash-screen .sp-bar { position: absolute; left: 50%; bottom: 5vh; width: min(220px, 56vw); height: 3px; transform: translateX(-50%); border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
fuse-splash-screen .sp-bar span { display: block; width: 38%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff6a3d, #ffd27a); animation: sp-bar 1.4s ease-in-out infinite; }
@keyframes sp-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }

@media (prefers-reduced-motion: reduce) {
    fuse-splash-screen .sp-rocket-wrap { animation: none; transform: none; }
    fuse-splash-screen .sp-streaks, fuse-splash-screen .sp-trail, fuse-splash-screen .sp-puff, fuse-splash-screen .sp-spark, fuse-splash-screen .sp-shake, fuse-splash-screen .sp-drift, fuse-splash-screen .sp-drift i, fuse-splash-screen .sp-flash { animation: none; }
}