/* Keep the existing [parallax] frame outside this layered scene. */
.cultesc-meadow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #9aa9ad;
}

.cultesc-meadow__sky {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--meadow-position, 50% 50%);
}

.cultesc-meadow__balloon {
  position: absolute;
  left: var(--balloon-left, 55%);
  top: var(--balloon-top, 18%);
  width: var(--balloon-width, 44%);
  transform: translateX(-50%);
  pointer-events: none;
}

.cultesc-meadow__balloon img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform-origin: 50% 32%;
  animation: cultesc-meadow-float 34s ease-in-out infinite;
  animation-play-state: paused;
}

.cultesc-meadow[data-motion-active="true"] .cultesc-meadow__balloon img {
  animation-play-state: running;
}

/* Translation is relative to the balloon, keeping its drift within the frame. */
@keyframes cultesc-meadow-float {
  0%, 100% { transform: translate(3%, 2%) rotate(-.6deg); }
  25% { transform: translate(-2%, -3%) rotate(.35deg); }
  55% { transform: translate(-3%, 1%) rotate(.8deg); }
  80% { transform: translate(2%, -2%) rotate(-.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cultesc-meadow__balloon img {
    animation: none;
    transform: none;
  }
}