/* The sky behind the whole site. */

.sky-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Daylight with a little violet in it, thinning toward the horizon. Fixed,
     so it never scrolls away. */
  /*
   * The sky keeps its tone all the way down: fading it to white made white
   * cloud vanish over the lower half of every page.
   *
   * The sun is a second gradient layer here rather than its own animated
   * element. As a separate layer it was a 1000px radial gradient being scaled
   * every frame, and alongside three tiled cloud sheets the pair pushed the
   * compositor onto a slow path — hiding either one on its own restored 60fps.
   * It is a static warm corner now, and costs nothing.
   */
  background:
    /* Explicitly sized. Without a size this defaults to farthest-corner, which
       from a point off the top-right is most of the diagonal — the warm wash
       covered the whole frame and bleached the cloud out of it. */
    radial-gradient(circle 760px at 90% -6%,
      #fffdf6b8 0%,
      #fff8e875 26%,
      #fdf0d63d 48%,
      #f6f3ee00 100%),
    linear-gradient(180deg,
      #9dbde9 0%,
      #afcaee 18%,
      #c0d5f2 40%,
      #cfdef6 62%,
      #dce7fa 82%,
      #e6eefc 100%);
}

/*
 * Crepuscular rays out of the sun corner.
 *
 * ::after, so they fall in front of the cloud sheets — a ray you can see is a
 * shaft of lit air between you and the cloud, not behind it. Static, like the
 * sun itself: a conic gradient rasterises once and then costs nothing, and the
 * note above records what happened the last time this layer animated.
 *
 * The wedges are deliberately uneven. A perfectly regular fan reads as a
 * starburst graphic; real shafts come in clumps with gaps between them.
 */
.sky-stage::after {
  content: '';
  position: absolute;
  /* Exactly the viewport. The percentages in the gradient and the mask below
     both resolve against this box, so it has to be the same box the sun in the
     background is positioned in — an oversized layer puts the vanishing point
     off-screen and the fan silently stops converging anywhere you can see. */
  inset: 0;
  background: repeating-conic-gradient(from 150deg at 90% -6%,
    #fffdf300 0deg, #fffdf3d9 2.4deg, #fffdf300 5.6deg,
    #fffdf300 9.5deg, #fff6dfb3 12deg, #fff6df00 16.5deg,
    #fffdf300 21deg, #fffdf3cc 22.6deg, #fffdf300 25deg,
    #fffdf300 31deg);
  /* The shafts have to die out before they reach the headline, or the type
     sits in stripes. */
  mask-image: radial-gradient(circle 1320px at 90% -6%,
    #000 0%, #000000cc 26%, #00000059 54%, #00000000 86%);
  opacity: .52;
  pointer-events: none;
}

/*
 * One sheet of cloud. The tile repeats, so scrolling by exactly one tile width
 * lands on a pattern identical to the one it started from: the loop is
 * invisible and needs no duplicated markup.
 *
 * These used to carry a vertical mask to thin the cloud top and bottom. Masking
 * three full-viewport layers that are also animating halved the frame rate, and
 * once the plateau was widened the mask was doing almost nothing anyway. The
 * sheets are simply positioned past the edges instead.
 */
.sky-sheet {
  position: absolute;
  left: 0;
  /* One tile wider than the viewport, so the far edge is never exposed. */
  width: calc(100% + var(--tile));
  background-repeat: repeat;
  background-size: var(--tile) var(--tile);
  animation: cloud-drift var(--dur, 180s) linear infinite;
  will-change: transform;
  opacity: 0;
  transition: opacity 900ms ease-out;
}
/* The sheet is mounted transparent and fades to its own depth. */
.sky-sheet.is-in { opacity: var(--target-opacity, .4); }

/* Only the very edges are feathered; cloud reaches the whole way down. */
@keyframes cloud-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--tile) * -1), 0, 0); }
}

/* 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;
  opacity: .42;
  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 weather too. */
body[data-motion='off'] .sky-sheet,
body[data-motion='off'] .sky-balloon,
body[data-motion='off'] .sky-balloon-sway { animation-play-state: paused; }

@media (max-width: 620px) {
  /* Two sheets carry the depth on a phone; the third is only cost. */
  .sky-sheet--mid { display: none; }
  .sky-balloon:nth-child(n + 4) { display: none; }
}