/* styles/biomes/surface.css
   Biome 1 — the Surface. The void inside the system. Geometric grid,
   faint horizon line, the Intent as a warm gold orb drifting toward
   the GATEWAY shape on the horizon. */

#surface {
  background: var(--surface-bg);
}
#surface svg {
  width: 100%;
  height: 100%;
  display: block;
}

#world-pan {
  transition: transform 18s linear;
}

#horizon-marker {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  color: rgba(184, 224, 255, 0.35);
  opacity: 0;
  transition: opacity 2000ms ease;
  z-index: 20;
}
#horizon-marker.visible { opacity: 1; }

/* ---------- ATMOSPHERIC HAZE ----------
   Three layered SVG <rect> bands in #world-pan deliver atmospheric
   perspective. Slight blur softens the band edges so the haze feels
   like air, not stripes. The pan group inherits the 18s drift, so
   the haze drifts WITH the rest of the world — no extra animation. */
.surface-haze rect {
  filter: blur(2px);
}

/* INTENT HALO — large blurred circle behind the orb. Slow opacity
   pulse (matches the orb's 3.6s breathing cadence but offset slightly
   so it doesn't double-time with the inner pulse). */
.intent-halo {
  animation: intent-halo-breathe 7.2s ease-in-out infinite;
}
@keyframes intent-halo-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

/* ---------- AMBIENT STREAKS (other intents crossing) ----------
   Spawned during the Surface drift pan to suggest you're not alone
   in this data ocean. Brief packet-blue dashes that fade across. */
.surface-streak {
  position: absolute;
  left: -120px;
  width: 80px;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(184, 224, 255, 0.85) 50%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(184, 224, 255, 0.7);
  opacity: 0;
  z-index: 22;
  pointer-events: none;
  animation: surface-streak-pass 2400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes surface-streak-pass {
  0%   { opacity: 0; transform: translateX(0)         scaleX(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(110vw)     scaleX(1.4); }
}

/* ---------- DISTANT PACKET DRIFT (other Intents at the horizon) ----------
   Small packet-blue rectangles drifting across the mid-distance on
   long cycles. Different from .surface-streak (which is bright + fast)
   — these are quieter, slower, and read as "other Intents traveling."
   Spawned by prologue.js via the ambient registry pattern. */
.surface-packet {
  position: absolute;
  left: -40px;
  width: 16px;
  height: 10px;
  background: rgba(184, 224, 255, 0.18);
  border: 1px solid rgba(184, 224, 255, 0.32);
  box-shadow: 0 0 12px rgba(184, 224, 255, 0.35);
  border-radius: 1px;
  opacity: 0;
  z-index: 21;
  pointer-events: none;
  animation: surface-packet-drift 14s linear forwards;
}
.surface-packet.slow {
  animation-duration: 19s;
  width: 12px;
  height: 8px;
  background: rgba(184, 224, 255, 0.12);
  box-shadow: 0 0 8px rgba(184, 224, 255, 0.25);
}
@keyframes surface-packet-drift {
  0%   { opacity: 0;   transform: translateX(0); }
  18%  { opacity: 0.6; }
  82%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateX(108vw); }
}

@media (prefers-reduced-motion: reduce) {
  .surface-streak { animation-duration: 800ms; }
  .surface-packet { animation: none; opacity: 0.3; }
  .intent-halo    { animation: none; opacity: 0.7; }
}

/* ---------- FURNACE GLOW (Surface → Foundry transition) ----------
   Used at the end of the prologue: an orange radial bloom that
   consumes the screen as the Intent passes through the gateway.
   Lives outside any scene so it can overlap scene crossfades. */

#furnace-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%);
  background: #ff9540;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  box-shadow: 0 0 0 0 rgba(255, 149, 64, 0);
  transition:
    opacity 1800ms ease-out,
    box-shadow 1800ms ease-out;
}
#furnace-glow.bloom {
  opacity: 1;
  box-shadow:
    0 0 220px  80px rgba(255, 149, 64, 0.85),
    0 0 480px 200px rgba(200, 72, 24, 0.55),
    0 0 800px 360px rgba(120, 40, 12, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  #world-pan { transition-duration: 3s; }
  #horizon-marker { transition-duration: 400ms; }
  #furnace-glow { transition-duration: 400ms; }
}