/* ═══════════════════════════════════════════════════════════════════
   AstroKamya™ · Vedic Nebula v3 — Mobile/Tablet Hero Background
   Complete redesign: cinematic atmospheric panels (SpaceX/Apple quality)
   Concept: nebula clouds + brilliant corona + starfield + scan line
   GPU-efficient: transform + opacity only. No layout thrashing.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Show/Hide: hidden on desktop, shown on tablet/mobile ── */
.mco {
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1024px) {
  .mco { display: block; }
  .scanner-stream-container { display: none !important; }
  #mobile-astrolabe          { display: none !important; }
  .mobile-cosmos             { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTAINER — Full-height right-side panel (not a floating circle)
   Text sits above this at z-index:3; animation is z-index:1 below
   ═══════════════════════════════════════════════════════════════════ */

/* ── TABLET 768–1024px ── */
@media (max-width: 1024px) {
  .mco {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    height: 100%;
    min-height: 100%;
    z-index: 1;
    overflow: hidden;
    /* Left-fade: text area (left 50%) stays dark & readable */
    mask-image: linear-gradient(
      to right,
      transparent  0%,
      rgba(0,0,0,0.12) 16%,
      rgba(0,0,0,0.55) 32%,
      black 50%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent  0%,
      rgba(0,0,0,0.12) 16%,
      rgba(0,0,0,0.55) 32%,
      black 50%
    );
    animation: mcoPulse 8s ease-in-out infinite;
    will-change: opacity;
  }
}

/* ── MOBILE ≤768px — full-width background layer ── */
@media (max-width: 768px) {
  .mco {
    position: absolute !important;
    top: 0 !important; right: 0 !important;
    left: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    /* Left → right fade: left (where text lives) fades to transparent */
    mask-image: linear-gradient(
      to right,
      transparent  0%,
      rgba(0,0,0,0.28) 28%,
      rgba(0,0,0,0.70) 52%,
      black 70%
    ) !important;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent  0%,
      rgba(0,0,0,0.28) 28%,
      rgba(0,0,0,0.70) 52%,
      black 70%
    ) !important;
    animation: mcoPulse 8s ease-in-out infinite !important;
  }
}

/* ── XS phones ≤480px ── */
@media (max-width: 480px) {
  .mco {
    mask-image: linear-gradient(
      to right,
      transparent  0%,
      rgba(0,0,0,0.20) 35%,
      rgba(0,0,0,0.60) 58%,
      black 76%
    ) !important;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent  0%,
      rgba(0,0,0,0.20) 35%,
      rgba(0,0,0,0.60) 58%,
      black 76%
    ) !important;
  }
}

@keyframes mcoPulse {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1.00; }
}

/* ═══════════════════════════════════════════════════════════════════
   MCO-INNER — Children stack absolute within full-panel container
   ═══════════════════════════════════════════════════════════════════ */
.mco-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── BASE COSMIC ATMOSPHERE ── */
.mco-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 72% 50%, rgba(88,28,224,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 80% at 88% 18%, rgba(124,58,237,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 40% 36% at 92% 80%, rgba(255,110,0,0.07) 0%, transparent 50%);
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   NEBULA CLOUDS — Large blurred blobs (no border-radius clip)
   ═══════════════════════════════════════════════════════════════════ */

/* Primary violet mass */
.mco-cloud-1 {
  position: absolute;
  width: 72%;
  padding-bottom: 72%;
  top: 8%;
  left: 8%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(124,58,237,0.62) 0%,
    rgba(88,28,224,0.38) 32%,
    rgba(67,20,180,0.18) 58%,
    transparent 75%
  );
  filter: blur(68px);
  animation: vnCloud1 10s ease-in-out infinite;
  will-change: transform, opacity;
  z-index: 1;
}

@keyframes vnCloud1 {
  0%, 100% { transform: scale(1.00) translate( 0%,  0%); opacity: 0.78; }
  33%       { transform: scale(1.07) translate(-2%, -3%); opacity: 1.00; }
  66%       { transform: scale(0.94) translate( 3%,  2%); opacity: 0.84; }
}

/* Golden amber accent */
.mco-cloud-2 {
  position: absolute;
  width: 52%;
  padding-bottom: 52%;
  top: 2%;
  right: 1%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,184,0,0.48) 0%,
    rgba(255,140,0,0.24) 40%,
    transparent 68%
  );
  filter: blur(58px);
  animation: vnCloud2 13s ease-in-out infinite 2s;
  will-change: transform, opacity;
  z-index: 1;
}

@keyframes vnCloud2 {
  0%, 100% { transform: scale(1.00) translate( 0%,  0%); opacity: 0.58; }
  50%       { transform: scale(1.15) translate(-4%,  3%); opacity: 0.88; }
}

/* Teal/cyan depth layer */
.mco-cloud-3 {
  position: absolute;
  width: 42%;
  padding-bottom: 42%;
  bottom: 6%;
  right: 6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(6,182,212,0.30) 0%,
    rgba(14,116,144,0.15) 40%,
    transparent 68%
  );
  filter: blur(48px);
  animation: vnCloud3 16s ease-in-out infinite 4s;
  will-change: transform, opacity;
  z-index: 1;
}

@keyframes vnCloud3 {
  0%, 100% { transform: scale(1.00); opacity: 0.42; }
  60%       { transform: scale(1.20); opacity: 0.68; }
}

/* ═══════════════════════════════════════════════════════════════════
   STAR FIELD — 40+ dots via background-image (no DOM nodes needed)
   ═══════════════════════════════════════════════════════════════════ */
.mco-stars {
  position: absolute;
  inset: 0;
  background-image:
    /* ── Bright anchor stars (2–2.5px with soft halo) ── */
    radial-gradient(circle 2.5px at 36% 20%, rgba(255,255,255,0.97) 0%, rgba(210,185,255,0.30) 2px, transparent 4px),
    radial-gradient(circle 2px   at 75% 14%, rgba(255,210,90,0.95)  0%, rgba(255,184,0,0.28)  2px, transparent 3.5px),
    radial-gradient(circle 2px   at 89% 63%, rgba(255,255,255,0.92)  0%, rgba(155,109,255,0.28) 2px, transparent 3.5px),
    radial-gradient(circle 2.5px at 16% 71%, rgba(6,182,212,0.90)   0%, rgba(6,182,212,0.22)  2px, transparent 4px),
    radial-gradient(circle 2px   at 54% 87%, rgba(255,210,90,0.90)  0%, rgba(255,184,0,0.22)  2px, transparent 3.5px),
    radial-gradient(circle 2px   at 93% 37%, rgba(155,109,255,0.88) 0%, rgba(155,109,255,0.22) 2px, transparent 3.5px),
    /* ── Medium stars (1.5px) ── */
    radial-gradient(circle 1.5px at  8% 10%, rgba(255,255,255,0.85) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 23%  6%, rgba(255,184,0,0.80)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 48%  9%, rgba(255,255,255,0.80) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 63% 17%, rgba(155,109,255,0.85) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 82% 11%, rgba(255,255,255,0.80) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 95% 25%, rgba(255,184,0,0.75)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 11% 31%, rgba(6,182,212,0.80)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 29% 40%, rgba(255,255,255,0.75) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 58% 33%, rgba(255,184,0,0.75)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 77% 44%, rgba(155,109,255,0.80) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 91% 51%, rgba(255,255,255,0.75) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at  5% 57%, rgba(255,184,0,0.75)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 43% 53%, rgba(6,182,212,0.80)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 68% 61%, rgba(255,255,255,0.80) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 86% 73%, rgba(155,109,255,0.80) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 14% 81%, rgba(255,255,255,0.75) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 33% 89%, rgba(255,184,0,0.75)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 53% 77%, rgba(6,182,212,0.80)   0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 71% 83%, rgba(255,255,255,0.75) 0%, transparent 1.5px),
    radial-gradient(circle 1.5px at 96% 88%, rgba(155,109,255,0.80) 0%, transparent 1.5px),
    /* ── Small stars (1px) ── */
    radial-gradient(circle 1px at 26% 15%, rgba(255,255,255,0.70) 0%, transparent 1px),
    radial-gradient(circle 1px at 44% 24%, rgba(255,184,0,0.65)   0%, transparent 1px),
    radial-gradient(circle 1px at 61% 43%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 80% 28%, rgba(6,182,212,0.70)   0%, transparent 1px),
    radial-gradient(circle 1px at 38% 67%, rgba(255,184,0,0.65)   0%, transparent 1px),
    radial-gradient(circle 1px at 62% 72%, rgba(155,109,255,0.70) 0%, transparent 1px),
    radial-gradient(circle 1px at 19% 53%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 50% 59%, rgba(255,184,0,0.60)   0%, transparent 1px),
    radial-gradient(circle 1px at 85% 56%, rgba(255,255,255,0.65) 0%, transparent 1px),
    radial-gradient(circle 1px at 46% 95%, rgba(6,182,212,0.70)   0%, transparent 1px);
  animation: vnStarsTwinkle 7s ease-in-out infinite alternate;
  will-change: opacity;
  z-index: 2;
}

@keyframes vnStarsTwinkle {
  0%   { opacity: 0.68; }
  45%  { opacity: 1.00; }
  100% { opacity: 0.78; }
}

/* ═══════════════════════════════════════════════════════════════════
   VEDIC GRID — ultra-faint geometric grid visible near corona only
   ═══════════════════════════════════════════════════════════════════ */
.mco-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,0.058) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.058) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Reveal only around the right-center (corona zone) */
  mask-image: radial-gradient(ellipse 72% 62% at 66% 50%, rgba(0,0,0,0.75) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 66% 50%, rgba(0,0,0,0.75) 0%, transparent 70%);
  animation: vnGridFade 10s ease-in-out infinite 1s;
  will-change: opacity;
  z-index: 2;
}

@keyframes vnGridFade {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1.00; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT RAYS — slowly rotating spokes from corona centre
   ═══════════════════════════════════════════════════════════════════ */
.mco-rays {
  position: absolute;
  width: 640px;
  height: 640px;
  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent  0deg,
    rgba(255,184,0,0.055)  6deg,
    transparent  12deg,
    transparent  70deg,
    rgba(255,200,110,0.045) 76deg,
    transparent  82deg,
    transparent 142deg,
    rgba(255,184,0,0.055) 148deg,
    transparent 154deg,
    transparent 212deg,
    rgba(255,200,110,0.040) 218deg,
    transparent 224deg,
    transparent 284deg,
    rgba(255,184,0,0.045) 290deg,
    transparent 296deg,
    transparent 352deg,
    rgba(255,184,0,0.032) 356deg,
    transparent 360deg
  );
  animation: vnRaysSpin 28s linear infinite;
  will-change: transform;
  z-index: 2;
}

@keyframes vnRaysSpin {
  from { transform: translate(-50%, -50%) rotate(  0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   CORONA — The brilliant central focal star
   White core → gold glow → violet halo → deep-purple far field
   ═══════════════════════════════════════════════════════════════════ */
.mco-corona {
  position: absolute;
  top: 50%;
  left: 63%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0   3px rgba(255,255,255,0.55),
    0 0 10px 5px rgba(255,235,140,0.95),
    0 0 26px 13px rgba(255,184,0,0.72),
    0 0 52px 26px rgba(210,145,255,0.48),
    0 0 95px 48px rgba(124,58,237,0.36),
    0 0 170px 85px rgba(88,28,224,0.26),
    0 0 300px 150px rgba(67,20,180,0.16);
  animation: vnCoronaGlow 5s ease-in-out infinite;
  will-change: transform, box-shadow;
  z-index: 5;
}

@keyframes vnCoronaGlow {
  0%, 100% {
    box-shadow:
      0 0 0   3px rgba(255,255,255,0.55),
      0 0 10px 5px rgba(255,235,140,0.95),
      0 0 26px 13px rgba(255,184,0,0.72),
      0 0 52px 26px rgba(210,145,255,0.48),
      0 0 95px 48px rgba(124,58,237,0.36),
      0 0 170px 85px rgba(88,28,224,0.26),
      0 0 300px 150px rgba(67,20,180,0.16);
    transform: translate(-50%, -50%) scale(1.00);
  }
  50% {
    box-shadow:
      0 0 0   5px rgba(255,255,255,0.68),
      0 0 16px 8px rgba(255,235,140,1),
      0 0 38px 19px rgba(255,184,0,0.92),
      0 0 76px 38px rgba(210,145,255,0.65),
      0 0 138px 70px rgba(124,58,237,0.52),
      0 0 240px 120px rgba(88,28,224,0.38),
      0 0 420px 210px rgba(67,20,180,0.24);
    transform: translate(-50%, -50%) scale(1.28);
  }
}

/* ── Lens flare streak through corona ── */
.mco-flare {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-1px);
  background: linear-gradient(
    to right,
    transparent  0%,
    transparent 14%,
    rgba(255,210,100,0.10) 34%,
    rgba(255,255,255,0.52) 60%,
    rgba(255,210,100,0.10) 76%,
    transparent 90%,
    transparent 100%
  );
  box-shadow: 0 0 8px 2px rgba(255,184,0,0.14);
  animation: vnFlarePulse 5s ease-in-out infinite;
  will-change: opacity;
  z-index: 4;
}

@keyframes vnFlarePulse {
  0%, 100% { opacity: 0.48; }
  50%       { opacity: 1.00; }
}

/* ═══════════════════════════════════════════════════════════════════
   SCAN LINE — horizontal tech readout sweep (one pass every 7s)
   ═══════════════════════════════════════════════════════════════════ */
.mco-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent  0%,
    rgba(155,109,255,0.48) 24%,
    rgba(200,160,255,0.72) 50%,
    rgba(155,109,255,0.48) 76%,
    transparent 100%
  );
  box-shadow: 0 0 6px 2px rgba(124,58,237,0.24);
  animation: vnScanlineMove 7s linear infinite;
  will-change: top;
  z-index: 3;
}

@keyframes vnScanlineMove {
  0%   { top:  -2px; opacity: 0; }
  4%   { opacity: 0.92; }
  96%  { opacity: 0.76; }
  100% { top: 100%;  opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   FLOATING PLANET GLYPHS — 4 Vedic symbols that pulse in/out
   ═══════════════════════════════════════════════════════════════════ */
.mco-glyph {
  position: absolute;
  font-family: 'Cinzel', 'Playfair Display', serif;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 5;
}

/* ☉ Sun — top-right area */
.mco-g1 {
  top: 17%;
  left: 72%;
  font-size: 22px;
  color: rgba(255,205,75,0.82);
  text-shadow: 0 0 12px rgba(255,184,0,0.72), 0 0 26px rgba(255,184,0,0.36);
  animation: vnGlyph1 8s ease-in-out infinite;
}

/* ♃ Jupiter — mid-right */
.mco-g2 {
  top: 43%;
  left: 86%;
  font-size: 26px;
  color: rgba(185,135,255,0.82);
  text-shadow: 0 0 14px rgba(155,109,255,0.72), 0 0 30px rgba(124,58,237,0.36);
  animation: vnGlyph2 11s ease-in-out infinite 1.5s;
}

/* ☽ Moon — lower-right */
.mco-g3 {
  top: 66%;
  left: 76%;
  font-size: 20px;
  color: rgba(255,205,75,0.76);
  text-shadow: 0 0 10px rgba(255,184,0,0.62), 0 0 22px rgba(255,184,0,0.30);
  animation: vnGlyph3 9s ease-in-out infinite 3s;
}

/* ♄ Saturn — lower-left of panel */
.mco-g4 {
  top: 76%;
  left: 53%;
  font-size: 18px;
  color: rgba(185,135,255,0.72);
  text-shadow: 0 0 10px rgba(155,109,255,0.60), 0 0 22px rgba(124,58,237,0.30);
  animation: vnGlyph4 12s ease-in-out infinite 0.7s;
}

@keyframes vnGlyph1 {
  0%, 100% { transform: translateY(   0) scale(1.00); opacity: 0.52; }
  28%       { transform: translateY(-9px) scale(1.07); opacity: 0.94; }
  72%       { transform: translateY( 5px) scale(0.94); opacity: 0.58; }
}
@keyframes vnGlyph2 {
  0%, 100% { transform: translate(   0,   0) scale(1.00); opacity: 0.48; }
  38%       { transform: translate(-5px,-8px) scale(1.09); opacity: 0.92; }
  74%       { transform: translate( 3px, 4px) scale(0.95); opacity: 0.52; }
}
@keyframes vnGlyph3 {
  0%, 100% { transform: translateY(   0) scale(1.00); opacity: 0.44; }
  50%       { transform: translateY(-7px) scale(1.05); opacity: 0.88; }
}
@keyframes vnGlyph4 {
  0%, 100% { transform: translateY(   0) scale(1.00); opacity: 0.40; }
  35%       { transform: translateY(-6px) scale(1.06); opacity: 0.82; }
  75%       { transform: translateY( 4px) scale(0.95); opacity: 0.44; }
}

/* ═══════════════════════════════════════════════════════════════════
   REDUCED MOTION — remove all animations for accessibility
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .mco * { animation: none !important; transition: none !important; }
  .mco-scanline { display: none; }
  .mco-rays     { display: none; }
}