/* ============================================================
   Glowing Gold Border Effect — YolyLuxeSpa
   Mouse-tracking conic-gradient border in brand gold tones
   Applied directly to existing card and image wrapper classes
   ============================================================ */

/* ── Glow targets ─────────────────────────────────────────── */
.treatment-card,
.article-card,
.testimonial-card,
.gallery-item,
.asymmetric-img-wrap,
.experience-img-wrap,
.glow-border {
  position: relative;
  /* Subtle always-visible gold border (inset = no layout shift) */
  box-shadow: inset 0 0 0 1px rgba(197, 165, 114, 0.25);
}

/* Spotlight glow layer — follows mouse via --glow-angle, --glow-active */
.treatment-card::before,
.article-card::before,
.testimonial-card::before,
.gallery-item::before,
.asymmetric-img-wrap::before,
.experience-img-wrap::before,
.glow-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--glow-active, 0);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;

  /* Gold spotlight: 80° arc in brand gold tones */
  background: conic-gradient(
    from calc(var(--glow-angle, 0deg) - 40deg),
    transparent          0deg,
    rgba(122, 92, 32, 0) 5deg,
    #7A5C20             25deg,
    #A8884E             40deg,
    #C5A572             55deg,
    #D4B882             68deg,
    #F0E0B8             78deg,
    #FFFFFF             84deg,
    #F0E0B8             90deg,
    #D4B882            102deg,
    #C5A572            115deg,
    #A8884E            130deg,
    rgba(168,136,78, 0) 155deg,
    transparent         180deg,
    transparent         360deg
  );

  /* Mask: reveal only the 1.5px border ring */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
}

/* On direct hover: always show glow fully */
.treatment-card:hover::before,
.article-card:hover::before,
.testimonial-card:hover::before,
.gallery-item:hover::before,
.asymmetric-img-wrap:hover::before,
.experience-img-wrap:hover::before,
.glow-border:hover::before {
  opacity: 1;
}

/* Thicker ring for pure image wrappers (no content inside) */
.gallery-item::before,
.asymmetric-img-wrap::before,
.experience-img-wrap::before {
  padding: 1px;
}