:root {
  color-scheme: light;
  background: #a7dff3;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  background: #a7dff3;
}

.scene {
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
}

.stage {
  position: relative;
  width: min(100vw, calc(100svh * 1.40625));
  aspect-ratio: 1440 / 1024;
  overflow: hidden;
  background: #a7dff3;
}

.cloud-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 400%;
  animation: clouds-fly 4s linear infinite;
  will-change: transform;
}

.cloud-panel {
  position: relative;
  flex: 0 0 25%;
  height: 100%;
  overflow: hidden;
  background: #a7dff3;
}

.cloud {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.cloud img {
  position: absolute;
  max-width: none;
  user-select: none;
}

.cloud-1 img {
  top: -76.85%;
  left: -48.35%;
  width: 195.68%;
  height: 255.67%;
}

.cloud-2 img {
  top: -135.71%;
  left: -88.6%;
  width: 278.07%;
  height: 370.71%;
}

.cloud-3 img {
  top: -126.76%;
  left: -93.94%;
  width: 288.18%;
  height: 365.49%;
}

.cloud-p1-1 { left: 7.5694%; top: 70.3125%; width: 33.75%; height: 19.8242%; }
.cloud-p1-2 { left: 62.1528%; top: 17.9688%; width: 23.75%; height: 13.6719%; }
.cloud-p1-3 { left: 6.5278%; top: 6.4453%; width: 31.9444%; height: 18.3594%; }
.cloud-p1-4 { left: 66.4583%; top: 56.4453%; width: 22.9167%; height: 13.8672%; }
.cloud-p1-5 { left: 24.4444%; top: 35.6445%; width: 10.5556%; height: 6.4453%; }

.cloud-p2-1 { left: 68.8889%; top: 73.4375%; width: 23.75%; height: 13.6719%; }
.cloud-p2-2 { left: 16.5278%; top: 24.8047%; width: 20%; height: 11.5234%; }
.cloud-p2-3 { left: 22.5%; top: 75.4883%; width: 15.9722%; height: 9.5703%; }
.cloud-p2-4 { left: 62.1528%; top: 38.8672%; width: 21.1111%; height: 12.793%; }

.cloud-p3-1 { left: 68.8889%; top: 75.4883%; width: 23.75%; height: 13.6719%; }
.cloud-p3-2 { left: 40%; top: 50%; width: 20%; height: 11.5234%; }
.cloud-p3-3 { left: 59.0278%; top: 6.4453%; width: 36.9444%; height: 22.3633%; }
.cloud-p3-4 { left: 8.4028%; top: 26.1719%; width: 26.25%; height: 15.918%; }

.hero-position {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 30.7639%;
  aspect-ratio: 443 / 381;
  transform: translate(-50%, -50%);
}

.artwork {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform-origin: center;
  animation: bunny-rock 4s linear infinite;
  will-change: transform;
}

.artwork > img {
  position: absolute;
  top: -23.95%;
  left: -11.06%;
  width: 119.66%;
  height: 139.07%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

@keyframes clouds-fly {
  from { transform: translateX(0); }
  to { transform: translateX(-75%); }
}

@keyframes bunny-rock {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  12.5% {
    transform: rotate(-4.9847deg);
    animation-timing-function: ease-in-out;
  }
  25% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  37.5% {
    transform: rotate(-4.9847deg);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  62.5% {
    transform: rotate(-4.9847deg);
    animation-timing-function: ease-in-out;
  }
  75% { transform: rotate(0deg); }
  75.1% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
  87.675% {
    transform: rotate(-4.9847deg);
    animation-timing-function: ease-in-out;
  }
  100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-track,
  .artwork {
    animation: none;
  }
}