/* ═══════════════════════════════════════════════════════════════
   AstroKamya™ · Celestial Particle Field v3 — CSS Layer
   ──────────────────────────────────────────────────────────
   Container + vignette + overlay styles for the canvas-based
   particle constellation system on mobile hero.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hidden on desktop/tablet ─────────────────────────────── */
.mobile-cosmos {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   MOBILE ACTIVATION (≤768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Kill BOTH old animations completely ── */
  .mobile-astrolabe {
    display: none !important;
    visibility: hidden !important;
  }
  .scanner-stream-container {
    display: none !important;
    visibility: hidden !important;
  }
  body.scanner-active .hero-wrap::before {
    display: none !important;
  }

  /* ── Canvas container ── */
  .mobile-cosmos {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: auto;
    overflow: hidden;
  }

  .mobile-cosmos canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* ── Hero layout ── */
  #hero {
    position: relative;
    padding-top: 90px !important;
    padding-bottom: 44px !important;
    min-height: auto;
    display: block;
    overflow: hidden !important;
  }

  .hero-wrap {
    position: relative;
    z-index: 5;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero-content {
    position: relative;
    z-index: 5;
    pointer-events: auto;
  }

  /* ═══════════════════════════════════════════════════
     VIGNETTE OVERLAYS — Depth + readability
     Multi-layer gradient system that gracefully fades
     the particle field into the dark background.
     ═══════════════════════════════════════════════════ */

  /* Bottom fade (text readability) — more gradual */
  .mobile-cosmos::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
      to top,
      rgba(10, 6, 24, 0.92) 0%,
      rgba(10, 6, 24, 0.65) 25%,
      rgba(10, 6, 24, 0.35) 45%,
      rgba(10, 6, 24, 0.12) 65%,
      transparent 100%
    );
    z-index: 2;
    pointer-events: none;
  }

  /* Top atmospheric color wash */
  .mobile-cosmos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
    height: 65%;
    background: radial-gradient(
      ellipse 55% 45% at 50% 15%,
      rgba(124, 58, 237, 0.10) 0%,
      rgba(88, 28, 135, 0.05) 35%,
      rgba(10, 6, 24, 0.02) 60%,
      transparent 75%
    );
    z-index: 1;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════════════
     EDGE VIGNETTES — Framing the viewport
     Side and top edge fades create a "window into
     the cosmos" feeling — premium framing.
     ═══════════════════════════════════════════════════ */

  /* Left + Right edge vignettes via box-shadow on container */
  .mobile-cosmos {
    box-shadow:
      inset 30px 0 40px -10px rgba(10, 6, 24, 0.5),
      inset -30px 0 40px -10px rgba(10, 6, 24, 0.5),
      inset 0 20px 30px -10px rgba(10, 6, 24, 0.3);
  }
}