/* =============================================================================
   WORLD MODE
   =============================================================================
   world.js adds html.is-world once the 3D scene is running. Without it none of
   this applies and the pages look exactly as they did before. This file holds
   the 3D chrome (canvas, HUD, hero); world-panels.css styles the
   content tiles that float over the valley. */

.world-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition:
    opacity 500ms ease,
    filter 520ms ease;
}

.world-canvas.is-ready {
  opacity: 1;
}

.world-hud {
  display: none;
}

/* Shown for the moment before the 3D canvas fades in: a dusk sky close to
   the scene's own colours, so the hand-off is a soft reveal, not a flash. */
html.is-world {
  background: linear-gradient(
      180deg,
      #1a2350 0%,
      #4a3358 38%,
      #b3684f 58%,
      #1d2a1f 64%,
      #0b120e 100%
    )
    fixed;
}

/* A light badge with the navy logo: the dark badge left the logo's navy
   mountain nearly invisible. `content` swaps the image from first paint,
   whatever src the theme script set. */
html.is-world .brand__logo-wrap {
  background: rgb(248 244 236 / 0.96);
  border-color: rgb(255 255 255 / 0.6);
  box-shadow:
    0 6px 22px rgb(0 0 0 / 0.3),
    0 0 0 1px rgb(17 89 173 / 0.08);
}

html.is-world .brand__logo {
  content: url("/LOGO_Light.png");
}

html.is-world body {
  background: transparent;
}

/* Retire the decorative backgrounds the 3D scene replaces. */
html.is-world body::before,
html.is-world body::after,
html.is-world .noise,
html.is-world .cursor-aura,
html.is-world .section::before,
html.is-world .section::after,
html.is-world .section-heading::after,
html.is-world .hero__headline-row::before,
html.is-world .hero__headline-row::after,
html.is-world .theme-toggle {
  display: none;
}

/* Section, card and form styling for world mode lives in world-panels.css. */

/* ---- Hero: open sky, text straight over the scene ---- */
html.is-world .hero {
  min-height: calc(100svh - 7rem);
  display: grid;
  align-content: end;
  padding-bottom: clamp(3rem, 12vh, 7rem);
}

html.is-world .hero .hero__headline-row {
  background: rgb(5 7 12 / 0.28);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: none;
}

html.is-world .hero h1,
html.is-world .hero .hero__lede {
  color: #f6f1e6;
  text-shadow: 0 4px 34px rgb(0 0 0 / 0.5);
}

html.is-world .hero .button--secondary {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.5);
  color: #f6f1e6;
}

html.is-world .marquee {
  opacity: 0.9;
}

/* ---- HUD: fly-free / tilt toggles and the hint line ---- */
html.is-world .world-hud {
  position: fixed;
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  left: 0.9rem;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 7rem);
}

/* The Controls button, and the menu of toggles it opens (above it). */
.world-hud__menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: rgb(7 11 20 / 0.74);
  backdrop-filter: blur(10px);
  color: #f3efe6;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.world-hud__menu svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.world-hud__menu[aria-expanded="true"],
.world-hud__menu:hover {
  border-color: #ffad67;
}

/* Lit when any toggle inside is on, so a hidden setting is never a surprise. */
.world-hud:has(.world-hud__button[aria-pressed="true"])
  .world-hud__menu::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  right: 0.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ffad67;
  box-shadow: 0 0 8px #ffad67;
}

.world-hud__panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 11rem;
  padding: 0.5rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 1.1rem;
  background: rgb(7 11 20 / 0.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
}

.world-hud__panel[hidden] {
  display: none;
}

.world-hud__panel .world-hud__button {
  justify-content: flex-start;
  width: 100%;
}

.world-hud__button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: rgb(7 11 20 / 0.74);
  backdrop-filter: blur(10px);
  color: #f3efe6;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.world-hud__button[hidden] {
  display: none;
}

.world-hud__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.4);
}

.world-hud__button[aria-pressed="true"] {
  border-color: #ffad67;
}

.world-hud__button[aria-pressed="true"] .world-hud__dot {
  background: #ffad67;
  box-shadow: 0 0 10px #ffad67;
}

.world-hud__hint {
  margin: 0;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgb(7 11 20 / 0.72);
  backdrop-filter: blur(10px);
  color: #f3efe6;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 400ms ease;
}

.world-hud__hint.is-on {
  opacity: 1;
}

/* ---- Back / Next: step from card to card (world-stations.js) ---- */
.world-steps {
  display: none;
}

html.is-stations .world-steps {
  position: fixed;
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  left: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: rgb(7 11 20 / 0.74);
  backdrop-filter: blur(10px);
  translate: -50% 0;
  transition: opacity 400ms ease;
}

.world-steps__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #f3efe6;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.world-steps__button svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.world-steps__button:hover:not(:disabled),
.world-steps__button:focus-visible {
  background: #ffad67;
  color: #1a0f05;
}

.world-steps__button:disabled {
  opacity: 0.35;
  cursor: default;
}

.world-steps__count {
  min-width: 4.4em;
  color: rgb(243 239 230 / 0.7);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-align: center;
}

html.is-peek .world-steps,
html.is-warping .world-steps,
html.is-arriving .world-steps {
  opacity: 0;
  pointer-events: none;
}

/* ---- Fly free: hide the page so the world can be explored ---- */
html.is-world main,
html.is-world .site-footer {
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

html.is-peek main,
html.is-peek .site-footer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(1.5rem);
}

/* ---- Warp: fly into the next page ---- */
html.is-warping main,
html.is-warping .site-footer {
  opacity: 0;
  transform: scale(1.12);
}

/* The fog bank between pages (world.js sets its colour and opacity each
   frame): over the scene and the panels, under the header and HUD, so the
   site's chrome stays put while the valley flies on. */
.world-veil {
  display: none;
}

html.is-world .world-veil {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: block;
  opacity: 0;
  pointer-events: none;
  background-color: var(--world-handoff, transparent);
}

/* Arriving mid-flight: open in the fog the last page flew into. The inline
   <head> script sets --world-handoff and .is-arriving before first paint;
   world.js removes the class as the camera comes out of the fog. */
html.is-world.is-arriving {
  background: var(--world-handoff, #1a2350);
}

html.is-world.is-arriving main,
html.is-world.is-arriving .site-footer {
  opacity: 0;
}

html.is-stations.is-arriving main {
  opacity: 1;
}

html.is-stations.is-arriving .world-stage {
  opacity: 0;
}

@media (max-width: 760px) {
  html.is-world .world-hud {
    max-width: calc(100vw - 6.5rem);
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    left: 0.6rem;
    gap: 0.35rem;
  }

  .world-hud__button,
  .world-hud__menu {
    padding: 0.5rem 0.8rem;
    font-size: 0.64rem;
  }

  .world-hud__hint {
    position: fixed;
    bottom: 7rem;
    left: 0.6rem;
    font-size: 0.62rem;
  }

  /* Phones: the toggles move to the strip under the header (kept clear of
     content), and the step bar shrinks to arrows beside "Back to start". */
  html.is-stations .world-hud {
    top: 4.6rem;
    bottom: auto;
  }

  html.is-stations .world-hud__panel {
    top: calc(100% + 0.5rem);
    bottom: auto;
  }

  /* Beside the Controls button, clear of the menu that opens below it. */
  html.is-stations .world-hud__hint {
    top: 4.6rem;
    right: 0.6rem;
    bottom: auto;
    left: 9rem;
    border-radius: 1rem;
  }

  html.is-stations .world-steps {
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    left: 0.6rem;
    translate: none;
  }

  .world-steps__button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    padding: 0.4rem 0.6rem;
  }

  .world-steps__button span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-canvas,
  html.is-world main,
  html.is-world .site-footer {
    transition: none;
  }
}