/* Ambient wash: a soft, slowly breathing colour field behind a hero. A vertical blush gradient, three big
   radial blobs drifting on long, unequal loops, and a faint 7px dot grid, all faded out toward the bottom
   by a mask. No JS, no filter: blur. The softness is the radial gradient's own fade to transparent (the
   source dropped a 70px blur because it cost a ~700px repaint layer per blob on every frame of the drift).

   Use: put <div class="aw" aria-hidden="true"><i></i><i></i><i></i></div> as the first child of a
   position: relative section (give the section overflow: hidden); content after it needs position: relative
   (or z-index) to sit on top.

   Measured from the source (Decimals, hero ambient on the subpages):
   base    linear 180deg: cream / 26% tint / 48% tint at 56% / 26% tint at 82% / cream (tint #f4c9be)
   mask    opaque to 58%, transparent by 94%
   dots    1px dots every 7px, rgba(77,70,56,.11), whole layer at opacity .16
   blobs   46vw circles, each a radial gradient that is clear by 62-66% of its radius:
           1 left 8% top 12%, rgba(217,120,110,.2), 26s: (0,0) scale 1 -> (14vw, 8vh) scale 1.15
           2 right 4% top 26%, rgba(244,201,190,.72), 34s: scale 1.1 -> (-16vw, -6vh) scale .92
           3 left 30% top 42%, rgba(217,120,110,.15), 40s: scale .95 -> (10vw, -10vh) scale 1.12
           all ease-in-out, infinite alternate.
   Eases are literals: var() is ignored for a keyframe's timing function. */

.aw {
  --aw-base: #ede8e1;
  --aw-tint: #f4c9be;
  --aw-blob-1: rgba(217, 120, 110, 0.2);
  --aw-blob-2: rgba(244, 201, 190, 0.72);
  --aw-blob-3: rgba(217, 120, 110, 0.15);
  --aw-size: 46vw;
  --aw-dot: rgba(77, 70, 56, 0.11);
  --aw-dot-gap: 7px;
  --aw-dot-opacity: 0.16;
  --aw-fade-from: 58%;
  --aw-fade-to: 94%;
  --aw-dur-1: 26s;
  --aw-dur-2: 34s;
  --aw-dur-3: 40s;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--aw-fade-from), transparent var(--aw-fade-to));
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--aw-fade-from), transparent var(--aw-fade-to));
  background: var(--aw-base);
  background: linear-gradient(
    180deg,
    var(--aw-base) 0%,
    color-mix(in srgb, var(--aw-tint) 26%, var(--aw-base)) 30%,
    color-mix(in srgb, var(--aw-tint) 48%, var(--aw-base)) 56%,
    color-mix(in srgb, var(--aw-tint) 26%, var(--aw-base)) 82%,
    var(--aw-base) 100%
  );
}

/* a whisper of print: the dot grid living in the wash */
.aw::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--aw-dot) 1px, transparent 1.4px);
  background-size: var(--aw-dot-gap) var(--aw-dot-gap);
  opacity: var(--aw-dot-opacity);
}

.aw > i {
  position: absolute;
  width: var(--aw-size);
  height: var(--aw-size);
  border-radius: 50%;
  will-change: transform;
}
.aw > i:nth-child(1) {
  left: 8%;
  top: 12%;
  background: radial-gradient(circle, var(--aw-blob-1) 0%, transparent 66%);
  animation: aw-drift-1 var(--aw-dur-1) ease-in-out infinite alternate;
}
.aw > i:nth-child(2) {
  right: 4%;
  top: 26%;
  background: radial-gradient(circle, var(--aw-blob-2) 0%, transparent 64%);
  animation: aw-drift-2 var(--aw-dur-2) ease-in-out infinite alternate;
}
.aw > i:nth-child(3) {
  left: 30%;
  top: 42%;
  background: radial-gradient(circle, var(--aw-blob-3) 0%, transparent 62%);
  animation: aw-drift-3 var(--aw-dur-3) ease-in-out infinite alternate;
}
@keyframes aw-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(14vw, 8vh) scale(1.15); }
}
@keyframes aw-drift-2 {
  from { transform: translate(0, 0) scale(1.1); }
  to { transform: translate(-16vw, -6vh) scale(0.92); }
}
@keyframes aw-drift-3 {
  from { transform: translate(0, 0) scale(0.95); }
  to { transform: translate(10vw, -10vh) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .aw > i { animation: none; }
}