/* =========================================================
   Section seams
   A seam takes up no space and has no
   text: it lays one soft colour blend across the join, reaching up into
   the bottom of the section above and down into the top of the section
   below, so scrolling reads as one continuous move instead of a cut.

   Markup:  <div class="seam" aria-hidden="true"
                 style="--from:<colour above>;--to:<colour below>">
   Optional: --up / --down (how far the blend reaches each way, default
   --reach) and --mid (the colour right on the join, default halfway).
   The blend sits inside each section's padding, so keep --up/--down
   smaller than the padding of the neighbouring section.
   ========================================================= */
.seam {
  --reach: clamp(40px, calc(6 * var(--vw)), 64px);
  --up: var(--reach);
  --down: var(--reach);
  --mid: color-mix(in oklab, var(--from), var(--to));
  position: relative;
  z-index: 2;
  height: 0;
  pointer-events: none;
}
.seam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--up) * -1);
  height: calc(var(--up) + var(--down));
  /* Eased (smoothstep) fade in from the section above to the join, then out
     into the section below, so there is no visible start or end line */
  background: linear-gradient(
    to bottom,
    transparent 0,
    color-mix(in oklab, var(--mid) 16%, transparent) calc(var(--up) * 0.25),
    color-mix(in oklab, var(--mid) 50%, transparent) calc(var(--up) * 0.5),
    color-mix(in oklab, var(--mid) 84%, transparent) calc(var(--up) * 0.75),
    var(--mid) var(--up),
    color-mix(in oklab, var(--mid) 84%, transparent) calc(var(--up) + var(--down) * 0.25),
    color-mix(in oklab, var(--mid) 50%, transparent) calc(var(--up) + var(--down) * 0.5),
    color-mix(in oklab, var(--mid) 16%, transparent) calc(var(--up) + var(--down) * 0.75),
    transparent 100%
  );
}