/* Keep the approved artwork framing; only the cloud banks travel. */
.sky-port .scene img {
  animation: none;
  transform: scale(1.014);
}

.sky-cloud-window {
  position: absolute;
  top: 78px;
  right: 3%;
  left: 48%;
  height: clamp(96px, 17svh, 150px);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.sky-port [data-scene-motion] {
  position: absolute;
  display: block;
  pointer-events: none;
  width: 240px;
  height: 32px;
  background: rgb(250 254 255 / 90%);
  border-radius: 65% 75% 45% 50%;
  box-shadow: 0 8px 16px rgb(220 241 250 / 25%);
  animation: sky-scene-cloud-drift var(--cloud-duration) linear infinite;
  animation-delay: var(--cloud-delay);
  will-change: transform, opacity;
}

.sky-cloud::before,
.sky-cloud::after {
  content: "";
  position: absolute;
  bottom: 8px;
  background: inherit;
  border-radius: 60% 65% 35% 40%;
  pointer-events: none;
}

.sky-cloud::before { left: 18%; width: 35%; height: 45px; }
.sky-cloud::after { right: 15%; width: 39%; height: 35px; }

.sky-port .sky-cloud-near {
  --cloud-duration: 9s;
  --cloud-delay: -2s;
  --cloud-start: -90px;
  --cloud-end: 110px;
  --cloud-opacity: .58;
  top: 52px;
  left: 16%;
}

.sky-port .sky-cloud-far {
  --cloud-duration: 16s;
  --cloud-delay: -7s;
  --cloud-start: -140px;
  --cloud-end: 140px;
  --cloud-opacity: .38;
  top: 100px;
  left: 46%;
  width: 190px;
  height: 24px;
}

@keyframes sky-scene-cloud-drift {
  0% { transform: translateX(var(--cloud-start)); opacity: 0; }
  12% { opacity: var(--cloud-opacity); }
  88% { opacity: var(--cloud-opacity); }
  100% { transform: translateX(var(--cloud-end)); opacity: 0; }
}

html[data-motion="paused"] .sky-port [data-scene-motion],
html[data-motion="hidden"] .sky-port [data-scene-motion] {
  animation-play-state: paused;
}

@media (max-width: 720px) {
  /* Match the 450px artwork region and keep clouds right of the portrait. */
  .sky-cloud-window {
    top: 84px;
    right: 0;
    left: 58%;
    height: 92px;
  }
  .sky-port [data-scene-motion] { width: 132px; height: 20px; }
  .sky-cloud::before { height: 28px; bottom: 5px; }
  .sky-cloud::after { height: 22px; bottom: 5px; }
  .sky-port .sky-cloud-near {
    --cloud-start: -65px;
    --cloud-end: 65px;
    top: 30px;
    left: 0;
  }
  .sky-port .sky-cloud-far {
    --cloud-start: -85px;
    --cloud-end: 85px;
    top: 70px;
    left: 18%;
    width: 110px;
    height: 16px;
  }
}