/**
 * Public pages ambient background — match React cosmos-bg (dev-frontend-v2/src/index.css).
 * No emerald/turquoise 3D cubes. CSS-only atmosphere.
 */

html,
body {
  background-color: #08080f !important;
  background-image:
    radial-gradient(ellipse at 50% 35%, #2a1f3a 0%, transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(78, 205, 196, 0.08), transparent 35%),
    radial-gradient(circle at 85% 20%, rgba(255, 107, 53, 0.1), transparent 30%) !important;
  background-attachment: fixed !important;
  background-color: #090a0f !important;
}

/* Kill aurora root + turquoise neural cubes */
#shader-bg-root,
.shader-bg-root,
#neural-bg,
canvas#neural-bg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Particles network removed — React cosmos has no connected-dot web */
#particles-js {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.cosmos-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}

/* React-style cosmos wash behind content */
.shader-bg-root.cosmos-fallback,
#cosmos-bg,
.cosmos-bg {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% 35%, #2a1f3a 0%, transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(78, 205, 196, 0.08), transparent 35%),
    radial-gradient(circle at 85% 20%, rgba(255, 107, 53, 0.1), transparent 30%),
    #090a0f !important;
}

#cosmos-bg::before,
.cosmos-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 70% 45%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.3), transparent);
  animation: cosmosStarsDrift 90s linear infinite;
  opacity: 0.7;
}

.cosmos-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: cosmosOrbFloat 12s ease-in-out infinite;
  pointer-events: none;
}
.cosmos-orb.a {
  width: 340px; height: 340px;
  background: rgba(255, 107, 53, 0.22);
  top: -80px; right: -60px;
}
.cosmos-orb.b {
  width: 280px; height: 280px;
  background: rgba(78, 205, 196, 0.28);
  bottom: 10%; left: -40px;
  animation-delay: -4s;
}
.cosmos-orb.c {
  width: 220px; height: 220px;
  background: rgba(255, 107, 53, 0.22);
  top: 40%; left: 45%;
  animation-delay: -7s;
}

@keyframes cosmosStarsDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4%, -3%, 0); }
}
@keyframes cosmosOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -18px, 0) scale(1.06); }
}

#hero-section,
.dashboard-preview-section,
.shop-categories-section,
#stores-section-wrap,
.site-footer,
.card,
.login-card,
.main-content,
.dashboard-content,
.content-area,
.br-main-content,
.admin-main,
.tech-main,
.sidebar,
.topbar,
.wrapper,
#app,
.pearl-login-wrap {
  position: relative;
  z-index: 2;
}
/* Do NOT set position on body.seo-landing — breaks fixed #asab-chrome */
.seo-landing .seo-wrap,
.seo-landing main {
  position: relative;
  z-index: 2;
}

.nav-center-btns {
  z-index: 100 !important;
}

@media (max-width: 1260px) {
  #particles-js {
    display: none !important;
  }
  .cosmos-orb {
    opacity: 0.28;
    filter: blur(48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #cosmos-bg::before,
  .cosmos-bg::before,
  .cosmos-orb {
    animation: none !important;
  }
}