.liquid-background,
.liquid-background__canvas,
.liquid-background__fallback,
.liquid-background__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.liquid-background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #e7e5db;
  pointer-events: none;
}

body:has(> .liquid-background) {
  isolation: isolate;
  --lower-page-fade: linear-gradient(to bottom, transparent 260px, rgb(255 255 255 / 96%) 600px);
}

.liquid-background__canvas {
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
}

.liquid-background.is-ready .liquid-background__canvas {
  opacity: 1;
  filter: saturate(1.16) contrast(1.035);
}

.liquid-background__fallback {
  transform: scale(1.08);
  background:
    radial-gradient(ellipse at 18% 50%, rgb(103 247 240 / 58%), transparent 42%),
    radial-gradient(ellipse at 46% 46%, rgb(103 247 240 / 36%), transparent 34%),
    radial-gradient(ellipse at 16% 13%, rgb(251 170 190 / 76%), transparent 35%),
    radial-gradient(ellipse at 49% 11%, rgb(251 192 152 / 68%), transparent 34%),
    radial-gradient(ellipse at 75% 19%, rgb(251 170 190 / 48%), transparent 31%),
    radial-gradient(ellipse at 56% 87%, rgb(136 245 203 / 26%), transparent 32%),
    radial-gradient(ellipse at 27% 91%, rgb(250 236 126 / 68%), transparent 35%),
    radial-gradient(ellipse at 63% 94%, rgb(250 236 126 / 44%), transparent 30%),
    radial-gradient(ellipse at 88% 92%, rgb(103 247 240 / 38%), transparent 34%),
    #fdfaf3;
  filter: blur(30px) saturate(1.08) contrast(1.02);
}

body.page-top .liquid-background__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 22% 16% at 10% 9%, #fff 42%, transparent 100%),
    radial-gradient(ellipse 21% 23% at 96% 35%, #fff 42%, transparent 100%),
    radial-gradient(ellipse 24% 15% at 23% 61%, #fff 40%, transparent 100%);
}

.liquid-background.is-ready .liquid-background__fallback {
  opacity: 0;
  transition: opacity 1200ms ease;
}

/* WebGL extensions are unavailable on some iPhones. Keep the fallback moving. */
.liquid-fallback .liquid-background__fallback {
  animation: liquid-fallback-drift 12s ease-in-out infinite alternate;
}
html.liquid-fallback body.page-top .liquid-background__fallback {
  animation-duration: 20s;
}
@keyframes liquid-fallback-drift {
  0% { transform: scale(1.12) translate3d(-2.5%, -1.5%, 0) rotate(-1deg); }
  50% { transform: scale(1.16) translate3d(2%, 1%, 0) rotate(.8deg); }
  100% { transform: scale(1.13) translate3d(-1%, 2.5%, 0) rotate(-.4deg); }
}

.liquid-background__veil {
  background: none;
  pointer-events: none;
}

/* A single continuous veil avoids hard edges between adjacent sections. */
body:has(> .liquid-background) main {
  position: relative;
  isolation: isolate;
}

body:has(> .liquid-background) main::before,
body:has(> .liquid-background) main::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

body:has(> .liquid-background) main::before {
  background: var(--section-white-gradient, var(--lower-page-fade));
}

body.page-top main {
  --section-white-gradient: linear-gradient(to bottom, transparent 1100px, rgb(255 255 255 / 96%) 1900px);
}

/* Soft, staggered colour at the edges of the white reading area.
   The same alpha mask fades these clouds in without a second section boundary. */
body:has(> .liquid-background) main::after {
  --haze-width: clamp(240px, 34vw, 600px);
  background-image:
    radial-gradient(ellipse var(--haze-width) 245px at 102% 18%, rgb(240 169 186 / 36%), rgb(240 169 186 / 16%) 43%, transparent 76%),
    radial-gradient(ellipse var(--haze-width) 225px at -4% 38%, rgb(245 188 161 / 32%), rgb(242 177 190 / 17%) 42%, transparent 77%),
    radial-gradient(ellipse var(--haze-width) 240px at 104% 62%, rgb(88 220 210 / 34%), rgb(148 231 214 / 15%) 45%, transparent 78%),
    radial-gradient(ellipse var(--haze-width) 230px at -3% 85%, rgb(240 169 186 / 34%), rgb(240 169 186 / 14%) 43%, transparent 77%);
  background-size: 100% 1400px;
  background-repeat: repeat-y;
  -webkit-mask-image: var(--section-white-gradient, var(--lower-page-fade));
  mask-image: var(--section-white-gradient, var(--lower-page-fade));
  pointer-events: none;
}

@media (max-width: 600px) {
  body:has(> .liquid-background) {
    --lower-page-fade: linear-gradient(to bottom, transparent 230px, rgb(255 255 255 / 96%) 420px);
  }
  body:has(> .liquid-background) main::after {
    /* Space the four clouds evenly, roughly one per mobile viewport. */
    background-image:
      radial-gradient(ellipse var(--haze-width) 245px at 102% 12.5%, rgb(240 169 186 / 36%), rgb(240 169 186 / 16%) 43%, transparent 76%),
      radial-gradient(ellipse var(--haze-width) 225px at -4% 37.5%, rgb(245 188 161 / 32%), rgb(242 177 190 / 17%) 42%, transparent 77%),
      radial-gradient(ellipse var(--haze-width) 240px at 104% 62.5%, rgb(88 220 210 / 34%), rgb(148 231 214 / 15%) 45%, transparent 78%),
      radial-gradient(ellipse var(--haze-width) 230px at -3% 87.5%, rgb(240 169 186 / 34%), rgb(240 169 186 / 14%) 43%, transparent 77%);
    background-size: 100% max(2400px, 360vh);
    background-size: 100% max(2400px, 360svh);
  }
}

/* First-view reveal: the live liquid field expands out of a soft organic blur once per page load. */
.liquid-background.is-intro .liquid-background__fallback {
  animation: liquid-fallback-intro 1900ms cubic-bezier(.22, 1, .36, 1) both;
}

.liquid-background.is-ready.is-intro .liquid-background__canvas {
  animation: liquid-canvas-intro 1900ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes liquid-fallback-intro {
  0% { opacity: .32; transform: translate(4%, -3%) scale(1.34) skewX(-2deg); filter: blur(56px) saturate(1.28) contrast(1.04); }
  38% { opacity: .82; transform: translate(-2%, 1%) scale(1.2) skewX(1.5deg); }
  72% { opacity: .38; transform: translate(1%, 0) scale(1.12) skewX(-.5deg); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(30px) saturate(1.08) contrast(1.02); }
}

@keyframes liquid-canvas-intro {
  0% { opacity: .12; transform: translate(5%, -4%) scale(1.3) skewX(-2.5deg); filter: blur(48px) saturate(1.3) contrast(1.06); }
  36% { opacity: .88; transform: translate(-2.5%, 1.5%) scale(1.16) skewX(1.8deg); filter: blur(25px) saturate(1.24) contrast(1.05); }
  68% { opacity: 1; transform: translate(.8%, -.5%) scale(1.07) skewX(-.7deg); filter: blur(9px) saturate(1.2) contrast(1.04); }
  100% { opacity: 1; transform: none; filter: saturate(1.16) contrast(1.035); }
}