/* ═══════════════════════════════════════════════════════════════
   AlphaCore Digital Labs — Magic Bento Effect (Vanilla JS port)
   Applies to: .glass-card, .service-card, .portfolio-card, .testimonial-card
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties injected by JS ──────────────────── */
.glass-card,
.service-card,
.portfolio-card,
.testimonial-card {
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-intensity: 0;
    --glow-radius: 400px;
    --glow-color: 132, 0, 255;
}

/* ── Border Glow via ::after ──────────────────────────────── */
.glass-card::after,
.service-card::after,
.portfolio-card::after,
.testimonial-card::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    background: radial-gradient(
        var(--glow-radius) circle at var(--glow-x) var(--glow-y),
        rgba(var(--glow-color), calc(var(--glow-intensity) * 0.9)) 0%,
        rgba(var(--glow-color), calc(var(--glow-intensity) * 0.5)) 30%,
        transparent 60%
    );
    border-radius: inherit;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* ── Inner glow on hover ──────────────────────────────────── */
.glass-card:hover,
.service-card:hover,
.portfolio-card:hover,
.testimonial-card:hover {
    box-shadow:
        0 4px 20px rgba(46, 24, 78, 0.4),
        0 0 30px rgba(132, 0, 255, 0.15);
}

/* ── Magic Particle ───────────────────────────────────────── */
.magic-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(132, 0, 255, 1);
    box-shadow: 0 0 6px rgba(132, 0, 255, 0.6);
    pointer-events: none;
    z-index: 100;
}

/* ── Global Spotlight (appended to body) ─────────────────── */
.magic-global-spotlight {
    position: fixed;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    will-change: left, top, opacity;
    background: radial-gradient(circle,
        rgba(132, 0, 255, 0.18) 0%,
        rgba(132, 0, 255, 0.10) 15%,
        rgba(132, 0, 255, 0.05) 30%,
        rgba(132, 0, 255, 0.02) 50%,
        rgba(132, 0, 255, 0.01) 65%,
        transparent 70%
    );
    transition: opacity 0.3s ease;
}

/* ── Click Ripple ─────────────────────────────────────────── */
.magic-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    background: radial-gradient(
        circle,
        rgba(132, 0, 255, 0.4) 0%,
        rgba(132, 0, 255, 0.2) 30%,
        transparent 70%
    );
    transform: scale(0);
    opacity: 1;
}