/* ============================================================================
   The page backdrop.

   IT PAINTS THE VIEWPORT, NOT THE CONTENT. The first version set a background
   on each section. A section is only as tall as what is inside it, so an empty
   Referrals pane, or any zoomed-out window, left the backdrop stopping
   halfway down the screen with bare ground under it. A fixed full-viewport
   layer cannot be out-run by a short page or a large window — this is what
   Hyperliquid does, and it is the only shape that holds.

   WHY `body::before` AT z-index -1 IS VISIBLE. `body`'s own background
   propagates to the root canvas, and the canvas is painted before every
   element — including negative z-index ones. So the layer sits above the flat
   ground and below all content. Nothing needs a wrapper element.

   WHERE IT SHOWS. `.has-backdrop` is set on <body> by showSection()
   (ui_interactions.js) from the RESOLVED section name. The trade page never
   gets it: it fills its viewport edge to edge, and the two places a backdrop
   could show through are the chart and the ticket, neither of which may sit
   on a gradient.

   WHAT PROTECTS THE NUMBERS. Every card, pane, table and header on these
   pages paints an OPAQUE surface (--card-bg / --secondary / --panel-sunken),
   so the backdrop is only ever visible in the page margins and the 14px
   gutters. No figure is read against it. If a future card is given a
   translucent background, this rule stops being safe.

   THE SCRIM. Re-measured against the current artwork, whose rings carry real
   contrast: its brightest painted point is #1B618C, and --text-muted
   (#94A3B8) against that is 2.61:1 — far under the 4.5:1 floor, and the page
   head prints muted text directly on the ground. A flat 60% wash of
   --background pulls that point to #1A3B57, measured at 4.53:1 for muted and
   7.83:1 for --text-secondary.
   The wash costs ring visibility and still leaves plenty: measured peak-to-
   trough luma across the ring band is 9.8 at 60%, against 2.8 for the
   previous artwork at 50% — three and a half times more visible than what
   shipped, not less. 50% on THIS image reads 4.11:1 and is not allowed.
   RE-MEASURE ON EVERY NEW IMAGE. The percentage is a property of the
   artwork, not a constant.
   ========================================================================= */

@media (min-width: 992px) {
  body.has-backdrop::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Decoration only. It must never eat a click meant for the page. */
    pointer-events: none;

    /* Fallback first: a browser without color-mix() takes this line, which is
       the same value written out — --background (#192234) at 50%. */
    background-image:
      linear-gradient(rgba(25, 34, 52, 0.6), rgba(25, 34, 52, 0.6)),
      url('img/backdrop.webp?v=20260821-rings2');
    background-image:
      linear-gradient(
        color-mix(in srgb, var(--background) 60%, transparent),
        color-mix(in srgb, var(--background) 60%, transparent)),
      url('img/backdrop.webp?v=20260821-rings2');

    background-repeat: no-repeat;
    background-position: center top;
    /* `cover` on a fixed layer is sized to the viewport, so the artwork
       re-fits on resize and zoom instead of tiling or ending. */
    background-size: cover;
  }
}

/* A full-viewport image behind scrolling content is the exact thing the
   reduced-motion guidance names. Dropped to the flat ground. */
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  body.has-backdrop::before { background-image: none; }
}

/* Decoration is the first thing to go when someone asks for contrast. */
@media (min-width: 992px) and (prefers-contrast: more) {
  body.has-backdrop::before { background-image: none; }
}

/* round 11 (issue 10): the desktop v2 pages share the trade page's plain
   ground — the rings stay for the phone face only. */
@media (min-width: 992px) {
  body.v2.has-backdrop::before { display: none; }
}