/* ============================================================
   Discombobulate — Global layout + scaffolding styles.
   Chunk 01: shell only. No per-screen visuals yet.
   ============================================================ */

/* ---------- Body / root ---------- */
html, body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  overflow: hidden;             /* scroll drives screen nav, not page scroll */
}

/* ---------- Global nav (top bar) ---------- */
#global-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: var(--z-nav);
  pointer-events: none;          /* children re-enable */
}

#global-nav .wordmark,
#global-nav #audio-toggle {
  pointer-events: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.4;
  transition: opacity var(--transition-fast);
}

#global-nav .wordmark { text-transform: uppercase; }

/* Hide the DISCOMBOBULATE wordmark on every screen except the intro (0). */
body:not([data-screen-idx="0"]) #global-nav .wordmark {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

#global-nav .wordmark:hover,
#global-nav #audio-toggle:hover { opacity: 0.9; }

#audio-toggle {
  font-size: 26px; /* Phosphor icon scales with font-size */
}

#audio-toggle:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 4px;
}

/* ---------- Screen container ---------- */
#screen-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-soft),
              visibility 0s linear var(--transition-soft);
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-soft),
              visibility 0s linear 0s;
}

/* Placeholder label inside empty sections, Chunk 01 only. */
.screen-placeholder {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: 0.35;
}

/* ---------- On-screen nav arrows (per screen) ---------- */
/*
  Full-height hit zone on each edge (96px wide).
  Phosphor <i> icon inside is the only thing that animates —
  the button position never moves so the hover zone stays stable.
  z-index: 5 sits above .narrative-content (z-index: 1).
*/
/* Circular 48px hit-zone around the icon, not a full-height strip — so the
   arrow can't swallow clicks on chips / content at the left or right edges. */
.screen-arrow {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.screen-arrow.prev {
  left: 14px;
  transform: translateY(-50%);
}
.screen-arrow.next {
  right: 14px;
  transform: translateY(-50%);
}

/* Phosphor icon — starts faint and offset toward its edge */
.screen-arrow i {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.18);
  display: block;
  transition:
    color    300ms ease-out,
    transform 300ms ease-out,
    filter   300ms ease-out;
}

.screen-arrow.prev i { transform: translateX(-10px); }
.screen-arrow.next i { transform: translateX(10px); }

/* Hover / focus: subtle ring bg + icon slides to centre, white, soft glow */
.screen-arrow {
  transition: background-color 180ms ease;
}
.screen-arrow:hover,
.screen-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}
.screen-arrow:hover i,
.screen-arrow:focus-visible i {
  color: #ffffff;
  transform: translateX(0);
  filter:
    drop-shadow(0 0 8px  rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.50))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.18));
}

.screen-arrow:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 2px;
}

/* Hide on first / last screen */
.screen-arrow[aria-disabled="true"] {
  opacity: 0;
  pointer-events: none;
}

/* Reduced motion: skip translate, keep glow */
@media (prefers-reduced-motion: reduce) {
  .screen-arrow i { transition: color 150ms ease, filter 150ms ease; }
  .screen-arrow.prev i,
  .screen-arrow.next i { transform: translateX(0); }
}

/* ---------- Dot nav (bottom centre) — slim rectangles ---------- */
#dot-nav {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: var(--z-dots);
  padding: 6px 10px;
  background: rgba(10, 10, 15, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
}

#dot-nav .dot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  opacity: 1;
  transition: background 180ms ease,
              box-shadow 220ms ease,
              width 220ms ease;
}

#dot-nav .dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

#dot-nav .dot.active {
  background: rgba(255, 255, 255, 0.95);
  width: 34px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55),
              0 0 18px rgba(79, 195, 247, 0.28);
}

#dot-nav .dot:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 3px;
}

/* ---------- Modal overlay (stub — populated Chunks 05/06) ---------- */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(12px);
}

#modal-overlay.open { display: block; }

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

/* Body class applied from js/audio.js when user opts into reduced motion. */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* Pause toggle on Districts screen (Chunk 04 uses this). */
body.animations-paused *,
body.animations-paused *::before,
body.animations-paused *::after {
  animation-play-state: paused !important;
}

/* ---------- Focus-visible baseline ---------- */
:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 3px;
}