/* ============================================================================
   Savior Kiosk — Safe Rendering Profile
   ----------------------------------------------------------------------------
   Inert by default. Everything here is scoped to html[data-render="safe"],
   which the boot probe in kiosk-app.php sets from GPU CAPABILITY (WebGL
   MAX_TEXTURE_SIZE / device memory) — never from a user-agent string.

   Why this exists
   ---------------
   The kiosk composites several large surfaces: a full-width translucent topbar
   and orderbar, full-screen scrims, and a menu grid that reaches ~10,000 CSS px
   tall on a 36-item category at 1080x1920. Each backdrop-filter forces the
   compositor to snapshot the content beneath it into an intermediate GPU
   render surface. Render surfaces are NOT tiled the way scrolling layers are,
   so on a panel whose GPU reports a small MAX_TEXTURE_SIZE these allocations
   are the first thing to fail — and a failed allocation samples uninitialised
   GPU memory, which reads on screen as dense horizontal bands of noise over
   otherwise-sharp text.

   Design rule (premium preserved)
   -------------------------------
   Every blur removed here is replaced by an OPAQUE surface in the same tone,
   darkened just enough to keep the same figure/ground separation the blur was
   providing. Nothing becomes an unstyled box. Layout, type, spacing, radii,
   brand accent and imagery are untouched.
   ========================================================================= */

/* ── 1. Large translucent chrome → opaque panels ───────────────────────────
   These two are the full-width horizontal bands. They carry an almost-opaque
   background already, so the blur was buying very little and costing a render
   surface the width of the panel on every frame. */
html[data-render="safe"] .sk-topbar{
  background:var(--bg-1);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-render="safe"] .sk-orderbar{
  background:var(--bg-1);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ── 2. Full-screen scrims → deeper opaque wash ────────────────────────────
   A scrim exists to push the page back behind a sheet. Opacity does that job
   on its own; the blur only softened it. Raising the alpha keeps the same
   sense of depth without the full-viewport snapshot. */
html[data-render="safe"] .sk-sheet-scrim{
  background:rgba(4,6,10,.92);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-render="safe"] .sk-idle,
html[data-render="safe"] .sk-blocker{
  background:rgba(4,6,10,.95);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ── 3. Per-card blurs → opaque chips ──────────────────────────────────────
   These are small individually but there is one badge per product card, so a
   36-item category asks for 36 separate backdrop snapshots inside the tallest
   scrolling layer on the page. That is the worst place to spend them. */
html[data-render="safe"] .sk-item-badge{
  background:rgba(8,10,14,.94);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-render="safe"] .sk-item-out{
  background:rgba(8,10,14,.90);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-render="safe"] .sk-demo-flag{
  background:rgba(8,10,14,.92);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ── 4. Attract bed: drop the GPU blur, keep the look ──────────────────────
   filter:blur() on a viewport-sized element is a render surface of its own.
   The collage already sits at opacity .4 behind a three-stop scrim, so it
   reads as a soft bed without the blur pass. */
html[data-render="safe"] .sk-attract-collage{
  filter:none;
  opacity:.3;
}

/* ── 5. Stop advertising permanent compositor layers ───────────────────────
   will-change:transform on .sk-btn promotes EVERY button on the screen to its
   own layer for the entire session, to serve a 0.16s :active press. MDN calls
   this out explicitly as a way to exhaust GPU memory. The press still animates
   — the browser just promotes on demand instead of holding the layers open. */
html[data-render="safe"] .sk-btn{will-change:auto}

/* ── 6. content-visibility is deliberately NOT applied here ────────────────
   Skipping off-screen cards looks like an obvious win for a ~10,000px grid, but
   measuring it on this page showed layout count rising from ~24 to ~70 per
   session and layout duration doubling: every card crossing the viewport
   boundary costs a layout pass. That trades GPU raster work for CPU layout work,
   and the fault being fixed here is a GPU/compositing fault — so the trade is
   not obviously in our favour on a weak panel, and the benefit is unmeasured.
   It stays available as a diagnostic toggle ("Skip off-screen cards") so it can
   be judged on the real hardware instead of assumed. Do not promote it into this
   profile without a measurement from the panel itself. */


/* ── 7. Retire the long-running attract animations ─────────────────────────
   26s and 44s infinite transform animations keep a viewport-sized layer being
   re-rasterised for as long as the kiosk sits idle — which, on a kiosk, is most
   of the day. The attract screen still cross-fades in and the touch ring still
   pulses; only the perpetual pans stop. */
html[data-render="safe"] .sk-attract-video,
html[data-render="safe"] .sk-attract-img,
html[data-render="safe"] .sk-attract-collage{
  animation:none;
}

/* ── 8. Soften the largest shadows ─────────────────────────────────────────
   Large-radius shadows are a blur pass too. These keep their shape and colour
   but at a radius the GPU can satisfy from a much smaller surface. */
html[data-render="safe"] .sk-touchstart-face{
  box-shadow:0 14px 34px -14px color-mix(in srgb,var(--accent) 70%, transparent),
             inset 0 2px 0 rgba(255,255,255,.35);
}
html[data-render="safe"] .sk-btn--primary{
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 55%, transparent);
}