/* ==========================================================================
   BLEND – a trial layer, loaded last
   --------------------------------------------------------------------------
   Where a tinted section meets a white one, the edge between them dissolves
   instead of butting. The tint fades in at the top, holds, and fades out at
   the bottom – and, because the inset layer now puts white down both sides
   too, it fades at the left and right as well. You should not be able to see
   where the change happens, only that it has happened.

   How: the tint moves off the section's own background and onto a pseudo
   element, which is then masked by two gradients at once – one vertical,
   one horizontal – composited so only the overlap of the two is painted.
   That is what gets the fade on all four edges rather than just two.

   TO UNDO: delete the single <link> to this file in partials/head.html and
   run build.py.

   --blend-y / --blend-x are the fade distances; they are the whole dial.
   ========================================================================== */
:root {
  --blend-y: clamp(72px, 9vw, 170px);
  --blend-x: clamp(40px, 6vw, 130px);
}

/* The section stops painting its own ground and becomes the frame for one. */
.section--bone,
.section--mist {
  background: none;
  position: relative;
  isolation: isolate;     /* keeps the tint above <main>, below the content */
}

.section--bone::before,
.section--mist::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: var(--field);

  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--blend-y),
                    #000 calc(100% - var(--blend-y)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--blend-x),
                    #000 calc(100% - var(--blend-x)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--blend-y),
                    #000 calc(100% - var(--blend-y)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--blend-x),
                    #000 calc(100% - var(--blend-x)), transparent 100%);
          mask-composite: intersect;
}

/* Two tinted sections running together would fade out and back in against
   each other for no reason, so the seam between them holds the tint. */
.section--mist + .section--mist::before,
.section--bone + .section--bone::before {
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 calc(100% - var(--blend-y)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--blend-x),
                    #000 calc(100% - var(--blend-x)), transparent 100%);
          mask-image:
    linear-gradient(to bottom, #000 0, #000 calc(100% - var(--blend-y)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--blend-x),
                    #000 calc(100% - var(--blend-x)), transparent 100%);
}

/* A short section would be all fade and never reach its own colour. */
@media (max-width: 700px) {
  :root { --blend-y: 56px; --blend-x: 24px; }
}