/* A few clouds share the masthead's space, never its pointer target. */
.studio-sky { position: relative; isolation: isolate; }
.studio-sky .studio-masthead { position: relative; z-index: var(--sky-layer-type); }
.studio-cloud { position: absolute; pointer-events: none; user-select: none; z-index: var(--sky-layer-back); }
.studio-cloud img { display: block; width: 100%; height: auto; pointer-events: none; }
.studio-cloud--back {
  width: var(--sky-back-width); left: var(--sky-back-left); top: var(--sky-back-top);
  opacity: var(--sky-back-opacity);
  transform: translate(calc(var(--sky-progress) * var(--sky-scroll-back)), calc(var(--sky-progress) * var(--sky-scroll-rise)));
}
.studio-cloud--distant {
  width: var(--sky-distant-width); left: var(--sky-distant-left); top: var(--sky-distant-top);
  opacity: var(--sky-distant-opacity);
  transform: translate(calc(var(--sky-progress) * var(--sky-scroll-back)), 0) scaleX(-1);
}
.studio-cloud--front {
  width: var(--sky-front-width); left: var(--sky-front-left); top: var(--sky-front-top);
  opacity: var(--sky-front-opacity); z-index: var(--sky-layer-front);
  transform: translate(calc(var(--sky-progress) * var(--sky-scroll-front)), calc(var(--sky-progress) * var(--sky-scroll-rise)));
}
.studio-cloud img { animation: sky-drift-back var(--sky-drift-time) var(--sky-drift-ease) infinite alternate both; animation-play-state: paused; }
.studio-cloud--front img { animation-name: sky-drift-front; animation-duration: var(--sky-front-time); }
.is-sky-drifting .studio-cloud img { animation-play-state: running; }
@keyframes sky-drift-back { from { transform: translateX(0); } to { transform: translateX(var(--sky-idle-back)); } }
@keyframes sky-drift-front { from { transform: translateX(0); } to { transform: translateX(var(--sky-idle-front)); } }
.is-motion-paused .studio-cloud img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .studio-cloud, .studio-cloud img { animation: none !important; transform: none; }
}