/* Haze is isolated behind foreground content. */
.stage-smoke-scene { isolation: isolate; }
.stage-smoke { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: .55; }
main.stage-smoke-scene { position: relative; }
main > .stage-smoke { position: fixed; }
.stage-smoke i {
  position: absolute; display: block; width: 80vw; height: 65vh; border-radius: 50%; filter: blur(64px);
  background: radial-gradient(ellipse at center, rgba(170,178,190,.12), rgba(105,112,126,.06) 35%, transparent 72%);
  animation: stage-haze-drift 32s ease-in-out infinite alternate;
}
.stage-smoke i:nth-child(1) { left: -25%; top: 8%; }
.stage-smoke i:nth-child(2) { right: -30%; top: 35%; animation-duration: 41s; animation-delay: -16s; }
.stage-smoke i:nth-child(3) { left: 12%; bottom: -25%; background: radial-gradient(ellipse at center, rgba(145,32,48,.10), transparent 70%); animation-duration: 47s; animation-delay: -24s; }
/* This photograph is scenery, below the haze and foreground headings. */
.home-stage.stage-smoke-scene .home-stage-image { z-index: -2; }
@keyframes stage-haze-drift {
  from { transform: translate3d(-3vw, 2vh, 0) scale(.95); }
  to { transform: translate3d(8vw, -5vh, 0) scale(1.12); }
}
@media (max-width: 760px) {
  .stage-smoke { opacity: .45; }
  .stage-smoke i { width: 120vw; filter: blur(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-smoke i { animation: none; }
}