/* The page ground.
 *
 * The first redesign went flat on purpose: the old site set a drifting digit field behind its
 * text and it was hard to read. A flat graphite page reads well and looks unfinished, so this
 * gives the ground some depth without putting anything busy behind a sentence. Cards and rows
 * keep their solid panel colour, so decoration only ever shows in the gaps, behind the page
 * headings, and through the header and tab bar.
 *
 * Every layer is static: a lime and teal glow from the top, fine grain, and the digit texture the
 * operator chose. Design v3 keeps all of it; the glass and the card depth that used to live here
 * moved into ui.css with the rest of the surface system, and this file only adds the fallback for
 * a browser that cannot blur.
 */

html {
  background: #0d1012;
}
body {
  background: transparent;
  isolation: isolate;
}

/* Light: a lime wash rising from the top left where the page heading sits, a cooler teal from
   the top right, and a faint return at the bottom so long pages do not end on dead black. The
   grain keeps the gradients from banding on cheap phone screens. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(900px 560px at 6% -10%, rgba(198, 240, 0, 0.2), rgba(198, 240, 0, 0) 64%),
    radial-gradient(760px 520px at 104% -4%, rgba(56, 196, 172, 0.14), rgba(56, 196, 172, 0) 62%),
    radial-gradient(1200px 720px at 50% 118%, rgba(198, 240, 0, 0.07), rgba(198, 240, 0, 0) 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* Texture: the brand's digit field, but still, faint and pushed to the top corners. The old site
   animated it behind every sentence; here it never moves and fades out before the content. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* -2, not -1: ui.css draws a still fade of the ground at -1 under the reading column (.main::before) */
  z-index: -2;
  pointer-events: none;
  background-image: url("/assets/bg-digits.svg");
  background-size: 480px 480px;
  opacity: 0.24;
  -webkit-mask-image: radial-gradient(110% 75% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 85%),
                      radial-gradient(85% 60% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.3) 50%, transparent 78%);
          mask-image: radial-gradient(110% 75% at 100% 0%, #000 0%, rgba(0, 0, 0, 0.45) 55%, transparent 85%),
                      radial-gradient(85% 60% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.3) 50%, transparent 78%);
}

/* Where the browser cannot blur, the glass chrome would let the digits read through the header
   and the tab labels, so both go opaque. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.top {
    background: #0d1012;
  }
  nav.tabbar {
    background: #111416;
  }
  .scrim {
    background: rgba(4, 6, 7, 0.78);
  }
}