/* ═══════════════════════════════════════════════════════════
   FileOS Desktop — Space Background CSS v1.3 (Photorealistic)
   Spaceship cockpit viewport looking into deep space
   All elements STATIONARY — animations driven by JS only
   ═══════════════════════════════════════════════════════════ */

/* ── Space Container ── */
#space-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Use the generated photorealistic image */
  background-image: url('../assets/space-bg-real.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ═══════════════════════════════════════
   VIEWPORT FRAME (Spaceship Cockpit)
   ═══════════════════════════════════════ */

#viewport-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 3px solid rgba(60, 70, 90, 0.35);
  border-radius: 18px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.7),
    inset 0 0 120px rgba(0, 0, 0, 0.4),
    0 0 2px rgba(100, 120, 160, 0.15);
}

/* Corner bolts */
#viewport-frame::before,
#viewport-frame::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 130, 150, 0.4) 30%, rgba(60, 65, 80, 0.3) 100%);
  box-shadow: 0 0 3px rgba(100, 110, 140, 0.15);
}

#viewport-frame::before {
  top: 12px;
  left: 12px;
  box-shadow:
    0 0 3px rgba(100, 110, 140, 0.15),
    calc(100vw - 32px) 0 3px rgba(100, 110, 140, 0.15);
}

#viewport-frame::after {
  bottom: 56px; /* above taskbar */
  left: 12px;
  box-shadow:
    0 0 3px rgba(100, 110, 140, 0.15),
    calc(100vw - 32px) 0 3px rgba(100, 110, 140, 0.15);
}

/* HUD thin-line overlay */
.hud-line-h {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(80, 100, 140, 0.06) 30%, rgba(80, 100, 140, 0.06) 70%, transparent 95%);
  pointer-events: none;
  z-index: 1;
}

.hud-line-h.top { top: 35%; }
.hud-line-h.bottom { top: 65%; }

.hud-line-v {
  position: absolute;
  top: 0;
  bottom: 48px;
  width: 1px;
  background: linear-gradient(180deg, transparent 5%, rgba(80, 100, 140, 0.06) 30%, rgba(80, 100, 140, 0.06) 70%, transparent 95%);
  pointer-events: none;
  z-index: 1;
}

.hud-line-v.left { left: 30%; }
.hud-line-v.right { left: 70%; }

/* ═══════════════════════════════════════
   JS-DRIVEN ANIMATION ELEMENTS
   (Created/destroyed dynamically — no CSS infinite loops)
   ═══════════════════════════════════════ */

/* Shooting star — created by JS, animated via rAF */
.space-event-star {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.85), transparent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}

/* Distant flash — created by JS */
.space-event-flash {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(200,220,255,0.4) 40%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  will-change: opacity, transform;
}

/* Planet glow boost — applied temporarily by JS */
.planet-glow-active {
  transition: filter 0.8s ease-in-out;
  filter: brightness(1.3) contrast(1.1);
}