/* ══════════════════════════════════════════════════════
   Background — Hex warp canvas styles
   ══════════════════════════════════════════════════════ */

/* The theme's own sections set `z-index: 1` per-component so they sit above
   the fixed hex canvas. Skrift-rendered pages (e.g. /account) emit raw content
   into the content partial with no such wrapper, so lift the partial itself —
   otherwise its content sits at the canvas's stacking level and #bg paints
   over it (page appears blank until the canvas is removed). */
[data-sk-partial="content"] {
  position: relative;
  z-index: 1;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Decorative only — never the right-click target. Without this, browsers
     treat the static PNG (under prefers-reduced-motion) as an image and offer
     "Save Image As / Copy Image" on right-click. With pointer-events:none, the
     bg is invisible to pointer interaction and right-clicks fall through to
     the page underneath. mousemove warp still works because the canvas
     listeners are bound to `window`, not to #bg. */
  pointer-events: none;
  user-select: none;
}

/* Reduced motion: paint the pre-rendered hex-warp PNG on the #bg element
   itself (kept in its fixed, inset:0, z-index:0 layer so it sits behind all
   page content). No JS runs in this branch (initHexWarp() returns early). */
@media (prefers-reduced-motion: reduce) {
  #bg {
    /* Canvas elements default to 300x150 intrinsic size; without JS running
       resize(), `inset: 0` alone doesn't stretch the painted box. Force the
       background layer to the viewport so the static image covers it. */
    width: 100vw;
    height: 100vh;
    background-color: #020408;
    background-image: url("/static/site/hex-warp-static.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
}