/* The generative backdrop: the fog canvas and the curtain over it. Split from the
   page stylesheet because it is a separate responsibility, and together they run
   past the size a single file should reach. */

/* ---------- generative backdrop ---------- */

/* Fixed, so every section below sits in the same air; the veils over it are
   what make the fog recede as the page scrolls. */
.fog {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* The same scene in flat gradients — fog everywhere, a white heart inside a
     wide blue-white skirt, and no black anywhere. It is what a browser without
     WebGL gets, and the canvas covers it completely when there is one. */
  /* circle, not percentages: a percentage radius follows the window and turns
     the source into a wide ellipse on any normal desktop. */
  background:
    radial-gradient(circle 120px at 66% 40%, rgba(255, 255, 255, 0.95), rgba(196, 220, 250, 0.4) 58%, transparent 84%),
    radial-gradient(circle 420px at 66% 40%, rgba(150, 180, 220, 0.35), transparent 78%),
    radial-gradient(circle 980px at 66% 40%, rgba(92, 120, 158, 0.3), transparent 82%),
    linear-gradient(180deg, #10151d 0%, #161e29 38%, #1d2733 62%, #151d27 84%, #121922 100%);
}

.fog canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* A very weak curtain under the type: the fog brightens as it drifts, and the
   text has to hold contrast at its brightest. It belongs to the fixed backdrop
   rather than to the hero — a curtain that ends at the hero's bottom edge
   leaves a hard seam there, whatever shape it is. */
.fog::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* The header always sits on this strip, whatever the fog is doing. It is
       eased out over a long run because the air behind it glows: a ramp that
       ends sooner shows as a level edge drawn across the light. */
    linear-gradient(
      180deg,
      rgba(7, 10, 14, 0.72) 0%,
      rgba(7, 10, 14, 0.5) 48px,
      rgba(7, 10, 14, 0.24) 104px,
      rgba(7, 10, 14, 0.08) 168px,
      rgba(7, 10, 14, 0) 240px
    ),
    /* Sized to end before the light. Anything that reaches across the source
       caps the brightest pixel in the frame — at 29% opacity it stops at two
       thirds of white — and the heart has to be able to reach white. Over the
       headline, which is the only thing this is for, it is 0.75 at the first
       character and 0.29 at the last. */
    radial-gradient(
      100% 84% at -8% 46%,
      rgba(7, 10, 14, 0.88) 0%,
      rgba(7, 10, 14, 0.7) 30%,
      rgba(7, 10, 14, 0.42) 50%,
      rgba(7, 10, 14, 0) 70%
    );
}

/* Between the phone layout and a desktop one the type still runs down the left,
   but the frame is narrow enough that the lit air reaches under the right end of
   the sub-line and the second button. */
@media (min-width: 720px) and (max-width: 1023px) {
  .fog::after {
    background:
      linear-gradient(
        180deg,
        rgba(7, 10, 14, 0.72) 0%,
        rgba(7, 10, 14, 0.5) 48px,
        rgba(7, 10, 14, 0.24) 104px,
        rgba(7, 10, 14, 0.08) 168px,
        rgba(7, 10, 14, 0) 240px
      ),
      /* Across rather than out from a corner: at this width the type's right
         edge and the light are only a couple of hundred pixels apart, and a
         radial wide enough to cover the one always lies over the other, which
         caps the heart and turns it grey. This ends before the light. */
      linear-gradient(
        90deg,
        rgba(7, 10, 14, 0.88) 0%,
        rgba(7, 10, 14, 0.82) 34%,
        rgba(7, 10, 14, 0.5) 52%,
        rgba(7, 10, 14, 0) 64%
      );
  }
}

@media (max-width: 719px) {
  .fog {
    background:
      radial-gradient(circle 72px at 63% 22%, rgba(255, 255, 255, 0.95), rgba(196, 220, 250, 0.4) 58%, transparent 84%),
      radial-gradient(circle 250px at 63% 22%, rgba(150, 180, 220, 0.35), transparent 78%),
      radial-gradient(circle 620px at 63% 22%, rgba(92, 120, 158, 0.3), transparent 82%),
      linear-gradient(180deg, #10151d 0%, #18212c 24%, #1d2733 40%, #151d27 78%, #121922 100%);
  }

  /* A phone stacks the type down the lower half, so this ramps from the clear
     band the light sits in to the cover the headline needs. The steps are even
     on purpose: a jump of half an alpha inside a twelfth of the height draws a
     straight horizontal line across the light. */
  .fog::after {
    background: linear-gradient(
      180deg,
      rgba(7, 10, 14, 0.72) 0%,
      rgba(7, 10, 14, 0.34) 10%,
      rgba(7, 10, 14, 0.04) 22%,
      rgba(7, 10, 14, 0.24) 34%,
      rgba(7, 10, 14, 0.44) 45%,
      rgba(7, 10, 14, 0.64) 55%,
      rgba(7, 10, 14, 0.78) 66%,
      rgba(7, 10, 14, 0.82) 88%,
      /* eased off below the last button so the grass at our feet still reads */
      rgba(7, 10, 14, 0.7) 100%
    );
  }
}