/* SpaceY site (index.html)
Layout: a vertical flight. Hero, the manifesto's race of two rockets, a launch you scroll
through in the flight plan, the game, Mars at the end. One committed dark world.
Scroll-linked custom properties are written by js/site/scroll-scene.js:
--p page progress 0..1 (on :root)
--m manifesto progress */
/* ==========================================================================
Base
========================================================================== */
:root{--p:0}
html{scroll-behavior:smooth}
body{font-size:17px;line-height:1.6;overflow-x:hidden}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.svg-defs{position:absolute;width:0;height:0}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,44px)}
:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:4px}
.label{font-size:11px}
.toast{bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:20}
/* ==========================================================================
Buttons
========================================================================== */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mark);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border-radius:2px;border:1px solid var(--line-strong);color:var(--ink);background:transparent;cursor:pointer;transition:transform .16s var(--ease-out-expo),border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
/* press feedback everywhere; hover motion only where a real pointer hovers (no sticky lift after a tap) */
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--on-gold);border-color:transparent;box-shadow:0 10px 40px -12px rgba(212,166,90,.55)}
@media (hover:hover) and (pointer:fine){
.btn:hover{border-color:var(--gold);color:var(--gold-hi)}
.btn.primary:hover{transform:translateY(-2px);color:var(--on-gold);border-color:transparent;box-shadow:0 16px 50px -12px rgba(212,166,90,.75)}
.btn.primary:hover:active{transform:translateY(-2px) scale(.97)}
}
.btn.sm{padding:12px 16px;font-size:11px}
/* ==========================================================================
Header / nav
========================================================================== */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
header.solid{background:rgba(5,8,13,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none}
.brand svg{width:34px;height:34px}
.brand svg.wm{width:132px;height:auto}
.nav nav{display:flex;gap:32px}
.nav nav a{text-decoration:none;font-family:var(--f-mark);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav nav a:hover{color:var(--ink)}
.nav nav a.accent{color:var(--gold)}
.nav nav a.nav-more{display:none}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu-btn{display:none}
/* Mobile: the same