/* 36 · backdrop: the scene behind the shape (module.backdrop). It lives only in the radar's stage (#rw-tilt's box),
   clipped there and faded at its edges, never behind the caption, the plate, the hint or the chips (the user on v58,
   2026-10-13: "going crazy all over the element"). Faint enough that the hexagon reads first, and it drifts very
   slowly so the place feels alive. Two
   layers cross-fade on a change. Each theme colours the same classes its own way: rose line art on blush by day,
   pale ink on wine by night. Strokes: rw-bd-ink (the pen) and rw-bd-hatch (the fine lines); fills: the rest. */

:root{
  --rw-bd-ink:light-dark(#5A2A40,#D4C6D0);
  --rw-bd-hatch:light-dark(#B98A9C,#6E5A6E);
  --rw-bd-fill:light-dark(#FCF1F4,#2A1F2D);
  --rw-bd-shade:light-dark(#EBCCD6,#160C16);
  --rw-bd-accent:light-dark(#E8697F,#B42F4A);
  --rw-bd-glow:light-dark(#FFFFFF,#F4B2BE);
  --rw-bd-sky:light-dark(#F7E6EC,#1A0D15);
  /* the scene's strength is a number, so it is set per theme attribute: light-dark() takes only colours, and a
     number inside it is invalid, which left the scene at full strength */
  --rw-bd-strength:.25;
}
:root[data-rw-theme="light"]{--rw-bd-strength:.18}

/* the stage: the radar's own box holds the scene; the radar stands in front of it */
.rw-engine__tilt{position:relative}
.rw-engine__tilt > .rw-radar{position:relative;z-index:1}
.rw-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:var(--scene-radius,18px);contain:paint}
/* every other part of the panel stands in front of the scene */
.rw-engine > :not(.rw-backdrop){position:relative;z-index:1}

/* the edge fades to nothing on every side, so the scene never ends in a hard line */
.rw-backdrop__layer{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;
  transition:opacity 1.2s var(--e,ease);
  /* a ring, not a disc: the scene lives only round the hexagon, never behind the data (no petals or faces in the
     shape, the user on v79); it fades in from the shape's edge and out again before the frame */
  -webkit-mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,transparent 46%,#000 66%,#000 80%,transparent 100%);
  mask-image:radial-gradient(ellipse 58% 56% at 50% 50%,transparent 46%,#000 66%,#000 80%,transparent 100%)}
.rw-backdrop__layer.is-on{opacity:var(--scene-strength,var(--rw-bd-strength));animation:rw-bd-drift calc(var(--rw-beat,1s) * 48) ease-in-out infinite alternate}
@keyframes rw-bd-drift{from{scale:1;translate:0 0}to{scale:1.045;translate:-1% -1.2%}}

.rw-bd-ink{fill:none;stroke:var(--rw-bd-ink);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.rw-bd-hatch{fill:none;stroke:var(--rw-bd-hatch);stroke-width:.6;stroke-linecap:round;stroke-linejoin:round}
.rw-bd-fill{fill:var(--rw-bd-fill)}
.rw-bd-shade{fill:var(--rw-bd-shade)}
.rw-bd-accent{fill:var(--rw-bd-accent)}
/* a gem scene's tinted parts wear the engine's own gem (#rw-engine sets --gem-0..4; scenes-gem.js, minion 1) */
.rw-bd-gem{fill:var(--gem-2,var(--rw-bd-accent))}
.rw-bd-glow{fill:var(--rw-bd-glow);opacity:.5}
.rw-bd-sky{fill:var(--rw-bd-sky)}
/* a true cut (gem.js) as a stencil: every facet one solid body, its edges cut out as thick lines of the ground; the
   glow, the sheen and the body light dropped (scenes-true.js) */
.rw-sg polygon,.rw-sg path{fill:var(--rw-bd-ink);stroke:var(--rw-bd-sky);stroke-width:1.6;stroke-opacity:1;fill-opacity:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rw-sg--gem polygon,.rw-sg--gem path{fill:var(--gem-2,var(--rw-bd-accent))}
.rw-sg > polygon:first-of-type,.rw-sg polygon[fill^="url"]{display:none}
.rw-sg path{fill:var(--rw-bd-sky);stroke:none}
/* depth (scenes round 5): far pale, mid half, near full ink */
.rw-bd-far{opacity:.42}.rw-bd-mid{opacity:.72}
/* the rift's energy: bolts flicker, sparks blink on their own delays, streams run inward; crisp, no blur */
.rw-bd-bolt{fill:none;stroke:var(--gem-2,var(--rw-bd-accent));stroke-width:1.4;stroke-linejoin:bevel}
.rw-bd-crackle{animation:rw-bd-crackle 1.7s steps(1) infinite}
@keyframes rw-bd-crackle{0%,100%{opacity:1}12%{opacity:.15}20%{opacity:.9}46%{opacity:.3}52%{opacity:1}78%{opacity:.4}}
.rw-bd-spark{animation:rw-bd-spark 2.4s ease-in-out var(--d,0s) infinite}
@keyframes rw-bd-spark{0%,100%{opacity:0}40%,60%{opacity:1}}
/* each spark's delay by class, six steps over 3 s, not an inline style (the CSP rule) */
.rw-bd-spark--1{--d:.5s}.rw-bd-spark--2{--d:1s}.rw-bd-spark--3{--d:1.5s}.rw-bd-spark--4{--d:2s}.rw-bd-spark--5{--d:2.5s}
.rw-bd-stream{stroke-dasharray:6 10;animation:rw-bd-stream 3s linear infinite}
@keyframes rw-bd-stream{to{stroke-dashoffset:-32}}
@media (prefers-reduced-motion:reduce){.rw-bd-crackle,.rw-bd-spark,.rw-bd-stream{animation:none;opacity:1}}
/* the stencil (scenes-cuts.js, round 4): a solid body, its facets cut out of it as thick lines of the ground */
.rw-bd-solid{fill:var(--rw-bd-ink)}
.rw-bd-solid-gem{fill:var(--gem-2,var(--rw-bd-accent))}
.rw-bd-cut{fill:none;stroke:var(--rw-bd-sky);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rw-bd-cut--thin{stroke-width:1.6}
.rw-bd-line{fill:none;stroke:var(--rw-bd-ink);stroke-width:2.4;stroke-linejoin:round}
.rw-bd-line--thin{stroke-width:1.2}

@media (prefers-reduced-motion:reduce){.rw-backdrop__layer{transition:none}.rw-backdrop__layer.is-on{animation:none}}
@media print{.rw-backdrop{display:none}}