/* ═══════════════════════════════════════════════════════
   Cosmic Genesis Engine v2 — "Sentient Nebula" Styles
   AstroKamya™ 2026
   ═══════════════════════════════════════════════════════ */

/* ── WebGL Canvas Layer ── */
#cosmic-genesis-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  z-index: 1;
  pointer-events: auto;
  display: block;
}

/* Hide the static SVG chart when genesis engine is active */
.cosmic-active .hero-chart-bg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Also hide the old cosmic-engine canvas if it exists */
.cosmic-active #cosmic-canvas {
  display: none !important;
}

/* Hero positioning for the canvas overlay — prevent ANY overflow */
.cosmic-active #hero {
  position: relative;
  overflow: hidden !important;
  max-width: 100vw;
}

/* Ensure hero content stays above canvas */
.cosmic-active .hero-content {
  position: relative;
  z-index: 5;
}

.cosmic-active .hero-wrap {
  position: relative;
  z-index: 3;
  overflow: hidden;
}

/* ── New Tagline Typography ── */
.ht-line-1 {
  display: block;
}

.cosmic-active .ht-line-2 {
  background: linear-gradient(110deg, #E5A600 0%, #FFB800 30%, #FFCB45 60%, #FFB800 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  animation: genesis-tagline-shimmer 4s ease-in-out infinite;
}

@keyframes genesis-tagline-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ── CTA Enhancement on Click ── */
.cosmic-active .btn-glow.cosmic-pulse {
  transform: scale(1.08) translateY(-4px) !important;
  box-shadow:
    0 0 60px rgba(255,184,0,0.5),
    0 0 120px rgba(255,184,0,0.2),
    0 8px 32px rgba(255,184,0,0.3) !important;
  transition: all 0.3s cubic-bezier(0.2,0.8,0.2,1) !important;
}

/* ── Cosmic Cursor ── */
.cosmic-active #hero {
  cursor: crosshair;
}

.cosmic-active .hero-content {
  cursor: auto;
}

.cosmic-active .hero-content a,
.cosmic-active .hero-content button {
  cursor: pointer;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  #cosmic-genesis-canvas {
    display: none !important;
  }
  .cosmic-active .hero-chart-bg {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .cosmic-active #hero {
    cursor: auto;
  }
  
  #cosmic-genesis-canvas {
    /* Slightly lower opacity on mobile for text readability */
    opacity: 0.85;
  }
}