/* ---------------------------------------
   PULSING GLOW ANIMATIONS
   
   2️⃣ How to use in your modal

Heading:

<h1 class="pulse-text">This Domain is For Sale</h1>


Price:

<div class="sale-price pulse-text">$12</div>


Button / QR code:

<a href="mailto:you@example.com" class="contact-btn pulse-box">Contact Seller</a>
<canvas id="qr" class="pulse-box"></canvas>


Optional: You can override the glow color per theme:

body[data-theme="pink-glam"] { --glow-color: #ff33cc; }
body[data-theme="pink-glam-rosegold"] { --glow-color: #ff77aa; }
body[data-theme="pink-glam-neonfade"] { --glow-color: #ff33ff; }
body[data-theme="pink-glam-holo"] { --glow-color: #ff66ff; }

--------------------------------------- */
@keyframes pulse-glow {
  0% { text-shadow: 0 0 6px var(--glow-color, #ff33cc), 0 0 10px var(--glow-color, #ff33cc55); }
  50% { text-shadow: 0 0 12px var(--glow-color, #ff33cc), 0 0 20px var(--glow-color, #ff33cc88); }
  100% { text-shadow: 0 0 6px var(--glow-color, #ff33cc), 0 0 10px var(--glow-color, #ff33cc55); }
}

@keyframes pulse-box {
  0% { box-shadow: 0 0 12px var(--glow-color, #ff33cc55), 0 0 20px var(--glow-color, #ff33cc33); }
  50% { box-shadow: 0 0 24px var(--glow-color, #ff33cc88), 0 0 40px var(--glow-color, #ff33cc55); }
  100% { box-shadow: 0 0 12px var(--glow-color, #ff33cc55), 0 0 20px var(--glow-color, #ff33cc33); }
}

/* ---------------------------------------
   APPLY TO ELEMENTS
--------------------------------------- */
.pulse-text {
    animation: pulse-glow 1.8s ease-in-out infinite alternate;
}

.pulse-box {
    animation: pulse-box 1.8s ease-in-out infinite alternate;
}
.sale-modal .domain-name {
    font-size:2.8rem;
    color:#ffffff;
    text-shadow:0 0 12px #ff33cc, 0 0 28px #33aaff;
    animation:pulse-glow 1.6s infinite alternate ease-in-out;
}