/* landing.html's own styles: the page's inline <style> block, moved here verbatim (the shell's CSP applies no inline <style>, PLAN-APPLET-ACCESS S4b). */
@import url('/lib/fonts/inter/inter.css');

:root {
    --bg: #050607;
    --ink-hi: #e9edf4;
    --ink-mid: #8a93a3;
    --ink-low: #575f6b;
    --hairline: rgba(233, 237, 244, 0.16);
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Cascadia Code', Consolas, 'JetBrains Mono', 'SF Mono', monospace;
    --mark-size: min(16.5vw, 30vh);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

body {
    font-family: var(--font-ui);
    color: var(--ink-mid);
    -webkit-font-smoothing: antialiased;
}

/* ── Layers, bottom to top ───────────────────────────────────────────── */

.glow {
    position: fixed; inset: 0;
    background:
        radial-gradient(58vw 32vh at 50% 47%, rgba(96, 130, 190, 0.30), transparent 65%),
        radial-gradient(28vw 18vh at 39% 53%, rgba(148, 110, 210, 0.16), transparent 70%),
        radial-gradient(24vw 15vh at 63% 44%, rgba(110, 190, 210, 0.12), transparent 70%),
        var(--bg);
}

#fluid {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 2.4s ease;
}
body.gl-on #fluid { opacity: 1; }
body.gl-on .glow { display: none; }

.plate {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.plate-fill { fill: var(--bg); }

.wordmark {
    font-family: var(--font-ui);
    font-size: var(--mark-size);
    font-weight: 800;
    letter-spacing: 0.045em;
    text-anchor: middle;
    dominant-baseline: central;
}
.wordmark.ghost {
    fill: none;
    stroke: #dfe6f2;
    stroke-opacity: 0.055;
    stroke-width: 1.5px;
}

.sheen {
    position: fixed; left: 0; top: 0;
    width: 76vmax; height: 76vmax;
    margin: -38vmax 0 0 -38vmax;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(150, 170, 212, 0.05), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
body.pointer-live .sheen { opacity: 1; }

/* ── Content ─────────────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #fluid { transition: none; }
    .sheen { display: none; }
}

body.static #fluid { transition: none; }
body.static .sheen { display: none; }

@media (max-width: 640px) {
    :root { --mark-size: min(17vw, 26vh); }
}