/* ════════════════════════════════════════════════════════════════
   VIRALL STANCE — SPACE ENHANCEMENT LAYER
   Purely additive. Zero existing rules touched.
   Layers: aurora · constellation · dust · section-glows · comets
════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. AURORA BOREALIS
   Fixed at viewport top. JS shifts hue; CSS handles blur + mask.
────────────────────────────────────────────────────────────── */
#space-aurora {
  position: fixed;
  top: -10%;
  left: -10%;
  right: -10%;
  height: 55vh;
  pointer-events: none;
  z-index: 0;
  filter: blur(55px);
  will-change: opacity;
  animation: auroraBreathe 14s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 85%);
  mask-image:         linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 85%);
}

@keyframes auroraBreathe {
  0%, 100% { opacity: 0.55; transform: scaleX(1.00) skewX(-2.5deg); }
  28%      { opacity: 0.80; transform: scaleX(1.06) skewX( 1.5deg); }
  56%      { opacity: 0.62; transform: scaleX(0.97) skewX(-1.0deg); }
  80%      { opacity: 0.70; transform: scaleX(1.03) skewX( 0.5deg); }
}

/* ──────────────────────────────────────────────────────────────
   2. CONSTELLATION CANVAS
   Sits at z-index 0, same plane as starfield.
────────────────────────────────────────────────────────────── */
#space-constellation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: contents;
}

/* ──────────────────────────────────────────────────────────────
   3. COSMIC DUST CANVAS
   Slightly above constellation but below content.
────────────────────────────────────────────────────────────── */
#space-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  will-change: contents;
  opacity: 0.7;
}

/* ──────────────────────────────────────────────────────────────
   4. PREMIUM COMET
   Brighter, longer trail than the existing .meteor class.
────────────────────────────────────────────────────────────── */
@keyframes cometFly {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(-28deg); }
  4%   { opacity: 1; }
  78%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(-1250px, 730px) rotate(-28deg); }
}

.space-comet {
  position: absolute;
  width: 220px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)   0%,
    rgba(180,230,255,0.4) 30%,
    rgba(220,245,255,0.8) 75%,
    rgba(255,255,255,1)   100%
  );
  animation: cometFly linear forwards;
  box-shadow:
    0 0 6px  2px rgba(200,240,255,0.70),
    0 0 22px 4px rgba(140,210,255,0.28);
  pointer-events: none;
}
/* Bright head dot */
.space-comet::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 8px  4px rgba(255,255,255,0.90),
    0 0 20px 6px rgba(180,230,255,0.55);
}

/* ──────────────────────────────────────────────────────────────
   5. SECTION AMBIENT GLOW ORBS (injected by JS)
────────────────────────────────────────────────────────────── */
.se-glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.se-glow-orb.active {
  animation: orbPulse 8s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1.00); }
  50%      { transform: translate(-50%, -50%) scale(1.12); }
}

/* ──────────────────────────────────────────────────────────────
   6. HERO HORIZON GLOW LINE
   Subtle luminous seam at the bottom of the hero section.
────────────────────────────────────────────────────────────── */
#hero .enh-horizon {
  position: absolute;
  bottom: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(
    90deg,
    transparent  0%,
    rgba(0,212,255,0.35)  22%,
    rgba(123,94,248,0.50) 50%,
    rgba(0,212,255,0.35)  78%,
    transparent  100%
  );
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 4;
  animation: horizonGlow 5s ease-in-out infinite;
}
@keyframes horizonGlow {
  0%, 100% { opacity: 0.6; filter: blur(0.5px); }
  50%      { opacity: 1.0; filter: blur(1.5px);  }
}

/* ──────────────────────────────────────────────────────────────
   7. SECTION COSMIC DIVIDER LINES
   Top border glow injected between sections by JS.
────────────────────────────────────────────────────────────── */
.enh-divider {
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    transparent  0%,
    rgba(0,212,255,0.12) 20%,
    rgba(123,94,248,0.22) 50%,
    rgba(0,212,255,0.12) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────────────
   8. STAR FLARE ACCENT DOTS
   Occasional large-star sparkle injected near section headers.
────────────────────────────────────────────────────────────── */
.star-flare {
  position: absolute;
  pointer-events: none;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0   2px rgba(255,255,255,0.25),
    0 0 8px 3px rgba(0,212,255,0.50),
    0 0 22px 5px rgba(123,94,248,0.25);
  animation: flareTwinkle var(--flare-dur, 3s) var(--flare-dly, 0s) ease-in-out infinite;
  z-index: 1;
}
/* Crosshair rays */
.star-flare::before,
.star-flare::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: flareTwinkle var(--flare-dur, 3s) var(--flare-dly, 0s) ease-in-out infinite;
}
.star-flare::before { width: 20px; height: 1px; }
.star-flare::after  { width: 1px;  height: 20px; }

@keyframes flareTwinkle {
  0%, 100% { opacity: 0.20; transform: scale(0.85); }
  50%      { opacity: 0.90; transform: scale(1.25); }
}

/* ──────────────────────────────────────────────────────────────
   9. NEBULA VEIL (per-section additive overlay)
   Each major section gets a subtle radial nebula wash.
────────────────────────────────────────────────────────────── */
.se-nebula-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s ease;
  will-change: opacity;
}
.se-nebula-veil.visible { opacity: 1; }

/* ──────────────────────────────────────────────────────────────
   10. MOBILE — reduce intensity for performance & readability
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #space-aurora {
    height: 38vh;
    filter: blur(40px);
  }
  #space-aurora {
    animation-duration: 18s; /* slower = cheaper */
  }
  .space-comet { width: 140px; }
  .star-flare::before { width: 14px; }
  .star-flare::after  { height: 14px; }
  .se-glow-orb { filter: blur(50px) !important; }
}

@media (max-width: 480px) {
  #space-aurora  { opacity: 0.45; }
  #space-dust    { display: none; }       /* cheapest GPU save */
  #space-constellation { display: none; } /* save compositing layer */
  .se-glow-orb { display: none; }
}