/* ── Animated rotating gradient border for product cards (red theme) ──
   Vanilla-CSS port of the rotating conic-gradient border technique
   (no React/Tailwind/shadcn in this project — see preview-services-video.html). */

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes product-card-gradient-rotate {
  from { --gradient-angle: 0deg; }
  to   { --gradient-angle: 360deg; }
}

.product-card {
  --glow-border-width: 2px;
  border: var(--glow-border-width) solid transparent;
  background-image:
    linear-gradient(var(--color-white), var(--color-white)),
    conic-gradient(
      from var(--gradient-angle, 0deg),
      #450a0a 0%,
      #E8000D 37%,
      #ff6b6b 30%,
      #E8000D 33%,
      #450a0a 40%,
      #450a0a 50%,
      #E8000D 77%,
      #ff6b6b 80%,
      #E8000D 83%,
      #450a0a 90%
    );
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  animation: product-card-gradient-rotate 6s linear infinite;
}

.product-card:hover {
  border-color: transparent;
}

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