/* ── Catalyst Designs — Site Enhancements ───────────────────────────────
 * scroll-progress | particle field | product card hover
 * No changes to scan-hero.css or scan-hero.js.
 * ────────────────────────────────────────────────────────────────── */

/* ── Scroll progress bar ────────────────────────────────────────── */
#cd-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: #00e5cc;
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear, opacity 0.3s ease;
  will-change: width;
}

/* ── Particle canvas ─────────────────────────────────────────────── */
#cd-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* z-index: 5 places canvas above overlay (4) but below content (5,
     later in DOM). mix-blend-mode:screen adds teal light only —
     black pixels on the canvas become transparent.                  */
  z-index: 5;
  mix-blend-mode: screen;
  /* CSS mask fades the canvas at the bottom of the hero             */
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* ── WooCommerce product card hover beam ────────────────────────── */
/* 19 lines (incl. braces) — qualifies for the under-20-line budget  */
@keyframes cd-card-beam {
  from { left: -35%; }
  to   { left: 115%; }
}
.woocommerce ul.products li.product {
  position: relative;
  overflow: hidden;
}
.woocommerce ul.products li.product::after {
  content: '';
  position: absolute;
  top: 0; left: -35%;
  width: 28%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,204,.38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 20;
}
.woocommerce ul.products li.product:hover::after {
  animation: cd-card-beam 0.6s ease-out forwards;
}