/* ===== CURSOR SPOTLIGHT EFFECT ===== */
/* A subtle radial gradient that follows the cursor, creating a "spotlight" effect */

/* Spotlight container - covers entire viewport */
.cursor-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cursor-spotlight.active {
    opacity: 1;
}

/* The actual spotlight gradient - follows cursor */
.cursor-spotlight-gradient {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    will-change: left, top;
}

/* ===== THEME-SPECIFIC SPOTLIGHT COLORS ===== */

/* Neon Tech - Vibrant cyan/blue glow */
[data-theme="neon-tech"] .cursor-spotlight-gradient {
    background: radial-gradient(circle,
            rgba(0, 212, 255, 0.08) 0%,
            rgba(0, 71, 255, 0.04) 30%,
            rgba(139, 92, 246, 0.02) 50%,
            transparent 70%);
}

/* Luxury - Warm, subtle gold glow */
[data-theme="luxury"] .cursor-spotlight-gradient {
    background: radial-gradient(circle,
            rgba(201, 169, 98, 0.06) 0%,
            rgba(232, 220, 196, 0.03) 30%,
            rgba(139, 115, 85, 0.015) 50%,
            transparent 70%);
}

/* Nature - Soft, organic green glow */
[data-theme="nature"] .cursor-spotlight-gradient {
    background: radial-gradient(circle,
            rgba(74, 124, 89, 0.05) 0%,
            rgba(139, 154, 109, 0.025) 30%,
            rgba(196, 167, 125, 0.015) 50%,
            transparent 70%);
}

/* Brutalist - Very subtle black shadow (inverted spotlight) */
[data-theme="brutalist"] .cursor-spotlight-gradient {
    background: radial-gradient(circle,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.01) 40%,
            transparent 60%);
}

/* Corporate - Clean, professional blue glow */
[data-theme="corporate"] .cursor-spotlight-gradient {
    background: radial-gradient(circle,
            rgba(37, 99, 235, 0.04) 0%,
            rgba(14, 165, 233, 0.02) 30%,
            rgba(99, 102, 241, 0.01) 50%,
            transparent 70%);
}

/* ===== CARD-SPECIFIC SPOTLIGHT ===== */
/* Enhanced glow when hovering over interactive elements */

.card,
.service-card,
.pricing-card,
.step-card,
.testimonial-card,
.portfolio-card,
.faq-item {
    position: relative;
    overflow: hidden;
}

/* Card inner spotlight - more intense, localized glow */
.card::before,
.service-card::before,
.pricing-card::before,
.step-card::before,
.testimonial-card::before,
.portfolio-card::before,
.faq-item::before {
    content: '';
    position: absolute;
    top: var(--spotlight-y, 50%);
    left: var(--spotlight-x, 50%);
    width: 400px;
    height: 400px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.card:hover::before,
.service-card:hover::before,
.pricing-card:hover::before,
.step-card:hover::before,
.testimonial-card:hover::before,
.portfolio-card:hover::before,
.faq-item:hover::before {
    opacity: 1;
}

/* Ensure card content stays above the spotlight */
.card>*,
.service-card>*,
.pricing-card>*,
.step-card>*,
.testimonial-card>*,
.portfolio-card>*,
.faq-item>* {
    position: relative;
    z-index: 1;
}

/* ===== THEME-SPECIFIC CARD SPOTLIGHTS ===== */

/* Neon Tech */
[data-theme="neon-tech"] .card::before,
[data-theme="neon-tech"] .service-card::before,
[data-theme="neon-tech"] .pricing-card::before,
[data-theme="neon-tech"] .step-card::before,
[data-theme="neon-tech"] .testimonial-card::before,
[data-theme="neon-tech"] .portfolio-card::before,
[data-theme="neon-tech"] .faq-item::before {
    background: radial-gradient(circle,
            rgba(0, 212, 255, 0.15) 0%,
            rgba(0, 71, 255, 0.08) 30%,
            transparent 60%);
}

/* Luxury */
[data-theme="luxury"] .card::before,
[data-theme="luxury"] .service-card::before,
[data-theme="luxury"] .pricing-card::before,
[data-theme="luxury"] .step-card::before,
[data-theme="luxury"] .testimonial-card::before,
[data-theme="luxury"] .portfolio-card::before,
[data-theme="luxury"] .faq-item::before {
    background: radial-gradient(circle,
            rgba(201, 169, 98, 0.12) 0%,
            rgba(232, 220, 196, 0.06) 30%,
            transparent 60%);
}

/* Nature */
[data-theme="nature"] .card::before,
[data-theme="nature"] .service-card::before,
[data-theme="nature"] .pricing-card::before,
[data-theme="nature"] .step-card::before,
[data-theme="nature"] .testimonial-card::before,
[data-theme="nature"] .portfolio-card::before,
[data-theme="nature"] .faq-item::before {
    background: radial-gradient(circle,
            rgba(74, 124, 89, 0.1) 0%,
            rgba(139, 154, 109, 0.05) 30%,
            transparent 60%);
}

/* Brutalist - Minimal, sharp */
[data-theme="brutalist"] .card::before,
[data-theme="brutalist"] .service-card::before,
[data-theme="brutalist"] .pricing-card::before,
[data-theme="brutalist"] .step-card::before,
[data-theme="brutalist"] .testimonial-card::before,
[data-theme="brutalist"] .portfolio-card::before,
[data-theme="brutalist"] .faq-item::before {
    background: radial-gradient(circle,
            rgba(255, 0, 0, 0.04) 0%,
            rgba(0, 0, 255, 0.02) 40%,
            transparent 60%);
}

/* Corporate */
[data-theme="corporate"] .card::before,
[data-theme="corporate"] .service-card::before,
[data-theme="corporate"] .pricing-card::before,
[data-theme="corporate"] .step-card::before,
[data-theme="corporate"] .testimonial-card::before,
[data-theme="corporate"] .portfolio-card::before,
[data-theme="corporate"] .faq-item::before {
    background: radial-gradient(circle,
            rgba(37, 99, 235, 0.08) 0%,
            rgba(14, 165, 233, 0.04) 30%,
            transparent 60%);
}

/* ===== SECTION SPOTLIGHT ENHANCEMENT ===== */
/* Subtle ambient glow on sections as cursor moves through */

section {
    position: relative;
}

/* ===== PERFORMANCE & ACCESSIBILITY ===== */

/* Disable on mobile/touch devices for performance */
@media (hover: none) and (pointer: coarse) {
    .cursor-spotlight {
        display: none !important;
    }

    .card::before,
    .service-card::before,
    .pricing-card::before,
    .step-card::before,
    .testimonial-card::before,
    .portfolio-card::before,
    .faq-item::before {
        display: none !important;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cursor-spotlight-gradient {
        transition: none;
    }

    .card::before,
    .service-card::before,
    .pricing-card::before,
    .step-card::before,
    .testimonial-card::before,
    .portfolio-card::before,
    .faq-item::before {
        transition: none;
    }
}

/* Smaller spotlight on narrow screens */
@media (max-width: 768px) {
    .cursor-spotlight-gradient {
        width: 500px;
        height: 500px;
    }
}