/* =========================================================================
   Background ambience — mesh gradient / aurora / noise / particles
   ========================================================================= */
.bg-ambient{
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.mesh-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}
.blob-1{
  width: 46vw; height: 46vw;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle at 30% 30%, var(--green-glow), transparent 70%);
  animation: float-1 26s ease-in-out infinite;
}
.blob-2{
  width: 38vw; height: 38vw;
  top: 8vw; right: -12vw;
  background: radial-gradient(circle at 60% 40%, rgba(23,224,138,.25), transparent 70%);
  animation: float-2 32s ease-in-out infinite;
}
.blob-3{
  width: 42vw; height: 42vw;
  bottom: -18vw; left: 18vw;
  background: radial-gradient(circle at 50% 50%, var(--red-glow), transparent 70%);
  opacity: .35;
  animation: float-3 30s ease-in-out infinite;
}
.blob-4{
  width: 30vw; height: 30vw;
  bottom: 10vw; right: 6vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,84,112,.22), transparent 70%);
  opacity: .3;
  animation: float-1 22s ease-in-out infinite reverse;
}

@keyframes float-1{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(4vw, 6vw) scale(1.1); }
}
@keyframes float-2{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-5vw, 4vw) scale(.92); }
}
@keyframes float-3{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(3vw, -5vw) scale(1.08); }
}

.noise{
  position: absolute;
  inset: -10%;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

.hero-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.particle{
  position: absolute;
  bottom: -10px;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  box-shadow: 0 0 8px 1px var(--green-glow);
  animation: particle-rise var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes particle-rise{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: .7; }
  90%{ opacity: .5; }
  100%{ transform: translateY(-110vh) translateX(var(--drift, 40px)); opacity: 0; }
}