/* ==========================================================================
   Journey to the Sun — Dashboard
   Dark-mode-first. Fire orange acts, amber glows.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:           #050507;
  --surface:      #0A0A0F;
  --raised:       #111116;

  /* Text */
  --fg:           #EEEAE3;
  --fg-mid:       #A39E94;
  --fg-dim:       #5C5852;

  /* Fire */
  --primary:      #F97316;
  --fire-hot:     #FF3D00;
  --fire:         #FF6B00;
  --fire-mid:     #FFAB40;
  --ember:        #E85D04;
  --warm:         #FBBF24;

  /* Amber atmosphere */
  --amber-glow:   #F2C464;
  --amber:        #D4952B;
  --amber-deep:   #B87A1A;

  /* Tiers */
  --tier-10:  #FBBF24;
  --tier-25:  #60A5FA;
  --tier-35:  #10B981;
  --tier-50:  #D4602E;
  --tier-75:  #7044B8;
  --tier-100: #EEEAE3;

  /* Spacing */
  --pad: clamp(20px, 5vw, 64px);
  --container: 1080px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 50% -200px, rgba(255,107,0,.08), transparent 60%),
    radial-gradient(900px 600px at 10% 30%,  rgba(112,68,184,.04), transparent 70%),
    radial-gradient(900px 600px at 90% 80%,  rgba(212,149,43,.04), transparent 70%),
    var(--bg);
}

img { max-width: 100%; display: block; }

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; margin: 0;
  letter-spacing: -0.01em; line-height: 1.1; font-weight: 800; }

.eyebrow { font: 600 12px/1 'DM Sans', sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ember); }

.mono { font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; }

.text-mid { color: var(--fg-mid); }
.text-dim { color: var(--fg-dim); }

/* ==========================================================================
   Top mini-HUD (sticky)
   ========================================================================== */

.hud {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(5,5,7,.65);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 100; pointer-events: none;
  background: rgba(255,255,255,.02);
}
.scroll-progress .bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--fire), var(--fire-mid), var(--warm));
  box-shadow: 0 0 12px var(--fire), 0 0 24px var(--fire-hot);
  transition: width .15s linear;
}
.hud-inner {
  max-width: var(--container); margin: 0 auto;
  padding: 12px var(--pad); display: flex; gap: 16px; align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--fire), var(--fire-hot));
  display: grid; place-items: center;
  font: 800 11.2px 'Plus Jakarta Sans'; color: #fff;
  box-shadow: 0 2px 10px rgba(255,107,0,.4);
}
.brand-text { font: 600 14px 'DM Sans'; color: var(--fg); }
.brand-text .sep { color: var(--fg-dim); margin: 0 8px; font-weight: 400; }
.brand-text .tab { color: var(--fire-mid); }

.hud-stats { display: flex; gap: 20px; align-items: center; }
.hud-stat .num { font: 700 14px 'DM Mono', monospace; color: var(--fg); letter-spacing: .03em; }
.hud-stat .lab { font: 500 10px 'DM Sans'; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .12em; }

@media (max-width: 640px) {
  .hud-stats .hud-stat:nth-child(n+3) { display: none; }
  .brand-text { font-size: 12px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative; isolation: isolate;
  padding: clamp(60px, 12vh, 140px) var(--pad) clamp(40px, 8vh, 80px);
  max-width: var(--container); margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.hero::before { /* glow orb */
  content: ''; position: absolute; inset: -10% 10% auto 10%;
  height: 600px; z-index: -1;
  background: radial-gradient(closest-side,
    rgba(255,107,0,.18) 0%, rgba(255,61,0,.06) 35%, transparent 70%);
  animation: glowPulse 8s ease-in-out infinite;
  filter: blur(20px);
}
@keyframes glowPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

.hero .eyebrow { /* no entrance animation */ }
.hero h1 {
  font-size: clamp(48px, 8.4vw, 112px);
  letter-spacing: -.03em;
  margin: 18px 0 12px;
  background: linear-gradient(135deg, #ff6b00, #ff3d00, #ffab40, #fbbf24, #ff6b00);
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 9s ease-in-out infinite;
  filter: drop-shadow(0 0 80px rgba(255,107,0,.18));
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-sub {
  max-width: 620px; margin: 0 auto;
  color: var(--fg-mid); font-size: clamp(15px, 1.6vw, 18px);
}

.counter-wrap {
  margin: clamp(28px, 5vh, 56px) auto 0; max-width: 920px;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.counter {
  font-family: 'Plus Jakarta Sans'; font-weight: 800;
  font-size: clamp(56px, 12vw, 156px); line-height: .95;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ff6b00, #fbbf24);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 80px rgba(251,191,36,.04);
}
.counter-cap {
  display: inline-flex; gap: 10px; align-items: baseline; justify-content: center;
  color: var(--fg-dim); font: 500 13px/1 'DM Mono'; letter-spacing: .15em; text-transform: uppercase;
}
.counter-cap b { color: var(--fg-mid); font-weight: 600; }

.hero-meter {
  margin: 24px auto 0; max-width: 720px;
  display: flex; flex-direction: column; gap: 10px;
}
.hero-meter-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 500 12px 'DM Sans'; color: var(--fg-mid); letter-spacing: .06em; text-transform: uppercase;
}
.hero-meter-row b { color: var(--fg); font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: 'DM Mono'; letter-spacing: .02em; }
.hero-meter-track {
  position: relative; height: 8px; border-radius: 100px; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.04);
}
.hero-meter-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--fire), var(--fire-mid), var(--warm));
  box-shadow: 0 0 24px rgba(255,107,0,.6), 0 0 60px rgba(255,107,0,.3);
  border-radius: 100px;
  transition: width 1.6s var(--ease);
}
.hero-meter-fill::after {
  content: ''; position: absolute; right: -2px; top: -4px; bottom: -4px; width: 4px;
  background: var(--warm); border-radius: 2px; box-shadow: 0 0 16px var(--fire-mid), 0 0 32px var(--fire);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: .7; transform: scaleY(1.4); }
}

.cta-row {
  margin: clamp(28px, 4vh, 44px) auto 0;
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}
.btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 0.95rem 2rem; border-radius: 100px;
  font: 600 15px 'DM Sans'; letter-spacing: .01em;
  transition: all .4s var(--ease);
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--fire), var(--fire-hot));
  color: #fff;
  box-shadow: 0 2px 16px rgba(255,107,0,.35), 0 0 40px rgba(255,61,0,.15);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  background: linear-gradient(135deg, var(--fire-mid), var(--fire));
  box-shadow: 0 6px 24px rgba(255,107,0,.45), 0 16px 56px rgba(255,107,0,.25);
}
.btn-secondary {
  background: transparent; color: var(--fire);
  border: 1.5px solid var(--fire);
}
.btn-secondary:hover { background: rgba(255,107,0,.08); color: var(--warm); border-color: var(--warm);
  transform: translateY(-2px); }

.hero-arrow {
  margin-top: clamp(40px, 8vh, 80px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--fg-dim); font: 500 11px 'DM Sans'; letter-spacing: .2em; text-transform: uppercase;
  animation: floatY 3s ease-in-out infinite;
}
.hero-arrow::after {
  content: ''; width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--fg-dim), transparent);
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ==========================================================================
   Section general
   ========================================================================== */
.section { max-width: var(--container); margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) var(--pad); position: relative; }

.section-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px;
  align-items: flex-start; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -.015em; }
.section-head p { color: var(--fg-mid); max-width: 580px; margin: 0; font-size: 15px; }

.divider {
  height: 1px; max-width: var(--container); margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(255,107,0,.25), transparent);
}

/* ==========================================================================
   Milestone progress ribbon (sits above the summary cards)
   ========================================================================== */

.mc-ribbon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  margin: 0 0 18px;
  padding: 22px clamp(20px, 3vw, 28px);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(16,185,129,.10) 0%, rgba(4,120,87,.04) 60%, rgba(5,5,7,.5) 100%);
  border: 1px solid rgba(16,185,129,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 28px rgba(4,120,87,.08);
  overflow: hidden;
  isolation: isolate;
}
.mc-ribbon::before {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 320px; height: 320px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16,185,129,.20), transparent 70%);
  filter: blur(40px); opacity: .8;
}

.mc-left { display: flex; flex-direction: column; gap: 8px; }
.mc-left .eyebrow {
  display: flex; align-items: center; gap: 8px; color: var(--tier-35);
}
.mc-left .eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tier-35);
  box-shadow: 0 0 10px rgba(16,185,129,.7), 0 0 0 3px rgba(16,185,129,.12);
  animation: mcPulse 2.6s ease-in-out infinite;
}
@keyframes mcPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(16,185,129,.5), 0 0 0 3px rgba(16,185,129,.08); }
  50%      { box-shadow: 0 0 16px rgba(16,185,129,.9), 0 0 0 5px rgba(16,185,129,.16); }
}
.mc-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; letter-spacing: -.03em; line-height: .95;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.mc-count .done {
  font-size: clamp(48px, 6.8vw, 86px);
  background: linear-gradient(135deg, #34D399, var(--tier-35) 35%, #047857);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(16,185,129,.25));
}
.mc-count .sep {
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--fg-dim); margin: 0 4px; font-weight: 600;
}
.mc-count .total {
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--fg-mid); font-weight: 700;
}
.mc-sub {
  font: 500 12.5px 'DM Mono', monospace;
  color: var(--fg-mid); letter-spacing: .04em;
}
.mc-sub b { color: var(--fg); font-weight: 600; }

.mc-right { display: flex; flex-direction: column; gap: 12px; }
.mc-bar {
  position: relative; height: 10px; border-radius: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  overflow: hidden;
}
.mc-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, #047857, var(--tier-35), #34D399);
  box-shadow:
    0 0 16px rgba(16,185,129,.55),
    0 0 36px rgba(16,185,129,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: width 1.4s var(--ease);
}
.mc-bar > span::after {
  content: ""; position: absolute; right: -2px; top: -3px; bottom: -3px; width: 4px;
  background: #ECFDF5; border-radius: 2px;
  box-shadow: 0 0 12px rgba(52,211,153,.9), 0 0 24px rgba(16,185,129,.55);
}
.mc-ticks {
  display: flex; justify-content: space-between;
  font: 500 10.5px 'DM Mono', monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-dim);
}
.mc-ticks b { color: var(--tier-35); font-weight: 600; }
.mc-next {
  font: 500 12px 'DM Sans'; color: var(--fg-mid);
}
.mc-next b { color: var(--fg); font-weight: 600; font-family: 'Plus Jakarta Sans'; }

@media (max-width: 820px) {
  .mc-ribbon { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
}

/* ==========================================================================
   Summary cards
   ========================================================================== */

.summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 900px) { .summary { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .summary { grid-template-columns: 1fr; } }

.sumcard {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 22px 24px; border-radius: 14px;
  background: rgba(5,5,7,.6);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  transition: all .35s var(--ease);
}
.sumcard:hover { background: rgba(5,5,7,.78); transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3); border-color: rgba(255,107,0,.25); }
.sumcard .eyebrow { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sumcard .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block; }
.sumcard h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 10px 0 6px; }
.sumcard .big {
  font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(28px, 3.4vw, 36px);
  margin: 6px 0 0; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--fire), var(--warm));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sumcard p { font-size: 13px; color: var(--fg-mid); margin: 10px 0 0; }
.sumcard .meter {
  margin: 16px 0 0; height: 6px; border-radius: 100px; background: rgba(255,255,255,.04);
  overflow: hidden; position: relative;
}
.sumcard .meter > span {
  position: absolute; left:0;top:0;bottom:0; border-radius: 100px;
  background: linear-gradient(90deg, var(--fire), var(--fire-mid));
  box-shadow: 0 0 12px rgba(255,107,0,.5);
}

/* ==========================================================================
   Verified gallery
   ========================================================================== */

.verified {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 1080px) { .verified { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .verified { grid-template-columns: 1fr; } }

.vcard {
  position: relative; padding: 18px; border-radius: 14px;
  background: rgba(5,5,7,.55);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  transition: all .35s var(--ease);
}
.vcard:hover { transform: translateY(-2px); background: rgba(5,5,7,.78);
  box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.vcard.tier-100 { background: linear-gradient(180deg, rgba(238,234,227,.04), rgba(5,5,7,.55)); }

.avatar {
  width: 52px; height: 52px; border-radius: 13px;
  display: grid; place-items: center;
  font: 800 18px 'Plus Jakarta Sans'; letter-spacing: -.01em;
  background: var(--surface); position: relative;
}
.avatar::after {
  content: ''; position: absolute; inset: -2px; border-radius: 15px;
  border: 1.5px solid currentColor; opacity: .35;
}
.vcard.tier-100 .avatar { box-shadow: 0 0 0 1px rgba(238,234,227,.18), 0 0 24px rgba(238,234,227,.12); }
.vcard.tier-75 .avatar  { box-shadow: 0 0 0 1px #5F3A9C, 0 0 18px rgba(112,68,184,.4); }
.vcard.tier-50 .avatar  { box-shadow: 0 0 0 1px #A13318, 0 0 18px rgba(212,96,46,.4); }
.vcard.tier-35 .avatar  { box-shadow: 0 0 0 1px #047857, 0 0 18px rgba(16,185,129,.3); }
.vcard.tier-25 .avatar  { box-shadow: none; }
.vcard.tier-10 .avatar  { box-shadow: none; }

.vmeta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vmeta .name-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.vmeta .name { font: 700 15px 'Plus Jakarta Sans'; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.vmeta .sub { font: 400 12px 'DM Sans'; color: var(--fg-mid);
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vmeta .sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-dim); }
.vmeta .bot-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vmeta .steps { font: 600 12px 'DM Mono'; color: var(--fg); letter-spacing: .02em; }

.tier-pill {
  font: 800 11px 'Plus Jakarta Sans'; letter-spacing: -.005em;
  padding: 6px 10px; border-radius: 11px; text-align: center; white-space: nowrap;
}
.flag {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px 'DM Sans'; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 100px;
  background: rgba(255,107,0,.12); color: var(--fire-mid);
  border: 1px solid rgba(255,107,0,.18);
  white-space: nowrap;
}
.flag.streak { background: rgba(112,68,184,.12); color: #B393E8; border-color: rgba(112,68,184,.25); }

.verified-foot {
  margin-top: 24px; display: flex; gap: 10px; align-items: center;
  color: var(--fg-mid); font-size: 14px;
}
.verified-foot a { color: var(--fire); text-decoration: none; }
.verified-foot a:hover { color: var(--warm); }

/* ==========================================================================
   Cosmic Ribbon (the main attraction)
   ========================================================================== */

.journey {
  position: relative; isolation: isolate;
  padding: clamp(40px, 8vh, 80px) 0 0;
  overflow: hidden;
}
.starfield {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--bg);
}
.starfield .layer {
  position: absolute; inset: 0;
  background-repeat: repeat;
}
.starfield .l1 {
  background-image:
    radial-gradient(1.2px 1.2px at 13% 18%, rgba(255,255,255,.85), transparent 50%),
    radial-gradient(1px 1px at 38% 42%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.4px 1.4px at 70% 30%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1px 1px at 86% 73%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1.5px 1.5px at 22% 78%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 53% 85%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(1.2px 1.2px at 90% 10%, rgba(255,255,255,.7), transparent 50%);
  background-size: 600px 600px;
  animation: drift 80s linear infinite;
}
.starfield .l2 {
  background-image:
    radial-gradient(.8px .8px at 8% 50%, rgba(255,200,140,.5), transparent 50%),
    radial-gradient(1px 1px at 33% 10%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(.7px .7px at 60% 60%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(.9px .9px at 80% 25%, rgba(255,220,180,.55), transparent 50%),
    radial-gradient(1px 1px at 95% 90%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(.8px .8px at 18% 95%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(.7px .7px at 45% 35%, rgba(255,255,255,.3), transparent 50%);
  background-size: 400px 400px;
  animation: drift 140s linear infinite reverse;
  opacity: .8;
}
.starfield .l3 {
  background-image:
    radial-gradient(.5px .5px at 28% 22%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(.5px .5px at 72% 88%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(.5px .5px at 50% 50%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(.5px .5px at 12% 67%, rgba(255,255,255,.3), transparent 50%);
  background-size: 280px 280px;
  animation: drift 220s linear infinite;
  opacity: .7;
}
@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 600px 1200px; }
}

/* Shooting stars — three of them at different intervals */
.shooting {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.shooting span {
  position: absolute; width: 2px; height: 80px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,107,0,.6), transparent);
  border-radius: 2px; filter: drop-shadow(0 0 4px rgba(255,255,255,.8));
  opacity: 0;
}
.shooting span:nth-child(1) { top: 8%;  left: 18%; transform: rotate(45deg); animation: shoot 14s ease-in 2s infinite; }
.shooting span:nth-child(2) { top: 32%; left: 72%; transform: rotate(45deg); animation: shoot 18s ease-in 6s infinite; }
.shooting span:nth-child(3) { top: 60%; left: 38%; transform: rotate(45deg); animation: shoot 22s ease-in 10s infinite; }
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(45deg) translate(-200px, -200px); }
  2%   { opacity: 1; }
  10%  { opacity: 1; }
  18%  { opacity: 0; transform: rotate(45deg) translate(420px, 420px); }
  100% { opacity: 0; transform: rotate(45deg) translate(420px, 420px); }
}

/* Phase atmosphere overlays (subtle warm/cool washes by phase) */
.phase-atmo {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(100%, 1400px); pointer-events: none; z-index: -1;
  filter: blur(80px); opacity: .18;
}

/* The ribbon */

.phase {
  position: relative;
  padding: 56px var(--pad) 80px;
  max-width: 1180px; margin: 0 auto;
}
.phase-header {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  margin-bottom: 28px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(5,5,7,.5); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.05);
}
.phase-header .glyph {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  font: 700 18px 'Plus Jakarta Sans';
  background: rgba(255,255,255,.03);
  color: var(--phase-color, var(--fire-mid));
  box-shadow: 0 0 24px var(--phase-glow, rgba(255,107,0,.25)) inset,
              0 0 0 1px rgba(255,255,255,.04);
}
.phase-header .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phase-header .tag { font: 600 10px 'DM Sans'; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg-dim); }
.phase-header .name {
  font: 800 22px 'Plus Jakarta Sans'; letter-spacing: -.01em; color: var(--fg);
}
.phase-header .vibe { font: 400 13px 'DM Sans'; color: var(--fg-mid);
  grid-column: 1 / -1; margin-top: 6px; }
.phase-header .range { font: 500 12px 'DM Mono'; color: var(--fg-mid); letter-spacing: .04em;
  text-align: right; }

@media (max-width: 600px) {
  .phase-header { grid-template-columns: auto 1fr; }
  .phase-header .range { grid-column: 1 / -1; text-align: left; padding-left: 60px; }
  .phase-header .name { font-size: 18px; }
}

/* The actual ribbon line */
.ribbon {
  position: relative;
  padding: 18px 0 18px;
}
.ribbon-spine {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(to bottom,
    var(--phase-color-prev, rgba(255,255,255,.15)) 0%,
    var(--phase-color, var(--fire)) 50%,
    var(--phase-color-next, rgba(255,255,255,.15)) 100%);
  opacity: .9; border-radius: 2px;
  pointer-events: none;
}
.ribbon-glow {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 28px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--phase-glow, rgba(255,107,0,.35)) 50%,
    transparent 100%);
  filter: blur(10px); opacity: .9;
  pointer-events: none;
}

@media (max-width: 720px) {
  .ribbon-spine, .ribbon-glow { left: 28px; }
}

.milestone {
  position: relative;
  display: grid; grid-template-columns: 1fr 96px 1fr; align-items: center;
  min-height: 78px;
  margin: 0;
  cursor: pointer;
  transition: opacity .4s var(--ease);
}
.milestone.future { opacity: .55; }
.milestone.future:hover { opacity: .9; }

@media (max-width: 720px) {
  .milestone { grid-template-columns: 56px 1fr; }
  .milestone .node-col { grid-column: 1; }
  .milestone .card-col { grid-column: 2; }
  .milestone .other-col { display: none; }
}

.node-col { display: grid; place-items: center; position: relative; }
.node {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--phase-color, var(--fire));
  box-shadow: 0 0 0 4px rgba(5,5,7,1),
              0 0 0 5px var(--phase-color, var(--fire)),
              0 0 16px var(--phase-glow, rgba(255,107,0,.5));
  position: relative; z-index: 2;
  transition: transform .35s var(--ease);
}
.milestone.future .node {
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 4px rgba(5,5,7,1), 0 0 0 5px rgba(255,255,255,.18);
}
.milestone:hover .node { transform: scale(1.3); }
.milestone.marker .node {
  width: 18px; height: 18px;
  box-shadow: 0 0 0 4px rgba(5,5,7,1),
              0 0 0 6px var(--phase-color, var(--fire)),
              0 0 28px var(--phase-glow, rgba(255,107,0,.7));
}

.milestone.you .node {
  width: 22px; height: 22px;
  background: var(--warm);
  box-shadow:
    0 0 0 4px rgba(5,5,7,1),
    0 0 0 6px var(--fire),
    0 0 32px var(--fire-mid),
    0 0 56px var(--fire);
  animation: youPulse 2.2s ease-in-out infinite;
}
@keyframes youPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(5,5,7,1), 0 0 0 6px var(--fire),
            0 0 28px var(--fire-mid), 0 0 48px var(--fire); }
  50%      { box-shadow: 0 0 0 4px rgba(5,5,7,1), 0 0 0 7px var(--fire-mid),
            0 0 44px var(--fire-mid), 0 0 88px var(--fire-hot); }
}

/* Milestone card next to node */
.mcard {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(5,5,7,.5);
  border: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition: all .3s var(--ease);
  font-size: 13.5px; line-height: 1.45;
}
.milestone:hover .mcard {
  border-color: rgba(255,107,0,.3);
  background: rgba(5,5,7,.75);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.milestone.left .mcard { text-align: right; margin-right: 6px; }
.milestone.right .mcard { text-align: left; margin-left: 6px; }
@media (max-width: 720px) {
  .milestone.left .mcard, .milestone.right .mcard { text-align: left; margin: 0 0 0 12px; }
}

.mcard .name {
  font: 700 14.5px 'Plus Jakarta Sans'; color: var(--fg); letter-spacing: -.005em;
}
.mcard .meta {
  display: flex; gap: 8px; align-items: baseline;
  font: 500 11.5px 'DM Mono'; color: var(--fg-mid); letter-spacing: .03em;
  margin-top: 3px;
}
.milestone.left .mcard .meta { justify-content: flex-end; }
.milestone.right .mcard .meta { justify-content: flex-start; }
@media (max-width: 720px) {
  .milestone.left .mcard .meta, .milestone.right .mcard .meta { justify-content: flex-start; }
}
.mcard .meta b { color: var(--fg); font-weight: 700; }

.milestone.marker .mcard .name {
  background: linear-gradient(135deg, var(--fire), var(--warm));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 18px;
}

.milestone.you .mcard {
  background: linear-gradient(135deg, rgba(255,107,0,.16), rgba(255,61,0,.05));
  border-color: rgba(255,107,0,.5);
  box-shadow: 0 0 30px rgba(255,107,0,.25);
}
.milestone.you .mcard .name { color: var(--warm); }
.milestone.you .mcard .meta b { color: var(--warm); }

/* Duo pair indicator */
.duo-line {
  position: absolute; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--phase-color, var(--fire-mid)), transparent);
  opacity: .35; z-index: 1;
}

/* Expanded detail panel */
.detail {
  position: relative;
  margin: 8px auto -4px; max-width: 720px;
  background: linear-gradient(180deg, rgba(255,107,0,.06), rgba(5,5,7,.85));
  border: 1px solid rgba(255,107,0,.25);
  border-radius: 14px;
  padding: 22px 24px;
  font-size: 14.5px; line-height: 1.55;
  animation: detailIn .35s var(--ease) both;
  grid-column: 1 / -1;
}
@keyframes detailIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.detail .name {
  font: 800 22px 'Plus Jakarta Sans'; letter-spacing: -.015em;
  background: linear-gradient(135deg, var(--fire), var(--warm));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 6px;
}
.detail .meta { font: 500 12px 'DM Mono'; color: var(--fg-mid); letter-spacing: .04em;
  text-transform: uppercase; }
.detail .blurb { color: var(--fg); margin: 14px 0 0; font-size: 15px; }
.detail .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
@media (max-width: 540px) { .detail .stats { grid-template-columns: 1fr 1fr; } }
.detail .stat {
  padding: 12px; border-radius: 10px; background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.04);
}
.detail .stat .lab { font: 600 10px 'DM Sans'; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); }
.detail .stat .val { font: 700 16px 'DM Mono'; color: var(--fg); margin-top: 4px; letter-spacing: .02em; }

.duo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 6px 10px; border-radius: 100px;
  background: rgba(112,68,184,.12); border: 1px solid rgba(112,68,184,.25);
  color: #B393E8; font: 600 11px 'DM Sans'; letter-spacing: .04em;
}

/* Planet glyphs that float beside major milestones */
.milestone.with-planet { min-height: 130px; }
.milestone .planet-art { position: absolute; }

.planet-art {
  width: 76px; height: 76px; pointer-events: none;
  opacity: .8;
  z-index: 1;
}
.planet-art.moon { background: radial-gradient(circle at 35% 35%, #DDD9CF 0%, #8E867A 50%, #1A1612 100%);
  border-radius: 50%; box-shadow: 0 0 32px rgba(238,234,227,.18); }
.planet-art.venus { background: radial-gradient(circle at 35% 35%, #F2C464 0%, #B87A1A 60%, #3A1F08 100%);
  border-radius: 50%; box-shadow: 0 0 42px rgba(242,196,100,.35); }
.planet-art.mars { background: radial-gradient(circle at 30% 30%, #E85D04 0%, #A13318 55%, #2A0E04 100%);
  border-radius: 50%; box-shadow: 0 0 42px rgba(232,93,4,.4); }
.planet-art.sun  {
  width: 280px; height: 280px;
  background: radial-gradient(circle at 50% 50%, #FFF6D6 0%, #FFAB40 25%, #FF6B00 55%, #FF3D00 75%, transparent 90%);
  border-radius: 50%; opacity: .95;
  box-shadow: 0 0 100px rgba(255,107,0,.6), 0 0 240px rgba(255,61,0,.4);
  animation: sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.05); filter: brightness(1.12); }
}

@media (max-width: 720px) {
  .milestone .planet-art { display: none; } /* avoid clutter on mobile */
}

/* Phase color tinting (applied via inline --phase-color CSS var) */

/* ==========================================================================
   Final flourish — The Sun arrival
   ========================================================================== */

.arrival-finale {
  position: relative; padding: clamp(60px, 12vh, 120px) var(--pad);
  text-align: center; max-width: var(--container); margin: 0 auto;
}
.arrival-finale h2 {
  font-size: clamp(36px, 6.4vw, 84px); letter-spacing: -.03em;
  background: linear-gradient(135deg, #ffeb99, #ffab40, #ff6b00, #ff3d00);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 8s ease-in-out infinite;
}
.arrival-finale p { color: var(--fg-mid); max-width: 580px; margin: 16px auto 0;
  font-size: 17px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 40px var(--pad); margin-top: 60px;
  text-align: center; color: var(--fg-dim);
  font-size: 13px;
}
.footer .quote { color: var(--fg-mid); font-style: italic; margin: 0 0 14px; }
.footer .small { font: 400 12px 'DM Sans'; color: var(--fg-dim); letter-spacing: .03em; }

body[data-spectacle="off"] .starfield .layer,
body[data-spectacle="off"] .shooting span,
body[data-spectacle="off"] .planet-art.sun,
body[data-spectacle="off"] .milestone.you .node,
body[data-spectacle="off"] .hero h1,
body[data-spectacle="off"] .arrival-finale h2,
body[data-spectacle="off"] .hero::before,
body[data-spectacle="off"] .hero-arrow {
  animation: none !important;
}
body[data-spectacle="off"] .shooting span { display: none; }
body[data-spectacle="off"] .planet-art.sun { transform: none !important; }

body[data-spectacle="med"] .shooting span { animation-duration: 30s; opacity: 0; }
body[data-spectacle="med"] .planet-art.sun { animation-duration: 9s; }

/* ==========================================================================
   Scene backdrop — crossfades atmospheric layers as we scroll through phases
   Earth dawn → golden hour → sunset → leaving atmosphere → deep void
   → approaching Venus → red dust → fire → corona → solar surface
   ========================================================================== */

.scene-backdrop {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.scene-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
  will-change: opacity;
}
.scene-layer.active { opacity: 1; }

/* P1 — Neighbourhood: Earth at dawn. Warm yellow horizon rising. */
.scene-layer[data-phase="1"] {
  background:
    radial-gradient(ellipse 130% 60% at 50% 108%, rgba(251,191,36,.32), transparent 62%),
    radial-gradient(ellipse 110% 45% at 50% 92%,  rgba(255,171,64,.22), transparent 72%),
    radial-gradient(ellipse 90%  35% at 50% 75%,  rgba(232,93,4,.12),   transparent 78%);
}

/* P2 — Crossing Borders: golden hour broadening. */
.scene-layer[data-phase="2"] {
  background:
    radial-gradient(ellipse 140% 55% at 50% 108%, rgba(242,196,100,.36), transparent 62%),
    radial-gradient(ellipse 110% 45% at 50% 90%,  rgba(212,149,43,.24),  transparent 72%),
    radial-gradient(ellipse 80%  35% at 50% 65%,  rgba(255,107,0,.10),   transparent 80%);
}

/* P3 — Going Global: full sunset across the planet's curve. */
.scene-layer[data-phase="3"] {
  background:
    radial-gradient(ellipse 160% 45% at 50% 105%, rgba(232,168,56,.42), transparent 58%),
    radial-gradient(ellipse 140% 28% at 50% 84%,  rgba(255,107,0,.26),  transparent 72%),
    radial-gradient(ellipse 90%  60% at 50% 25%,  rgba(112,68,184,.08), transparent 78%);
}

/* P4 — Leaving Earth: thin blue atmosphere, deep sky above. */
.scene-layer[data-phase="4"] {
  background:
    radial-gradient(ellipse 160% 50% at 50% 110%, rgba(96,165,250,.34), transparent 65%),
    radial-gradient(ellipse 130% 38% at 50% 90%,  rgba(96,165,250,.20), transparent 75%),
    linear-gradient(180deg, rgba(6,10,28,.72) 0%, rgba(8,12,34,.18) 45%, rgba(5,5,7,0) 70%);
}

/* P5 — Inner Void: deep cold space, distant purple swirls. */
.scene-layer[data-phase="5"] {
  background:
    radial-gradient(ellipse 100% 70% at 18% 28%, rgba(112,68,184,.22), transparent 70%),
    radial-gradient(ellipse 100% 70% at 82% 72%, rgba(95,58,156,.18), transparent 72%),
    radial-gradient(ellipse 90%  50% at 50% 50%, rgba(40,28,80,.18),  transparent 75%),
    linear-gradient(180deg, rgba(10,8,28,.80) 0%, rgba(8,6,22,.45) 100%);
}

/* P6 — Approaching Venus: amber morning star returning. */
.scene-layer[data-phase="6"] {
  background:
    radial-gradient(ellipse 130% 60% at 50% 108%, rgba(212,149,43,.42), transparent 62%),
    radial-gradient(ellipse 70%  50% at 50% 86%,  rgba(242,196,100,.30), transparent 70%),
    radial-gradient(ellipse 80%  60% at 25% 35%,  rgba(184,122,26,.16),  transparent 75%);
}

/* P7 — Crossing to Mars: rust-red haze, ember underglow. */
.scene-layer[data-phase="7"] {
  background:
    radial-gradient(ellipse 140% 55% at 50% 108%, rgba(212,96,46,.44),  transparent 60%),
    radial-gradient(ellipse 110% 50% at 28% 78%, rgba(161,51,24,.30),  transparent 72%),
    radial-gradient(ellipse 90%  60% at 72% 30%, rgba(232,93,4,.16),   transparent 75%);
}

/* P8 — Into the Fire: bright orange heat radiating in. */
.scene-layer[data-phase="8"] {
  background:
    radial-gradient(ellipse 150% 65% at 50% 112%, rgba(255,107,0,.50),  transparent 58%),
    radial-gradient(ellipse 100% 55% at 10% 50%, rgba(255,61,0,.22),   transparent 68%),
    radial-gradient(ellipse 100% 55% at 90% 50%, rgba(255,171,64,.22), transparent 68%),
    radial-gradient(ellipse 120% 40% at 50% 20%, rgba(232,93,4,.14),   transparent 75%);
}

/* P9 — Final Approach: corona dominates, sun visible above the path. */
.scene-layer[data-phase="9"] {
  background:
    radial-gradient(ellipse 150% 60% at 50% 100%, rgba(255,171,64,.62), transparent 60%),
    radial-gradient(ellipse 90%  55% at 50% 80%,  rgba(255,107,0,.42),  transparent 70%),
    radial-gradient(ellipse 140% 60% at 50% 12%,  rgba(255,61,0,.22),   transparent 72%),
    radial-gradient(ellipse 110% 55% at 50% 50%,  rgba(255,107,0,.12),  transparent 78%);
}

/* P10 — Arrival: solar surface, white-gold flood, brightness everywhere. */
.scene-layer[data-phase="10"] {
  background:
    radial-gradient(ellipse 180% 70% at 50% 100%, rgba(255,246,214,.62), transparent 58%),
    radial-gradient(ellipse 120% 55% at 50% 80%,  rgba(255,171,64,.55),  transparent 68%),
    radial-gradient(ellipse 140% 55% at 50% 40%,  rgba(255,107,0,.32),   transparent 72%),
    radial-gradient(ellipse 160% 50% at 50% 5%,   rgba(255,61,0,.24),    transparent 72%);
}

/* Spectacle = off → backdrop fades entirely; med → reduced intensity */
body[data-spectacle="off"] .scene-layer.active { opacity: 0; }
body[data-spectacle="med"] .scene-layer.active { opacity: .55; }

/* ==========================================================================
   User-facing Tweaks FAB
   ========================================================================== */

.user-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483645;
  appearance: none; border: 1px solid rgba(255,107,0,.35);
  padding: 10px 16px 10px 14px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(20,16,12,.92), rgba(8,5,5,.92));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  color: var(--fg);
  font: 600 12.5px 'DM Sans', sans-serif; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  box-shadow:
    0 6px 20px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,107,0,.08),
    0 0 28px rgba(255,107,0,.15);
  transition: all .35s var(--ease);
}
.user-fab:hover {
  transform: translateY(-2px);
  border-color: rgba(255,107,0,.6);
  box-shadow:
    0 10px 28px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,107,0,.16),
    0 0 36px rgba(255,107,0,.3);
  color: var(--warm);
}
.user-fab .gear {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--fire-mid);
  transition: transform .6s var(--ease);
}
.user-fab:hover .gear { transform: rotate(80deg); color: var(--warm); }
.user-fab .lab { letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }

@media (max-width: 540px) {
  .user-fab { right: 12px; bottom: 12px; padding: 9px 14px 9px 12px; }
  .user-fab .lab { font-size: 10.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}