/* SmartLord card hover "spread fill" system - single source of truth.
   Tag a card-grid CONTAINER with data-spread="light" or data-spread="dark";
   its DIRECT CHILDREN become flood cards (no per-card class needed).
   Rounded-corner safe: the fill uses border-radius:inherit and NO overflow:hidden,
   so cards whose badges extend past the corner are never clipped. The fill is on
   ::after at z-index:-1 (above the card background, below content) so child text
   need not be lifted. Cursor origin --mx/--my is set by /js/spread.js.
   Approved 2026-06-01; see preview/_spread_system_preview.html. Edit here once to
   change the effect everywhere it is tagged. */
[data-spread] > * { position: relative; z-index: 0; }
[data-spread] > *::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, #8C6CFF, #6A9EFF, #48E2D9);
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
[data-spread] > *:hover::after { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }

/* light surfaces: text to dark ink (the -webkit-text-fill-color also rescues
   gradient-clipped headings, which would otherwise vanish on the flood) */
[data-spread="light"] > *:hover :is(h1, h2, h3, h4, h5, h6, p) {
  color: #0e2233; -webkit-text-fill-color: #0e2233;
}
/* dark surfaces: keep text white with a readability shadow */
[data-spread="dark"] > *:hover :is(h1, h2, h3, h4, h5, h6, p) {
  color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

@media (prefers-reduced-motion: reduce) {
  [data-spread] > *::after { transition: none; }
}