/* ============================================
   SPOTLIGHT CARD — CSS
   Based on React Bits
   ============================================ */

.spotlight-card {
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: rgba(77, 166, 217, 0.12); /* Default Pfafl Cyan Glow */
    position: relative;
}

.spotlight-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit; /* Important: inherits radius from the .service-card component */
}

/* Ensure all content inside the spotlight card stays above the spotlight background */
.spotlight-card > * {
    position: relative;
    z-index: 1;
}

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