/* ==========================================================================
   HOST — the backdrop.
   A flat dark field reads as "unfinished" on a big screen. This builds depth
   out of layered CSS only: no images, no requests, no extra bytes over the
   wire, and it scales to any TV.

   Four layers, back to front:
     1. deep radial wash            (colour, corner-weighted)
     2. diagonal hatch              (fine texture, catches the light)
     3. slow-drifting colour blobs  (movement without distraction)
     4. grain                       (already in base.css, sits on top)
   ========================================================================== */

/* Layers 1 + 2 go on <html>, not on a pseudo-element.
   Painting order: the root's background comes first, THEN negative-z-index
   children, THEN in-flow backgrounds. So an opaque `body` background would
   bury anything at z-index -1. `body` is therefore transparent and the root
   carries the backdrop. */
html {
  background:
    /* Vignette. A big screen with an evenly lit field has no centre, and the
       eye wanders; pulling the corners down by a few percent is what makes a
       television image look composed rather than merely displayed. */
    radial-gradient(120% 100% at 50% 42%, transparent 38%, rgba(0, 0, 0, .55) 100%),
    /* fine 45-degree hatch, barely there but it kills the flatness */
    repeating-linear-gradient(
      45deg,
      rgba(255, 240, 220, .013) 0px,
      rgba(255, 240, 220, .013) 1px,
      transparent 1px,
      transparent 7px
    ),
    /* ONE light source, warm, high and slightly off-centre - a lamp in the
       room rather than three coloured spotlights from three directions. The
       old version washed pink from the top left, gold from the top right and
       violet from below, which is why the screen read as decorated instead of
       lit. */
    radial-gradient(90% 70% at 62% -12%, rgba(255, 176, 92, .13), transparent 68%),
    radial-gradient(70% 50% at 12% 106%, rgba(226, 69, 47, .06), transparent 70%),
    /* base tone, very slightly lifted off the page colour at the top */
    linear-gradient(180deg, #17110d 0%, #0d0b0a 58%, #0a0807 100%);
  background-attachment: fixed;
}

/* Must be see-through or it buries the blobs. */
body { background: transparent !important; }

/* Layer 3: large soft blobs on long, offset drifts. Slow enough to read as
   ambient light rather than animation. */

.bg-blobs {
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .42;
}
/* Two warm blobs and one cool one, well separated, at a fraction of the old
   opacity. Three saturated blobs at .5 opacity is not ambient light, it is a
   lava lamp - and it was tinting every card on top of it a different colour
   depending on where the card happened to sit. */
.bg-blob-1 {
  width: 56vw; height: 56vw;
  left: -12%; top: -8%;
  background: radial-gradient(circle, rgba(255, 158, 76, .20), transparent 68%);
  animation: drift1 34s ease-in-out infinite;
}
.bg-blob-2 {
  width: 44vw; height: 44vw;
  right: -8%; bottom: -6%;
  background: radial-gradient(circle, rgba(226, 69, 47, .16), transparent 68%);
  animation: drift2 44s ease-in-out infinite;
}
/* The single cool note, kept low and far from the other two so it reads as
   depth behind the warm light rather than as a third colour. */
.bg-blob-3 {
  width: 40vw; height: 40vw;
  left: 52%; top: 58%;
  background: radial-gradient(circle, rgba(61, 138, 144, .13), transparent 70%);
  animation: drift3 52s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(7vw, 5vh) scale(1.12); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50%      { transform: translate(-6vw, -7vh) scale(.94); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(.95); }
  50%      { transform: translate(-5vw, 4vh) scale(1.15); }
}

/* The lobby is the screen people stare at longest while waiting, so it gets a
   little more presence. */
#s-lobby { position: relative; }
#s-lobby::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 28% 48%, rgba(255, 176, 92, .09), transparent 72%);
}

/* Blurred blobs are the most expensive thing on the page. Anyone who has asked
   for less motion gets them held still rather than removed - the depth stays,
   the drifting stops. base.css handles the animation kill; this drops the blur
   cost too, which matters on a weak TV browser. */
@media (prefers-reduced-motion: reduce) {
  .bg-blob { filter: blur(80px); opacity: .32; }
}