/* === Backlight · the light with mass =================================
   A red source that lives between the dark field and the elements and
   follows the cursor. Scoped to its section (content rides above at z2,
   the light sits at z0). Token values are the tuned defaults: pane 15 /
   blur 60 / grain 50. Companion runtime: scripts/backlight.js */

/* --- THE LIGHT. Sits under everything in the section. --- */
.szb-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--szb-glow-a);
  transition: opacity 1.6s ease;
  /* clip the glow blobs to the section so the halo can't bleed onto the
     neighbouring sections, even when a section is set overflow:visible. */
  overflow: hidden;
}
.szb-blob {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
  mix-blend-mode: plus-lighter;
}
/* red temperature ladder: white-hot centre, blood body, oxblood spill */
.szb-spill {
  width: 1600px;
  height: 1600px;
  margin: -800px 0 0 -800px;
  background: radial-gradient(circle,
    rgba(150, 35, 30, 0.10) 0%,
    rgba(140, 32, 28, 0.055) 22%,
    rgba(120, 28, 25, 0.03) 40%,
    rgba(96, 24, 22, 0.016) 56%,
    rgba(72, 18, 17, 0.008) 70%,
    rgba(52, 14, 13, 0.004) 82%,
    transparent 100%);
  filter: blur(46px);
}
.szb-body {
  width: 820px;
  height: 820px;
  margin: -410px 0 0 -410px;
  background: radial-gradient(circle at 50% 47%,
    rgba(232, 48, 44, 0.26) 0%,
    rgba(228, 44, 40, 0.17) 16%,
    rgba(222, 40, 38, 0.105) 30%,
    rgba(212, 38, 36, 0.06) 44%,
    rgba(196, 36, 34, 0.032) 57%,
    rgba(176, 32, 31, 0.016) 69%,
    rgba(150, 28, 27, 0.007) 80%,
    transparent 100%);
  filter: blur(32px);
}
.szb-core {
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  background:
    radial-gradient(circle,
      rgba(255, 240, 232, 0.42) 0%,
      rgba(255, 214, 198, 0.30) 7%,
      rgba(255, 160, 138, 0.18) 16%,
      transparent 34%),
    radial-gradient(circle,
      rgba(255, 120, 96, 0.26) 0%,
      rgba(250, 84, 64, 0.16) 24%,
      rgba(240, 60, 48, 0.09) 40%,
      rgba(230, 48, 42, 0.045) 56%,
      rgba(220, 42, 38, 0.02) 72%,
      transparent 100%);
  filter: blur(18px);
}
.szb-streak {
  width: 1300px;
  height: 120px;
  margin: -60px 0 0 -650px;
  background: radial-gradient(ellipse closest-side,
    rgba(255, 170, 150, 0.10) 0%,
    rgba(255, 120, 95, 0.05) 30%,
    rgba(245, 80, 60, 0.022) 55%,
    rgba(235, 60, 48, 0.009) 78%,
    transparent 100%);
  filter: blur(22px);
}
.szb-chroma-w {
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  background: radial-gradient(circle,
    rgba(255, 150, 40, 0.075) 0%,
    rgba(255, 135, 35, 0.04) 30%,
    rgba(250, 120, 30, 0.016) 52%,
    transparent 72%);
  filter: blur(26px);
}
.szb-chroma-g {
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  background: radial-gradient(circle,
    rgba(255, 60, 140, 0.065) 0%,
    rgba(248, 52, 128, 0.034) 30%,
    rgba(238, 45, 115, 0.014) 52%,
    transparent 72%);
  filter: blur(26px);
}

/* dust hanging in the beam, masked to the light */
.szb-dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--szb-glow-a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cg fill='%23f6ffb4'%3E%3Ccircle cx='23' cy='41' r='1'/%3E%3Ccircle cx='131' cy='17' r='0.7'/%3E%3Ccircle cx='201' cy='83' r='1.1'/%3E%3Ccircle cx='77' cy='127' r='0.6'/%3E%3Ccircle cx='249' cy='159' r='0.9'/%3E%3Ccircle cx='39' cy='211' r='0.7'/%3E%3Ccircle cx='163' cy='243' r='1'/%3E%3Ccircle cx='113' cy='187' r='0.5'/%3E%3Ccircle cx='221' cy='259' r='0.6'/%3E%3Ccircle cx='259' cy='37' r='0.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  animation: szb-dust-drift 90s linear infinite;
  filter: hue-rotate(-75deg) saturate(1.5);
  mask-image: radial-gradient(circle 430px at var(--szb-gx) var(--szb-gy), rgba(0, 0, 0, 0.75), transparent 72%);
  -webkit-mask-image: radial-gradient(circle 430px at var(--szb-gx) var(--szb-gy), rgba(0, 0, 0, 0.75), transparent 72%);
}
@keyframes szb-dust-drift {
  to { background-position: -280px 190px; }
}

/* grain over the light, under the elements, kills the banding */
.szb-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

@media (prefers-reduced-motion: reduce) {
  .szb-light { opacity: 0.6; }
}