/* ─── §3  Ambient background layers (fixed, GPU-cheap) ─────────────────── */

.lp-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--halo) 0%, transparent 65%),
    radial-gradient(40% 40% at 88% 14%, var(--halo-soft) 0%, transparent 70%),
    radial-gradient(50% 40% at 10% 80%, var(--halo-soft) 0%, transparent 70%);
  opacity: 0.85;
  animation: lpBgPulse 18s var(--ease-soft) infinite;
}
:root[data-theme="light"] .lp-bg::before { opacity: 0.6; }
.lp-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 70%);
}
:root[data-theme="light"] .lp-bg::after {
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
}

@keyframes lpBgPulse {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; }
  50%      { transform: scale(1.05) translateY(-2%); opacity: 1; }
}

/* Drifting orbs */
.lp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;
  pointer-events: none;
  will-change: transform;
}
.lp-orb-1 {
  width: 480px; height: 480px;
  top: -120px; right: -100px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 65%);
  animation: lpOrb1 24s ease-in-out infinite;
}
.lp-orb-2 {
  width: 380px; height: 380px;
  top: 30%; left: -120px;
  background: radial-gradient(circle, var(--primary-hi) 0%, transparent 65%);
  opacity: 0.30;
  animation: lpOrb2 30s ease-in-out infinite;
}
.lp-orb-3 {
  width: 420px; height: 420px;
  bottom: 10%; right: 20%;
  background: radial-gradient(circle, var(--primary-deep) 0%, transparent 65%);
  opacity: 0.28;
  animation: lpOrb3 36s ease-in-out infinite;
}
@keyframes lpOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes lpOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.05); }
}
@keyframes lpOrb3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-20px, -40px) scale(1.07); }
}
:root[data-theme="light"] .lp-orb { opacity: 0.20; }

/* Particles — floating dots (CSS only, 12 dots) */
.lp-particles { position: absolute; inset: 0; pointer-events: none; }
.lp-particles span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.45;
  box-shadow: 0 0 12px var(--primary);
  animation: lpParticleFloat var(--p-dur, 16s) linear infinite;
  animation-delay: var(--p-delay, 0s);
  top: var(--p-y, 50%);
  left: var(--p-x, 50%);
}
@keyframes lpParticleFloat {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.45; }
  90%  { opacity: 0.45; }
  100% { transform: translateY(-120vh) translateX(20px); opacity: 0; }
}