/* ---------------------------------------------------------------
   Palette echoes portal/js/layers/background.js (BACKGROUND_CONFIG) and the
   "Ice And Fire" colour ramp that the LST heatmap prototype used — same visual
   identity as the map scene the "Enter Portal" button leads into, not a new
   palette invented here.

   That prototype (deck.gl, DECK_DEMO_CONFIG.colorRange) was removed on
   2026-08-19; see archive/deck-gl-20260819/. These colours are KEPT — they are
   the site's identity and never had a runtime dependency on it. Only this
   comment changed, so the ramp's origin stays traceable.
--------------------------------------------------------------- */
:root {
  --sky-color: #05070d;
  --horizon-color: #2a3a52;
  --ground-color: #12151c;
  --grid-color: #3a4a63;
  --grid-center-color: #5c7396;
  --text-color: #e4e6ea;
  --text-muted: #8b93a3;

  /* Ice And Fire ramp, cold -> hot */
  --heat-1: #0198bd;
  --heat-3: #54c8ba;
  --heat-5: #f8cb88;
  --heat-7: #ee7e56;
  --heat-9: #d50255;
}

/* ---- Top band (#topbar): HOMEPAGE-ONLY LOOK ----
   Structure/behaviour (layout, spacing, divider geometry, hover, the
   responsive breakpoint) moved to the shared css/topbar.css on 2026-08-19 —
   see that file, and its header comment for the split rule (this file sets
   colour/font/position only; nothing this file sets should repeat a property
   topbar.css already sets for the same selector).

   Colours are this page's own tokens (--text-color etc.), not the portal's
   --panel-* ones — those don't exist here. The chrome (translucent dark
   plate, hairline border, blur) is the same recipe this page's now-removed
   #enter-portal button used to use. Unlike the portal, this page has no
   runtime theme switch, so these values are just fixed literals — nothing
   here ever changes at runtime the way the portal's do. */
#topbar {
  position: fixed; /* portal uses absolute; this page uses fixed everywhere (see #scene, #scanline) since it never scrolls — same visual result, matches this file's own convention */
  z-index: 10; /* only needs to clear this page's own #scene(0)/#scanline(1)/#hero(2) — no relation to the portal's stacking context */
  background: rgb(20 20 24 / 0.75);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  color: var(--text-color);
  /* Literal px, not rem — matches the portal's own #topbar font-size:13.5px
     exactly. rem here resolves against THIS page's html{font-size:15px} rule
     (0.85rem = 12.75px), which is a different number from the portal's
     13.5px even though the two looked close enough to pass a glance; the two
     pages' topbar text is meant to read as identical, so this has to be the
     same literal, not two formulas that happen to land nearby. */
  font-size: 13.5px;
}

#topbar-brand {
  color: var(--text-color);
}

.tb-item {
  color: var(--text-color);
}

.tb-item + .tb-item::before {
  background: rgb(255 255 255 / 0.15);
}

#topbar-brand .beta-badge {
  border: 1px solid var(--heat-7);
  color: var(--heat-7);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky-color);
  color: var(--text-color);
  font:
    15px/1.6 ui-monospace,
    "Cascadia Mono",
    "Segoe UI Mono",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;
}

#hero-title {
  font-family: sans-serif;
}

/* ---- Scene: horizon glow + receding grid floor, pure CSS ---- */
#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  perspective: 400px;
  perspective-origin: 50% 38%;
}

#horizon-glow {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 140vw;
  height: 60vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--horizon-color) 0%, rgba(42, 58, 82, 0) 65%);
  opacity: 0.55;
  animation: glow-breathe 6s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.7; }
}

/* Classic CSS "receding floor": a plane pinned at the horizon (top: 38%,
   matching #horizon-glow's center) and tipped back 75° around its own top
   edge, so perspective on #scene makes it recede toward a vanishing point
   at the horizon instead of just sitting there as a flat rectangle. */
#grid-floor {
  position: absolute;
  top: 38%;
  left: -50%;
  right: -50%;
  bottom: 0;
  transform-origin: 50% 0%;
  transform: rotateX(75deg);
  background-color: var(--ground-color);
  background-image:
    repeating-linear-gradient(90deg, var(--grid-color) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, var(--grid-color) 0 1px, transparent 1px 60px);
  background-size: 60px 60px;
  animation: grid-drift 3s linear infinite;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 55%, transparent 100%);
          mask-image: linear-gradient(to top, black 0%, black 55%, transparent 100%);
}

/* The two lines crossing dead-center get the brighter "orientation" tint
   from background.js's gridCenterColor, echoed here as a static overlay
   since this floor has no real map origin to mark. */
#grid-floor::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--grid-center-color) calc(50% - 1px), var(--grid-center-color) calc(50% + 1px), transparent calc(50% + 1px));
  opacity: 0.6;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 60px; }
}

/* ---- Hero content ---- */
#hero {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 0 24px;
  animation: hero-in 1s ease-out both;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#hero-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#hero-title {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--heat-1), var(--heat-3) 35%, var(--heat-5) 55%, var(--heat-7) 75%, var(--heat-9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(213, 2, 85, 0.15));
}

#hero-subtitle {
  margin: 0;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 1rem;
}

/* ---- Faint scanline sweep for a touch of "sensor pass" motion ---- */
#scanline {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--heat-3), transparent);
  opacity: 0.35;
  animation: scan 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes scan {
  0%   { top: 8%; opacity: 0; }
  10%  { opacity: 0.35; }
  50%  { top: 55%; opacity: 0.2; }
  90%  { opacity: 0.35; }
  100% { top: 92%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #horizon-glow, #grid-floor, #hero, #scanline {
    animation: none;
  }
}