/* ============================================================
   Hero cinematic — lifted from website-cd/css/style.css and scoped
   to .sky-cd so it can sit on top of the broadsheet page without
   touching its tokens (broadsheet also defines --font-body).
   Every rule carries the .sky-cd prefix on purpose: the extra
   specificity beats any accidental .hero / .nav rule elsewhere.
   Accent is sodium-vapor amber (~589 nm) — the color of light
   pollution, the antagonist of the research.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/fraunces-v38-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-v38-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/newsreader-v26-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/newsreader-v26-latin-italic.woff2') format('woff2');
}
/* metric-adjusted fallbacks to minimize layout shift on slow font load */
@font-face {
  font-family: 'Fraunces-fb';
  src: local('Georgia');
  size-adjust: 105%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader-fb';
  src: local('Georgia');
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- tokens, scoped ---------- */
.sky-cd {
  --bg: #070c16;            /* page ground — deep blue-black          */
  --bg-deep: #04070f;       /* zenith                                  */
  --star: #f2eddf;          /* warm star-white text                    */
  --dim: #94a0b6;           /* muted blue-gray secondary               */
  --sodium: #e6a44e;        /* 589 nm sodium-vapor amber accent        */
  --paper: #f4f0e6;
  --paper-ink: #191d24;
  --hairline: rgba(242, 237, 223, 0.14);
  --hairline-strong: rgba(242, 237, 223, 0.28);

  --font-display: 'Fraunces', 'Fraunces-fb', Georgia, serif;
  --font-body: 'Newsreader', 'Newsreader-fb', Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --w-content: 1060px;
  --pad-x: clamp(20px, 5vw, 48px);

  color: var(--star);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sky-cd *, .sky-cd *::before, .sky-cd *::after { box-sizing: border-box; }
.sky-cd ::selection { background: rgba(230, 164, 78, 0.35); }
.sky-cd a { color: var(--sodium); text-decoration: none; }
.sky-cd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sky-cd a:focus-visible, .sky-cd button:focus-visible, .sky-cd input:focus-visible {
  outline: 2px solid var(--sodium);
  outline-offset: 3px;
  border-radius: 2px;
}
.sky-cd img { max-width: 100%; height: auto; display: block; }

/* ---------- nav (slides in once the hero has scrolled away) ---------- */
.sky-cd .cd-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--pad-x);
  background: rgba(7, 12, 22, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(-110%);
  transition: transform 0.35s ease;
}
.sky-cd .cd-nav.visible { transform: translateY(0); }
.sky-cd .cd-nav-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--star);
  white-space: nowrap;
}
.sky-cd .cd-nav-name:hover { text-decoration: none; color: var(--sodium); }
.sky-cd .cd-nav-links {
  display: flex;
  gap: clamp(12px, 2.5vw, 28px);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  overflow-x: auto;
  scrollbar-width: none;
}
.sky-cd .cd-nav-links::-webkit-scrollbar { display: none; }
.sky-cd .cd-nav-links a { color: var(--dim); white-space: nowrap; }
.sky-cd .cd-nav-links a:hover { color: var(--star); text-decoration: none; }

/* ---------- hero ---------- */
.sky-cd .hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* centred, not bottom-anchored: on tall windows a bottom-anchored title left
     two-thirds of the stage as empty Bortle-8 sky above the name */
  justify-content: center;
  overflow: hidden;
  background: var(--bg-deep);
}
.sky-cd .hero canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* faint noise to kill gradient banding on OLED. (website-cd also
   dissolved the sky into its dark page ground with a ::after gradient;
   here the page below is paper-white, so the rooftop silhouette is
   the horizon and the edge stays crisp.) */
.sky-cd .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlMDAApIS0kAAAA2SURBVBjTY2AYUoCVgYGdgYGJgYGZgYGRgYGBiYGBkYGBBUonAwMjVC0jAxNULSMDE1QtwwAAK5gAlQXNPXIAAAAASUVORK5CYII=");
  opacity: 0.025;
  pointer-events: none;
  z-index: 2;
}
.sky-cd .hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 96px var(--pad-x) 0;
}
.sky-cd .hero-bortle-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--w-content);
  margin: clamp(28px, 6vh, 64px) auto 0;
  padding: 0 var(--pad-x) 40px;
}
.sky-cd .hero-title .eyebrow {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.sky-cd .hero h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--star);
  text-shadow: 0 2px 24px rgba(4, 7, 15, 0.8);
}
.sky-cd .hero-line {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: var(--star);
  text-shadow: 0 1px 16px rgba(4, 7, 15, 0.9);
}
.sky-cd .hero-line em { color: var(--sodium); font-style: italic; }
.sky-cd .hero-chip {
  display: inline-block;
  margin: 20px 0 0;
  padding: 8px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(4, 7, 15, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--star);
}
.sky-cd .hero-chip b { color: var(--sodium); font-weight: 500; padding: 0 2px; }

/* ---------- bortle control ---------- */
.sky-cd .bortle {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: rgba(4, 7, 15, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 18px 20px 14px;
  max-width: 620px;
}
.sky-cd .bortle-ends {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
.sky-cd .bortle-ends .end-dark { color: var(--star); }
.sky-cd .bortle input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;           /* generous touch target */
  margin: 0;
  background: transparent;
  cursor: ew-resize;      /* Bortle 1 (pristine) on the left, 9 (inner city) on the right; Gurugram starts at 8 */
}
.sky-cd .bortle input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, #cfd9ee, #6b7a94 45%, #b06a2a 80%, var(--sodium));
  border-radius: 1px;
}
.sky-cd .bortle input[type='range']::-moz-range-track {
  height: 2px;
  background: linear-gradient(to right, #cfd9ee, #6b7a94 45%, #b06a2a 80%, var(--sodium));
  border-radius: 1px;
}
.sky-cd .bortle input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--star);
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 0 14px rgba(242, 237, 223, 0.55);
}
.sky-cd .bortle input[type='range']::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--star);
  border: 2px solid var(--bg-deep);
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 0 14px rgba(242, 237, 223, 0.55);
}
.sky-cd .bortle-readout {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--dim);
  min-height: 1.3em;
}
.sky-cd .bortle-readout strong { color: var(--star); font-weight: 600; }
.sky-cd .bortle-readout .count { color: var(--sodium); }
/* "Bortle at my location" — one button, one status line */
.sky-cd .bortle-geo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 10px 0 0;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--dim);
}
.sky-cd .bortle-geo button {
  appearance: none;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: rgba(4, 7, 15, 0.5);
  color: var(--star);
  font: inherit;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  cursor: pointer;
}
.sky-cd .bortle-geo button:hover { border-color: var(--sodium); color: var(--sodium); }
.sky-cd .bortle-geo button:disabled { opacity: 0.6; cursor: progress; }
.sky-cd .bortle-geo #bortle-geo-status:empty { display: none; }
.sky-cd .bortle-geo #bortle-geo-status { flex: 1 1 260px; }

.sky-cd .bortle-caption {
  margin: 10px 0 0;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--dim);
}

/* skip link */
.sky-cd .skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--paper-ink);
  padding: 8px 14px;
  font-family: var(--font-ui);
}
.sky-cd .skip:focus { left: 12px; top: 12px; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  .sky-cd { font-size: 16px; }
  .sky-cd .cd-nav { padding: 9px 16px; }
  .sky-cd .cd-nav-name { font-size: 0.92rem; }
  .sky-cd .cd-nav-links { font-size: 0.72rem; gap: 14px; }

  .sky-cd .hero-inner { padding: 84px 20px 0; }
  .sky-cd .hero-bortle-wrap { margin-top: 26px; padding: 0 20px 26px; }
  .sky-cd .hero h1 { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  .sky-cd .hero-line { font-size: 1.02rem; }
  .sky-cd .hero-chip { font-size: 0.74rem; margin-top: 14px; }

  /* the cue's lozenge must keep a margin from both edges at 390px */
  html.cinematic .sky-cd .scroll-cue {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    padding: 8px 16px 6px;
    max-width: calc(100vw - 40px);
  }

  .sky-cd .bortle { padding: 14px 16px 12px; }
  .sky-cd .bortle-ends .end-desc { display: none; } /* keep just "Bortle 8" / "Bortle 1" */
  .sky-cd .bortle-caption { font-size: 0.8rem; }
  .sky-cd .bortle-readout { font-size: 0.7rem; }
}

/* short landscape phones: keep the hero from overflowing */
@media (max-height: 600px) and (orientation: landscape) {
  .sky-cd .hero { min-height: auto; }
  .sky-cd .hero-inner { padding: 76px var(--pad-x) 0; }
  .sky-cd .hero-bortle-wrap { margin-top: 18px; padding-bottom: 24px; }
  .sky-cd .hero h1 { font-size: clamp(2.2rem, 6vh, 3rem); }
  .sky-cd .bortle-caption { display: none; }
}

/* ============================================================
   Scroll cinematic — active only when JS adds html.cinematic.
   Default (no-JS, reduced-motion): all new elements stay hidden
   and the hero renders exactly as the static layout above.
   ============================================================ */
.sky-cd .sky-hud, .sky-cd .proof-cards, .sky-cd .scroll-cue, .sky-cd .hero-closing,
.sky-cd .rooftop, .sky-cd .bortle-caption-short { display: none; }

.sky-cd .hero-track {
  --track-len: 400svh;
  --rooftop-h: clamp(90px, 14vh, 150px);
  background: var(--bg-deep);
}

html.cinematic .sky-cd .hero-track { height: var(--track-len); }
html.cinematic .sky-cd .hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
html.cinematic .sky-cd .hero-inner { padding-bottom: calc(var(--rooftop-h) + 28px); }
html.cinematic .sky-cd .hero-title { will-change: opacity, transform; }

/* rooftop silhouette */
html.cinematic .sky-cd .rooftop {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--rooftop-h);
  z-index: 2;
  pointer-events: none;
}
html.cinematic .sky-cd .rooftop svg { display: block; width: 100%; height: 100%; }

/* live sky readout (HUD) */
html.cinematic .sky-cd .sky-hud {
  display: block;
  position: absolute;
  z-index: 4;
  left: var(--pad-x);
  bottom: calc(var(--rooftop-h) + 22px);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--star);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 12px rgba(4, 7, 15, 0.9);
}

/* scroll cue */
html.cinematic .sky-cd .scroll-cue {
  display: block;
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px; /* sits on the rooftop strip, clear of the title block */
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* the cue sits on the rooftop strip, i.e. on the brightest part of a
     Bortle-8 sky — warm white on its own dark lozenge so it reads over the
     sodium glow at the start and over the dark sky once the night comes back */
  color: var(--star);
  text-shadow: 0 1px 3px rgba(4, 7, 15, 0.95), 0 0 14px rgba(4, 7, 15, 0.8);
  padding: 9px 22px 7px;
  border: 1px solid rgba(230, 164, 78, 0.45);
  border-radius: 999px;
  background: rgba(4, 7, 15, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  /* a sodium-amber halo — the page's own 589 nm accent, breathing slowly */
  box-shadow: 0 0 18px rgba(230, 164, 78, 0.30), 0 0 42px rgba(230, 164, 78, 0.16), inset 0 0 14px rgba(230, 164, 78, 0.08);
  animation: cdCueGlow 3.2s ease-in-out infinite;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes cdCueGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(230, 164, 78, 0.24), 0 0 36px rgba(230, 164, 78, 0.12), inset 0 0 12px rgba(230, 164, 78, 0.06);
             border-color: rgba(230, 164, 78, 0.38); }
  50%      { box-shadow: 0 0 26px rgba(230, 164, 78, 0.46), 0 0 60px rgba(230, 164, 78, 0.24), inset 0 0 18px rgba(230, 164, 78, 0.12);
             border-color: rgba(230, 164, 78, 0.68); }
}
@media (prefers-reduced-motion: reduce) {
  html.cinematic .sky-cd .scroll-cue { animation: none; }
}
html.cinematic .sky-cd .scroll-cue::after {
  content: '↓';
  display: block;
  text-align: center;
  margin-top: 4px;
  font-size: 1.15em;
  line-height: 1;
  color: var(--sodium);
  animation: cdCueNudge 2.2s ease-in-out infinite;
}
@keyframes cdCueNudge {
  0%, 62%, 100% { transform: translateY(0); opacity: 0.85; }
  78% { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.cinematic .sky-cd .scroll-cue::after { animation: none; }
}

/* floating proof cards */
html.cinematic .sky-cd .proof-cards { display: block; }
.sky-cd .proof-card {
  position: absolute;
  z-index: 4;
  max-width: min(330px, 38vw);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(230, 164, 78, 0.34);
  border-radius: 8px;
  padding: 16px 20px;
  background: rgba(4, 7, 15, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* the same 589 nm halo the scroll cue wears, held steady: these cards are
     read, and a pulse under a sentence is a distraction */
  box-shadow: 0 0 20px rgba(230, 164, 78, 0.22), 0 0 52px rgba(230, 164, 78, 0.12), inset 0 0 16px rgba(230, 164, 78, 0.06);
  will-change: opacity, transform;
}
.sky-cd .proof-card .big {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--star);
}
.sky-cd .proof-card .small {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--dim);
}
.sky-cd .proof-card.slot-r1 { right: clamp(24px, 7vw, 110px); top: 22%; }
.sky-cd .proof-card.slot-l1 { left: clamp(24px, 7vw, 110px); top: 44%; }
.sky-cd .proof-card.slot-r2 { right: clamp(24px, 7vw, 110px); top: 36%; }
.sky-cd .proof-card.slot-l2 { left: clamp(24px, 7vw, 110px); top: 28%; }
.sky-cd .proof-card.slot-r3 { right: clamp(24px, 7vw, 110px); top: 30%; }
.sky-cd .proof-card.slot-press {
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: min(400px, 82vw);
  top: 24%;
}
.sky-cd .proof-card.slot-press .big { font-size: 1.05rem; line-height: 1.5; }

/* finale: closing line + docked slider */
html.cinematic .sky-cd .hero-closing {
  display: block;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 24%;
  transform: translateX(-50%);
  width: min(90%, 30em);
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.45;
  color: var(--star);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(4, 7, 15, 0.9);
}
html.cinematic .sky-cd .hero-closing em { color: var(--sodium); font-style: italic; }

html.cinematic .sky-cd .hero-bortle-wrap {
  position: static;
  margin: 0;
  padding: 0;
  max-width: none;
}
html.cinematic .sky-cd .bortle {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--rooftop-h) + 18px);
  width: min(620px, calc(100% - 2 * var(--pad-x)));
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
html.cinematic .sky-cd .bortle.docked { pointer-events: auto; }
html.cinematic .sky-cd .bortle-caption { display: none; }
html.cinematic .sky-cd .bortle-caption-short {
  display: block;
  margin: 10px 0 0;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--dim);
}

/* staged entrance — 'backwards' fill is load-bearing: once each
   animation ends, inline styles from the scroll driver take over */
html.cinematic.boot .sky-cd .hero-title .eyebrow   { animation: cdRiseIn 0.7s ease 0.15s backwards; }
html.cinematic.boot .sky-cd .hero-title h1         { animation: cdRiseIn 0.8s ease 0.35s backwards; }
html.cinematic.boot .sky-cd .hero-title .hero-chip { animation: cdRiseIn 0.7s ease 0.58s backwards; }
html.cinematic.boot .sky-cd .hero-title .hero-line { animation: cdRiseIn 0.7s ease 0.78s backwards; }
/* the cue is centred with translateX(-50%), so its entrance must carry that
   translate too — a plain translateY would replace it and shove it right */
/* both, or the entrance would replace the halo and it would only start glowing
   after the first scroll — precisely when the cue no longer matters */
html.cinematic.boot .sky-cd .scroll-cue            { animation: cdCueIn 0.7s ease 1.05s backwards, cdCueGlow 3.2s ease-in-out infinite; }
@keyframes cdRiseIn {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes cdCueIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* cinematic on small screens: shorter track, cards in the lower third */
@media (max-width: 720px) {
  .sky-cd .hero-track { --track-len: 300svh; }
  .sky-cd .proof-card.slot-r1, .sky-cd .proof-card.slot-l1,
  .sky-cd .proof-card.slot-r2, .sky-cd .proof-card.slot-l2, .sky-cd .proof-card.slot-r3,
  .sky-cd .proof-card.slot-press {
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    top: auto;
    bottom: calc(var(--rooftop-h) + 120px);
  }
}

/* the pinned stage must never collapse in short landscape */
@media (max-height: 600px) and (orientation: landscape) {
  html.cinematic .sky-cd .hero { min-height: 0; height: 100svh; }
}