/* ============================================================
   AXIOM · HERO — restored from ee756b7 (interactive satellite
   dashboard). Re-themed to match the current Thailand-flag /
   light-paper aesthetic. No gradients. No rounded corners.

   Stack (z-index must be integer):
     z=0  #hero  (paper frame)
     z=1  #heroMap (Leaflet dark tiles)
     z=2  #heroCanvas (data lines / grid)
     z=3  .hero-featured-bg (rotating system screenshots)
     z=4  HUD chrome (city label, sat-hud, intel overlays,
          sat-controls, map-mode, map-explore-hint, axes)
     z=5  .hero-featured-badge (the FEATURED panel)
     z=6  .hero-content (badge, title, subtitle, actions,
          node strip, stats)
     z=7  .hero-scroll-indicator

   Variables are inherited from :root in rams.css.
   ============================================================ */

#hero {
  position: relative;
  width: 100%;
  min-height: 100vh; /* was 88vh — the larger .hero-title needs the room so
    .hero-stats doesn't collide with the absolutely-positioned
    .map-explore-hint pinned to the section's bottom edge */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* ----- Map (Leaflet container) ----- */
#heroMap {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #0a0a0a;
  filter: brightness(0.55) contrast(1.05) saturate(0.7);
}

/* Leaflet attribution / zoom controls: hide, keep keyboard nav */
#heroMap .leaflet-control-attribution {
  display: none !important;
}
#heroMap .leaflet-control-zoom {
  display: none !important;
}

/* ----- Canvas (data lines / grid overlay) ----- */
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ----- Hero flat dark wash (for legibility) ----- */
.hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(10, 10, 12, 0.45);
  /* The map's filter:brightness already darkens tiles; this overlay
     sits BEHIND the map (z=0) so it does not stack on top. It is
     here as a fallback for when JS fails to mount the map. */
}

/* ----- Signal constellation markers (Leaflet divIcon) ----- */
.sat-pulse-marker,
.sat-signal-marker {
  position: relative;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: 9px;
  background: var(--accent);
  border: 1px solid var(--paper);
  box-shadow: 0 0 0 0 var(--accent);
  animation: sat-pulse 2.4s infinite;
  cursor: pointer;
}

.sat-signal-marker {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sat-signal-dot {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 1px solid var(--paper);
  box-shadow: 0 0 0 0 rgba(0, 36, 125, 0.6);
  animation: sat-pulse 2.4s infinite;
}

.sat-signal-label {
  display: block;
  padding: 2px 6px;
  background: rgba(8, 10, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--paper);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

@keyframes sat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 36, 125, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 36, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 36, 125, 0); }
}

/* ----- Telemetry axes (decorative crosshair) ----- */
.telemetry-axis-x,
.telemetry-axis-y {
  position: absolute;
  z-index: 3;
  background: var(--accent);
  opacity: 0.18;
  pointer-events: none;
}

.telemetry-axis-x {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.telemetry-axis-y {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

/* ----- Hero tracker (decorative) ----- */
.hero-tracker {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: transparent;
  border: 1px solid var(--accent);
  opacity: 0.5;
  pointer-events: none;
}

.hero-tracker::before,
.hero-tracker::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

.hero-tracker::before {
  top: -8px;
  left: 50%;
  width: 1px;
  height: 8px;
  margin-left: -0.5px;
}

.hero-tracker::after {
  top: 50%;
  left: -8px;
  width: 8px;
  height: 1px;
  margin-top: -0.5px;
}

/* ----- City label (top-right, large mono) -----
   On desktop+tablet the visual text is rendered on the canvas
   (pretext-style measureText) at the same coordinates as the data
   lines and signal nodes. The DOM chip stays in the layout for
   screen readers and is also the visible fallback on mobile, where
   the Leaflet map covers the canvas and the canvas tick would be
   hidden. The CSS visually hides the DOM only on the breakpoints
   where the canvas text takes over (≥ 768px). */
.hero-city-label {
  position: absolute;
  z-index: 3;
  top: 28px;
  right: 28px;
  font-family: ui-monospace, "JetBrains Mono", "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

@media (min-width: 768px) {
  /* Desktop / tablet: canvas pretext tick takes over. Hide the DOM
     chip (still announced by screen readers via aria-hidden toggling
     in app.js, but visually replaced). */
  .hero-city-label {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Visually-hidden helper used for the canvas-rendered theatre labels */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----- Map Mode Indicator (top-left, AUTO TOUR pill) ----- */
.map-mode {
  position: absolute;
  z-index: 4;
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.map-mode-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(10, 10, 12, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--paper);
  text-transform: uppercase;
}

.map-mode-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #1ec96b;
  box-shadow: 0 0 0 0 rgba(30, 201, 107, 0.5);
  animation: map-mode-pulse 1.6s infinite;
}

.map-mode-dot.exploring {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 36, 125, 0.5);
}

@keyframes map-mode-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 8px transparent; opacity: 0.8; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.map-mode-label.exploring {
  color: var(--paper);
  opacity: 0.85;
}

.map-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(10, 10, 12, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--paper);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.map-mode-btn:hover {
  background: rgba(0, 36, 125, 0.85);
  border-color: var(--accent);
}

.map-mode-btn-pulse {
  animation: map-mode-btn-pulse 0.6s ease 3;
}

@keyframes map-mode-btn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ----- Map Explore Hint (bottom-left) ----- */
.map-explore-hint {
  position: absolute;
  z-index: 3;
  bottom: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--paper);
  opacity: 0.85;
  pointer-events: none;
}

.map-explore-hint svg {
  flex-shrink: 0;
}

/* ----- Satellite Controls (bottom-right layer switcher) ----- */
.sat-controls {
  position: absolute;
  z-index: 4;
  bottom: 22px;
  right: 22px;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: rgba(10, 10, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.sat-control-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.sat-control-label {
  padding: 0 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper);
  opacity: 0.6;
  text-transform: uppercase;
}

.sat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  height: auto;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.sat-btn:hover {
  background: rgba(0, 36, 125, 0.4);
  color: var(--paper);
}

.sat-btn-active {
  background: var(--accent);
  color: var(--paper);
}

.sat-btn-active:hover {
  background: var(--accent);
}

.sat-btn[data-active="true"] {
  background: var(--accent);
  color: var(--paper);
}

.sat-control-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.sat-source-note {
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper);
  opacity: 0.55;
}

/* ----- Urban Intelligence Overlays (Moneyball) ----- */
.intel-overlay {
  position: absolute;
  z-index: 4;
  padding: 10px 12px;
  background: rgba(10, 10, 12, 0.82);
  border: 1px solid var(--accent);
  color: var(--paper);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms ease, transform 350ms ease;
  pointer-events: none;
  min-width: 180px;
}

.intel-overlay.active {
  opacity: 1;
  transform: translateY(0);
}

.intel-overlay-header {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--paper);
  opacity: 0.55;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.intel-overlay-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

.intel-overlay-meta {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--paper);
  opacity: 0.7;
  text-transform: uppercase;
}

#intelOverlayDubai {
  top: 80px;
  right: 60px;
}

#intelOverlayBangkok {
  top: 80px;
  left: 60px;
}

/* Layer / fake intel chrome demoted — theatre HUD is the product */
.sat-controls,
.intel-overlay {
  display: none !important;
}

/* ----- Theatre signal HUD (top-center) ----- */
.sat-hud {
  position: absolute;
  z-index: 4;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px;
  background: rgba(10, 10, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: var(--paper);
  min-width: 320px;
  max-width: min(560px, 90vw);
  pointer-events: none;
}

.sat-hud-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.sat-hud-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.sat-hud-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: sat-hud-live-dot 1.4s infinite;
}

@keyframes sat-hud-live-dot {
  0%   { box-shadow: 0 0 0 0 rgba(0, 36, 125, 0.6); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.sat-hud-theatre {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
}

.sat-hud-signals {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.9;
}

.sat-hud-watching {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.7;
}

.sat-hud-provider,
.sat-hud-coord,
.sat-hud-zoom,
.sat-hud-res,
.sat-hud-tile,
.sat-hud-time {
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  opacity: 0.88;
}

.sat-hud-tile {
  font-size: 9px;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.sat-hud-time {
  margin-left: auto;
  font-weight: 700;
  color: var(--accent);
}

/* ----- Hero Content (centered) ----- */
.hero-content {
  position: relative;
  z-index: 4;
  max-width: var(--maxw, 1200px);
  margin: 0 auto;
  padding: 18vh var(--pad) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--paper);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-badge-dot {
  width: 7px;
  height: 7px;
  background: var(--paper);
}

.hero-title {
  /* The Divine Move for this surface — exactly one bold gesture.
     Scaled to the edge of the grid on purpose; everything else in
     .hero-content stays at its established, disciplined size. */
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(3.4rem, 9.5vw, 8.5rem);
  font-weight: 800;
  line-height: 0.87;
  letter-spacing: -0.035em;
  color: var(--paper);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
}

.hero-line {
  display: block;
}

.hero-line-accent {
  display: block;
  color: var(--accent);
  /* Plain flag-blue accent — no gradient (anti-regression §11.1.3) */
}

.hero-subtitle {
  max-width: 540px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--paper);
  opacity: 0.88;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.hero-actions .btn--primary,
.hero-actions .btn--ghost {
  /* Pick up the global .btn base; override surfaces for legibility on map */
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.hero-actions .btn--primary:hover {
  background: #001a5c;
  border-color: #001a5c;
}

.hero-actions .btn--ghost {
  background: rgba(10, 10, 12, 0.7);
  border-color: var(--paper);
  color: var(--paper);
}

.hero-actions .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

/* ----- City node strip ----- */
.hero-node-strip {
  margin-top: 22px;
  width: 100%;
  max-width: 720px;
}

.hero-node-strip-label {
  margin-bottom: 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
}

.hero-node-strip-scroller {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.hero-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--paper);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hero-node:hover {
  background: rgba(0, 36, 125, 0.5);
  border-color: var(--accent);
}

.hero-node.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

.hero-node-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.hero-node-meta {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ----- Hero stats ----- */
.hero-stats {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

.hero-stat-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-stat-label {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.6;
}

/* ----- Scroll indicator ----- */
.hero-scroll-indicator {
  position: absolute;
  z-index: 5;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 32px;
  pointer-events: none;
}

.hero-scroll-line {
  width: 1px;
  height: 100%;
  background: var(--paper);
  opacity: 0.6;
  animation: hero-scroll-down 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-down {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  #hero { min-height: 78vh; }
  .hero-content { padding-top: 14vh; }
  .hero-title { font-size: clamp(2.6rem, 13vw, 4.8rem); }
  .hero-stats { gap: 18px; }
  .hero-stat-value { font-size: 18px; }
  /* Stack the three top-of-hero controls vertically so they stop
     sitting on top of each other. AUTO TOUR (map-mode) → sat-hud →
     Theatre Brief badge, with 8px gaps. The .hero-featured-badge
     override is placed in a later @media block (see "Mobile: top
     stack — placed AFTER base rule to win the cascade") so it
     overrides the base `top: 50%` + `transform: translateY(-50%)`. */
  .map-mode { top: 12px; left: 12px; }
  .sat-hud {
    top: 56px;          /* below .map-mode (h=36 + 8 gap) */
    min-width: 0;
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
  }
  /* Mobile fallback: keep the DOM city label visible since the canvas
     tick is hidden under the Leaflet map. Compact for narrow viewport. */
  .hero-city-label { top: 14px; right: 14px; font-size: 10px; }
  .sat-controls { bottom: 12px; right: 12px; flex-wrap: wrap; }
  .map-explore-hint { display: none; }
  #intelOverlayDubai,
  #intelOverlayBangkok { display: none; }
}

@media (max-width: 600px) {
  .hero-node-strip-scroller {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-actions { gap: 8px; }
  .hero-actions .btn--primary,
  .hero-actions .btn--ghost {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 10px;
  }
  .sat-hud { font-size: 10px; padding: 6px 8px; }
  .sat-hud-row { gap: 8px; flex-wrap: wrap; }
  /* .hero-city-label is canvas-rendered (pretext overlay); the DOM stays
     in the accessibility tree for screen readers, no mobile override. */
  .sat-btn { font-size: 11px; }
  .sat-hud-tile { display: none; } /* hide CARTO tile-source debug line on mobile */
  .sat-hud-provider { display: none; } /* hide CARTO source on mobile (debug info) */
  .sat-source-note { display: none; } /* hide CARTO source in bottom-left on mobile */
  .sat-controls { bottom: auto; top: 70px; right: 12px; flex-wrap: wrap; max-width: calc(100vw - 24px); }
  .sat-control-label { display: none; } /* hide LABEL on mobile — saves space */
  .leaflet-control-attribution { display: none !important; } /* hide leaflet attribution on mobile */
}

@media (max-width: 1023px) {
  .leaflet-control-attribution { display: none !important; } /* hide on tablet too */
  .sat-btn { font-size: 11px; } /* bigger touch target for tablet touch */
  .sat-hud-tile { display: none; } /* hide debug tile line on tablet too */
}

@media (prefers-reduced-motion: reduce) {
  .sat-pulse-marker,
  .map-mode-dot,
  .sat-hud-live-dot,
  .hero-scroll-line,
  .map-mode-btn-pulse {
    animation: none !important;
  }
}

/* ============================================================
   HERO FEATURED — rotating system behind the headline.
   When a system is worthy of the front page, it lives here.
   Three rotating screenshots, low opacity, cross-fade every 6s.
   The FEATURED panel sits at the bottom-LEFT so it doesn't fight
   the map controls at the bottom-right.
   ============================================================ */

.hero-featured-bg {
  display: none !important;
}

.hero-featured-bg__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1400ms ease-in-out, transform 14s linear;
  filter: saturate(0.85) contrast(0.95);
  will-change: opacity, transform;
}

.hero-featured-bg__slide.is-active {
  opacity: 0.42;        /* visible enough to read, not enough to distract */
  transform: scale(1.0);
}

/* Soft top/bottom gradient to keep the headline legible */
.hero-featured-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.05) 30%,
      rgba(0, 0, 0, 0.05) 70%,
      rgba(0, 0, 0, 0.50) 100%);
  z-index: 1;
}

/* FEATURED panel — middle-right, vertically centered. Fits the empty
   right half of the hero so it doesn't fight the headline, the city
   nodes, or the sat-controls. */
.hero-featured-badge {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 22px 16px;
  min-width: 300px;
  max-width: 380px;
  background: rgba(8, 10, 14, 0.92);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  color: var(--paper);
  font-family: var(--mono, 'IBM Plex Mono', monospace);
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 6px 24px rgba(0, 0, 0, 0.4);
}

.hero-featured-badge:hover {
  background: rgba(8, 10, 14, 0.98);
  transform: translateY(-50%) translateX(-3px);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(0, 0, 0, 0.6);
}

.hero-featured-badge__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.hero-featured-badge__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 8px var(--accent);
}

.hero-featured-badge__event {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.55;
  margin-top: 2px;
}

.hero-featured-badge__name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper);
  margin-top: 4px;
  line-height: 1.05;
}

.hero-featured-badge__lede {
  font-size: 12px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.85;
  font-family: var(--body, 'IBM Plex Sans', system-ui, sans-serif);
  margin-top: 4px;
}

.hero-featured-badge__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.hero-featured-badge__cta .tri {
  margin-left: auto;
  transition: transform 200ms ease;
  font-size: 14px;
}

.hero-featured-badge:hover .hero-featured-badge__cta .tri {
  transform: translateX(4px);
}

.hero-featured-badge__counter {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hero-featured-badge__dot {
  width: 14px;
  height: 2px;
  background: var(--paper);
  opacity: 0.25;
  transition: opacity 200ms ease, background 200ms ease;
}

.hero-featured-badge__dot.is-active {
  background: var(--accent);
  opacity: 1;
}

/* Theatre brief stays visible during AUTO TOUR — it is the proof,
   synced to each stop. Pause only freezes the map, not the narrative. */
#hero.is-touring .hero-featured-badge,
#hero:not(.is-touring) .hero-featured-badge {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition: opacity 240ms ease, transform 240ms ease;
}

/* Tablet signal-label compaction. The .hero-featured-badge mobile rules
   are placed further below so they can win the cascade against the
   base rule (see "Mobile: top stack" block). */
@media (max-width: 900px) {
  .sat-signal-label { font-size: 8px; padding: 2px 4px; }
}

/* Mobile: hide the Theatre Brief badge. The base rule positions it as
   a vertical-center sidebar (right: 32px, top: 50%) intended for the
   desktop layout's right-half whitespace. On a single-column mobile/tablet
   hero there is no room — at 196px tall it either overlaps the title
   and subtitle (when placed at the top of the hero) or the Tap-a-theatre
   node strip and stats bar (when placed at the bottom). The same live
   link is rendered one scroll down in the showcase section with proper
   mobile layout, so hiding the hero badge costs nothing. */
@media (max-width: 900px) {
  .hero-featured-badge { display: none !important; }
}