/* =============================================================================
   FLOWORK OS — NANO-MODULAR COMPONENT: COSMIC_BACKGROUND.CSS
   Deep Obsidian Cosmic Backdrop, Holographic Starfield & Ocular Systems
   Author: Flowork OS Sovereign Architect & Awenk Audico
   Co-authored-by: Flowork OS <agent@floworkos.com>
   ============================================================================= */

/* ==========================================================================
   1. DEEP OBSIDIAN COSMIC BACKGROUND GRADIENTS & CYBER GRID
   ========================================================================== */
body,
.cosmic-background {
  background-color: #04060a !important;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.09) 0%, transparent 68%),
    radial-gradient(circle at 80% 20%, rgba(127, 0, 255, 0.07) 0%, transparent 55%),
    linear-gradient(rgba(0, 229, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.02) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px !important;
}

/* ==========================================================================
   2. FULL-PAGE LIVING COSMIC STARFIELD CANVAS
   ========================================================================== */
.flw-starfield-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  animation: none !important;
}

@keyframes flwStarfieldTwinkle {
  0% { opacity: 0.80; }
  50% { opacity: 0.98; }
  100% { opacity: 0.84; }
}

/* ==========================================================================
   3. COSMIC SHOOTING STAR / METEOR STREAKS (PURE CSS ZERO-CPU)
   ========================================================================== */
.flw-cosmic-meteor-container {
  display: none !important;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.flw-shooting-star {
  position: absolute;
  top: 18%;
  left: -200px;
  width: 160px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.95), rgba(127, 0, 255, 0.5), transparent);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.8);
  opacity: 0;
  transform: rotate(-32deg);
  animation: flwShootingStarPass1 12s ease-in-out infinite;
}

.flw-shooting-star.meteor-2 {
  top: 52%;
  left: -200px;
  width: 200px;
  animation: flwShootingStarPass2 16s ease-in-out 6s infinite;
}

@keyframes flwShootingStarPass1 {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-32deg); }
  2% { opacity: 1; }
  8% { opacity: 0; transform: translate3d(130vw, 85vh, 0) rotate(-32deg); }
  100% { opacity: 0; transform: translate3d(130vw, 85vh, 0) rotate(-32deg); }
}

@keyframes flwShootingStarPass2 {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-32deg); }
  2% { opacity: 0.9; }
  7% { opacity: 0; transform: translate3d(130vw, 85vh, 0) rotate(-32deg); }
  100% { opacity: 0; transform: translate3d(130vw, 85vh, 0) rotate(-32deg); }
}

/* ==========================================================================
   4. HOLOGRAPHIC AMBIENT SCANLINES OVERLAY
   ========================================================================== */
.scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.25) 51%);
  background-size: 100% 4px;
  opacity: 0.35;
  z-index: 1;
}

/* ==========================================================================
   5. SMART GLASSES CURVED LENS VIGNETTE (1000R CONCAVE DISH)
   ========================================================================== */
.visor-lens-curvature {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  border-radius: 16px;
  margin: 6px;
  border: 1px solid rgba(0, 229, 255, 0.25);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.85);
  background: radial-gradient(
    ellipse 120% 80% at 50% 50%,
    transparent 60%,
    rgba(2, 6, 16, 0.5) 100%
  );
}

/* ==========================================================================
   6. SMART GLASSES CURVED HORIZON ARC RETICLES (1000R HORIZONS)
   ========================================================================== */
.visor-horizon-arc {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: 1400px;
  height: 50px;
  pointer-events: none;
  z-index: 20;
  opacity: 0.85;
}

.visor-bottom-arc {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  max-width: 1400px;
  height: 50px;
  pointer-events: none;
  z-index: 20;
  opacity: 0.85;
}

.horizon-arc-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ==========================================================================
   7. CENTRAL HOLOGRAPHIC HUD ARC REACTOR BACKDROP (ZERO-LAG HARDWARE ACCELERATED)
   ========================================================================== */
@keyframes hudSpinClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hudSpinCounter {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes hudCorePulseGlow {
  0% { transform: scale(0.96); opacity: 0.7; }
  50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 0 14px #00e5ff); }
  100% { transform: scale(0.96); opacity: 0.7; }
}

.hud-reactor-backdrop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 880px;
  height: 880px;
  max-width: 92vw;
  max-height: 92vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45 !important;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-reactor-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hud-rot-clockwise {
  transform-origin: 500px 500px;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.hud-rot-counter {
  transform-origin: 500px 500px;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.hud-core-pulse {
  transform-origin: 500px 500px;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}