/* Agog Space edition. The scene lives in js/space.js; docs/SPACE.md describes it. */
body.sp-page { background: #05050a; color: var(--cream); }
.sp-page .site-head { color: var(--cream); }
.sp-page .site-head .logo { color: inherit; }
.sp-page .site-head .logo svg { height: 22px; }
.sp-page .site-head .btn { background: var(--cream); color: var(--night); }
.sp-page .site-head.is-solid { background: transparent; backdrop-filter: none; }
.sp-page.is-intro .site-head { color: var(--night); }
.sp-page.is-intro .site-head .btn { background: var(--night); color: var(--cream); }

/* Without JS or with reduced motion the panels stack as a plain list over a starry background */
.sp { position: relative; background: radial-gradient(ellipse at 50% 0%, #15153a 0%, #05050a 60%); }
.sp-stage { position: relative; }
.sp-gl { display: none; }
.sp-panels { display: grid; gap: var(--s-9); padding: 140px var(--edge) var(--s-9); }
.sp-panel { display: grid; gap: var(--s-4); justify-items: start; max-width: 40rem; }
.sp-eyebrow { color: var(--sun); }
.sp-title { font-size: clamp(2.8rem, 1rem + 4.8vw, 6.4rem); font-weight: var(--w-heavy); letter-spacing: -0.055em; line-height: 0.92; text-wrap: balance; max-width: 11ch; }
.sp-title-sm { font-size: clamp(2.2rem, 1rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -0.045em; max-width: 15ch; }
.sp-line { font-size: clamp(1.05rem, 0.92rem + 0.45vw, 1.3rem); line-height: 1.45; font-weight: 500; max-width: 27rem; color: rgb(251 246 238 / 0.92); }
.sp-cta { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
.sp .link { color: var(--cream); padding-block: 10px; }
/* words rise from behind a mask (js/space.js splits titles into words) */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.wd > span { display: inline-block; will-change: transform; }
.sp .btn { background: var(--cream); color: var(--night); }
.sp-intro, .sp-veil { display: none; }
/* the list view (no WebGL or reduced motion) shows each world as a round window */
.sp-still { width: min(70vw, 340px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; order: -1; margin-bottom: var(--s-3);
  box-shadow: 0 0 0 3px var(--pc, var(--sun)), 0 0 60px -10px var(--pc, var(--sun)); }
.sp.is-live .sp-still { display: none; }

/* Live: one sticky stage, the 3D space behind, one panel at a time */
/* the stage fills the tallest view (lvh) so no band of page shows when a phone's address bar slides away;
   the words keep to the smallest view (svh) so they are never under the bar */
.sp.is-live .sp-stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.sp.is-live .sp-gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.sp.is-live .sp-panels { position: absolute; inset: 0 0 auto 0; height: 100svh; padding: 0; display: block; pointer-events: none; }
.sp.is-live .sp-panel { position: absolute; left: var(--edge); bottom: clamp(56px, 12vh, 120px); opacity: 0; visibility: hidden;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.55); }
.sp.is-live .sp-panel.is-on { visibility: visible; pointer-events: auto; }
.sp.is-live .sp-panel[data-stop="0"] { bottom: auto; top: 50%; translate: 0 -50%; }
.sp.is-live .sp-panel.is-right { left: auto; right: var(--edge); justify-items: end; text-align: right; }
.sp.is-live .sp-panel.is-right .sp-title { margin-left: auto; }
.sp-panel[data-color] .sp-eyebrow { color: var(--pc, var(--sun)); }

/* Opener: the wordmark on cream; its O opens into space */
.sp.is-live .sp-intro { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: var(--s-5);
  background: var(--cream); color: var(--night); }
.sp-intro-mark svg { width: min(72vw, 900px); height: auto; overflow: visible; }
.sp-intro-mark svg > * { transform-box: fill-box; transform-origin: center; }
.sp-intro .mono { color: var(--night); }

/* Travel: the world fills the screen as we pass through the portal, then its page opens */
.sp.is-live .sp-veil { position: absolute; inset: 0; z-index: 9; display: block; opacity: 0; pointer-events: none; background: #05050a; }


@media (max-width: 899px) {
  /* phones: every panel sits low, under the portal, with a compact title and a short line */
  /* one rule for every panel (right-hand ones included), so none loses its side padding */
  .sp.is-live .sp-panel, .sp.is-live .sp-panel.is-right, .sp.is-live .sp-panel[data-stop="0"] { left: 0; right: 0; top: auto; max-width: none;
    bottom: 0; padding: var(--s-8) var(--edge) max(var(--s-6), env(safe-area-inset-bottom)); translate: none; justify-items: start; text-align: left; gap: var(--s-3);
    background: linear-gradient(0deg, rgb(5 5 10 / 0.75), rgb(5 5 10 / 0)); }
  .sp.is-live .sp-panel.is-right .sp-title { margin-left: 0; }
  .sp-title { font-size: clamp(2.1rem, 0.9rem + 6.2vw, 3rem); max-width: 12ch; }
  .sp-title-sm { font-size: clamp(1.75rem, 0.8rem + 4.6vw, 2.3rem); max-width: 17ch; }
  .sp-line { font-size: 1rem; max-width: 30ch; }
}

/* Space footer */
.space-foot { position: relative; background: #05050a; color: var(--cream); overflow: hidden; padding-top: var(--s-9); }
.sf-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 12%, #ffe9b8 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 64%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 44%, #cfd8ff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 52% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 78%, #e6dcff 50%, transparent 51%), radial-gradient(1px 1px at 94% 88%, #fff 50%, transparent 51%),
    radial-gradient(ellipse 60% 40% at 70% 100%, rgb(47 91 255 / 0.22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 15% 90%, rgb(183 156 255 / 0.18), transparent 70%);
  background-size: 420px 420px, 520px 520px, 380px 380px, 600px 600px, 460px 460px, 340px 340px, 500px 500px, 560px 560px, 100% 100%, 100% 100%; }
.sf-cols { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-8); }
.sf-lead { display: grid; gap: var(--s-4); justify-items: start; }
.sf-lead .mono, .space-foot nav .mono { color: var(--sun); }
.sf-say { font-size: var(--fs-h2); font-weight: var(--w-heavy); letter-spacing: -0.04em; line-height: 1; }
.space-foot .btn { background: var(--cream); color: var(--night); }
.space-foot nav { display: grid; gap: 10px; align-content: start; }
.space-foot nav a { color: var(--cream); text-decoration: none; font-weight: 520; padding-block: 4px; }
.space-foot nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sf-mark { position: relative; color: var(--cream); margin-top: var(--s-9); }
.sf-mark svg { width: 100%; height: auto; overflow: visible; }
.sf-mark svg circle { fill: #05050a; stroke: none; filter: drop-shadow(0 0 40px rgb(255 201 60 / 0.55)) drop-shadow(0 0 120px rgb(183 156 255 / 0.45)); }
.sf-copy { position: relative; color: rgb(251 246 238 / 0.7); padding-block: var(--s-6); }
@media (max-width: 899px) { .sf-cols { grid-template-columns: 1fr; } }

/* moving between pages: the browser keeps the old page on screen until the new one can paint, then crossfades
   (no blank flash between the portal's flight and the world) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }