/* Scale of Everything — cinematic experience layer.
   Additive only: this stylesheet sits after style.css and owns only the new
   presentation layer. The existing renderer and controls remain untouched. */

:root {
  --god-cyan: #7ee7ff;
  --god-violet: #b9a4ff;
  --god-line: rgba(190, 215, 255, .18);
  --god-glass: rgba(3, 8, 20, .58);
}

/* Opening typography. These rules used to dress a second full-screen intro of
   their own; that layer is gone and the Cosmic Explorer hero wears them now. */
.ci-kicker {
  margin-bottom: 1rem; color: rgba(190, 215, 255, .62);
  font-size: .62rem; letter-spacing: .42em; text-transform: uppercase;
  animation: ciFadeUp 1.1s .15s both;
}
.ci-title {
  margin: 0; font-size: clamp(3rem, 10vw, 8rem); line-height: .88;
  font-weight: 200; letter-spacing: -.045em;
  text-shadow: 0 0 40px rgba(126,231,255,.08);
  animation: ciTitle 1.5s .25s both;
}
.ci-title em { font-style: normal; color: var(--god-cyan); }
.ci-sub {
  margin: 1.5rem auto 0; max-width: 540px;
  color: rgba(190, 215, 255, .66); font-size: .82rem; line-height: 1.7;
  animation: ciFadeUp 1.1s .55s both;
}
.ci-scale {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: 2rem; color: rgba(232,238,252,.86);
  font-variant-numeric: tabular-nums;
  animation: ciFadeUp 1.1s .75s both;
}
.ci-scale::before, .ci-scale::after { content: ''; width: min(16vw, 120px); height: 1px; background: var(--god-line); }
.ci-from, .ci-to { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.ci-arrow { color: var(--god-cyan); font-size: 1rem; }

/* Atmospheric framing */
#scene::after { content: ''; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(0,0,0,.16), transparent 25%, transparent 72%, rgba(0,0,0,.24));
  mix-blend-mode: multiply; opacity: .9;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* A quiet vertical scale spine behind the existing ladder. */
#scaleSpine {
  position: fixed; z-index: 19; left: 1.29rem; top: 50%; width: 1px;
  height: min(520px, 66vh); transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, var(--god-line) 12%, var(--god-line) 88%, transparent);
  pointer-events: none;
}
#scaleSpineFill {
  position: absolute; left: -1px; top: 0; width: 3px; height: 0%;
  border-radius: 99px; background: linear-gradient(180deg, var(--god-violet), var(--god-cyan));
  box-shadow: 0 0 14px rgba(126,231,255,.55);
  transition: height .7s cubic-bezier(.2,.8,.2,1);
}

/* Current-scale cinematic readout */
#readout { transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .4s; }
#readoutName { text-shadow: 0 0 28px rgba(126,231,255,.16); }
#readoutScale { letter-spacing: .16em; }
#readout.evolving #readoutName { animation: readoutBloom .65s ease both; }
#readout.evolving #readoutScale { animation: readoutScale .65s ease both; }

#scaleOrder {
  margin-top: .35rem; color: rgba(190,215,255,.42);
  font-size: .57rem; letter-spacing: .16em; text-transform: uppercase;
}

/* Evidence legend — reinforces the scientific boundary without becoming a dashboard. */
#evidenceLegend {
  position: fixed; z-index: 20; left: 1.1rem; bottom: 1rem;
  display: flex; flex-direction: column; gap: .35rem;
  pointer-events: none; opacity: .64;
}
.el-item { display: flex; align-items: center; gap: .4rem; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.el-dot { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.el-measured { color: var(--measured); }
.el-modelled { color: var(--modelled); }
.el-hypothesis { color: var(--hypothesis); }
.el-notScience { color: var(--notScience); }

/* Level landmark card */
#landmarkCard {
  position: fixed; z-index: 18; left: 50%; top: 6.1rem; transform: translateX(-50%) translateY(-8px);
  min-width: min(340px, 70vw); max-width: min(560px, 82vw);
  padding: .55rem .8rem; border: 1px solid rgba(120,160,230,.16); border-radius: 999px;
  background: var(--god-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
#landmarkCard.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lc-eyebrow { font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(190,215,255,.5); }
.lc-text { margin-top: .12rem; font-size: .68rem; color: rgba(232,238,252,.78); }

/* Scale transition flash */
#scaleFlash {
  position: fixed; z-index: 90; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(126,231,255,.09), transparent 34%, rgba(1,3,10,.0));
  opacity: 0; pointer-events: none;
}
#scaleFlash.fire { animation: scaleFlash .8s ease both; }
.sf-inner { text-align: center; }
.sf-kicker { font-size: .55rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(190,215,255,.55); }
.sf-power { margin-top: .35rem; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 200; letter-spacing: .08em; }

/* "You are here" marker — subtle, not a permanent obstruction. */
#youAreHere {
  position: fixed; z-index: 17; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 90px; height: 90px; border: 1px solid rgba(126,231,255,.13); border-radius: 50%;
  pointer-events: none; opacity: .35;
}
#youAreHere::before, #youAreHere::after { content: ''; position: absolute; background: rgba(126,231,255,.38); }
#youAreHere::before { width: 1px; height: 16px; left: 50%; top: -8px; }
#youAreHere::after { height: 1px; width: 16px; top: 50%; left: -8px; }
.yah-label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .55rem; white-space: nowrap; font-size: .48rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(126,231,255,.45); }

@keyframes ciTitle { from { opacity:0; transform: scale(.94); filter: blur(10px); } to { opacity:1; transform:none; filter:none; } }
@keyframes ciFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes ciPulse { 0%,100% { opacity:.35; } 50% { opacity:.9; } }
@keyframes readoutBloom { 0% { opacity:.35; transform:translateY(8px); filter:blur(5px); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes readoutScale { 0% { opacity:0; letter-spacing:.28em; } 100% { opacity:1; letter-spacing:.16em; } }
@keyframes scaleFlash { 0% { opacity:0; } 20% { opacity:1; } 100% { opacity:0; } }

@media (max-width: 760px) {
  #scaleSpine { left: .72rem; height: min(430px, 56vh); }
  #evidenceLegend { display: none; }
  #youAreHere { width: 64px; height: 64px; opacity: .2; }
  #landmarkCard { top: 4.7rem; }
  .ci-title { font-size: clamp(3rem, 16vw, 5.4rem); }
  .ci-sub { font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  #readout, #landmarkCard { transition-duration: .01ms; }
  .ci-kicker, .ci-title, .ci-sub, .ci-scale, #readout.evolving #readoutName, #readout.evolving #readoutScale { animation: none; }
}