/* ============================================================
   WINE GLASS — shared card glow ring
   Animated wine→rose→violet gradient border, collision-free.
   Opt in per page:  <script>window.GLOW_SELECTORS='.my-card,.other';</script>
                     <script src="js/glow.js"></script>
   glow.js injects a <span class="glow-ring"> as the first child of each
   matched element (so it never clashes with a card's own ::before/::after).
   The host element just needs a border-radius; position is handled.
   ============================================================ */
.glow-ring{
  position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  pointer-events:none;z-index:4;
  background:linear-gradient(120deg,#f0b8c8,#c4748b 28%,#7a2840 52%,#9d5cf0 78%,#e8b0bf);
  background-size:300% 300%;
  -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.5;
  animation:glow-pan 7s ease infinite;
  transition:opacity .45s var(--ease-out-expo,cubic-bezier(.16,1,.3,1));
}
*:hover > .glow-ring{opacity:1;}
@keyframes glow-pan{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@media(prefers-reduced-motion:reduce){.glow-ring{animation:none;}}
