/* =============================================
   Background sweep -- generic scroll-triggered color wipe
   Pair with assets/js/bg-sweep.js; add `data-bg-sweep` to any
   section. A different color sweeps across the section's
   background (above the CSS background, below the content)
   when the section scrolls into view.

   Color:     data-bg-sweep="blush"  -> var(--color-blush)
              (defaults to --color-blush when left empty)
   Direction: data-bg-sweep-dir="left|right|up|down" (default left)
   Duration:  data-bg-sweep-duration="1.1" (seconds, default 1.1)
   ============================================= */

[data-bg-sweep] {
  position: relative;
  isolation: isolate; /* contain the sweep layer's stacking context */
}

[data-bg-sweep]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1; /* above the section's own background, below its content */
  background-color: var(--bg-sweep-color, var(--color-blush));
  /* Start hidden off the leading edge; JS sets the axis/sign per direction. */
  transform: translateX(var(--bg-sweep-from-x, -101%))
    translateY(var(--bg-sweep-from-y, 0));
  will-change: transform;
  transition: transform var(--bg-sweep-duration, 1.1s) var(--ease-spring);
}

[data-bg-sweep].bg-sweep--in::before {
  transform: translateX(0) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-bg-sweep]::before {
    transition: none;
  }
}