/* ----------------------------------------------------------
   Cinematic 3D Card Hover — v1.0
   Opt-in via .cinematic-hover class on any card
   ---------------------------------------------------------- */

:root {
    --card-glow-color:     rgba(59,130,246,0.5);
    --card-glow-blur:      14px;
    --card-glow-intensity: 0.6;
    --card-hover-lift:     4px;
    --card-glow-speed:     0.45s;
}

[data-theme="night"] {
    --card-glow-color:     rgba(139,92,246,0.7);
    --card-glow-intensity: 0.85;
}

/* Base */
.cinematic-hover {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--card-glow-speed) ease,
        box-shadow var(--card-glow-speed) ease;
}

/* Flare sweep layer */
.cinematic-hover::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        transparent 20%,
        var(--card-glow-color) 50%,
        transparent 80%
    );
    opacity: 0;
    filter: blur(var(--card-glow-blur));
    z-index: 0;
    transition: opacity var(--card-glow-speed) ease, transform 0.6s ease;
    transform: translateX(-100%);
    pointer-events: none;
}

/* Outer glow halo */
.cinematic-hover::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid var(--card-glow-color);
    opacity: 0;
    transition: opacity var(--card-glow-speed) ease;
    pointer-events: none;
    z-index: 0;
}

/* Hover state */
.cinematic-hover:hover {
    transform: translateY(calc(-1 * var(--card-hover-lift)));
    box-shadow:
        0 12px 30px rgba(0,0,0,0.12),
        0 0 20px var(--card-glow-color);
    z-index: 2;
}

.cinematic-hover:hover::before {
    opacity: var(--card-glow-intensity);
    transform: translateX(100%);
}

.cinematic-hover:hover::after {
    opacity: 0.4;
}

/* Ensure card content stays above effects */
.cinematic-hover > * {
    position: relative;
    z-index: 1;
}

/* ── Apply to all cinematic card types ────────────── */
.ds-cinematic .cin-service-card,
.ds-cinematic .cin-service-card-v2,
.ds-cinematic .cin-blog-card,
.ds-cinematic .cin-portfolio-card-v2,
.ds-cinematic .cin-package-card,
.ds-cinematic .cin-about-card,
.ds-cinematic .cin-team-card,
.ds-cinematic .cin-metric-card,
.ds-cinematic .cin-testimonial-card,
.ds-cinematic .cin-roadmap-card {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--card-glow-speed) ease,
        box-shadow var(--card-glow-speed) ease,
        border-color var(--card-glow-speed) ease;
}

/* Flare sweep — all cin cards */
.ds-cinematic .cin-service-card::before,
.ds-cinematic .cin-service-card-v2::before,
.ds-cinematic .cin-blog-card::before,
.ds-cinematic .cin-portfolio-card-v2::before,
.ds-cinematic .cin-package-card::before,
.ds-cinematic .cin-about-card::before,
.ds-cinematic .cin-team-card::before,
.ds-cinematic .cin-metric-card::before,
.ds-cinematic .cin-testimonial-card::before,
.ds-cinematic .cin-roadmap-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        transparent 20%,
        var(--card-glow-color) 50%,
        transparent 80%
    );
    opacity: 0;
    filter: blur(var(--card-glow-blur));
    z-index: 0;
    transition: opacity var(--card-glow-speed) ease, transform 0.6s ease;
    transform: translateX(-100%);
    pointer-events: none;
}

/* Hover — all cin cards */
.ds-cinematic .cin-service-card:hover,
.ds-cinematic .cin-service-card-v2:hover,
.ds-cinematic .cin-blog-card:hover,
.ds-cinematic .cin-portfolio-card-v2:hover,
.ds-cinematic .cin-package-card:hover,
.ds-cinematic .cin-about-card:hover,
.ds-cinematic .cin-team-card:hover,
.ds-cinematic .cin-metric-card:hover,
.ds-cinematic .cin-testimonial-card:hover,
.ds-cinematic .cin-roadmap-card:hover {
    box-shadow:
        0 12px 30px rgba(0,0,0,0.12),
        0 0 20px var(--card-glow-color);
}

.ds-cinematic .cin-service-card:hover::before,
.ds-cinematic .cin-service-card-v2:hover::before,
.ds-cinematic .cin-blog-card:hover::before,
.ds-cinematic .cin-portfolio-card-v2:hover::before,
.ds-cinematic .cin-package-card:hover::before,
.ds-cinematic .cin-about-card:hover::before,
.ds-cinematic .cin-team-card:hover::before,
.ds-cinematic .cin-metric-card:hover::before,
.ds-cinematic .cin-testimonial-card:hover::before,
.ds-cinematic .cin-roadmap-card:hover::before {
    opacity: var(--card-glow-intensity);
    transform: translateX(100%);
}

/* Content above flare */
.ds-cinematic .cin-service-card > *,
.ds-cinematic .cin-service-card-v2 > *,
.ds-cinematic .cin-blog-card > *,
.ds-cinematic .cin-portfolio-card-v2 > *,
.ds-cinematic .cin-package-card > *,
.ds-cinematic .cin-about-card > *,
.ds-cinematic .cin-team-card > *,
.ds-cinematic .cin-metric-card > *,
.ds-cinematic .cin-testimonial-card > *,
.ds-cinematic .cin-roadmap-card > * {
    position: relative;
    z-index: 1;
}

/* ── Day mode refinement ──────────────────────────── */
[data-theme="day"] .cinematic-hover:hover,
[data-theme="day"] .ds-cinematic .cin-service-card:hover,
[data-theme="day"] .ds-cinematic .cin-service-card-v2:hover,
[data-theme="day"] .ds-cinematic .cin-blog-card:hover,
[data-theme="day"] .ds-cinematic .cin-portfolio-card-v2:hover,
[data-theme="day"] .ds-cinematic .cin-package-card:hover,
[data-theme="day"] .ds-cinematic .cin-about-card:hover,
[data-theme="day"] .ds-cinematic .cin-team-card:hover,
[data-theme="day"] .ds-cinematic .cin-metric-card:hover,
[data-theme="day"] .ds-cinematic .cin-testimonial-card:hover,
[data-theme="day"] .ds-cinematic .cin-roadmap-card:hover {
    box-shadow:
        0 12px 30px rgba(0,0,0,0.06),
        0 0 16px var(--card-glow-color);
}