/* SpaceEx — the canvas, its scrim, the HUD shell, the top bar and the hero. */

/* ── The 3D canvas and its legibility scrim ──────────────────────────────── */
#sky{
  position:fixed;inset:0;width:100%;height:100%;
  display:block;z-index:0;
  touch-action:none;cursor:grab;
  background:radial-gradient(120% 90% at 30% 20%,#0b0f1a 0%,#05070d 50%,#030509 100%);
}
#sky:active{cursor:grabbing}
.no-webgl #sky{display:none}

/* Stands in when WebGL is unavailable, so the page never lands on a black
   rectangle. Pure CSS: a few stars and a faint wash. */
.fallback-sky{display:none;position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%,rgba(255,255,255,.85),transparent 100%),
    radial-gradient(1.4px 1.4px at 73% 14%,rgba(220,230,255,.8),transparent 100%),
    radial-gradient(1.8px 1.8px at 41% 66%,rgba(255,245,225,.75),transparent 100%),
    radial-gradient(1.3px 1.3px at 88% 54%,rgba(255,255,255,.7),transparent 100%),
    radial-gradient(1.5px 1.5px at 27% 84%,rgba(230,235,255,.7),transparent 100%),
    radial-gradient(1.2px 1.2px at 61% 38%,rgba(255,255,255,.6),transparent 100%),
    radial-gradient(60% 45% at 68% 30%,rgba(242,198,124,.08),transparent 70%),
    radial-gradient(50% 40% at 22% 72%,rgba(140,160,255,.08),transparent 70%),
    radial-gradient(120% 90% at 30% 20%,#0b0f1a 0%,#05070d 50%,#030509 100%);
}
.no-webgl .fallback-sky{display:block}

.scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,5,9,.7) 0%,rgba(3,5,9,.14) 13%,transparent 26%),
    linear-gradient(0deg,rgba(3,5,9,.78) 0%,rgba(3,5,9,.2) 18%,transparent 34%),
    radial-gradient(70% 90% at 0% 40%,rgba(3,5,9,.62) 0%,transparent 60%);
  transition:opacity .6s ease;
}
.explored .scrim{opacity:.72}

/* ── HUD shell ───────────────────────────────────────────────────────────── */
.ui{position:fixed;inset:0;z-index:2;pointer-events:none}
.ui > *{pointer-events:auto}

/* Glass shared by every floating surface. The border is an inset ring rather
   than a real border, so it stays a hairline on any screen density; three
   shadows lift it off the scene without a hard edge against black sky. */
.glass{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 38%),
    var(--panel);
  border-radius:var(--radius);
  box-shadow:
    var(--shade-1),var(--shade-2),var(--shade-3),
    inset 0 0 0 1px var(--line-soft),
    inset 0 1px 0 var(--edge-top),
    inset 0 -1px 0 var(--edge-bottom);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar{
  position:absolute;left:0;right:0;top:0;z-index:5;
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  padding:calc(clamp(12px,1.6vw,20px) + env(safe-area-inset-top)) var(--pad) 0;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand-glyph{width:34px;height:34px;flex:0 0 34px;display:block;border-radius:50%}
.brand-name{font-family:var(--font);font-weight:600;font-size:18px;letter-spacing:-.02em;line-height:1}
.brand-name b{font-weight:600;color:var(--accent)}
.brand-sub{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-top:5px;
}

.search-trigger{
  display:flex;align-items:center;gap:10px;
  height:40px;padding:0 8px 0 14px;border-radius:999px;
  width:clamp(220px,24vw,340px);
  color:var(--muted);font-size:13.5px;
  background:rgba(12,14,20,.5);box-shadow:inset 0 0 0 1px var(--line-soft);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:box-shadow .2s ease,color .2s ease,background .2s ease;
}
.search-trigger:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:rgba(18,20,28,.6)}
.search-trigger svg{width:16px;height:16px;flex:0 0 16px}
.search-trigger .st-text{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nav{
  margin-left:auto;display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:999px;
  background:rgba(12,14,20,.5);box-shadow:inset 0 0 0 1px var(--line-soft);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.nav button{
  padding:8px 13px;border-radius:999px;font-size:13px;font-weight:500;
  color:var(--muted);white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.nav button:hover{color:var(--ink);background:rgba(255,255,255,.07)}
.nav button[aria-current="true"]{color:var(--accent-ink);background:var(--accent)}

.burger{display:none;width:42px;height:42px;border-radius:50%;flex:0 0 42px;
  background:rgba(12,14,20,.55);box-shadow:inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  margin-left:auto;position:relative}
.burger span{position:absolute;left:13px;width:16px;height:1.5px;border-radius:2px;
  background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:25px}
.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.menu-panel{
  position:absolute;right:var(--pad);top:calc(var(--top) - 8px + env(safe-area-inset-top));
  width:min(300px,calc(100vw - 2*var(--pad)));
  padding:8px;display:grid;gap:2px;z-index:30;
  visibility:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .22s ease,transform .3s var(--ease),visibility .3s;
}
.menu-open .menu-panel{visibility:visible;opacity:1;transform:none}
.menu-panel button{
  display:flex;align-items:center;gap:14px;
  height:46px;padding:0 14px;border-radius:12px;text-align:left;
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  transition:background .18s ease,color .18s ease;
}
.menu-panel button i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--dim);width:18px}
.menu-panel button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.menu-panel button[aria-current="true"]{background:var(--accent-soft);color:var(--ink)}
.menu-panel button[aria-current="true"] i{color:var(--accent)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:absolute;left:var(--pad);top:calc(var(--top) + clamp(24px,6vh,70px));
  width:min(470px,38vw);
  transition:opacity .45s ease,visibility .45s,transform .6s var(--ease);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10.5px;color:var(--accent);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.hero h1{
  font-size:clamp(40px,4.6vw,72px);line-height:.96;letter-spacing:-.02em;
  color:var(--ink);
}
/* Each line is its own mask for the entrance wipe, so a line that wraps would
   break the effect. They are held on one line and the type scales instead. */
.hero h1 .ln{display:block;overflow:hidden;white-space:nowrap;padding-bottom:.06em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{
  margin-top:20px;font-size:clamp(14px,1.02vw,16px);line-height:1.62;
  color:var(--muted);max-width:42ch;
}
.hero-facts{
  list-style:none;margin:24px 0 0;padding:16px 0 0;
  display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;
  border-top:1px solid var(--line-soft);
}
.hero-facts li{padding:0 20px;border-left:1px solid var(--line-soft)}
.hero-facts li:first-child{padding-left:0;border-left:0}
.hero-facts b{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(16px,1.35vw,20px);
  letter-spacing:-.02em;color:var(--ink)}
.hero-facts span{display:block;margin-top:3px;font-size:11.5px;color:var(--dim)}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 22px;border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s ease,box-shadow .2s ease,color .2s ease;
}
.btn svg{width:15px;height:15px;flex:0 0 15px}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent) 70%);
  color:var(--accent-ink);
  box-shadow:0 10px 34px -8px rgba(242,198,124,.5),inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 40px -8px rgba(242,198,124,.7),inset 0 1px 0 rgba(255,255,255,.7)}
.btn-ghost{
  background:rgba(255,255,255,.05);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-ghost:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{height:36px;padding:0 15px;font-size:13px}

/* The hero is an invitation, not furniture: once the visitor has picked
   something, started the tour or taken hold of the scene, it steps aside. */
.explored .hero,.touring .hero,.scaled .hero,.sheet-open .hero{
  opacity:0;visibility:hidden;transform:translateX(-18px);pointer-events:none;
}