/* ===== OBSCURON VOID LABS – Universal theme: space / black hole ===== */

/* Base: always dark (space) so theme never falls back to white */
html { scroll-behavior: smooth; background: #050508; }
body { background-color: #050508; }

/* ===== Background: dark space + subtle grid + cyan/violet glow ===== */
.bg-void {
  background-color: #050508 !important;
  background-image:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(34, 211, 238, 0.06), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 50%, rgba(167, 139, 250, 0.04), transparent 50%),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px) !important;
  background-size: 64px 64px;
  min-height: 100vh;
}
.bg-grid {
  background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ===== Void cursor: custom dot (desktop only) ===== */
@media (hover: hover) and (pointer: fine) {
  body.void-cursor-active {
    cursor: none;
  }
  body.void-cursor-active * {
    cursor: none !important;
  }
}
@media (hover: none) or (pointer: coarse) {
  #void-layer,
  #cursor-overlay { display: none !important; }
}
#void-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
#cursor-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}
#cursor-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
}
/* Black-hole style cursor: dark center, cyan/violet glow */
#cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #0f0f18, #050508 50%, #000 70%);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.5),
    0 0 24px rgba(34, 211, 238, 0.35),
    0 0 48px rgba(167, 139, 250, 0.2),
    inset -2px -2px 8px rgba(0, 0, 0, 0.9),
    inset 2px 2px 6px rgba(34, 211, 238, 0.08);
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: width 0.2s ease, height 0.2s ease, box-shadow 0.2s ease;
  pointer-events: none;
}
body.void-cursor-active #cursor-dot.hover {
  width: 32px;
  height: 32px;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.6),
    0 0 30px rgba(34, 211, 238, 0.4),
    0 0 60px rgba(167, 139, 250, 0.2),
    inset 0 0 16px rgba(0, 0, 0, 0.8);
}
body.void-cursor-active #cursor-dot.cursor-text {
  width: 14px;
  height: 14px;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.3),
    0 0 12px rgba(34, 211, 238, 0.2),
    inset 0 0 8px rgba(0, 0, 0, 0.8);
}