/* Skiper UI skiper90 "Gradient hover cards" — vanilla port (Mena,
   2026-07-14), applied to the template's content cards on all pages.
   A colorful gradient blob follows the cursor inside each card,
   blooming 3× on hover (same 400px blob / 200px mask / 135° gradient
   as the original). Runs through CSS variables set by
   gradient-hover.js — no card markup is touched. */

.hvo-glow {
  position: relative;
  /* stacking context so the blob can sit above the card's background
     but below ALL of its content (::before at z-index -1) */
  z-index: 0;
  overflow: hidden;
}

/* Lime-surfaced cards (brand green) turn muddy-olive under the blob —
   the glow only reads well on white/dark surfaces, so skip it there. */
.hvo-glow.bg-green::before,
.hvo-glow.is-top::before {
  content: none;
}

.hvo-glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--gx, -999px);
  top: var(--gy, -999px);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(var(--gsc, 1));
  background: linear-gradient(135deg, #3bc4f2, #7a69f9, #f26378, #f5833f);
  -webkit-mask-image: radial-gradient(200px circle at center, #fff, transparent);
  mask-image: radial-gradient(200px circle at center, #fff, transparent);
  opacity: var(--go, 0);
  transition: opacity 0.3s ease, transform 0.5s ease;
  pointer-events: none;
  will-change: transform, opacity;
}