/* $BELIEVE — graceful degradation layer (Task 16).
   Styles for the paths the full WebGL ride can't take:
    - #station-fade: the stations-mode crossfade (prefers-reduced-motion --
      js/rail.js toggles .is-active around each camera cut).
    - #fallback: the no-WebGL poster page (boot() throw / ?nogl=1 /
      <noscript>). Positioning shell lives in base.css; content here.
    - #signal-lost: the context-lost REALIGN reload card.
   Same HUD-terminal language as gate.css/cards.css/hud.css; colors read
   from the --believe-* custom properties gate.js bridges off CFG.colors,
   with the usual literal hex fallbacks mirroring config.js. NOTE the
   fallback/noscript path can run with gate.js's bridge never executing at
   all, so here the fallbacks aren't just defensive -- they're load-bearing. */

/* ---- stations-mode crossfade ---- */

#station-fade {
  position: fixed;
  inset: 0;
  background: var(--believe-bg, #050603);
  opacity: 0;
  pointer-events: none;
  /* Must match rail.js's STATION_FADE_MS (the JS timeout owns when the
     camera cuts; this transition owns how the dip looks). Opacity only --
     a brightness dip is the one transition reduced-motion users are in
     this mode FOR, in place of camera flight, so the global
     prefers-reduced-motion animation kill-switches deliberately do not
     apply here. */
  transition: opacity 220ms ease;
}

#station-fade.is-active {
  opacity: 1;
}

/* ---- no-WebGL fallback page ---- */

/* base.css centers #fallback with flex; these same-specificity overrides
   (later stylesheet wins) let the page scroll when the poster + manifesto
   outgrow a small viewport -- align-items:center would clip the card's top
   edge unrecoverably in that case, whereas flex-start + the card's own
   margin:auto keeps it centered while it fits and scrollable once it
   doesn't. */
#fallback {
  align-items: flex-start;
  overflow-y: auto;
}

.fallback__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: min(92vw, 560px);
  margin: auto;
  padding: 2rem 1.5rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: color-mix(in srgb, var(--believe-bg, #050603) 92%, var(--believe-green, #b8d62e));
}

/* Same CSS-only barcode texture as cards.css/hud.css -- one visual family. */
.fallback__barcode {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 16px;
  color: var(--believe-grey, #6a6f5e);
  opacity: 0.75;
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 2px,
    transparent 2px 5px,
    currentColor 5px 6px,
    transparent 6px 8px,
    currentColor 8px 12px,
    transparent 12px 15px,
    currentColor 15px 16px,
    transparent 16px 20px
  );
}

/* Scan-shimmer sweep (hud.css/cards.css's micro-life language). Pure CSS,
   so even the no-JS/noscript render keeps a pulse of life. */
.fallback__barcode::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--believe-bright, #d4f24b) 26%, transparent) 50%,
    transparent 70%
  );
  transform: translateX(-101%);
  animation: fbBarcodeScan 9s linear 3s infinite;
}

.fallback__barcode:last-of-type::after {
  animation-delay: 7.5s;
}

@keyframes fbBarcodeScan {
  0% { transform: translateX(-101%); }
  13% { transform: translateX(101%); }
  100% { transform: translateX(101%); }
}

@media (prefers-reduced-motion: reduce) {
  .fallback__barcode::after {
    animation: none !important;
  }
}

.fallback__signal {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--believe-grey, #6a6f5e);
}

.fallback__word {
  margin: 0;
  font: 700 clamp(2.2rem, 8vmin, 4rem) / 1 'Space Mono', 'Courier New', monospace;
  letter-spacing: 0.08em;
  color: var(--believe-green, #b8d62e);
}

.fallback__tagline {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--believe-grey, #6a6f5e);
}

.fallback__poster {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--believe-green, #b8d62e) 45%, transparent);
}

.fallback__lines {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.fallback__line {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--believe-green, #b8d62e);
}

.fallback__ca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

.fallback__ca-label {
  color: var(--believe-grey, #6a6f5e);
}

.fallback__ca-value {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--believe-grey, #6a6f5e);
  color: var(--believe-grey, #6a6f5e);
  /* the real 42-char address must wrap inside the card on small screens */
  word-break: break-all;
}

.fallback__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* Mirrors hud.css's .hud__social.pending look -- these are states, not
   links, until the launch-day config flip swaps real hrefs in. */
.fallback__social {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--believe-grey, #6a6f5e);
  color: var(--believe-grey, #6a6f5e);
  opacity: 0.85;
  /* launch flip: these are real <a> links now, same quiet chrome */
  text-decoration: none;
}

.fallback__social:hover,
.fallback__social:focus-visible {
  color: var(--believe-green, #b8d62e);
  border-color: var(--believe-green, #b8d62e);
  opacity: 1;
}

/* The empty HUD shell (left-edge track/pips render at init, panels never
   arrive without a world) is noise over a static poster page -- js/main.js
   tags <body> the moment the fallback path engages. */
.is-fallback #hud {
  display: none;
}

/* ---- context-lost REALIGN card ---- */

#signal-lost {
  position: fixed;
  inset: 0;
  /* Explicit z-index, same justification as gate.css's 100: this must
     cover everything -- including #gate itself if the context dies while
     the gate is still up. */
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  /* Solid, not translucent: a lost context's canvas contents are
     undefined (often garbage or hard black) -- never worth showing. */
  background: var(--believe-bg, #050603);
}

#signal-lost[hidden] {
  display: none;
}

.signal-lost__card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(90vw, 460px);
  padding: 2rem 1.5rem;
  border: 1px solid var(--believe-green, #b8d62e);
  background: color-mix(in srgb, var(--believe-bg, #050603) 92%, var(--believe-green, #b8d62e));
  font-family: 'Space Mono', 'Courier New', monospace;
  cursor: pointer;
}

.signal-lost__title {
  font-size: clamp(1.8rem, 6vmin, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--believe-bright, #d4f24b);
}

.signal-lost__line {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--believe-grey, #6a6f5e);
}

.signal-lost__cta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--believe-green, #b8d62e);
  color: var(--believe-green, #b8d62e);
  transition: color 120ms ease, background-color 120ms ease;
}

.signal-lost__card:hover .signal-lost__cta,
.signal-lost__card:focus-visible .signal-lost__cta {
  color: var(--believe-bg, #050603);
  background: var(--believe-green, #b8d62e);
}