/* Ambient backdrop.

   The page used to be one flat fill. Now it is three cheap layers:
     1. the base colour plus a faint dot grid, on <body> itself;
     2. two fixed sheets of soft colour that drift very slowly.
   Both sheets are pointer-transparent and sit at z-index -1, so they cost one
   composited layer each, never intercept a click, and never move the content.
   Loaded last so it can tint the sticky chrome defined in the other files. */

body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.6px);
  background-size: 26px 26px;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: -18%;                 /* oversized: the drift must never expose an edge */
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* warm field — brand red top-left, amber top-right */
body::before {
  background:
    radial-gradient(42vw 42vw at 14% 6%, var(--glow-1), transparent 68%),
    radial-gradient(38vw 38vw at 88% 20%, var(--glow-2), transparent 66%);
  animation: drift-a 44s ease-in-out infinite alternate;
}

/* cool field — one large wash coming up from the bottom right */
body::after {
  background: radial-gradient(48vw 48vw at 76% 94%, var(--glow-3), transparent 70%);
  animation: drift-b 58s ease-in-out infinite alternate;
}

/* Slow enough to read as light changing in a room rather than as animation. */
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -2%, 0) scale(1.08); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-3.5%, 1.5%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ---------- chrome sits ON the backdrop ----------
   Frosted rather than solid, so the colour behind it stays visible while the
   text on top keeps its contrast. Solid fallback where blur is unsupported. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar, .tabbar {
    background: var(--chrome);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* the login screen is mostly backdrop, so its one card gets real elevation */
.login-card { box-shadow: var(--shadow-lg); }