/* ═══════════════════════════════════════════════════════════════════
   ORBITAL/ATLAS — 2026-era CSS
   @property · OKLCH · scroll-driven animations · corner-shape ·
   container queries · anchor positioning · :has() · fluid type
   ═══════════════════════════════════════════════════════════════════ */

/* ── Registered custom properties (animatable!) ─────────────────── */
@property --ga    { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --glow  { syntax: '<number>'; inherits: true;  initial-value: 0; }
@property --sweep { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --bg:      oklch(9% 0.02 264);
  --bg2:     oklch(13% 0.03 268);
  --ink:     oklch(96% 0.012 260);
  --mut:     oklch(72% 0.025 262);
  --dim:     oklch(55% 0.03 264);
  --acc:     oklch(75% 0.15 230);   /* overridden per-section */
  --acc2:    oklch(80% 0.13 160);
  --line:    color-mix(in oklch, var(--ink) 12%, transparent);
  --card:    color-mix(in oklch, var(--bg2) 78%, transparent);
  --font:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --r:       1.4rem;
  --pad:     clamp(1.25rem, 3vw, 2.5rem);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }  /* clip keeps mobile layout viewport at device width */
html:focus-within { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acc); color: var(--bg); }

/* ── Fixed scene layers ─────────────────────────────────────────── */
#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; display: block;
  cursor: grab;
}
#scene:active { cursor: grabbing; }

#labels {
  position: fixed; inset: 0;
  z-index: 2; pointer-events: none;
  font-family: var(--mono);
}
.plabel {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -140%);
  pointer-events: auto;
  background: none; border: 0; color: var(--mut);
  font: 500 0.66rem/1 var(--mono);
  letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.45em 0.9em 0.45em 1.15em;
  cursor: pointer;
  opacity: var(--lo, 0.85);
  transition: color .25s, opacity .25s;
}
.plabel::before {
  content: ""; position: absolute; left: 0.1em; top: 50%;
  width: 0.42em; height: 0.42em; translate: 0 -50%;
  border-radius: 50%; background: var(--pc, var(--ink));
  box-shadow: 0 0 0.6em var(--pc, var(--ink));
}
.plabel::after { /* tether line */
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 1.4em;
  background: linear-gradient(var(--line), transparent);
}
.plabel:hover, .plabel:focus-visible { color: var(--ink); opacity: 1; }

/* soft aurora that follows the pointer */
.aurora {
  position: fixed; inset: -20vmax; z-index: 1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at calc(var(--mx, 30) * 1%) calc(var(--my, 30) * 1%),
      oklch(45% 0.12 250 / 0.14), transparent 60%),
    radial-gradient(30vmax 30vmax at calc(100% - var(--mx, 70) * 1%) calc(100% - var(--my, 60) * 1%),
      oklch(40% 0.1 300 / 0.10), transparent 60%);
  mix-blend-mode: screen;
}

/* ── Loader ─────────────────────────────────────────────────────── */
#loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center; gap: 2rem;
  background: var(--bg);
  transition: opacity .9s ease, visibility .9s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader p { color: var(--dim); font: 500 0.72rem/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-align: center; padding-inline: 2rem; }
.loader-orbit { position: relative; width: 7rem; aspect-ratio: 1; }
.loader-orbit i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--line);
}
.loader-orbit i::before {
  content: ""; position: absolute; top: -3px; left: 50%;
  width: 6px; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 12px var(--ink);
}
.loader-orbit i:nth-child(1) { animation: orbit 2.2s linear infinite; }
.loader-orbit i:nth-child(2) { inset: 18%; animation: orbit 1.5s linear infinite reverse; }
.loader-orbit i:nth-child(3) { inset: 36%; animation: orbit 1s linear infinite; }
.loader-orbit::after {
  content: ""; position: absolute; inset: 46%;
  border-radius: 50%; background: oklch(85% 0.15 80);
  box-shadow: 0 0 2rem oklch(80% 0.15 75);
}
@keyframes orbit { to { rotate: 1turn; } }

/* ── HUD / chrome ───────────────────────────────────────────────── */
.hud {
  position: fixed; z-index: 10; inset: 0 0 auto 0;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.1rem clamp(1.2rem, 3vw, 2.4rem);
  mix-blend-mode: screen;
}
.brand {
  color: var(--ink); text-decoration: none;
  font: 800 0.95rem/1 var(--font); letter-spacing: 0.34em;
}
.brand span { color: var(--dim); font-weight: 400; }
.hud-note {
  font: 500 0.62rem/1.4 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); text-align: right;
}
.hud-lang {
  font: 500 0.72rem/1 var(--mono); color: var(--dim); text-decoration: none;
  padding: 0.42rem 0.75rem; border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: 999px; transition: color .25s, border-color .25s;
}
.hud-lang:hover, .hud-lang:focus-visible {
  color: var(--ink); border-color: color-mix(in oklch, var(--ink) 55%, transparent);
}

.progress {
  position: fixed; z-index: 11; top: 0; left: 0; right: 0; height: 2px;
  background: color-mix(in oklch, var(--ink) 7%, transparent);
}
.progress span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, oklch(80% 0.15 75), oklch(72% 0.16 230), oklch(70% 0.13 300));
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
/* native scroll-driven progress where supported */
@supports (animation-timeline: scroll()) {
  .progress span {
    animation: prog linear both;
    animation-timeline: scroll(root);
  }
  @keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── Nav dots with anchor-positioned tooltips ───────────────────── */
.dots {
  position: fixed; z-index: 10; right: clamp(0.6rem, 1.6vw, 1.4rem); top: 50%;
  translate: 0 -50%;
  display: grid; gap: 0.55rem;
}
.dots a {
  --s: 0.42rem;
  width: var(--s); aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in oklch, var(--ink) 30%, transparent);
  transition: background .3s, scale .3s, box-shadow .3s;
  position: relative;
}
.dots a b {
  position: absolute;
  right: calc(100% + 0.9rem);
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font: 500 0.62rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mut);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.dots a:hover b, .dots a:focus-visible b, .dots a.on b { opacity: 1; }
.dots a.on {
  background: var(--ink);
  scale: 1.5;
  box-shadow: 0 0 0.8rem color-mix(in oklch, var(--ink) 60%, transparent);
}

/* ── Panels (the scroll journey) ────────────────────────────────── */
main { position: relative; z-index: 3; }
.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: 16vh clamp(1.2rem, 5vw, 5rem);
  pointer-events: none;            /* let drags fall through to canvas… */
}
.panel > * { pointer-events: auto; } /* …except actual content */

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  align-content: end;
  padding-bottom: 12vh;
  container-type: inline-size;
}
.kicker {
  font: 600 0.7rem/1.5 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 1.6rem;
}
h1 {
  font-size: clamp(3.2rem, 11cqw, 10.5rem);
  font-weight: 850;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
  background: linear-gradient(115deg,
    var(--ink) 30%,
    oklch(85% 0.12 75) 48%,
    oklch(70% 0.16 230) 62%,
    var(--ink) 78%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen { to { background-position: 100% 0; } }
h1 em { font-style: normal; color: transparent; }
.lede {
  max-width: 46ch; margin-top: 2rem;
  color: var(--mut); font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  text-wrap: pretty;
}
.hero-facts {
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3.4rem);
  margin-top: 3rem;
}
.hero-facts div { display: grid; gap: 0.15rem; }
.hero-facts b { font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; }
.hero-facts span { font: 500 0.62rem/1.5 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

.scrollcue {
  position: absolute; bottom: 4.5vh; right: clamp(1.2rem, 5vw, 5rem);
  display: grid; justify-items: center; gap: 0.7rem;
  color: var(--dim); text-decoration: none;
  font: 500 0.62rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scrollcue i {
  width: 1px; height: 3.4rem;
  background: linear-gradient(var(--dim), transparent);
  position: relative; overflow: hidden;
}
.scrollcue i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--ink), transparent);
  animation: drip 1.8s ease-in-out infinite;
}
@keyframes drip { from { translate: 0 -100%; } to { translate: 0 100%; } }

/* ── Planet cards ───────────────────────────────────────────────── */
.card {
  width: 100%;                     /* explicit width: inline-size containment
                                      zeroes intrinsic sizing, so fit-content
                                      (justify-self: start/end) would collapse */
  max-width: 37rem;
  padding: var(--pad);
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    0 2rem 5rem -2rem oklch(0% 0 0 / 0.8),
    inset 0 1px 0 color-mix(in oklch, var(--ink) 8%, transparent);
  container-type: inline-size;
}
@supports (corner-shape: squircle) {
  .card { corner-shape: squircle; border-radius: calc(var(--r) * 1.3); }
}
.card.left  { justify-self: start; }
.card.right { justify-self: end; }

.idx {
  font: 600 0.64rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.idx::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklch, var(--acc) 50%, transparent), transparent); }

h2 {
  font-size: clamp(2.6rem, 12cqw, 4.6rem);
  font-weight: 850; letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(100deg, var(--ink) 55%, var(--acc));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tag { color: var(--mut); margin-top: 0.8rem; text-wrap: pretty; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1px;
  margin: 1.6rem 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: calc(var(--r) * 0.6);
  overflow: hidden;
}
.stats div {
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  padding: 0.8rem 1rem;
  transition: background .3s;
}
.stats div:hover { background: color-mix(in oklch, var(--acc) 8%, var(--bg)); }
.stats dt { font: 500 0.58rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.stats dd { font-size: 0.98rem; font-weight: 650; margin-top: 0.2rem; }

.copy { color: var(--mut); text-wrap: pretty; }
.copy b { color: var(--ink); font-weight: 650; }

.fact {
  margin-top: 1.2rem; padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--acc);
  border-radius: 0 calc(var(--r) * 0.5) calc(var(--r) * 0.5) 0;
  background: color-mix(in oklch, var(--acc) 7%, transparent);
  font-size: 0.92rem;
  color: color-mix(in oklch, var(--ink) 88%, var(--acc));
}
.fact::before {
  content: "DID YOU KNOW";
  display: block;
  font: 600 0.56rem/1 var(--mono); letter-spacing: .26em;
  color: var(--acc); margin-bottom: 0.35rem;
}

/* giant background words drifting on scroll */
.bgword {
  position: absolute; z-index: -1;
  top: 50%; left: 50%;
  font-size: clamp(6rem, 22vw, 22rem);
  font-weight: 900; letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklch, var(--ink) 9%, transparent);
  white-space: nowrap;
  translate: -50% -50%;
  pointer-events: none;
}

/* ── Scroll-driven reveal animations (progressive enhancement) ──── */
@supports (animation-timeline: view()) {
  .reveal {
    animation: rise both ease-out;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(5.5vh) scale(0.985); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
  }
  .bgword {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes drift {
    from { transform: translateX(12vw); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    to   { transform: translateX(-12vw); opacity: 0; }
  }
  .hero .reveal { animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* ── Scale section ──────────────────────────────────────────────── */
.scale { align-content: center; }
.wide {
  width: min(72rem, 100%);
  margin-inline: auto;
  padding: var(--pad);
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  container-type: inline-size;
}
.sizerow {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(0.8rem, 2.5cqw, 2rem);
  margin-top: 2.4rem;
  overflow: hidden;
  padding-bottom: 0.5rem;
}
.sizerow figure { display: grid; justify-items: center; gap: 0.6rem; }
.sizerow i {
  --d: calc(var(--s) * 0.55cqw + 2px);   /* true relative diameters, Earth ≈ 0.55cqw */
  width: max(var(--d), 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, color-mix(in oklch, var(--ink) 55%, var(--acc)), transparent 55%),
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--acc) 75%, var(--bg)), color-mix(in oklch, var(--acc) 30%, var(--bg)));
  box-shadow: 0 0 calc(var(--d) * 0.25 + 4px) color-mix(in oklch, var(--acc) 30%, transparent);
}
.earth-ref i { outline: 1px solid var(--acc); outline-offset: 4px; }
.sun-ref { margin-left: auto; }
.sun-ref i {
  --d: 26rem;
  background:
    radial-gradient(circle at 40% 35%, oklch(95% 0.1 95), oklch(75% 0.18 60) 45%, oklch(55% 0.2 45) 75%, transparent 78%);
  box-shadow: 0 0 6rem oklch(80% 0.16 70 / 0.55);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse { 50% { --glow: 1; scale: 1.02; } }
.sizerow figcaption { font: 500 0.6rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); text-align: center; }
.scalefact {
  margin-top: 2rem; padding: 1.2rem 1.4rem;
  border: 1px dashed color-mix(in oklch, var(--acc) 45%, transparent);
  border-radius: calc(var(--r) * 0.6);
  color: var(--mut);
}
.scalefact b { color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────────── */
footer {
  position: relative; z-index: 3;
  background:
    linear-gradient(transparent, var(--bg) 18%),
    var(--bg);
  padding: 10vh clamp(1.2rem, 5vw, 5rem) 4vh;
  border-top: 1px solid var(--line);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 2.5rem;
  max-width: 72rem; margin-inline: auto;
}
footer h3 { font-size: 1rem; letter-spacing: .3em; margin-bottom: 0.8rem; }
footer h4 { font: 600 0.66rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.9rem; }
footer p, footer li { color: var(--mut); font-size: 0.9rem; }
footer ul { list-style: none; display: grid; gap: 0.4rem; }
footer li::before { content: "▸ "; color: var(--acc); }
.colophon {
  text-align: center; margin-top: 5rem;
  font: 500 0.62rem/1.6 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim);
}

.nojs {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  padding: 1rem 2rem; text-align: center;
  background: oklch(60% 0.2 30); color: white;
}

/* ── Motion & contrast preferences ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .aurora { display: none; }
}

/* ── Small screens ──────────────────────────────────────────────── */
@media (max-width: 46rem) {
  .card.left, .card.right { justify-self: stretch; max-width: none; }
  .hud-note { display: none; }
  .dots { display: none; }
  .bgword { font-size: 30vw; }
  .sun-ref i { --d: 12rem; }
}

/* ── RTL (Arabic): connected script must not be letter-spaced ───── */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
[dir="rtl"] .fact::before { content: "هل تعلم؟"; }
[dir="rtl"] footer li::before { content: "◂ "; }
/* Arabic ascenders/descenders need real leading — Latin-tight boxes clip them */
[dir="rtl"] h1 { line-height: 1.25; }
[dir="rtl"] h2 { line-height: 1.35; }
[dir="rtl"] .kicker, [dir="rtl"] .idx, [dir="rtl"] .dots a b,
[dir="rtl"] .fact::before, [dir="rtl"] .hero-facts span,
[dir="rtl"] .scrollcue, [dir="rtl"] .sizerow figcaption,
[dir="rtl"] footer h3, [dir="rtl"] footer h4, [dir="rtl"] .colophon { line-height: 1.5; }