/* ====================================
   PREMIUM BACKGROUND ECOSYSTEM
   Apple Vision Pro × OpenAI aesthetic
==================================== */

.premium-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

/* --- Premium AI Dashboard Grid --- */
.premium-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
  transform: translateZ(0);
  will-change: opacity;
}

.premium-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(124, 58, 237, 0.04) 0%, transparent 55%);
}

/* --- Canvas Layer (Neural + Particles) --- */
#premium-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  will-change: contents;
}

/* --- Aurora System (enhanced) --- */
.premium-bg .aurora-container {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: translateZ(0);
}

.premium-bg .aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(160px);
  opacity: 0.18;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.premium-bg .aurora-1 {
  width: 820px;
  height: 820px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.95) 0%, rgba(124, 58, 237, 0.35) 45%, transparent 70%);
  top: -380px;
  left: -280px;
  opacity: 0.22;
  animation: auroraDrift1 38s ease-in-out infinite;
}

.premium-bg .aurora-2 {
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.9) 0%, rgba(6, 182, 212, 0.3) 50%, transparent 72%);
  top: 8%;
  right: -220px;
  opacity: 0.2;
  animation: auroraDrift2 44s ease-in-out infinite;
}

.premium-bg .aurora-3 {
  width: 680px;
  height: 680px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.85) 0%, rgba(6, 182, 212, 0.25) 55%, transparent 75%);
  bottom: -280px;
  left: 28%;
  opacity: 0.17;
  animation: auroraDrift3 52s ease-in-out infinite;
}

@keyframes auroraDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(40px, 30px, 0) scale(1.05); }
  66% { transform: translate3d(-20px, 50px, 0) scale(0.98); }
}

@keyframes auroraDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-50px, 35px, 0) scale(1.08); }
}

@keyframes auroraDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(30px, -25px, 0) scale(1.04); }
  80% { transform: translate3d(-35px, 20px, 0) scale(0.96); }
}

/* --- Mouse Glow --- */
.mouse-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.14) 0%,
    rgba(6, 182, 212, 0.08) 28%,
    transparent 68%
  );
  filter: blur(8px);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
  transition: opacity 0.4s ease;
}

body.bg-ready .mouse-glow {
  opacity: 1;
}

body.no-mouse-glow .mouse-glow {
  display: none;
}

/* --- Hero Enhancements (layout unchanged) --- */
.avatar-radial-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(124, 58, 237, 0.28) 0%,
      rgba(6, 182, 212, 0.12) 35%,
      rgba(124, 58, 237, 0.06) 55%,
      transparent 72%);
  filter: blur(28px);
  animation: heroRadialPulse 6s ease-in-out infinite;
  transform: translateZ(0);
}

@keyframes heroRadialPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.ring-energy-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.energy-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(6, 182, 212, 0.9) 40%, transparent 100%);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.8), 0 0 16px rgba(6, 182, 212, 0.4);
  animation: energyOrbit 14s linear infinite;
  opacity: 0.7;
}

.energy-dot-1 { animation-delay: 0s; --orbit-r: 195px; --orbit-speed: 14s; }
.energy-dot-2 { animation-delay: -1.8s; --orbit-r: 210px; --orbit-speed: 16s; }
.energy-dot-3 { animation-delay: -3.5s; --orbit-r: 225px; --orbit-speed: 18s; }
.energy-dot-4 { animation-delay: -5.2s; --orbit-r: 240px; --orbit-speed: 20s; }
.energy-dot-5 { animation-delay: -6.8s; --orbit-r: 255px; --orbit-speed: 22s; }
.energy-dot-6 { animation-delay: -8.4s; --orbit-r: 230px; --orbit-speed: 17s; }
.energy-dot-7 { animation-delay: -10s; --orbit-r: 200px; --orbit-speed: 15s; }
.energy-dot-8 { animation-delay: -11.6s; --orbit-r: 248px; --orbit-speed: 19s; }

@keyframes energyOrbit {
  from {
    transform: rotate(0deg) translateX(var(--orbit-r, 220px)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-r, 220px)) rotate(-360deg);
  }
}

.avatar-container .ring {
  z-index: 4;
}

.avatar-container .avatar-wrapper {
  z-index: 10;
}

.avatar-container .ai-particles {
  z-index: 11;
}

/* --- Mobile & Performance --- */
@media (max-width: 768px) {
  .premium-bg .aurora {
    filter: blur(120px);
  }

  .premium-bg .aurora-1 {
    width: 520px;
    height: 520px;
    top: -240px;
    left: -180px;
    opacity: 0.18;
  }

  .premium-bg .aurora-2 {
    width: 460px;
    height: 460px;
    right: -160px;
    opacity: 0.16;
  }

  .premium-bg .aurora-3 {
    width: 420px;
    height: 420px;
    bottom: -180px;
    opacity: 0.14;
  }

  .premium-grid {
    background-size: 48px 48px;
    opacity: 0.25;
  }

  .mouse-glow {
    width: 280px;
    height: 280px;
    margin: -140px 0 0 -140px;
  }

  .energy-dot {
    width: 3px;
    height: 3px;
    margin: -1.5px 0 0 -1.5px;
  }

  .energy-dot-1 { --orbit-r: 115px; }
  .energy-dot-2 { --orbit-r: 125px; }
  .energy-dot-3 { --orbit-r: 135px; }
  .energy-dot-4 { --orbit-r: 145px; }
  .energy-dot-5 { --orbit-r: 155px; }
  .energy-dot-6 { --orbit-r: 140px; }
  .energy-dot-7 { --orbit-r: 120px; }
  .energy-dot-8 { --orbit-r: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-bg .aurora,
  .avatar-radial-glow,
  .energy-dot {
    animation: none !important;
  }

  .mouse-glow {
    display: none;
  }
}