:root {
  --bg: #000;
  --fg: #f4f7ff;
  --glow: 90, 235, 215;
}

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

html, body {
  height: 100%;
  overflow: hidden;           /* one screen, no scrolling */
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  height: 100vh;   /* fallback */
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.ready #scene { opacity: 1; }

/* ---- Layout: big orb on top, title, then the three sub-orbs ---- */
.layout {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2.2vh, 24px);
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(14px, calc(env(safe-area-inset-bottom) + 6px))
    max(16px, env(safe-area-inset-left));
}

/* The WebGL orb is drawn over this empty box; it takes all the space the rest leaves over. */
.hero-slot {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

/* ---- Title ---- */
.title {
  flex: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  /* font-size is the small line; "The Orb" is 3x this */
  font-size: clamp(0.9rem, min(2.6vw + 0.4rem, 3.6vh), 2.4rem);
  font-weight: 300;
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 40px rgba(var(--glow), 0.35);
}

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

.main {
  font-size: 3em;
  font-weight: 200;
  letter-spacing: 0.02em;
}

.sub {
  letter-spacing: 0.14em;
  color: rgba(244, 247, 255, 0.85);
}

/* ---- Sub-orbs ---- */
.suborb-list {
  --d: clamp(60px, min(21vw, 12.5vh), 120px);   /* orb diameter */
  flex: none;
  list-style: none;
  width: 100%;
  max-width: 680px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 clamp(8px, 3vw, 32px);
  align-items: start;
}

.suborb-list li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1s ease;
}
.suborb-list li.in { opacity: 1; transform: none; }

.suborb {
  --tint: 90, 235, 215;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.suborb[data-palette="orange"] { --tint: 255, 150, 50; }
.suborb[data-palette="purple"] { --tint: 170, 100, 255; }
.suborb[data-palette="green"]  { --tint: 140, 235, 60; }

.slot {
  display: block;
  width: var(--d);
  aspect-ratio: 1;
  border-radius: 50%;
}
.suborb:focus-visible .slot {
  outline: 2px solid rgba(var(--tint), 0.8);
  outline-offset: 8px;
}

.label {
  font-size: clamp(0.62rem, 0.5rem + 0.5vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  color: rgba(244, 247, 255, 0.7);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.suborb:hover .label,
.suborb:focus-visible .label {
  color: #fff;
  text-shadow: 0 0 24px rgba(var(--tint), 0.8);
}

/* ---- No-WebGL fallback: flat tinted orbs ---- */
.no-webgl #scene { display: none; }
.no-webgl .hero-slot::before {
  content: "";
  display: block;
  height: 92%;
  max-width: 92%;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, #fff 0 3%, rgba(255,255,255,0) 14%),
    radial-gradient(circle at 50% 50%, #7f9aa6 0%, #24343b 45%, #05080a 72%);
  box-shadow:
    inset -2vmin -3vmin 6vmin rgba(var(--glow), 0.35),
    0 0 12vmin rgba(var(--glow), 0.45);
}
.no-webgl .slot {
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.9) 0 3%, rgba(255,255,255,0) 14%),
    radial-gradient(circle at 50% 50%, rgba(var(--tint), 0.45) 0%, #1a1f24 55%, #050608 74%);
  box-shadow: 0 0 40px rgba(var(--tint), 0.35);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .word { filter: none; }
  #scene { transition: none; }
  .suborb-list li { transition: none; }
}