/* ════════════════════════════════════════════════════════════════════
   FX-LIGHT — animations for white/light sections.
   Light-theme counterpart of the dark FX layer (constellation/aurora):
     A. Interactive dot-grid canvas      [data-fx-light] sections
     B. Cursor-following border glow     [data-glow-grid] card grids
     C. H2 underline draw                auto-applied (.h2-underline)
     D. Icon entrance pop                auto-applied (.icon-pop)
   Shared by /, /proof/ and /pob/. Logic in fx-light.js.
   ════════════════════════════════════════════════════════════════════ */

/* A — dot-grid canvas (injected) */
.fxl-canvas { position: absolute; inset: 0; pointer-events: none; }

/* B — border glow ring (injected span; --gx/--gy set per card by JS).
   Same XOR-mask ring technique as the dark pages' border-beam. */
.card-glow { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(13,148,136,0.55), rgba(45,212,191,0.25) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 1; }

/* C — underline draw under section headings (injected after the h2) */
.h2-underline { display: block; width: 64px; height: 3px; margin: 14px auto 0;
  background: linear-gradient(90deg, #0d9488, #2dd4bf); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.h2-underline.drawn { transform: scaleX(1); }

/* D — icon pop-in (class added on viewport entry, staggered via --ipd) */
@keyframes fxlIconPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.icon-pop { animation: fxlIconPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--ipd, 0s); }

@media (prefers-reduced-motion: reduce) {
  .h2-underline { transform: scaleX(1); transition: none; }
  .icon-pop { animation: none; }
  .card-glow { display: none; }
}