/* ===== Container ===== */
.bg-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  opacity: 0;
  transform: scale(0.95);
  animation: bg-fade-in 1.2s ease-out forwards;
}

/* ===== DOT GRID ===== */
.bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: radial-gradient(
    circle at 1px 1px,
    color-mix(in oklch, var(--foreground) 15%, transparent) 1px,
    transparent 0
  );

  background-size: 35px 35px;

  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0) 100%
  );

  mask-image: radial-gradient(
    ellipse at center,
    rgba(0,0,0,1) 55%,
    rgba(0,0,0,0) 100%
  );
}

/* ===== GLOWS BASE ===== */
.bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0;
  transform: scale(0.6);

  animation: bg-glow-in 1.8s cubic-bezier(.34,1.56,.64,1) forwards,
             bg-glow-pulse 10s ease-in-out infinite;

  will-change: transform, opacity;
}

/* ===== GLOW 1 ===== */
.bg-glow-1 {
  top: 20%;
  left: 15%;
  width: 400px;
  height: 400px;

  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--foreground) 18%, transparent) 0%,
    color-mix(in oklch, var(--primary) 9%, transparent) 45%,
    transparent 50%
  );

  opacity: 0.6;
}

/* ===== GLOW 2 ===== */
.bg-glow-2 {
  bottom: 25%;
  right: 20%;
  width: 450px;
  height: 450px;

  background: radial-gradient(
    circle,
    color-mix(in oklch, var(--foreground) 15%, transparent) 0%,
    color-mix(in oklch, var(--primary) 6%, transparent) 50%,
    transparent 50%
  );

  opacity: 0.55;
}

/* ===== ANIMATIONS ===== */

@keyframes bg-fade-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bg-dot-fade {
  to {
    opacity: 1;
  }
}

@keyframes bg-glow-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bg-glow-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}