/*
 * The backdrop.
 *
 * There used to be weather here: a daylight gradient, a low sun, crepuscular
 * rays and three sheets of drifting fractal cloud. All of it is gone. The
 * palette is paper and ink, and a sky is the one thing paper cannot be.
 *
 * The balloons stayed. They are the idea — a coin that floats because the
 * money under it holds — and losing them would have cost the concept to save
 * a colour. They are drained to grey instead, which leaves the shape and the
 * motion and hands the page's only saturated colour back to the accent.
 */

.sky-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

/* Balloons let go a long way off. They cross the whole viewport, slowly. */
.sky-balloons { position: absolute; inset: 0; }
.sky-balloon {
  position: absolute;
  bottom: -18vh;
  /* Far enough back to be atmosphere rather than an element competing with
     the type it drifts behind. */
  opacity: .16;
  filter: grayscale(1) contrast(1.04);
  animation: sky-rise var(--rise, 60s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.sky-balloon-sway {
  display: block;
  transform-origin: 50% 130%;
  animation: sky-balloon-sway var(--sway, 9s) ease-in-out infinite alternate;
}
.sky-balloon .balloon { width: var(--size, 34px); }

@keyframes sky-rise {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -128vh, 0); }
}
@keyframes sky-balloon-sway {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}

/* The hero's "Pause motion" control stops the drift too. */
body[data-motion='off'] .sky-balloon,
body[data-motion='off'] .sky-balloon-sway { animation-play-state: paused; }

@media (max-width: 620px) {
  .sky-balloon:nth-child(n + 4) { display: none; }
}