body > .bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-color);
}

.wrap {
  z-index: 1;
}

.bg-stage {
  --wheel-rotation-duration: 64s;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(100vw, calc(100vh * 3000 / 1994));
  aspect-ratio: 3000 / 1994;
  overflow: hidden;
  transform: translateX(-50%);
}

.bg-layer {
  position: absolute;
}

.bg-layer img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.horse-1 {
  width: 5.5%;
  top: 75.1755%;
  left: 0.6333%;
}

.horse-2 {
  width: 4.9%;
  top: 75.1755%;
  left: 5.2%;
}

.horse-3 {
  width: 5.3%;
  top: 75.1755%;
  left: 10.7333%;
}

.horse-4 {
  width: 5%;
  top: 75.1755%;
  left: 16.4%;
}

.horse-5 {
  width: 4.7333%;
  top: 75.1755%;
  left: 20.6333%;
}

.ship {
  width: 25.1667%;
  top: 55%;
  left: 25.1333%;
  --ship-swing-angle: 15deg;
  --ship-swing-duration: 4s;
  transform-origin: 50% 11%;
  animation: shipSwing var(--ship-swing-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  backface-visibility: hidden;
  will-change: transform;
}

.wheel {
  width: 36.6333%;
  top: 34.2026%;
  left: 61.6333%;
  transform-origin: center center;
  animation: wheelRotate var(--wheel-rotation-duration) linear infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.gondola-1 {
  width: 3.7333%;
  top: 30.341%;
  left: 77.9667%;
}

.gondola-2 {
  width: 3.7333%;
  top: 32.0461%;
  left: 71.8%;
}

.gondola-3 {
  width: 3.7333%;
  top: 37.2618%;
  left: 66.2%;
}

.gondola-4 {
  width: 3.7333%;
  top: 44.6339%;
  left: 62.2%;
}

.gondola-5 {
  width: 3.7333%;
  top: 53.4604%;
  left: 59.6667%;
}

.gondola-5-2 {
  width: 3.7333%;
  top: 63.0391%;
  left: 59.3667%;
}

.gondola-6 {
  width: 3.7333%;
  top: 72.1163%;
  left: 61.4333%;
}

.gondola-7 {
  width: 3.7333%;
  top: 80.1906%;
  left: 65.7%;
}

.gondola-8 {
  width: 3.7333%;
  top: 85.7071%;
  left: 71.2%;
}

.gondola-9 {
  width: 3.7333%;
  top: 87.5627%;
  left: 77.9667%;
}

.gondola-10 {
  width: 3.7333%;
  top: 85.7071%;
  left: 84.3667%;
}

.gondola-11 {
  width: 3.7333%;
  top: 80.1906%;
  left: 90.4333%;
}

.gondola-12 {
  width: 3.7333%;
  top: 72.016%;
  left: 94.5333%;
}

.gondola-13 {
  width: 3.4667%;
  top: 63.0391%;
  left: 96.5333%;
}

.gondola-14 {
  width: 3.7333%;
  top: 53.009%;
  left: 96.1333%;
}

.gondola-15 {
  width: 3.7333%;
  top: 44.0321%;
  left: 93.6333%;
}

.gondola-16 {
  width: 3.7333%;
  top: 37.011%;
  left: 89.8667%;
}

.gondola-17 {
  width: 3.7333%;
  top: 32.0461%;
  left: 84.1333%;
}

.gondola-1,
.gondola-2,
.gondola-3,
.gondola-4,
.gondola-5,
.gondola-5-2,
.gondola-6,
.gondola-7,
.gondola-8,
.gondola-9,
.gondola-10,
.gondola-11,
.gondola-12,
.gondola-13,
.gondola-14,
.gondola-15,
.gondola-16,
.gondola-17 {
  transform-origin: var(--wheel-origin-x) var(--wheel-origin-y);
  animation: wheelRotate var(--wheel-rotation-duration) linear infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.gondola-inner {
  animation: gondolaStay var(--wheel-rotation-duration) linear infinite;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

.gondola-1 {
  --wheel-origin-x: 53.1232%;
  --wheel-origin-y: 540.8747%;
}

.gondola-2 {
  --wheel-origin-x: 218.3042%;
  --wheel-origin-y: 511.3094%;
}

.gondola-3 {
  --wheel-origin-x: 368.3055%;
  --wheel-origin-y: 420.8729%;
}

.gondola-4 {
  --wheel-origin-x: 475.4493%;
  --wheel-origin-y: 293.046%;
}

.gondola-5 {
  --wheel-origin-x: 543.3062%;
  --wheel-origin-y: 140.0008%;
}

.gondola-5-2 {
  --wheel-origin-x: 551.342%;
  --wheel-origin-y: -26.087%;
}

.gondola-6 {
  --wheel-origin-x: 495.9861%;
  --wheel-origin-y: -183.4792%;
}

.gondola-7 {
  --wheel-origin-x: 381.6985%;
  --wheel-origin-y: -323.4818%;
}

.gondola-8 {
  --wheel-origin-x: 234.3758%;
  --wheel-origin-y: -419.1339%;
}

.gondola-9 {
  --wheel-origin-x: 53.1232%;
  --wheel-origin-y: -451.3087%;
}

.gondola-10 {
  --wheel-origin-x: -118.3069%;
  --wheel-origin-y: -419.1339%;
}

.gondola-11 {
  --wheel-origin-x: -280.8065%;
  --wheel-origin-y: -323.4818%;
}

.gondola-12 {
  --wheel-origin-x: -390.6289%;
  --wheel-origin-y: -181.7401%;
}

.gondola-13 {
  --wheel-origin-x: -478.3613%;
  --wheel-origin-y: -28.0932%;
}

.gondola-14 {
  --wheel-origin-x: -433.4865%;
  --wheel-origin-y: 147.8277%;
}

.gondola-15 {
  --wheel-origin-x: -366.5216%;
  --wheel-origin-y: 303.4808%;
}

.gondola-16 {
  --wheel-origin-x: -265.6296%;
  --wheel-origin-y: 425.2216%;
}

.gondola-17 {
  --wheel-origin-x: -112.055%;
  --wheel-origin-y: 511.3094%;
}

.Balloon-1 {
  width: 10.5%;
  top: 8%;
  left: 33.8667%;
}

.Balloon-2 {
  width: 3.5667%;
  top: 21.7151%;
  left: 88.2667%;
}

.Balloon-3 {
  width: 5.0667%;
  top: 43.0792%;
  left: 51.1%;
}

.Balloon-4 {
  width: 3.6%;
  top: 72.4173%;
  left: 50.3%;
}

.Balloon-5 {
  width: 5.9%;
  top: 53.661%;
  left: 3.0667%;
}

.Balloon-6 {
  width: 3.6%;
  top: 21.1635%;
  left: 3.6%;
}

.firework {
  transform: scale(0);
  transform-origin: center center;
  opacity: 0;
  animation: fireworkBloom 4s ease-out infinite;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.firework-1 {
  width: 21.4333%;
  top: 16.8004%;
  left: 9.6333%;
  animation-delay: 0s;
}

.firework-2 {
  width: 15%;
  top: 7.6%;
  left: 46.5%;
  animation-delay: -2.2s;
}

.firework-3 {
  width: 12.5%;
  top: 20.5%;
  left: 74.2%;
  animation-delay: -4.4s;
}

.foundation {
  width: 100%;
  top: 50%;
  left: 0%;
}

.Balloon-1,
.Balloon-2,
.Balloon-3,
.Balloon-4,
.Balloon-5,
.Balloon-6 {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.Balloon-1 {
  --balloon-drift-left: -45vw;
  --balloon-drift-right: 65vw;
  --balloon-drift-y: 4%;
  animation: balloonDrift 80s ease-in-out infinite alternate;
}

.Balloon-2 {
  --balloon-float-y: 22%;
  --balloon-float-x: 7%;
  animation: balloonFloat 3.8s ease-in-out -1.2s infinite alternate;
}

.Balloon-3 {
  --balloon-float-y: 17%;
  --balloon-float-x: -8%;
  animation: balloonFloat 4.6s ease-in-out -3.1s infinite alternate;
}

.Balloon-4 {
  --balloon-float-y: 24%;
  --balloon-float-x: 6%;
  animation: balloonFloat 4.1s ease-in-out -0.4s infinite alternate;
}

.Balloon-5 {
  --balloon-float-y: 18%;
  --balloon-float-x: -7%;
  animation: balloonFloat 5s ease-in-out -4.5s infinite alternate;
}

.Balloon-6 {
  --balloon-float-y: 21%;
  --balloon-float-x: 9%;
  animation: balloonFloat 3.9s ease-in-out -2.2s infinite alternate;
}

.horse-1,
.horse-2,
.horse-3,
.horse-4,
.horse-5 {
  --horse-bob-distance: 3.5%;
  --horse-bob-duration: 1.8s;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.horse-1,
.horse-3,
.horse-5 {
  animation: horseBobUp var(--horse-bob-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.horse-2,
.horse-4 {
  animation: horseBobDown var(--horse-bob-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes horseBobUp {
  from {
    transform: translate3d(0, calc(var(--horse-bob-distance) * -1), 0);
  }

  to {
    transform: translate3d(0, var(--horse-bob-distance), 0);
  }
}

@keyframes horseBobDown {
  from {
    transform: translate3d(0, var(--horse-bob-distance), 0);
  }

  to {
    transform: translate3d(0, calc(var(--horse-bob-distance) * -1), 0);
  }
}

@keyframes balloonDrift {
  from {
    transform: translate3d(var(--balloon-drift-right), var(--balloon-drift-y), 0);
  }

  to {
    transform: translate3d(var(--balloon-drift-left), calc(var(--balloon-drift-y) * -1), 0);
  }
}

@keyframes balloonFloat {
  from {
    transform: translate3d(calc(var(--balloon-float-x) * -1), var(--balloon-float-y), 0);
  }

  to {
    transform: translate3d(var(--balloon-float-x), calc(var(--balloon-float-y) * -1), 0);
  }
}

@keyframes fireworkBloom {
  0% {
    opacity: 0;
    transform: scale(0.12);
  }

  8% {
    opacity: 0.9;
    transform: scale(0.38);
  }

  22% {
    opacity: 1;
    transform: scale(1);
  }

  55% {
    opacity: 0;
    transform: scale(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes wheelRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes gondolaStay {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes shipSwing {
  from {
    transform: rotate(calc(var(--ship-swing-angle) * -1));
  }

  to {
    transform: rotate(var(--ship-swing-angle));
  }
}

@keyframes bgStagePan {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(100vw - 100%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-stage,
  .bg-layer,
  .gondola-inner {
    animation: none !important;
    transform: none !important;
  }
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .bg-stage {
    bottom: 0;
    left: 0;
    width: auto;
    height: 100vh;
    height: 100svh;
    transform: translateX(0);
    animation: bgStagePan 48s ease-in-out infinite alternate;
  }
}

@media screen and (min-width: 744px) and (max-width: 1024px) {
  .bg-stage {
    bottom: 0;
    left: 50%;
    width: auto;
    height: min(84vh, 98vw);
    transform: translateX(-50%);
  }

  .Balloon-1 {
    top: 3%;
  }

  .Balloon-2 {
    top: 12%;
  }

  .Balloon-3 {
    top: 30%;
  }

  .Balloon-4 {
    top: 58%;
  }

  .Balloon-5 {
    top: 40%;
  }

  .Balloon-6 {
    top: 12%;
  }

  .firework-1 {
    top: 8%;
  }

  .firework-2 {
    top: 2%;
  }

  .firework-3 {
    top: 10%;
  }
}