/* Beating heart on Donate buttons. Colours come from the button (currentColor). */
.has-cvf-heart { display: inline-flex !important; align-items: center; gap: 0.55em; }
.cvf-heart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 1.15em; height: 1.15em; flex: 0 0 auto; line-height: 0;
}
.cvf-heart svg {
  position: relative; z-index: 1; width: 1.05em; height: 1.05em;
  transform-origin: 50% 55%;
  animation: cvf-heart-idle 4.2s ease-in-out 1.2s infinite;
  transition: transform 260ms cubic-bezier(0.34, 1.45, 0.64, 1);
}
/* Soft halo, hidden until hover / focus */
.cvf-heart__halo {
  position: absolute; inset: -0.5em; border-radius: 50%;
  background: currentColor; opacity: 0; transform: scale(0.4);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.34, 1.45, 0.64, 1);
}
.cvf-heart__halo::after {            /* one ripple ring per hover */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; opacity: 0;
}

.has-cvf-heart:hover .cvf-heart svg,
.has-cvf-heart:focus-visible .cvf-heart svg { animation: cvf-heart-beat 0.9s ease-in-out infinite; }
.has-cvf-heart:hover .cvf-heart__halo,
.has-cvf-heart:focus-visible .cvf-heart__halo { opacity: 0.22; transform: scale(1); }
.has-cvf-heart:hover .cvf-heart__halo::after,
.has-cvf-heart:focus-visible .cvf-heart__halo::after { animation: cvf-heart-ripple 1.1s ease-out 1; }
.has-cvf-heart:active .cvf-heart svg { transform: scale(0.88); }

/* Idle: a gentle "lub-dub", then rest */
@keyframes cvf-heart-idle {
  0%, 16%, 100% { transform: scale(1); }
  4%  { transform: scale(1.22); }
  8%  { transform: scale(1.02); }
  12% { transform: scale(1.16); }
}
/* Hover: steady, livelier beat */
@keyframes cvf-heart-beat {
  0%, 45%, 100% { transform: scale(1.12); }
  15% { transform: scale(1.34); }
  30% { transform: scale(1.2); }
}
@keyframes cvf-heart-ripple {
  0%   { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
  .cvf-heart svg, .has-cvf-heart:hover .cvf-heart svg, .has-cvf-heart:focus-visible .cvf-heart svg { animation: none; }
  .cvf-heart__halo::after { animation: none !important; }
  .cvf-heart__halo { transition: opacity 150ms ease; transform: scale(1); }
}

/* Light rippling out from the heart across the button, in time with each beat. */
.has-cvf-heart { position: relative; overflow: hidden; isolation: isolate; }
.cvf-donate-glow {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--cvf-hx, 1.6em); top: var(--cvf-hy, 50%);
  width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%;
}
.cvf-donate-glow::before, .cvf-donate-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.22) 38%, rgba(255,255,255,0) 70%);
  transform: scale(0); opacity: 0;
  animation: cvf-glow-idle 4.2s ease-out 1.2s infinite;
}
.cvf-donate-glow::after { animation-name: cvf-glow-idle-2; }   /* the softer "dub" */

.has-cvf-heart:hover .cvf-donate-glow::before,
.has-cvf-heart:focus-visible .cvf-donate-glow::before { animation: cvf-glow-beat 0.9s ease-out infinite; }
.has-cvf-heart:hover .cvf-donate-glow::after,
.has-cvf-heart:focus-visible .cvf-donate-glow::after { animation: cvf-glow-beat 0.9s ease-out 0.27s infinite; }

/* Starts on the "lub" (4%) and the "dub" (12%) of cvf-heart-idle */
@keyframes cvf-glow-idle {
  0%, 3%   { transform: scale(0.3); opacity: 0; }
  5%       { opacity: 1; }
  26%      { transform: scale(7); opacity: 0; }
  100%     { transform: scale(7); opacity: 0; }
}
@keyframes cvf-glow-idle-2 {
  0%, 11%  { transform: scale(0.3); opacity: 0; }
  13%      { opacity: 0.6; }
  32%      { transform: scale(6); opacity: 0; }
  100%     { transform: scale(6); opacity: 0; }
}
@keyframes cvf-glow-beat {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(6.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cvf-donate-glow::before, .cvf-donate-glow::after { animation: none !important; opacity: 0; }
}