/* ---------- Running neon round product tiles (owner 2026-10-09: "ทำเอฟเฟคเหมือนไฟนีออนวิ่งตามขอบของสินค้าเมื่อมีการ hover") ----------
   Markup = storefront/partials/neon: inside .sf-pc-frame on a listing tile (.product-card — the art + details
   without the card's stagger padding), or the last child of a .sf-card (best sellers, auctions, buybacks, gacha,
   packs). While the tile is hovered with a mouse, or holds keyboard focus, two beams (cyan + pink) run clockwise
   round its edge; a fresh hover starts the cyan one at the TOP centre again.

   How it is drawn:
   - .sf-neon-ring = a band cut to the tile's own outline (cut corners included) by an evenodd clip-path: the outline,
     then the same outline inset by the band (a cut corner moves along its diagonal: ×0.4142 = √2 − 1).
   - its ::before = a square conic gradient (the two comets) turned by `transform` — a compositor animation, no repaint
     per frame. The individual `scale` applies AFTER `transform`, so the turning pattern is stretched to the tile's
     height: that evens the beam's speed between the long sides and the short top/bottom (speed ratio at the edge
     midpoints = aspect / k²; these tiles are ~1.6–2 tall, k = 1.35).
   - .sf-neon-glow blurs a wider copy for the halo. The blur sits on the PARENT of the clipped ring — on the ring
     itself the clip-path would cut it off. A listing frame isn't clipped, so its halo spreads outside the edge; a
     .sf-card clips itself, so there the halo shows on the inside only.
   - display: none at rest: no layers or paint for the hundreds of tiles a page has. Mouse-only hover (a phone keeps
     :hover on a tapped tile); off under reduced motion / .effects-off.
   Checks: `MSYS_NO_PATHCONV=1 node ai_test/scripts/tile-neon-shot.mjs <tag> [path] [selectors]` (frames at fixed
   points of the lap, on only while hovered, row width unchanged), `node ai_test/scripts/tile-neon-perf.mjs [selector]`
   (hovered = 0 paints / layouts / commits on 2026-10-09). */

.sf-pc-frame { position: relative; }

.sf-neon {
  --neon-w: 2px;     /* the lit band */
  --neon-tr: 0px;    /* the tile's top-right cut */
  --neon-bl: 0px;    /* its bottom-left cut */
  --neon-k: 1.35;
  --neon-lap: 2.6s;
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: none; opacity: 0;
  container-type: size;
  transition: opacity .35s ease, display .35s allow-discrete;
}
.product-card .sf-neon { --neon-tr: var(--cut, 18px); --neon-bl: var(--cut, 18px); }
/* A .sf-card's clip-path is its border box: cover the 1px border too. */
.sf-card > .sf-neon { inset: -1px; --neon-tr: var(--sf-cut, 14px); }

.sf-neon-ring {
  --neon-o: calc(var(--neon-w) * .4142);
  --neon-it: max(var(--neon-tr) + var(--neon-o), var(--neon-w));
  --neon-ib: max(var(--neon-bl) + var(--neon-o), var(--neon-w));
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(evenodd,
    0 0, calc(100% - var(--neon-tr)) 0, 100% var(--neon-tr), 100% 100%, var(--neon-bl) 100%, 0 calc(100% - var(--neon-bl)), 0 0,
    var(--neon-w) var(--neon-w), calc(100% - var(--neon-it)) var(--neon-w), calc(100% - var(--neon-w)) var(--neon-it),
    calc(100% - var(--neon-w)) calc(100% - var(--neon-w)), var(--neon-ib) calc(100% - var(--neon-w)),
    var(--neon-w) calc(100% - var(--neon-ib)), var(--neon-w) var(--neon-w));
}
.sf-neon-ring::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(100cqw + 100cqh); aspect-ratio: 1;   /* ≥ the diagonal, also once stretched by --neon-k */
  translate: -50% -50%;
  scale: 1 var(--neon-k);
  transform: rotate(0turn);
  /* Heads at 100% (top, cyan) and 50% (bottom, pink); each tail trails anticlockwise behind its head. */
  background: conic-gradient(
    #00f0ff00 0 24%,
    #ff2e8800 24%, #ff2e8833 35%, #ff2e88a6 44%, #ff2e88 47.8%, #ffd6e8 49.4%, #ffffff 49.8%, #ff2e8800 50% 74%,
    #00f0ff00 74%, #00f0ff33 85%, #00f0ffa6 94%, #00f0ff 97.8%, #d9fdff 99.4%, #ffffff 99.8%, #00f0ff00 100%);
  animation: sf-neon-spin var(--neon-lap) linear infinite;
}

/* Halo: a wider band reaching a little past the edge, blurred. */
.sf-neon-glow { position: absolute; inset: -4px; filter: blur(6px); }
.sf-neon-glow .sf-neon-ring { --neon-w: 9px; }

/* On: mouse hover, or keyboard focus anywhere in the tile. */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .sf-neon, .sf-card:hover > .sf-neon { display: block; opacity: 1; animation: sf-neon-in .35s ease-out; }
}
.product-card:has(:focus-visible) .sf-neon, .sf-card:is(:focus-visible, :has(:focus-visible)) > .sf-neon { display: block; opacity: 1; animation: sf-neon-in .35s ease-out; }

@keyframes sf-neon-spin { to { transform: rotate(1turn); } }
@keyframes sf-neon-in { from { opacity: 0; } }

/* Motion off (effects.js sets .effects-off from prefers-reduced-motion): no neon — the hover border colour stays. */
.effects-off .sf-neon { display: none !important; }
@media (prefers-reduced-motion: reduce) { .sf-neon { display: none !important; } }