/* The same soft cloud banks on the landing, sign-in and import sky.
   Drift and pointer movement have separate transform owners. */
.sky-clouds-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sky-cloud {
  position: absolute;
  display: block;
  width: clamp(200px, 25vw, 420px);
  aspect-ratio: 35 / 11;
  transform: translate3d(0, 0, 0);
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.sky-cloud-drift {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/static/assets/sky-cloud-soft.svg?v=1') center / contain no-repeat;
  animation: sky-cloud-drift 106s linear infinite alternate;
  animation-play-state: paused;
}
.sky-clouds-layer[data-sky-clouds-motion="running"] .sky-cloud-drift {
  animation-play-state: running;
}
.sky-cloud:nth-child(1) { left: 3%; top: 19%; opacity: .85; }
.sky-cloud:nth-child(2) { right: 3%; top: 10%; width: clamp(240px, 29vw, 480px); opacity: .7; }
.sky-cloud:nth-child(3) { left: -5%; top: 65%; width: clamp(190px, 22vw, 350px); opacity: .48; }
.sky-cloud:nth-child(4) { right: -2%; top: 60%; width: clamp(210px, 25vw, 400px); opacity: .56; }
.sky-cloud:nth-child(2) .sky-cloud-drift { animation-duration: 134s; animation-delay: -71s; animation-direction: alternate-reverse; }
.sky-cloud:nth-child(3) .sky-cloud-drift { animation-duration: 118s; animation-delay: -38s; }
.sky-cloud:nth-child(4) .sky-cloud-drift { animation-duration: 149s; animation-delay: -107s; animation-direction: alternate-reverse; }
.sky-clouds-layer--landing .sky-cloud:nth-child(1) { left: 2%; top: 24%; width: clamp(200px, 23vw, 360px); }
.sky-clouds-layer--landing .sky-cloud:nth-child(2) { right: 2%; top: 13%; width: clamp(240px, 28vw, 440px); }
@keyframes sky-cloud-drift {
  from { transform: translate3d(-38px, 0, 0); }
  to { transform: translate3d(58px, -8px, 0); }
}
@media (max-width: 600px) {
  .sky-cloud:nth-child(1) { left: -20%; top: 13%; }
  .sky-cloud:nth-child(2) { right: -25%; top: 29%; }
  .sky-cloud:nth-child(3) { left: -25%; top: 72%; }
  .sky-cloud:nth-child(4) { right: -23%; top: 80%; }
  .sky-clouds-layer--landing .sky-cloud:nth-child(1) { left: -18%; }
  .sky-clouds-layer--landing .sky-cloud:nth-child(2) { right: -24%; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-cloud { transform: none !important; transition: none; }
  .sky-cloud-drift { animation: none; }
}