/* A passing wisp on the scenery, below the portrait, copy and controls.
   The ambient layer takes over when the hero scenery is intentionally hidden. */
.hero-world::after,
#ambient-world::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 10% -24% -4%;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 23% 12% at 18% 58%, #e3eddd80 0%, #cfdfd538 36%, transparent 74%),
    radial-gradient(ellipse 31% 9% at 45% 48%, #dae9db70 0%, #bed3c62b 42%, transparent 76%),
    radial-gradient(ellipse 18% 16% at 66% 57%, #dee4cb68 0%, #d2ddc52b 32%, transparent 73%),
    radial-gradient(ellipse 28% 7% at 84% 40%, #d2e4d45c 0%, transparent 72%);
  transform-origin: 40% 55%;
  animation: shoshi-mist-pass 34s ease-in-out infinite;
}

/* Only the active scenery needs an animation. */
#ambient-world::after { animation-play-state: paused; }
.ambient-on #ambient-world::after { animation-play-state: running; }
.ambient-on .hero-world::after { animation-play-state: paused; }

@keyframes shoshi-mist-pass {
  0%, 6% { opacity: 0; transform: translate(-14%, 7%) scale(1, .92) rotate(-5deg); }
  12% { opacity: .08; }
  19% { opacity: .17; transform: translate(1%, -2%) scale(1.08, 1.04) rotate(1deg); }
  27% { opacity: .065; }
  35%, 100% { opacity: 0; transform: translate(21%, -10%) scale(1.14, .88) rotate(6deg); }
}

.page-hidden .hero-world::after,
.page-hidden #ambient-world::after {
  animation-play-state: paused;
  visibility: hidden;
}

.motion-off .hero-world::after,
.motion-off #ambient-world::after {
  animation: none;
  opacity: 0;
}

@media (max-width: 760px) {
  .hero-world::after,
  #ambient-world::after { background-size: 125% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-world::after,
  #ambient-world::after { content: none; animation: none; }
}