/* ============================================
   Hover Border Gradient — Vanilla CSS Port
   Rotating gradient border that appears on hover.
   Uses CSS @property for animation (Chrome 85+, Safari 15.4+, Firefox 128+).
   Graceful fallback: static gradient on unsupported browsers.
   Applied to buttons, cards, gallery items, and interactive elements.
   ============================================ */

/* Register --border-angle as animatable (CSS Houdini) */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Positioning context for the pseudo-element */
.btn,
.product-card,
.gallery-item,
.why-card,
.social-link,
.about-photo-illustration {
  position: relative;
}

/* Gradient border overlay — masked to show only a border ring */
.btn::before,
.product-card::before,
.gallery-item::before,
.why-card::before,
.social-link::before,
.back-to-top::before,
.about-photo-illustration::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--border-angle),
    var(--accent) 0%,
    rgba(255, 255, 255, 0.6) 25%,
    var(--accent-light) 50%,
    rgba(255, 255, 255, 0.6) 75%,
    var(--accent) 100%
  );
  /* Mask-composite: show gradient only in the padding (border) area */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: borderGradientRotate 3s linear infinite;
  pointer-events: none;
  filter: blur(1px);
  z-index: 2;
}

/* Show gradient border on hover */
.btn:hover::before,
.product-card:hover::before,
.gallery-item:hover::before,
.why-card:hover::before,
.social-link:hover::before,
.back-to-top:hover::before,
.about-photo-illustration:hover::before {
  opacity: 1;
}

/* Featured product card — always show gradient border at lower opacity */
.product-card.featured::before {
  opacity: 0.5;
}

.product-card.featured:hover::before {
  opacity: 1;
}

@keyframes borderGradientRotate {
  to {
    --border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .product-card::before,
  .gallery-item::before,
  .why-card::before,
  .social-link::before,
  .back-to-top::before,
  .about-photo-illustration::before {
    animation: none;
  }
}