/* Quiet background light, isolated to the hero opening. */
.hero__opening { position: relative; isolation: isolate; }
.hero-flares {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.hero-flares > span {
  position: absolute;
  width: clamp(12rem, 30vw, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(196 255 55 / 10%), rgb(170 196 172 / 4%) 40%, transparent 70%);
  opacity: .65;
  animation: flare-drift 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.hero-flares > span:nth-child(1) { top: -12%; right: 2%; }
.hero-flares > span:nth-child(2) {
  top: 18%; right: 22%;
  width: clamp(10rem, 23vw, 23rem);
  background: radial-gradient(ellipse, rgb(220 235 220 / 9%), transparent 70%);
  animation-duration: 35s;
  animation-delay: -13s;
}
.hero-flares > span:nth-child(3) {
  bottom: -20%; right: -4%;
  animation-duration: 40s;
  animation-delay: -23s;
}
@keyframes flare-drift {
  0% { transform: translate(-5%, 3%) scale(.85); opacity: .35; }
  50% { transform: translate(6%, -6%) scale(1.12); opacity: .75; }
  100% { transform: translate(-3%, 9%) scale(.98); opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-flares > span { animation: none; opacity: .45; will-change: auto; }
}