/*
  LWL B2 FX
  - Canvas sits between background image/overlay and the lesson content.
  - Scoped to wrapper created by b2-backgrounds.js: [data-lwl-bg] (preferred)
  - Honors prefers-reduced-motion.
*/

/* Ensure wrapper forms a stacking context */
.lwl-b2-bg-active,
[data-lwl-bg] {
  position: relative;
  isolation: isolate;
}

/* Background image is usually ::before in b2-backgrounds.css (keep it lowest) */
.lwl-b2-bg-active::before,
[data-lwl-bg]::before {
  z-index: 0;
}

/* Overlay is usually ::after in b2-backgrounds.css (above image) */
.lwl-b2-bg-active::after,
[data-lwl-bg]::after {
  z-index: 1;
}

/* FX canvas: ABOVE background+overlay, BELOW content */
canvas.lwl-b2-fx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  display: block;
}

/* Force content above canvas */
.lwl-b2-bg-active > *,
[data-lwl-bg] > * {
  position: relative;
  z-index: 3;
}

/* Reduced motion: hide canvas entirely */
@media (prefers-reduced-motion: reduce) {
  canvas.lwl-b2-fx {
    display: none !important;
  }
}