.ambient-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-shape {
  position: absolute;
  width: clamp(240px, 34vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(58, 163, 227, 0.08);
  opacity: 0.7;
  will-change: transform;
}

.ambient-shape::before,
.ambient-shape::after {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(43, 182, 115, 0.07);
}

.ambient-shape::after { inset: 31%; border-radius: 50%; }
.ambient-shape-one { top: 16%; right: -12%; transform: rotate(18deg); animation: ambient-one 34s ease-in-out infinite alternate; }
.ambient-shape-two { top: 58%; left: -16%; border-radius: 50%; animation: ambient-two 42s ease-in-out infinite alternate; }
.ambient-shape-three { bottom: -20%; right: 18%; transform: rotate(45deg); animation: ambient-three 38s ease-in-out infinite alternate; }

.ambient-glow {
  position: absolute;
  width: clamp(280px, 42vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.075;
  will-change: transform;
}

.ambient-glow-blue { top: 28%; left: -18%; background: #3AA3E3; animation: glow-blue 30s ease-in-out infinite alternate; }
.ambient-glow-green { top: 62%; right: -20%; background: #2BB673; animation: glow-green 36s ease-in-out infinite alternate; }

body > header,
body > nav,
body > main,
body > footer { position: relative; z-index: 1; }

@keyframes ambient-one { to { transform: translate(-5vw, 7vh) rotate(42deg); } }
@keyframes ambient-two { to { transform: translate(7vw, -5vh) rotate(-24deg); } }
@keyframes ambient-three { to { transform: translate(-4vw, -8vh) rotate(72deg); } }
@keyframes glow-blue { to { transform: translate(30vw, 18vh) scale(1.16); } }
@keyframes glow-green { to { transform: translate(-28vw, -14vh) scale(.88); } }

@media (max-width: 700px) {
  .ambient-shape { opacity: 0.45; }
  .ambient-shape-three { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-shape, .ambient-glow { animation: none; }
}