.hero-fog{
  z-index:1;
  pointer-events:none;
  opacity:.22;
  filter:blur(22px);
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 34% 22% at 8% 72%,rgba(232,236,233,.18),transparent 72%),
    radial-gradient(ellipse 38% 24% at 88% 62%,rgba(214,220,218,.14),transparent 72%),
    radial-gradient(ellipse 42% 20% at 48% 92%,rgba(235,237,232,.12),transparent 74%);
  animation:fog-drift 20s ease-in-out infinite alternate;
}

.hero-fog::after{
  content:"";
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(ellipse 30% 18% at 30% 48%,rgba(255,255,255,.1),transparent 70%),
    radial-gradient(ellipse 28% 17% at 72% 38%,rgba(220,225,223,.1),transparent 70%);
  filter:blur(28px);
  animation:fog-drift-reverse 26s ease-in-out infinite alternate;
}

@keyframes fog-drift{
  from{transform:translate3d(-2%,1%,0) scale(1)}
  to{transform:translate3d(2%,-1%,0) scale(1.06)}
}
@keyframes fog-drift-reverse{
  from{transform:translate3d(2%,-1%,0) scale(1.04)}
  to{transform:translate3d(-2%,1%,0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .hero-fog,.hero-fog::after{animation:none}
}