/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — SIGNAL FX
   Reusable card-edge hover toolkit. Pairs with assets/js/card-fx.js.
   ----------------------------------------------------------------------------
   Apply to ANY card by adding a data attribute:

       <div class="bc-proof-card" data-card-fx="glint">…</div>

   Effects:  glint · halo · draw · tally · scan · line
   Optional: data-card-fx-theme="light|dark"  (else auto-detected from bg)

   • Size-agnostic — paths are generated from each card's measured box + radius.
   • Brand only — Signal Yellow→Orange gradient, four colours, no new hues.
   ============================================================================ */

.cardfx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;                 /* above card surface; strokes hug the edge */
  overflow: visible;          /* let the glow bleed past the border */
}
.cardfx svg { position: absolute; inset: 0; overflow: visible; }
.cardfx path { fill: none; }

/* glow lives on the wrapper (CSS filter = reliable cross-browser, no shift) */
.cardfx--glint, .cardfx--tally, .cardfx--draw, .cardfx--line {
  filter: drop-shadow(0 0 4px rgba(240, 73, 35, 0.55));
}

/* ── 01 · CORNER GLINTS — TL + BR arcs draw in / ease out ───────────────── */
.cardfx--glint path {
  stroke: url(#cardfxGrad); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.cardfx-host:hover .cardfx--glint path {
  animation: cardfxGlint 3.4s cubic-bezier(.5, 0, .2, 1) infinite;
}
.cardfx-host:hover .cardfx--glint .cardfx-br { animation-delay: 0.12s; }
@keyframes cardfxGlint {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  14%  { opacity: 1; }
  46%  { stroke-dashoffset: 0; opacity: 1; }
  66%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ── 02 · CURSOR HALO — soft light follows the pointer (hover only) ──────── */
.cardfx--halo {
  overflow: hidden; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(circle var(--cardfx-halo-r, 210px) at var(--mx, 50%) var(--my, 50%),
    rgba(255, 216, 0, 0.42), rgba(240, 73, 35, 0.30) 34%, rgba(240, 73, 35, 0) 68%);
  mix-blend-mode: screen;
}
.cardfx--halo.is-light {
  background: radial-gradient(circle var(--cardfx-halo-r, 210px) at var(--mx, 50%) var(--my, 50%),
    rgba(240, 73, 35, 0.52), rgba(240, 73, 35, 0.30) 26%, rgba(13, 10, 7, 0.20) 50%, rgba(13, 10, 7, 0) 72%);
  mix-blend-mode: multiply;
}
.cardfx-host:hover .cardfx--halo { opacity: 1; }

/* ── 03 · RANDOM DRAW-ON — full ring drawn from a random vertex (JS) ─────── */
.cardfx--draw path {
  stroke: url(#cardfxGrad); stroke-width: 2; stroke-linecap: round; opacity: 0;
}

/* ── 04 · CORNER TALLY — rounded brackets sitting ON the edges ───────────── */
.cardfx--tally path {
  stroke: var(--wr-orange, #F04923); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.cardfx-host:hover .cardfx--tally path {
  animation: cardfxTally 3.2s cubic-bezier(.5, 0, .2, 1) infinite;
}
.cardfx-host:hover .cardfx--tally .cardfx-c2 { animation-delay: 0.07s; }
.cardfx-host:hover .cardfx--tally .cardfx-c3 { animation-delay: 0.14s; }
.cardfx-host:hover .cardfx--tally .cardfx-c4 { animation-delay: 0.21s; }
@keyframes cardfxTally {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  16%  { opacity: 1; }
  44%  { stroke-dashoffset: 0; opacity: 1; }
  78%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ── 05 · SCAN SWEEP — one glowing pass top→bottom, then a held pause ───── */
.cardfx--scan { overflow: hidden; }
.cardfx--scan .cardfx-bar {
  position: absolute; left: -10%; width: 120%; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, #FFD800 20%, #F04923 80%, transparent);
  box-shadow: 0 0 14px 4px rgba(240, 73, 35, 0.55); transform: translateY(-20px);
}
.cardfx--scan .cardfx-wash {
  position: absolute; left: 0; width: 100%; height: 80px; top: -80px;
  background: linear-gradient(180deg, transparent, rgba(240, 73, 35, 0.16));
}
.cardfx-host:hover .cardfx--scan .cardfx-bar,
.cardfx-host:hover .cardfx--scan .cardfx-wash {
  animation: cardfxScan 4.6s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes cardfxScan {
  0%   { transform: translateY(-14px); opacity: 1; }
  36%  { opacity: 1; }
  39%  { transform: translateY(calc(var(--cardfx-h, 320px) + 6px)); opacity: 0; }
  100% { transform: translateY(calc(var(--cardfx-h, 320px) + 6px)); opacity: 0; }
}

/* ── 06 · MAGNETIC LINE — signal segment rides the border to cursor (JS) ── */
.cardfx--line path {
  stroke: url(#cardfxGrad); stroke-width: 2.4; stroke-linecap: round;
  opacity: 0; transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cardfx-host:hover .cardfx--glint path,
  .cardfx-host:hover .cardfx--tally path,
  .cardfx-host:hover .cardfx--scan .cardfx-bar,
  .cardfx-host:hover .cardfx--scan .cardfx-wash { animation: none !important; }
}