/* ========== Aurora Mesh + Circuit Background System ========== */

.lc-page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* ── Mesh layer: animated shifting gradient blobs ── */
.lc-mesh-layer {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 25% 25%, var(--lc-ambient-tint), transparent 30rem),
    radial-gradient(circle at 75% 35%, var(--lc-mesh-2), transparent 32rem),
    radial-gradient(circle at 50% 80%, var(--lc-mesh-1), transparent 28rem);
  filter: blur(45px);
  opacity: 0.85;
  animation: lcMeshShift 30s ease-in-out infinite;
  will-change: transform;
}

/* ── Aurora ribbons: flowing diagonal gradient bands ── */
.lc-aurora-band {
  position: absolute;
  width: 160vw;
  height: 42vh;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform, opacity;
}

.lc-aurora-band--1 {
  top: -12%;
  left: -30%;
  background: linear-gradient(100deg, transparent, var(--lc-aurora-1), transparent);
  transform: rotate(-12deg);
  animation: lcAuroraFlow1 26s ease-in-out infinite;
}

.lc-aurora-band--2 {
  top: 28%;
  left: -20%;
  background: linear-gradient(100deg, transparent, var(--lc-aurora-2), transparent);
  transform: rotate(8deg);
  animation: lcAuroraFlow2 34s ease-in-out infinite;
}

.lc-aurora-band--3 {
  top: 58%;
  left: -25%;
  background: linear-gradient(100deg, transparent, var(--lc-aurora-3), transparent);
  transform: rotate(-6deg);
  animation: lcAuroraFlow3 40s ease-in-out infinite;
}

/* ── Breathing dot grid ── */
.lc-grid-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--lc-grid-dot) 1px, transparent 1.5px);
  background-size: 38px 38px;
  background-position: 0 0;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 85%);
  animation: lcGridBreathe 8s ease-in-out infinite;
  will-change: opacity;
}

/* ── Circuit canvas ── */
.lc-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

/* ── Mouse-follow spotlight ── */
.lc-spotlight {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lc-spotlight), transparent 65%);
  filter: blur(30px);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 30%;
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: transform;
}

.lc-spotlight.is-active {
  opacity: 1;
}

/* ── Vignette for depth ── */
.lc-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 50%, var(--lc-vignette) 100%);
  pointer-events: none;
}

/* ── Reduced motion: disable all animations ── */
@media (prefers-reduced-motion: reduce) {
  .lc-mesh-layer,
  .lc-aurora-band,
  .lc-grid-dots,
  .lc-spotlight {
    animation: none !important;
  }
  .lc-bg-canvas {
    opacity: 0.55;
  }
}