/* The clouds: fixed behind the whole page, drawn by bg.js at a quarter of the resolution and scaled up smooth.
   Nothing shows until the first frame (.on). Wherever text lies on them, a veil of the page's own colour (--cloud-veil)
   keeps it at AA: behind the header, the hero's words and everything after the hero. */

.bg {
  /* The header's foot and the hero's, on screen: bg.js keeps them there as the page scrolls */
  --bg-top: 0px;
  --bg-edge: 100vh;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-cv {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
}
.bg.on .bg-cv { opacity: 1; }
/* The veil behind the header, easing off below it, and after the hero. That comes in softly over the hero's last stretch,
   so the drawing's hint sits under it too */
.bg.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) var(--cloud-veil), transparent) var(--bg-top), transparent calc(var(--bg-top) + var(--space-10)),
    transparent calc(var(--bg-edge) - 4 * var(--space-10)), color-mix(in srgb, var(--bg) var(--cloud-veil), transparent) calc(var(--bg-edge) - var(--space-10)));
}
/* The soft shade behind the hero's words, from the start side and gone before the drawing; where the words stack above
   the drawing, from the top. It scrolls away with them. Over the hero's last stretch it gives way to the veil as that comes
   in, so the two never lie doubled at the hero's foot and the clouds run on past it without a seam */
.bg.on ~ main .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, color-mix(in srgb, var(--bg) var(--cloud-veil), transparent) 46%, transparent 72%);
  mask-image: linear-gradient(var(--bg) calc(100% - 4 * var(--space-10)), color-mix(in srgb, var(--bg) 80%, transparent) calc(100% - 2.5 * var(--space-10)), transparent calc(100% - var(--space-10)));
}
.bg.on ~ main .hero:dir(rtl)::before { transform: scaleX(-1); }
@media (width < 900px) {
  .bg.on ~ main .hero::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) var(--cloud-veil), transparent) 50%, transparent 75%); }
  .bg.on ~ main .hero:dir(rtl)::before { transform: none; }
}
.bg.on .bg-cv, .bg.on::after, .bg.on ~ main .hero::before { animation: bg-in var(--dur-slower) var(--ease) backwards; }
@keyframes bg-in { from { opacity: 0; } }