/* Welcome genie (v1.1.1): the site's genie greets first-time visitors in a starry sky,
   says a few lines word by word with hand gestures, then warps them into the site. */
.gi-screen { display: none; }
html.gi-on, html.gi-on body { overflow: hidden !important; }
html.gi-on .gi-screen {
    position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 38%, #141a33 0%, #070914 55%, #020308 100%);
    color: #f4f2f8; font-family: inherit; overflow: hidden; isolation: isolate;
    transition: opacity .7s ease, filter .7s ease;
}
html.gi-on .gn-layer, html.gi-on .gn-lamp { visibility: hidden !important; }
/* nothing behind the welcome needs painting while it plays */
html.gi-on body > :not(.gi-screen) { visibility: hidden; }
.gi-screen.is-leaving { opacity: 0; filter: blur(6px); pointer-events: none; }
.gi-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.gi-screen::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% 30%, rgba(var(--gn-rgb, 246, 182, 72), .16), transparent 42%); }

.gi-stage { width: min(880px, 92vw); display: grid; justify-items: center; gap: clamp(8px, 2vh, 22px); transform: translateY(-2vh); }
.gi-genie { width: clamp(190px, 34vh, 330px); aspect-ratio: 120 / 176; position: relative; transition: transform 1.1s cubic-bezier(.6, 0, .2, 1), opacity .9s ease; animation: giEnter 1.1s cubic-bezier(.2, .9, .25, 1.15) backwards; }
.gi-genie svg { width: 100%; height: 100%; overflow: visible; display: block; }
.gi-genie .gi-aura { animation: giAura 3s ease-in-out infinite; transform-origin: 0 0; }
.gi-genie .gi-flame { animation: giFlame .45s ease-in-out infinite alternate; transform-origin: 0 -45px; }
.gi-genie .gi-hand-palm, .gi-genie .gi-hand-point { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: left center; transition: opacity .18s, transform .22s cubic-bezier(.3, 1.6, .5, 1); }
.gi-genie .is-palm .gi-hand-palm, .gi-genie .is-point .gi-hand-point { opacity: 1; transform: none; }
.gi-genie .gi-eye { transition: transform .09s; transform-box: fill-box; transform-origin: center; }
.gi-genie.is-blink .gi-eye, .gi-genie.is-wink .gi-eye-r { transform: scaleY(.12); }
.gi-genie .gi-mouth-o { opacity: 0; }
.gi-genie.is-talk .gi-mouth-o { opacity: 1; } .gi-genie.is-talk .gi-mouth { opacity: 0; }
.gi-screen.is-warp .gi-genie { transform: scale(2.6) translateY(4%); opacity: 0; }

.gi-board { min-height: 3.4em; max-width: 100%; text-align: center; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.45; font-weight: 800;
    letter-spacing: -.01em; transition: opacity .3s ease, transform .3s ease; text-wrap: balance; }
.gi-board.is-out { opacity: 0; transform: translateY(-10px); }
.gi-word { display: inline-block; opacity: 0; transform: translateY(12px) scale(.96); filter: blur(6px); margin: 0 .14em;
    transition: opacity .32s ease, transform .4s cubic-bezier(.2, .8, .2, 1.2), filter .32s ease, color .3s, text-shadow .3s; }
.gi-word.is-in { opacity: 1; transform: none; filter: none; }
.gi-word.is-now { color: #ffd36b; text-shadow: 0 0 22px rgba(255, 211, 107, .55); }
.gi-word.is-name { background: linear-gradient(90deg, #ffe3a0, #f6b648 50%, #ffe3a0); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.gi-word.is-name.is-now { filter: drop-shadow(0 0 12px rgba(255, 211, 107, .6)); }

.gi-skip { position: absolute; top: max(16px, env(safe-area-inset-top)); inset-inline-end: 18px; z-index: 2; display: inline-flex; gap: 8px; align-items: center;
    border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #e8e5ef; font: inherit; font-size: 14px; font-weight: 700;
    padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; }
.gi-skip:hover, .gi-skip:focus-visible { background: rgba(255, 255, 255, .14); border-color: rgba(255, 211, 107, .6); outline: none; }
.gi-enter { margin-top: 6px; border: 0; border-radius: 999px; padding: 13px 26px; font: inherit; font-size: 16px; font-weight: 900; cursor: pointer;
    background: linear-gradient(135deg, #ffd36b, #f6b648); color: #1a1205; box-shadow: 0 12px 34px rgba(246, 182, 72, .35); animation: giPulse 1.6s ease-in-out infinite; }

@keyframes giEnter { from { transform: translateY(40vh) scale(.35) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } }
@keyframes giFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes giTail { 0%, 100% { transform: skewX(-6deg); } 50% { transform: skewX(7deg); } }
@keyframes giAura { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes giFlame { from { transform: scale(1, .92); } to { transform: scale(.92, 1.1); } }
@keyframes giPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

@media (max-width: 640px) {
    .gi-stage { transform: translateY(-4vh); }
    .gi-genie { width: clamp(170px, 52vw, 240px); }
    .gi-board { font-size: clamp(21px, 6.4vw, 28px); padding: 0 6px; }
    .gi-skip { font-size: 13px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) { .gi-screen { display: none !important; } }