/* ============================================================
   SPOTLIGHT GLOW BORDERS — vanilla port of spotlight-card.tsx
   Tracks cursor in viewport space via background-attachment:fixed
   Orange theme (--base:30) for X Design Enterprise
   ============================================================ */

/* ── Core CSS variables applied to every [data-glow] ──────── */
[data-glow] {
  /* Color tuning — orange family */
  --base:              30;
  --spread:            220;
  --saturation:        100;
  --lightness:         62;
  --bg-spot-opacity:   0.10;
  --border-spot-opacity: 0.85;
  --border-light-opacity: 0.35;

  /* Geometry */
  --radius:      14;
  --border:      1.5;
  --size:        260;
  --outer:       1;

  /* Derived tokens */
  --border-size:    calc(var(--border, 2) * 1px);
  --spotlight-size: calc(var(--size, 150) * 1px);
  --hue:            calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));

  /* Fallback backdrop when no hover yet */
  --backdrop:     rgba(255,255,255,0.015);
  --backup-border: rgba(255,255,255,0.08);

  /* Spotlight fill on card background */
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size)
    at calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
    hsl(
      var(--hue, 30)
      calc(var(--saturation, 100) * 1%)
      calc(var(--lightness, 62) * 1%)
      / var(--bg-spot-opacity, 0.10)
    ),
    transparent
  );
  background-color:   var(--backdrop, transparent);
  background-size:
    calc(100% + 2 * var(--border-size))
    calc(100% + 2 * var(--border-size));
  background-position: 50% 50%;
  background-attachment: fixed;   /* keeps gradient in viewport coords */

  border: var(--border-size) solid var(--backup-border);
  position: relative;
  touch-action: none;
  overflow: visible;
}

/* ── ::before  — colored hue glow on the border ───────────── */
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius) * 1px);
  background-attachment: fixed;
  background-size:
    calc(100% + 2 * var(--border-size))
    calc(100% + 2 * var(--border-size));
  background-repeat:   no-repeat;
  background-position: 50% 50%;

  /* Clip: show only the border strip, not the fill */
  -webkit-mask:
    linear-gradient(#000, #000),
    linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;

  mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75)
    at calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
    hsl(
      var(--hue, 30)
      calc(var(--saturation, 100) * 1%)
      calc(var(--lightness, 50) * 1%)
      / var(--border-spot-opacity, 0.85)
    ),
    transparent 100%
  );
  filter: brightness(2.2);
  z-index: 1;
}

/* ── ::after — crisp white inner edge highlight ───────────── */
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.45) calc(var(--spotlight-size) * 0.45)
    at calc(var(--x, -9999) * 1px) calc(var(--y, -9999) * 1px),
    hsl(0 100% 100% / var(--border-light-opacity, 0.35)),
    transparent 100%
  );
  z-index: 2;
}

/* ── Nested [data-glow] — ambient outer bloom ─────────────── */
[data-glow] > [data-glow-inner] {
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--radius) * 1px);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
  border: none;
  z-index: 0;
}

[data-glow] > [data-glow-inner]::before {
  inset: -10px;
  border-width: 10px;
}

/* ── Per-element radius overrides ─────────────────────────── */
.svc-ed__item[data-glow]        { --radius: 0;  --border: 0; }
.pricing-card[data-glow]        { --radius: 22; --border: 1.5; --size: 340; }
.contact-card[data-glow]        { --radius: 16; --border: 1.5; }
.paquete-item[data-glow]        { --radius: 14; --border: 1.5; }
.sector-item[data-glow]         { --radius: 999; --border: 1; --size: 180; }

/* Service list: just the separator line glows, no background fill */
.svc-ed__item[data-glow] {
  --bg-spot-opacity: 0.05;
  --border-spot-opacity: 0.7;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.svc-ed__item[data-glow]::before,
.svc-ed__item[data-glow]::after {
  border-radius: 0;
  inset: auto;
  bottom: -1px;
  left: 0;
  right: 0;
  top: auto;
  height: 1px;
  border: none;
  -webkit-mask: none;
  mask: none;
  background-size: 100% 1px;
  background-position: 0% 50%;
}
.svc-ed__item[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.6) 1px
    at calc(var(--x, -9999) * 1px) 0px,
    hsl(var(--hue, 30) 100% 62% / 0.9),
    transparent 100%
  );
  filter: brightness(1.8);
}
.svc-ed__item[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.3) 1px
    at calc(var(--x, -9999) * 1px) 0px,
    rgba(255,255,255,0.5),
    transparent 100%
  );
}

/* ── Reduced motion: keep border, kill glow ───────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-glow] {
    background-image: none !important;
  }
  [data-glow]::before,
  [data-glow]::after {
    display: none !important;
  }
}