/* Glow + running snake for the first product card.
   Kept out of <style> so the build tool cannot strip -webkit-mask-* prefixes,
   which iOS Safari needs to size/iterate multiple mask layers correctly. */

.product-card:first-child {
  filter: drop-shadow(0 0 16px rgba(200, 169, 110, 0.4)) drop-shadow(0 0 30px rgba(200, 169, 110, 0.18));
}

.card-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  filter: blur(3px);
  opacity: 0;
  transform: translateZ(2px);
  will-change: transform;
  -webkit-transform: translateZ(2px);
}

.product-card:first-child .card-glow {
  opacity: 1;
}

.glow-static,
.glow-ring {
  display: block;
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--card-mask), var(--card-mask);
  mask-image: var(--card-mask), var(--card-mask);
  -webkit-mask-size: 100% 100%, calc(100% - 8px) auto;
  mask-size: 100% 100%, calc(100% - 8px) auto;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.glow-static {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(200, 169, 110, 0) 52%,
      rgba(200, 169, 110, 0.08) 74%,
      rgba(212, 186, 133, 0.2) 86%,
      rgba(224, 200, 160, 0.38) 93%,
      rgba(224, 200, 160, 0.5) 97%,
      rgba(224, 200, 160, 0.32) 99%)
    , conic-gradient(
      from 0deg,
      rgba(212, 186, 133, 0.14) 0deg,
      rgba(224, 200, 160, 0.2) 90deg,
      rgba(200, 169, 110, 0.14) 180deg,
      rgba(224, 200, 160, 0.2) 270deg,
      rgba(212, 186, 133, 0.14) 360deg
    );
}

.glow-ring {
  background: transparent;
}

.glow-runner {
  display: block;
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(200, 169, 110, 0) 80deg,
    rgba(200, 169, 110, 0.15) 92deg,
    rgba(212, 186, 133, 0.4) 100deg,
    rgba(224, 200, 160, 0.7) 106deg,
    rgba(212, 186, 133, 0.45) 112deg,
    rgba(200, 169, 110, 0.18) 120deg,
    rgba(200, 169, 110, 0) 130deg,
    transparent 160deg,
    transparent 360deg);
  animation: glow-spin 3.6s linear infinite;
}

@keyframes glow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .glow-runner {
    animation: none;
  }

  .card-glow {
    filter: none;
  }
}