/* Soft liquid silhouettes, fine grain, and a subtle blue/gold glow. */
:root {
  --logo-blue: #0d4594;
  --logo-gold: #e0b010;
  --ambient-canvas: #fff8f0;
}

html { background-color: var(--ambient-canvas); }
body { position: relative; isolation: isolate; background: transparent; }
body > section { background: transparent !important; }
body > section::after, #top::before { display: none; }

.ambient-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ambient-canvas);
  isolation: isolate;
}

.lava-canvas {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  opacity: .72;
  filter: blur(26px);
}

/* A light, uniform wash keeps copy readable without restricting the liquid. */
.ambient-background::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(255 248 240 / .14);
}

.ambient-background::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url('background-grain.svg') repeat;
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: .48;
  filter: contrast(280%);
}

/* Static composition also serves as the no-JavaScript fallback. */
.ambient-blob {
  position: absolute;
  filter: blur(38px);
  opacity: .62;
  border-radius: 50%;
  mix-blend-mode: multiply;
  box-shadow: 0 0 14px rgb(224 176 16 / .16), inset 0 0 12px rgb(255 248 240 / .12);
}
.ambient-gold-top { background: var(--logo-gold); width: 30vw; height: 32vh; left: 9%; top: -6%; }
.ambient-blue-upper { background: var(--logo-blue); width: 32vw; height: 38vh; right: 16%; top: 15%; }
.ambient-blue-left { background: var(--logo-blue); width: 28vw; height: 36vh; left: -4%; top: 38%; }
.ambient-gold-left { background: var(--logo-gold); width: 36vw; height: 32vh; left: 25%; bottom: -9%; }
.ambient-blue-right { background: var(--logo-blue); width: 30vw; height: 27vh; right: -4%; bottom: -2%; }
.ambient-background[data-lava-ready] .ambient-blob { display: none; }

@media (max-width: 700px) {
  .lava-canvas { filter: blur(28px); opacity: .65; }
  .ambient-blob { filter: blur(28px); }
}