/* ════════════════════════════════════════════════════════════════
   ORACLE — Shared styles (page chrome, starfield, hero, panel, result)
   Used by /oracle.html and all variants in /oracle/*.html
   Depends on /styles/design-system.css for tokens.
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--ink-900);
  color: var(--fg-1);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Starfield — fixed, behind everything */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 8%,#fff,transparent 55%),
    radial-gradient(1px 1px at 27% 18%,rgba(255,255,255,.85),transparent 55%),
    radial-gradient(1.5px 1.5px at 45% 6%,#fff,transparent 55%),
    radial-gradient(1px 1px at 62% 22%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(1.2px 1.2px at 78% 10%,#fff,transparent 55%),
    radial-gradient(1px 1px at 88% 24%,rgba(255,255,255,.8),transparent 55%),
    radial-gradient(1.3px 1.3px at 7% 34%,#fff,transparent 55%),
    radial-gradient(1px 1px at 22% 46%,rgba(255,255,255,.75),transparent 55%),
    radial-gradient(1.5px 1.5px at 38% 38%,#fff,transparent 55%),
    radial-gradient(1px 1px at 55% 52%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(1.2px 1.2px at 72% 42%,#fff,transparent 55%),
    radial-gradient(1px 1px at 85% 56%,rgba(255,255,255,.8),transparent 55%),
    radial-gradient(1.4px 1.4px at 15% 64%,#fff,transparent 55%),
    radial-gradient(1px 1px at 32% 76%,rgba(255,255,255,.7),transparent 55%),
    radial-gradient(1.2px 1.2px at 48% 68%,#fff,transparent 55%),
    radial-gradient(1px 1px at 65% 82%,rgba(255,255,255,.75),transparent 55%),
    radial-gradient(1.5px 1.5px at 80% 72%,#fff,transparent 55%),
    radial-gradient(1px 1px at 93% 88%,rgba(255,255,255,.85),transparent 55%);
  background-size: 280px 280px, 240px 240px, 320px 320px, 260px 260px, 300px 300px, 220px 220px,
                   260px 260px, 300px 300px, 280px 280px, 240px 240px, 260px 260px, 300px 300px,
                   280px 280px, 320px 320px, 260px 260px, 240px 240px, 300px 300px, 280px 280px;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 14%, #fff7d1, transparent 50%),
    radial-gradient(2px 2px   at 58% 28%, #d4af37, transparent 50%),
    radial-gradient(1.5px 1.5px at 82% 48%, #fff,   transparent 50%),
    radial-gradient(1.5px 1.5px at 36% 66%, #e8c56d, transparent 50%);
  background-size: 600px 600px, 800px 800px, 700px 700px, 650px 650px;
  animation: oracle-tw 6s ease-in-out infinite;
}
@keyframes oracle-tw { 0%,100% { opacity: .65 } 50% { opacity: 1 } }

/* ── Minimal nav (back to home) ────────────────────────── */
.oracle-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  background: rgba(6,3,15,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.oracle-topnav a {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--fg-4);
  text-decoration: none;
  transition: color .2s;
}
.oracle-topnav a:hover { color: var(--gold-500); }
.oracle-topnav .logo {
  font-weight: var(--weight-black);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
}
.oracle-topnav .logo span { color: var(--gold-500); }

/* ── Page layout ───────────────────────────────────────── */
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: calc(var(--space-12) + 64px) var(--space-6) var(--space-20);
  display: flex; flex-direction: column; gap: var(--space-12);
  position: relative;
}

/* ── 1) HERO ──────────────────────────────────────────── */
.hero {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
}
.hero-eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(212,175,55,.55);
}
.hero-eyebrow .dot { color: var(--gold-500); margin: 0 var(--space-2); }

.title-stage {
  width: 100%; max-width: 880px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4) 0;
}
.title-stage canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.hero-title {
  position: relative; z-index: 1;
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  font-size: clamp(3.5rem, 12vw, 7.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin: 0;
  background: linear-gradient(135deg, #fff8e7 0%, var(--gold-500) 55%, var(--gold-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(212,175,55,.45)) drop-shadow(0 0 48px rgba(212,175,55,.18));
  text-align: center;
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease-soft), filter .45s var(--ease-soft);
}
.hero-title.swap {
  animation: titleSwap .8s var(--ease-brut) forwards;
}
@keyframes titleSwap {
  0%   { opacity: 0; transform: scale(.88) translateY(8px); }
  55%  { opacity: 1; transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1); }
}

.hero-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--parchment-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 520px;
  margin: 0;
}
.hero-quote em { font-style: italic; color: var(--gold-500); font-weight: 600; }

/* ── Editorial intro (optional, between hero and panel) ──── */
.editorial-intro {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-3);
}
.editorial-intro p { margin: 0 0 var(--space-4); }
.editorial-intro p:last-child { margin: 0; }

/* ── 2) CRITERIA PANEL ────────────────────────────────── */
.panel {
  background: linear-gradient(145deg, rgba(20,8,40,.55), rgba(6,3,14,.7));
  border: 1px solid rgba(212,175,55,.18);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  position: relative; overflow: hidden;
}
.panel::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(212,175,55,.08) 0%, transparent 70%);
  pointer-events: none;
}
.panel-eyebrow {
  text-align: center;
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pink-500);
  margin-bottom: var(--space-8);
  position: relative; z-index: 1;
}

.sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-10);
  position: relative; z-index: 1;
}
.slider {
  display: flex; flex-direction: column; gap: var(--space-3);
}
.slider-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
}
.slider-label {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pink-500);
}
.slider-value {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  font-size: 1.5rem;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  background: var(--grad-gold-pink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter .25s var(--ease-soft);
}
.slider-value.bump { filter: drop-shadow(0 0 8px rgba(212,175,55,.5)); }
.slider-value .unit {
  font-size: .68rem;
  font-weight: var(--weight-medium);
  color: var(--fg-5);
  -webkit-text-fill-color: var(--fg-5);
  margin-left: 4px;
  letter-spacing: 0;
}

/* Custom range — track */
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: linear-gradient(to right,
    var(--gold-500) 0%,
    var(--gold-500) var(--p, 50%),
    rgba(255,255,255,.06) var(--p, 50%),
    rgba(255,255,255,.06) 100%);
  border-radius: 3px;
  outline: none; cursor: pointer;
  transition: box-shadow .25s var(--ease-soft);
}
.slider input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(212,175,55,.2); }
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff8e7, var(--gold-500));
  border: 1px solid var(--gold-400);
  box-shadow: 0 0 12px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,255,255,.4);
  cursor: grab;
}
.slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.slider input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-500); border: 1px solid var(--gold-400);
  box-shadow: 0 0 12px rgba(212,175,55,.6); cursor: grab;
}
.slider-ticks {
  display: flex; justify-content: space-between;
  font-size: .65rem; color: var(--fg-6);
  font-feature-settings: "tnum";
  font-family: ui-monospace, monospace;
  letter-spacing: .04em;
}

.source-chip-wrap { margin-top: var(--space-8); text-align: center; position: relative; z-index: 1; }
.source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-tint-08);
  border: 1px solid var(--gold-tint-15);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  font-size: .68rem;
  font-weight: var(--weight-bold);
  color: var(--gold-500);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cta-row { margin-top: var(--space-8); text-align: center; position: relative; z-index: 1; }
.btn-cabinet {
  width: 100%;
  padding: 16px 30px;
  border: 1px solid rgba(212,175,55,.55);
  background: transparent;
  color: var(--gold-500);
  font-size: .78rem;
  letter-spacing: var(--tracking-luxe);
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: var(--weight-semi);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all .35s var(--ease-soft);
  position: relative; overflow: hidden;
}
.btn-cabinet:hover, .btn-cabinet:focus-visible {
  background: rgba(212,175,55,.06);
  border-color: var(--gold-400);
  color: var(--gold-400);
  letter-spacing: .32em;
  box-shadow: var(--glow-gold);
  outline: none;
}
.btn-cabinet:active { transform: scale(.985); }
.btn-cabinet[disabled] { opacity: .5; cursor: progress; }

/* ── 3) RESULT ────────────────────────────────────────── */
.result {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-soft);
}
.result.show { opacity: 1; pointer-events: auto; }

.result-pct {
  font-family: var(--font-sans);
  font-weight: var(--weight-black);
  font-size: clamp(4rem, 14vw, 8rem);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  background: var(--grad-gold-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--glow-text-gold);
  filter: drop-shadow(0 0 28px rgba(212,175,55,.35));
  margin: 0;
  transform: scale(.88);
  opacity: 0;
}
.result.show .result-pct {
  animation: oracle-brutIn .8s var(--ease-brut) forwards;
}
@keyframes oracle-brutIn {
  0%   { opacity: 0; transform: scale(.88) translateY(14px); }
  55%  { opacity: 1; transform: scale(1.07) translateY(-4px); }
  75%  { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.result-eyebrow {
  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pink-500);
}
.result-verdict {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--parchment);
  max-width: 600px;
  margin: 0;
}

/* Distribution canvas */
.dist-wrap {
  width: 100%; max-width: 560px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(212,175,55,.1);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.dist-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-5);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semi);
}
.dist-head strong { color: var(--gold-500); font-weight: var(--weight-bold); }
.dist-canvas { width: 100%; height: 130px; display: block; }

/* Share row */
.share-row {
  display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center;
}
.btn-outline {
  border: 1px solid rgba(212,175,55,.4);
  background: transparent;
  color: var(--gold-500);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: var(--weight-bold);
  font-family: var(--font-sans);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(212,175,55,.15);
  transition: all .25s var(--ease-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--gold-tint-08);
  border-color: var(--gold-400);
  color: var(--gold-400);
  box-shadow: var(--glow-gold);
  outline: none;
}
.btn-outline:active { transform: scale(.97); }

.reset-link {
  background: none; border: none; color: var(--fg-5);
  font-family: var(--font-sans); font-size: .75rem;
  cursor: pointer; padding: 6px 12px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.reset-link:hover { color: var(--gold-500); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 860px) {
  .page { padding: calc(var(--space-8) + 64px) var(--space-5) var(--space-16); gap: var(--space-10); }
  .panel { padding: var(--space-6); }
  .sliders { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 390px) {
  .page { padding: calc(var(--space-6) + 64px) var(--space-4) var(--space-12); }
  .panel { padding: var(--space-5); border-radius: var(--radius-xl); }
  .slider-value { font-size: 1.25rem; }
  .btn-cabinet { letter-spacing: .22em; font-size: .72rem; padding: 14px 16px; }
}

/* ── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .result.show .result-pct { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}