/*
 * card-spotlight.css — Aceternity Card Spotlight port (vanilla)
 * Source inspiration: https://ui.aceternity.com/components/card-spotlight
 * Retrieved: 2026-06-10
 * Licence: UNCONFIRMED — do NOT merge to main until Brock clears the licence gate.
 *          See apps/web/assets/aceternity/LICENSE-GATE.md
 *
 * @tokens-required
 *   --bg-surface          (#0A0A0A)
 *   --grad-card-pop       (dark angled gradient)
 *   --grad-card-pop-hover
 *   --hairline-2          (rgba(255,255,255,.1))
 *   --gray-border         (#2A2A2A)
 *   --brand-red           (#FF2D2D)
 *   --red-primary         (#FF1A1A)
 *   --red-glow            (#FF2D2D)
 *   --sns-radius-xl       (10px)
 *   --sns-dur-base        (.2s)
 *   --sns-ease-soft       (cubic-bezier(.2,.8,.4,1))
 *   --brand-red-bright    (#FF3434)  — focus ring
 *
 * Usage:
 *   Add class `card-spotlight` to any card element.
 *   Include card-spotlight.js to enable mouse-tracking.
 *   Works without JS — CSS fallback spotlight sits top-left.
 *
 * Deviations from Aceternity original:
 *   - Purple/white spotlight replaced with SNS crimson radial glow
 *   - framer-motion mouse tracking replaced with pointermove + CSS custom props
 *   - Tailwind classes replaced with SNS token vars
 *   - Added prefers-reduced-motion guard
 *   - Added :focus-visible ring using --brand-red-bright
 */

/* ── Container ────────────────────────────────────────────────────────────── */
.card-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-card-pop);
  border: 1px solid var(--hairline-2, rgba(255,255,255,.1));
  border-radius: var(--sns-radius-xl, 10px);
  transition:
    border-color var(--sns-dur-base, .2s) var(--sns-ease-soft),
    box-shadow   var(--sns-dur-base, .2s) var(--sns-ease-soft),
    transform    var(--sns-dur-base, .2s) var(--sns-ease-soft);
}

.card-spotlight:focus-visible {
  outline: 2px solid var(--brand-red-bright, #FF3434);
  outline-offset: 2px;
}

/* ── Spotlight layer (::before) ───────────────────────────────────────────── */
/*
 * JS sets --spotlight-x / --spotlight-y (percentage) on the element.
 * Falls back to 20% 0% (top-left) when no JS / no pointer device.
 */
.card-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle 280px at
    calc(var(--spotlight-x, 20%) * 1%)
    calc(var(--spotlight-y, 0%) * 1%),
    rgba(255, 45, 45, .18)  0%,
    rgba(255, 26, 26, .10) 35%,
    transparent             70%
  );
  opacity: 0;
  transition: opacity var(--sns-dur-base, .2s) var(--sns-ease-soft);
}

.card-spotlight:hover::before,
.card-spotlight:focus-within::before {
  opacity: 1;
}

/* ── Content layer (must sit above spotlight) ─────────────────────────────── */
.card-spotlight > * {
  position: relative;
  z-index: 1;
}

/* ── Hover lift + border glow ─────────────────────────────────────────────── */
.card-spotlight:hover {
  background: var(--grad-card-pop-hover);
  border-color: rgba(255, 52, 52, .35);
  box-shadow: 0 2px 4px rgba(0,0,0,.55), 0 12px 32px rgba(255, 45, 45, .18);
  transform: translateY(-2px);
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .card-spotlight {
    transition: border-color var(--sns-dur-fast, .15s) linear;
  }
  .card-spotlight:hover {
    transform: none;
    box-shadow: none;
  }
  .card-spotlight::before {
    transition: none;
  }
}