/* Bento glow border — pointer-tracking accent border for product cards.
   Source: bento-glow-border skill. Colors overridden to brand accent red. */

.bento-card {
  position: relative;
  isolation: isolate;
  --glow-active: 0;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-color: var(--color-accent);
  --glow-color-hot: var(--color-accent-strong);
}

.bento-glow {
  position: absolute;
  /* inset: 0 (not a negative inset) so the ring stays inside the card's own
     box — .model-card uses overflow: clip to round the product image
     corners, which would crop any part of this layer sitting outside it. */
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: var(--glow-active);
  transition: opacity 0.2s ease;
}

.bento-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: radial-gradient(
    340px circle at var(--glow-x) var(--glow-y),
    var(--glow-color-hot) 0%,
    var(--glow-color) 26%,
    color-mix(in srgb, var(--glow-color) 25%, transparent) 54%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Note: NOT gated behind prefers-reduced-motion. This glow only moves in
   lockstep with the user's own cursor (1:1, user-initiated) — it is hover
   feedback, not autoplaying or parallax motion, so it stays on even when
   the OS "reduce motion" accessibility setting is active. It is still
   skipped entirely on touch-only devices via the JS pointer-type guard. */