/* ═══════════════════════════════════════════
   KENTDEKS — SPOTLIGHT GLOW CARDS
   Vanilla CSS/JS adaptation of GlowCard (spotlight-card.tsx)
   Pointer position tracked by glow-card.js → CSS vars on :root
   background-attachment:fixed = viewport-relative gradient
═══════════════════════════════════════════ */

:root {
  --gx:  0;
  --gxp: 0;
  --gy:  0;
  --gyp: 0;
}

/* ── All glow targets ── */
.svc-card, .hiw-step, .trust-item, .blog-card,
.testi-card, .expert-card, .dc, .gs-card, .stat,
.lc-logo, .an-card, .step-item {
  --glow-hue:  calc(210 + (var(--gxp) * 80));
  --glow-size: 380px;
  position: relative;
  isolation: isolate;
}

/* ─────────────────────────────────────────
   INNER SPOTLIGHT — background radial glow
───────────────────────────────────────── */
.svc-card:not(.svc-card--featured),
.hiw-step, .trust-item, .blog-card,
.testi-card, .expert-card, .dc, .gs-card,
.stat, .lc-logo, .an-card, .step-item {
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 90% 65% / 0.00),
    transparent 100%
  );
  background-attachment: fixed;
}

.svc-card:not(.svc-card--featured):hover,
.hiw-step:hover, .trust-item:hover, .blog-card:hover,
.testi-card:hover, .expert-card:hover, .dc:hover,
.gs-card:hover, .stat:hover, .lc-logo:hover,
.an-card:hover, .step-item:hover {
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 90% 65% / 0.13),
    transparent 100%
  );
  background-attachment: fixed;
}

.svc-card--featured {
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 100% 65% / 0.00),
    transparent 100%
  );
  background-attachment: fixed;
}

.svc-card--featured:hover {
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 100% 65% / 0.20),
    transparent 100%
  );
  background-attachment: fixed;
}

/* ─────────────────────────────────────────
   BORDER GLOW — ::before (mask-composite:intersect)
   Clips radial gradient to the border strip only
───────────────────────────────────────── */
.svc-card::before,
.hiw-step::before,
.trust-item::before,
.blog-card::before,
.testi-card::before,
.expert-card::before,
.dc::before,
.gs-card::before,
.stat::before,
.an-card::before,
.step-item::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background-attachment: fixed;
  background-image: radial-gradient(
    calc(var(--glow-size) * 0.75) calc(var(--glow-size) * 0.75) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 100% 70% / 0.00),
    transparent 100%
  );
  background-size: calc(100% + 3px) calc(100% + 3px);
  background-position: -1.5px -1.5px;
  -webkit-mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-in;
  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 0;
}

.svc-card:hover::before,
.hiw-step:hover::before,
.trust-item:hover::before,
.blog-card:hover::before,
.testi-card:hover::before,
.expert-card:hover::before,
.dc:hover::before,
.gs-card:hover::before,
.stat:hover::before,
.an-card:hover::before,
.step-item:hover::before {
  opacity: 1;
  background-image: radial-gradient(
    calc(var(--glow-size) * 0.75) calc(var(--glow-size) * 0.75) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 100% 70% / 0.90),
    transparent 100%
  );
  background-attachment: fixed;
  background-size: calc(100% + 3px) calc(100% + 3px);
  background-position: -1.5px -1.5px;
  filter: brightness(1.5);
}

/* ─────────────────────────────────────────
   DARK MODE — more visible inner glow
───────────────────────────────────────── */
html.dark .svc-card:not(.svc-card--featured):hover,
html.dark .hiw-step:hover,
html.dark .trust-item:hover,
html.dark .blog-card:hover,
html.dark .testi-card:hover,
html.dark .expert-card:hover,
html.dark .dc:hover,
html.dark .gs-card:hover,
html.dark .stat:hover,
html.dark .an-card:hover,
html.dark .step-item:hover {
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 100% 65% / 0.20),
    transparent 100%
  );
  background-attachment: fixed;
}

html.dark .svc-card--featured:hover {
  background-image: radial-gradient(
    var(--glow-size) var(--glow-size) at
    calc(var(--gx) * 1px) calc(var(--gy) * 1px),
    hsl(var(--glow-hue) 100% 65% / 0.28),
    transparent 100%
  );
  background-attachment: fixed;
}

/* ─────────────────────────────────────────
   CARD CONTENT above gradients
───────────────────────────────────────── */
.svc-card > *:not(:empty),
.hiw-step > *,
.trust-item > *,
.blog-card > *,
.testi-card > *,
.expert-card > *,
.dc > *,
.gs-card > *,
.stat > *,
.an-card > *,
.step-item > * {
  position: relative;
  z-index: 1;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .svc-card, .hiw-step, .trust-item, .blog-card,
  .testi-card, .expert-card, .dc, .gs-card, .stat,
  .an-card, .step-item {
    background-image: none !important;
  }
  .svc-card::before, .hiw-step::before, .trust-item::before,
  .blog-card::before, .testi-card::before, .expert-card::before,
  .dc::before, .gs-card::before, .stat::before,
  .an-card::before, .step-item::before {
    display: none !important;
  }
}