/* ════════════════════════════════════════════════════════════════════
   Space Station 3D · backgrounds atmosféricos
   Usa os 8 keyframes da gaveta como ambient layers nas heroes/seções
   ════════════════════════════════════════════════════════════════════ */

/* Container universal para hero com bg-estação */
.space-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Layer base: imagem da estação como background fixo */
.space-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  filter: saturate(0.85) contrast(1.05);
}
.space-bg.dim   { opacity: 0.32; }
.space-bg.faint { opacity: 0.20; }

/* Dark overlay para garantir legibilidade do texto sobre o bg */
.space-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(9,13,16,.30) 0%, rgba(9,13,16,.75) 60%, rgba(9,13,16,.92) 100%),
    linear-gradient(180deg, rgba(9,13,16,.32) 0%, rgba(9,13,16,.62) 60%, rgba(9,13,16,.94) 100%);
}

/* Variantes específicas — uma classe por still */
.space-bg.approach    { background-image: url('/visual/space-station/stills/01-hero-approach-earth.webp'); }
.space-bg.sunrise     { background-image: url('/visual/space-station/stills/02-orbital-sunrise.webp'); }
.space-bg.nebula      { background-image: url('/visual/space-station/stills/03-deep-space-nebula.webp'); }
.space-bg.docking     { background-image: url('/visual/space-station/stills/04-docking-detail.webp'); }
.space-bg.topdown     { background-image: url('/visual/space-station/stills/05-top-down-earth.webp'); }
.space-bg.terminator  { background-image: url('/visual/space-station/stills/06-terminator-pass.webp'); }
.space-bg.cosmic      { background-image: url('/visual/space-station/stills/07-cosmic-scale.webp'); }
.space-bg.portrait    { background-image: url('/visual/space-station/stills/08-hero-portrait-backlit.webp'); }

/* Video background — usado no hero da home */
.space-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.space-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.42;
  filter: saturate(0.90) contrast(1.05);
}

/* Garante que o conteúdo fique acima do bg
   (exclui overlays que têm posicionamento absoluto próprio — o
   :not(#systems-canvas) eleva a especificidade a nível de ID e
   atropelaria o position:absolute deles) */
.space-hero > *:not(.space-bg):not(.space-overlay):not(.space-video-bg):not(#systems-canvas):not(.cockpit-hud):not(.hero-bg):not(.hero-grid) {
  position: relative;
  z-index: 5;
}

/* ── Inline station card · uso em landing pages como hero-side ──────────── */
.station-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/10;
  border: 1px solid rgba(0, 230, 176, 0.22);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 230, 176, 0.10) inset;
  background: var(--ink, #090d10);
}
.station-card picture { display: block; width: 100%; height: 100%; }
.station-card picture img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.station-card video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.station-card .station-readout {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cyan, #00e6b0);
  text-transform: uppercase;
  background: rgba(9, 13, 16, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
  border: 1px solid rgba(0, 230, 176, 0.30);
  border-radius: 4px;
  z-index: 2;
}
.station-card .station-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--cyan, #00e6b0);
  z-index: 2;
  opacity: 0.7;
  pointer-events: none;
}
.station-card .station-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.station-card .station-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* ── Section interstitial · banner full-width entre seções ─────────────── */
.station-interstitial {
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink, #090d10);
  border-top: 1px solid rgba(0, 230, 176, 0.15);
  border-bottom: 1px solid rgba(0, 230, 176, 0.15);
}
.station-interstitial::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,13,16,.80) 0%, rgba(9,13,16,.40) 50%, rgba(9,13,16,.80) 100%);
}
@media (max-width: 760px) {
  .station-interstitial { height: 160px; }
}

/* ── Performance: prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .space-video-bg video { display: none; }
  .space-video-bg { background: url('/visual/space-station/thumbs/01-hero-approach-earth.webp') center/cover; }
}