:root {
  --steam-color: 255, 255, 255;
  --scene-fallback: #1d4a2c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--scene-fallback);
}

.scene {
  position: fixed;
  inset: 0;
  background: url("../uploads/upload-dd92c9a3d4.jpg") center / cover no-repeat;
}

#leaves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.steam {
  position: absolute;
  left: 48.5%;
  top: 40%;
  width: min(32vmin, 260px);
  height: 38vmin;
  transform: translate(-50%, -88%);
}

.wisp {
  position: absolute;
  bottom: -6px;
  width: 34%;
  aspect-ratio: 0.5;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--steam-color), 0.5),
    rgba(var(--steam-color), 0) 72%);
  filter: blur(7px);
  opacity: 0;
  animation: rise 5s ease-in-out infinite;
}

.wisp:nth-child(1) { left: 6%; }
.wisp:nth-child(2) { left: 33%; animation-delay: 1.7s; animation-duration: 5.8s; }
.wisp:nth-child(3) { left: 60%; animation-delay: 3.2s; animation-duration: 4.6s; }
.wisp:nth-child(4) { left: 20%; animation-delay: 4.4s; animation-duration: 6.2s; }

@keyframes rise {
  0%   { transform: translateY(10%) translateX(0) scaleX(0.7); opacity: 0; }
  18%  { opacity: 0.75; }
  55%  { transform: translateY(-70%) translateX(7%) scaleX(1.2); opacity: 0.45; }
  100% { transform: translateY(-150%) translateX(-5%) scaleX(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wisp { animation: none; opacity: 0.3; transform: translateY(-40%); }
}