/* Alliance Optimal: Grand Tour concept page. Self-contained; does not load app.css. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
}

:root {
  --space: #030407;
  --ink: #ece4d8;
  --muted: #b6ab9c;
  --amber: #d98a3d;
  --amber-light: #e0a85c;
  --line: rgba(236, 228, 216, 0.16);
  --panel: rgba(6, 6, 9, 0.72);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--space);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: rgba(217, 138, 61, 0.35); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber-light);
  outline-offset: 3px;
}

/* ---------- canvas + static fallback sky ---------- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.static-sky {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 800px at 80% 110%, rgba(217, 138, 61, 0.22), transparent 60%),
    radial-gradient(900px 600px at 15% -10%, rgba(90, 110, 160, 0.18), transparent 60%),
    var(--space);
}

body.static #scene { display: none; }
body.static .static-sky { display: block; }

/* ---------- top nav ---------- */

.cnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: linear-gradient(to bottom, rgba(3, 4, 7, 0.75), transparent);
}

.cnav__logo img { display: block; height: 26px; width: auto; }

.cnav__right { display: flex; align-items: center; gap: 16px; }

.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 12px;
  background: rgba(3, 4, 7, 0.5);
  white-space: nowrap;
}

.cnav__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
  white-space: nowrap;
}
.cnav__link:hover { color: var(--amber-light); }

.cnav__link--quiet {
  border-bottom-color: transparent;
  color: var(--muted);
}
.cnav__link--quiet:hover { color: var(--amber-light); }

.credit__link { color: inherit; }
.credit__link:hover { color: var(--amber-light); }

/* ---------- telemetry HUD (signature) ---------- */

.hud {
  position: fixed;
  left: 28px;
  bottom: 24px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
  pointer-events: none;
}

.hud__label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.hud__dist {
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--amber-light);
  font-variant-numeric: tabular-nums;
}

.hud__wp {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink);
}

/* ---------- waypoint route (right rail) ---------- */

.route {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.route::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 5px;
  width: 1px;
  background: var(--line);
}

.route__dot {
  position: relative;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: var(--space);
  cursor: pointer;
  align-self: flex-end;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.route__dot span {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.route__dot:hover span, .route__dot.is-active span { opacity: 1; }

.route__dot.is-active {
  background: var(--amber);
  border-color: var(--amber-light);
  box-shadow: 0 0 12px rgba(224, 168, 92, 0.7);
}
.route__dot.is-active span { color: var(--amber-light); }

/* ---------- stops ---------- */

.stop {
  position: fixed;
  z-index: 20;
  max-width: 470px;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  pointer-events: none;
}

.stop.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.stop--hero {
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 26px));
  max-width: 640px;
  text-align: center;
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.stop--hero.is-active { transform: translate(-50%, -50%); }

.stop--left  { left: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(calc(-50% + 26px)); }
.stop--right { right: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(calc(-50% + 26px)); }
.stop--left.is-active, .stop--right.is-active { transform: translateY(-50%); }

.stop--final {
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 26px));
  max-width: 560px;
  text-align: center;
}
.stop--final.is-active { transform: translate(-50%, -50%); }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--amber-light);
  margin-bottom: 18px;
}

.stop h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  text-shadow: 0 2px 30px rgba(3, 4, 7, 0.8);
}

.stop h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.stop h1 em, .stop h2 em {
  font-style: italic;
  color: var(--amber-light);
}

.lede {
  font-size: 17px;
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 26px;
}

.body {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 20px;
}

.cue {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--ink);
}

.cue__arrow {
  display: inline-block;
  animation: bob 1.8s ease-in-out infinite;
  color: var(--amber);
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 11px;
}

/* ---------- CTA ---------- */

.cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: 100px;
  padding: 14px 26px;
  transition: transform 0.25s, box-shadow 0.25s;
}

.btn--solar {
  color: #201409;
  background: linear-gradient(100deg, var(--amber), var(--amber-light));
  box-shadow: 0 0 28px rgba(217, 138, 61, 0.45);
}
.btn--solar:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(224, 168, 92, 0.65); }

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber-light); }

.credit {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(182, 171, 156, 0.6);
}

/* ---------- scroll driver ---------- */

.scroll-space { height: 880vh; }

/* ---------- static mode (reduced motion / no WebGL) ---------- */

body.static .scroll-space { display: none; }
body.static .route, body.static .hud { display: none; }

body.static #panels {
  padding: 130px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

body.static .stop {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  background: rgba(8, 8, 10, 0.6);
}

body.static .stop--hero { border: none; background: transparent; }

/* debug pin (?wp=N): freeze-frame screenshots without transitions */
body.pin .stop, body.pin #scene { transition: none !important; }

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  .chip, .cnav__link--quiet { display: none; }

  .hud { left: 18px; bottom: 18px; }
  .hud__dist { font-size: 15px; }

  .route { right: 14px; gap: 18px; }
  .route__dot span { display: none; }

  .stop, .stop--left, .stop--right {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 84px;
    max-width: none;
    padding: 22px 20px;
    transform: translateY(26px);
  }
  .stop.is-active, .stop--left.is-active, .stop--right.is-active { transform: translateY(0); }

  .stop--hero, .stop--final {
    top: 50%;
    bottom: auto;
    transform: translate(0, calc(-50% + 26px));
    text-align: left;
  }
  .stop--hero.is-active, .stop--final.is-active { transform: translate(0, -50%); }

  .stop h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .stop h2 { font-size: clamp(1.5rem, 6.8vw, 2rem); }
  .lede { margin: 0 0 22px; font-size: 15px; }
  .body { font-size: 14px; }
  .cta { justify-content: flex-start; }
}