.gload {
    --gl-tone: #4d8dff;
    position: fixed; inset: 0; z-index: 9000;
    display: grid; place-items: center; padding: 24px 16px;
    background:
        radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--gl-tone) 26%, transparent), transparent 70%),
        radial-gradient(90% 70% at 50% 110%, rgba(255,190,70,.10), transparent 60%),
        #070b16;
    transition: opacity .38s ease, visibility 0s linear .38s;
}
.gload.out { opacity: 0; visibility: hidden; pointer-events: none; }
.gload.out .gl-in { transform: scale(1.06); }
.gload[hidden] { display: none; }

.gl-in {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    width: min(320px, 100%);
    transition: transform .38s ease;
    animation: glIn .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes glIn { from { transform: scale(.92) translateY(8px); opacity: 0; } }

.gl-logo {
    display: block; width: 168px; height: auto; margin-bottom: 14px;
    filter: drop-shadow(0 6px 18px rgba(77,141,255,.35));
    animation: glLogo 2.4s ease-in-out infinite alternate;
}
@keyframes glLogo { from { opacity: .85; } to { opacity: 1; filter: drop-shadow(0 6px 22px rgba(77,141,255,.6)); } }
@media (max-width: 480px) { .gl-logo { width: 144px; } }

.gl-hero { position: relative; width: 220px; height: 220px; margin-bottom: 10px; transform: scale(1.18); transform-origin: 50% 100%; margin-top: 30px; }
@media (max-width: 480px) { .gl-hero { transform: none; margin-top: 0; } }
.gl-hero img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform-origin: 50% 94%; display: none;
    filter: drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
.gl-spot {
    position: absolute; left: 22%; right: 22%; bottom: 2%; height: 16px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
    animation: glSpot .5s ease-in-out infinite alternate;
}
@keyframes glSpot { to { transform: scaleX(.9); opacity: .8; } }

.gload[data-mode="juggle"] .gl-j { display: block; animation: glBob .5s ease-in-out infinite alternate; }
@keyframes glBob { from { transform: translateY(0); } to { transform: translateY(3px) scaleY(.99); } }

.gl-coin {
    position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: none;
    offset-path: path('M53 79 Q117 -92 180 84 Q117 114 53 79');
    offset-anchor: 50% 50%; offset-rotate: 0deg;
    animation: glToss 1.5s linear infinite;
}
.gl-coin::before {
    content: ''; position: absolute; inset: 0;
    background: url(../assets/art/hero/coin-s.webp) center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(255,200,80,.7));
    animation: glSpin .5s linear infinite;
}
.gload[data-mode="juggle"] .gl-coin { display: block; }
.gl-coin.c2 { animation-delay: -.5s; }
.gl-coin.c3 { animation-delay: -1s; }
.gl-coin.c2::before { animation-delay: -.17s; }
.gl-coin.c3::before { animation-delay: -.33s; }
@keyframes glToss { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes glSpin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }

.gload[data-mode="stretch"] .gl-s { display: block; animation: glStretch 3s ease-in-out infinite; }
@keyframes glStretch {
    0%        { transform: rotate(0) scaleX(1); }
    18%, 34%  { transform: rotate(-7deg) scaleX(1); }
    46%       { transform: rotate(0) scaleX(1) scaleY(.96); }
    50%       { transform: rotate(0) scaleX(-1) scaleY(.96); }
    68%, 84%  { transform: rotate(7deg) scaleX(-1); }
    100%      { transform: rotate(0) scaleX(-1); }
}

.gl-t {
    font-family: var(--f-display, 'Unbounded', sans-serif); font-size: 22px; font-weight: 700;
    letter-spacing: -.03em; color: #fff;
}
.gl-tip {
    min-height: 18px; margin-top: 4px;
    font-size: 12.5px; font-weight: 600; color: #9aa6c4;
    transition: opacity .25s;
}
.gl-tip.swap { opacity: 0; }
.gl-bar {
    position: relative; width: 100%; height: 8px; margin-top: 16px; border-radius: 99px; overflow: hidden;
    background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.gl-bar i {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, #e0a526, #ffc94d 55%, #ffe29a);
    box-shadow: 0 0 14px rgba(255,190,60,.7);
    transition: width .3s ease-out;
}
.gl-bar i::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) -100% 0 / 60% 100% no-repeat;
    animation: glShine 1.2s linear infinite;
}

.gload:not(.js) .gl-bar i { animation: glPre 8s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes glPre { from { width: 4%; } to { width: 70%; } }
@keyframes glShine { to { background-position: 250% 0; } }

@media (min-width: 1041px) {
    .gload.in-main { left: var(--side-w, 262px); }
    html.gl-main .main .topbar { z-index: 9001; }
    body:has(.app[data-rail="1"]) .gload.in-main { left: var(--side-rail, 78px); }
    .gload.in-main .gl-logo { display: none; }
    .gload.in-main .gl-hero { margin-top: 0; }
}

@media (max-height: 760px) {
    .gl-hero { width: 180px; height: 180px; transform: none; margin-top: 0; }
    .gl-coin { width: 26px; height: 26px; offset-path: path('M43 65 Q96 -75 147 69 Q96 93 43 65'); }
    .gl-logo { width: 140px; margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .gload *, .gload *::before { animation: none !important; }
    .gload[data-mode="juggle"] .gl-coin { display: none; }
}