/* Hash n Gas idle screen: a purely visual overlay. Everything animates with transform/opacity only. */
:root{--hgi-enter:1800ms;--hgi-wake:1000ms;--hgi-ease:cubic-bezier(.22,.61,.36,1);--hgi-ease-in:cubic-bezier(.4,0,.7,.2);--hgi-rgb:143,223,168}

/* ---- the website underneath ---- */
html.hgi-active .app-shell{transition:filter var(--hgi-enter) var(--hgi-ease),transform var(--hgi-enter) var(--hgi-ease);will-change:filter,transform}
html.hgi-entering .app-shell{filter:brightness(.32) blur(6px);transform:scale(.98)}
html.hgi-prewake .app-shell{filter:brightness(.32) blur(6px);transform:scale(.98);transition:none}
html.hgi-waking .app-shell{transition:filter var(--hgi-wake) var(--hgi-ease) .12s,transform var(--hgi-wake) var(--hgi-ease) .12s}
/* once fully dark the page is hidden from painting (state is kept, only its pixels are skipped) */
html.hgi-idle .app-shell{opacity:0;transition:none;will-change:auto}

/* ---- the overlay (top layer so it also covers open dialogs) ---- */
.hgi{position:fixed;inset:0;margin:0;padding:0;border:0;width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;background:transparent;color:#dff5e6;z-index:2147483000;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none;contain:strict;font-family:Inter,"Segoe UI",Arial,sans-serif}
.hgi:not(:popover-open):not([data-fallback]){display:none}
.hgi[data-fallback]{display:block}
.hgi[data-state=entering],.hgi[data-state=idle]{pointer-events:auto;cursor:none}
.hgi>*{position:absolute}
.hgi-bg{inset:0;background:#020403;opacity:0}
.hgi-glow{left:50%;top:50%;width:min(120vw,1100px);height:min(120vw,1100px);margin:calc(min(120vw,1100px)/-2) 0 0 calc(min(120vw,1100px)/-2);background:radial-gradient(closest-side,rgba(var(--hgi-rgb),.13),rgba(var(--hgi-rgb),.055) 42%,transparent 72%);opacity:0}
.hgi-smoke,.hgi-dust{inset:0;opacity:0}
.hgi-smoke i{position:absolute;left:50%;top:50%;width:90vmax;height:60vmax;margin:-30vmax 0 0 -45vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--hgi-rgb),.075),rgba(var(--hgi-rgb),.03) 50%,transparent 75%);will-change:transform,opacity;animation:hgi-smoke 38s ease-in-out infinite alternate}
.hgi-smoke i:nth-child(2){width:70vmax;height:44vmax;margin:-22vmax 0 0 -35vmax;animation-duration:47s;animation-delay:-14s;animation-direction:alternate-reverse}
.hgi-smoke i:nth-child(3){width:110vmax;height:50vmax;margin:-25vmax 0 0 -55vmax;animation-duration:56s;animation-delay:-27s;background:radial-gradient(closest-side,rgba(206,240,218,.035),transparent 72%)}
@keyframes hgi-smoke{0%{transform:translate3d(-9%,4%,0) scale(.92) rotate(-6deg);opacity:.35}50%{opacity:1}100%{transform:translate3d(9%,-5%,0) scale(1.1) rotate(7deg);opacity:.45}}
.hgi-dust b{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(var(--hgi-rgb),.75);opacity:0;will-change:transform,opacity;animation:hgi-dust var(--d) ease-in-out var(--o) infinite}
@keyframes hgi-dust{0%{transform:translate3d(0,0,0);opacity:0}20%{opacity:var(--a)}80%{opacity:var(--a)}100%{transform:translate3d(var(--dx),-90px,0);opacity:0}}

.hgi-stage{inset:0;display:grid;place-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);animation:hgi-drift 120s ease-in-out infinite alternate;will-change:transform}
@keyframes hgi-drift{0%{transform:translate3d(-14px,-9px,0)}33%{transform:translate3d(10px,-13px,0)}66%{transform:translate3d(15px,8px,0)}100%{transform:translate3d(-9px,12px,0)}}
.hgi-col{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4.5vmin,38px);max-width:100%;padding:0 20px;text-align:center}
.hgi-logowrap{position:relative;opacity:0;transform:scale(.94);will-change:transform,opacity}
.hgi-float{position:relative;animation:hgi-float 13s ease-in-out infinite alternate}
@keyframes hgi-float{from{transform:translate3d(0,-6px,0)}to{transform:translate3d(0,7px,0)}}
.hgi-breathe{position:relative;animation:hgi-breathe 5.5s ease-in-out infinite;will-change:transform}
@keyframes hgi-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.hgi-logo,.hgi-logo-glow{display:block;font-size:clamp(2rem,9vw,4.6rem);font-weight:720;letter-spacing:-.035em;line-height:1.3;white-space:nowrap}
.hgi-logo{position:relative;color:rgb(var(--hgi-rgb));text-shadow:0 0 1px rgba(var(--hgi-rgb),.6)}
.hgi-logo-glow{position:absolute;left:0;top:0;right:0;color:transparent;text-shadow:0 0 22px rgba(var(--hgi-rgb),.55),0 0 60px rgba(var(--hgi-rgb),.35),0 0 120px rgba(var(--hgi-rgb),.22);opacity:0;animation:hgi-pulse 5.5s ease-in-out infinite}
@keyframes hgi-pulse{0%,100%{opacity:.62}50%{opacity:1}}
.hgi-glowfade{position:absolute;inset:-40px;opacity:0}
.hgi-glowfade .hgi-logo-glow{inset:40px}
.hgi-flare{position:absolute;left:-10%;right:-10%;top:-60%;bottom:-60%;background:radial-gradient(closest-side,rgba(var(--hgi-rgb),.4),transparent 70%);opacity:0;pointer-events:none}
.hgi-meta{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(0)}
.hgi-label{font-size:.72rem;font-weight:500;letter-spacing:.5em;text-indent:.5em;color:rgba(var(--hgi-rgb),.62)}
.hgi-clock{font-size:1rem;font-weight:300;letter-spacing:.28em;text-indent:.28em;color:rgba(225,245,232,.5);font-variant-numeric:tabular-nums}

/* ---- going in: about 1.8 s, everything together ---- */
.hgi[data-state=entering] .hgi-bg,.hgi[data-state=idle] .hgi-bg{opacity:1;transition:opacity 1.6s var(--hgi-ease)}
.hgi[data-state=entering] .hgi-glow,.hgi[data-state=idle] .hgi-glow{opacity:1;transition:opacity 1.5s var(--hgi-ease) .3s}
.hgi[data-state=entering] .hgi-smoke,.hgi[data-state=idle] .hgi-smoke,.hgi[data-state=entering] .hgi-dust,.hgi[data-state=idle] .hgi-dust{opacity:1;transition:opacity 1.3s ease .5s}
.hgi[data-state=entering] .hgi-logowrap,.hgi[data-state=idle] .hgi-logowrap{opacity:1;transform:scale(1);transition:opacity 1.2s var(--hgi-ease) .45s,transform 1.35s var(--hgi-ease) .45s}
.hgi[data-state=entering] .hgi-glowfade,.hgi[data-state=idle] .hgi-glowfade{opacity:1;transition:opacity 1.1s ease .8s}
.hgi[data-state=entering] .hgi-meta,.hgi[data-state=idle] .hgi-meta{opacity:1;transition:opacity .8s ease 1s}
.hgi[data-state=idle] .hgi-bg,.hgi[data-state=idle] .hgi-glow,.hgi[data-state=idle] .hgi-smoke,.hgi[data-state=idle] .hgi-dust,.hgi[data-state=idle] .hgi-logowrap,.hgi[data-state=idle] .hgi-glowfade,.hgi[data-state=idle] .hgi-meta{transition:none}

/* ---- coming back: about 1 s ---- */
.hgi[data-state=waking] .hgi-meta{opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .5s var(--hgi-ease-in)}
.hgi[data-state=waking] .hgi-flare{animation:hgi-flare .55s ease-out both}
@keyframes hgi-flare{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.hgi[data-state=waking] .hgi-logowrap{opacity:0;transform:scale(1.04);transition:opacity .7s var(--hgi-ease-in) .18s,transform .8s var(--hgi-ease) .18s}
.hgi[data-state=waking] .hgi-glowfade{opacity:0;transition:opacity .7s ease .25s}
.hgi[data-state=waking] .hgi-smoke,.hgi[data-state=waking] .hgi-dust{opacity:0;transition:opacity .7s ease}
.hgi[data-state=waking] .hgi-glow{opacity:0;transition:opacity .8s ease .1s}
.hgi[data-state=waking] .hgi-bg{opacity:0;transition:opacity .85s var(--hgi-ease) .15s}

/* tab in the background: nothing should keep animating */
.hgi[data-paused] *{animation-play-state:paused!important}

@media (max-width:520px){.hgi-label{letter-spacing:.4em;text-indent:.4em}.hgi-clock{letter-spacing:.22em;text-indent:.22em}}

/* reduced motion: still activates, only simple fades, no drift/smoke/parallax/scale */
@media (prefers-reduced-motion:reduce){
 :root{--hgi-enter:700ms;--hgi-wake:500ms}
 html.hgi-entering .app-shell,html.hgi-prewake .app-shell{filter:none;transform:none}
 .hgi-smoke,.hgi-dust,.hgi-flare{display:none}
 .hgi-stage,.hgi-float,.hgi-breathe,.hgi-logo-glow{animation:none}
 .hgi-logo-glow{opacity:.8}
 .hgi-logowrap,.hgi[data-state=waking] .hgi-logowrap{transform:none}
 .hgi[data-state=waking] .hgi-meta{transform:none}
 .hgi .hgi-bg,.hgi .hgi-glow,.hgi .hgi-logowrap,.hgi .hgi-glowfade,.hgi .hgi-meta{transition:opacity .6s ease!important}
}