/* ============================================================
   PAGE FADE
   A band along the bottom edge of the window: the page's own white rising
   to meet whatever scrolls under it, and a frost that thickens towards the
   edge, so the last inch of content softens rather than being cut by it.

   Built from stacked bands rather than one masked layer. A mask on the
   element carrying backdrop-filter is ignored by the compositor — Chrome
   blurs the whole band and the ramp lands as a hard edge — so each band is
   shorter and blurrier than the one beneath it.

   Eight of them, not four: with four the steps between blurs were visible
   as bars. The blur climbs geometrically (×1.62 a step, 0.5px to 14.6px)
   while the heights fall evenly, which is what makes the steps read as one
   ramp rather than a stack — a doubling of blur looks the same size wherever
   it happens, so even steps have to be multiplicative.
   ============================================================ */
/* Its height is a token because the footer has to clear it: the page ends
   above the band, not under it. */
:root {
  --page-fade: 100px;
}

.page-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--page-fade);
  /* Under the header (40) and well under the modals (100): it frosts the
     page, never the things that sit on top of it. */
  z-index: 30;
  pointer-events: none;
}

.page-fade i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.page-fade i:nth-child(1) {
  height: 100%;
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
}

.page-fade i:nth-child(2) {
  height: 87.5%;
  backdrop-filter: blur(0.8px);
  -webkit-backdrop-filter: blur(0.8px);
}

.page-fade i:nth-child(3) {
  height: 75%;
  backdrop-filter: blur(1.3px);
  -webkit-backdrop-filter: blur(1.3px);
}

.page-fade i:nth-child(4) {
  height: 62.5%;
  backdrop-filter: blur(2.1px);
  -webkit-backdrop-filter: blur(2.1px);
}

.page-fade i:nth-child(5) {
  height: 50%;
  backdrop-filter: blur(3.4px);
  -webkit-backdrop-filter: blur(3.4px);
}

.page-fade i:nth-child(6) {
  height: 37.5%;
  backdrop-filter: blur(5.6px);
  -webkit-backdrop-filter: blur(5.6px);
}

.page-fade i:nth-child(7) {
  height: 25%;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.page-fade i:nth-child(8) {
  height: 12.5%;
  backdrop-filter: blur(14.6px);
  -webkit-backdrop-filter: blur(14.6px);
}

/* The white itself. A straight two-stop gradient leaves a visible shoulder
   where it meets the page, because alpha is not what the eye reads — these
   stops follow an ease instead, dense at the edge and thinning away to
   nothing. */
.page-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    rgba(255, 255, 255, 0.985) 8%,
    rgba(255, 255, 255, 0.95) 17%,
    rgba(255, 255, 255, 0.885) 26%,
    rgba(255, 255, 255, 0.79) 36%,
    rgba(255, 255, 255, 0.66) 46%,
    rgba(255, 255, 255, 0.51) 57%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.2) 79%,
    rgba(255, 255, 255, 0.08) 90%,
    rgba(255, 255, 255, 0) 100%
  );
}

@media (max-width: 768px) {
  :root {
    --page-fade: 72px;
  }
}