/* ----------------------------------------------------------
   Cinematic Button Flare + Glow — v1.0
   Auto-applies to all .cin-btn and .btn within .ds-cinematic
   Opt-in via .cinematic-btn on any button
   ---------------------------------------------------------- */

:root {
    --btn-glow-color:     rgba(59,130,246,0.5);
    --btn-glow-blur:      12px;
    --btn-glow-intensity: 0.7;
    --btn-hover-lift:     3px;
    --btn-flare-speed:    0.45s;
}

[data-theme="night"] {
    --btn-glow-color:     rgba(139,92,246,0.8);
    --btn-glow-intensity: 0.9;
}

/* ── Base enhancement ─────────────────────────────── */
.cinematic-btn,
.ds-cinematic .cin-btn,
.ds-cinematic .cin-btn-accent,
.ds-cinematic .cin-btn-dark,
.ds-cinematic .cin-btn-ghost,
.ds-cinematic .cin-btn-lg,
.ds-cinematic .btn-nav-cta,
.cin-cta-cinematic .cin-btn-cta-primary,
.cin-cta-cinematic .cin-btn-cta-secondary {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--btn-flare-speed) ease,
        box-shadow var(--btn-flare-speed) ease,
        background var(--btn-flare-speed) ease,
        border-color var(--btn-flare-speed) ease;
}

/* ── Flare sweep pseudo ───────────────────────────── */
.cinematic-btn::before,
.ds-cinematic .cin-btn::before,
.ds-cinematic .cin-btn-accent::before,
.ds-cinematic .cin-btn-dark::before,
.ds-cinematic .cin-btn-ghost::before,
.ds-cinematic .cin-btn-lg::before,
.ds-cinematic .btn-nav-cta::before,
.cin-cta-cinematic .cin-btn-cta-primary::before,
.cin-cta-cinematic .cin-btn-cta-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 10%,
        rgba(255,255,255,0.25) 50%,
        transparent 90%
    );
    opacity: 0;
    transform: skewX(-15deg);
    transition: none;
    pointer-events: none;
    z-index: 1;
}

/* ── Hover state ──────────────────────────────────── */
.cinematic-btn:hover,
.ds-cinematic .cin-btn:hover,
.ds-cinematic .cin-btn-accent:hover,
.ds-cinematic .cin-btn-dark:hover,
.ds-cinematic .cin-btn-ghost:hover,
.ds-cinematic .cin-btn-lg:hover,
.ds-cinematic .btn-nav-cta:hover,
.cin-cta-cinematic .cin-btn-cta-primary:hover,
.cin-cta-cinematic .cin-btn-cta-secondary:hover {
    transform: translateY(calc(-1 * var(--btn-hover-lift)));
    box-shadow:
        0 8px 20px rgba(0,0,0,0.1),
        0 0 16px var(--btn-glow-color);
}

/* Flare animation on hover */
.cinematic-btn:hover::before,
.ds-cinematic .cin-btn:hover::before,
.ds-cinematic .cin-btn-accent:hover::before,
.ds-cinematic .cin-btn-dark:hover::before,
.ds-cinematic .cin-btn-ghost:hover::before,
.ds-cinematic .cin-btn-lg:hover::before,
.ds-cinematic .btn-nav-cta:hover::before,
.cin-cta-cinematic .cin-btn-cta-primary:hover::before,
.cin-cta-cinematic .cin-btn-cta-secondary:hover::before {
    opacity: var(--btn-glow-intensity);
    left: 160%;
    transition: left 0.6s ease, opacity 0.2s ease;
}

/* ── Ghost/outline — subtle glow ring ─────────────── */
.ds-cinematic .cin-btn-ghost:hover,
.cin-cta-cinematic .cin-btn-cta-secondary:hover {
    box-shadow:
        0 6px 16px rgba(0,0,0,0.06),
        0 0 12px var(--btn-glow-color);
}

/* ── Button content above flare ───────────────────── */
.cinematic-btn > *,
.ds-cinematic .cin-btn > *,
.ds-cinematic .cin-btn-accent > *,
.ds-cinematic .cin-btn-dark > *,
.ds-cinematic .cin-btn-ghost > *,
.ds-cinematic .cin-btn-lg > * {
    position: relative;
    z-index: 2;
}

/* ── Day mode refinement ──────────────────────────── */
[data-theme="day"] .cinematic-btn:hover,
[data-theme="day"] .ds-cinematic .cin-btn:hover,
[data-theme="day"] .ds-cinematic .cin-btn-accent:hover,
[data-theme="day"] .ds-cinematic .cin-btn-dark:hover,
[data-theme="day"] .ds-cinematic .cin-btn-lg:hover,
[data-theme="day"] .ds-cinematic .btn-nav-cta:hover,
[data-theme="day"] .cin-cta-cinematic .cin-btn-cta-primary:hover {
    box-shadow:
        0 8px 20px rgba(0,0,0,0.06),
        0 0 14px var(--btn-glow-color);
}

[data-theme="day"] .ds-cinematic .cin-btn-ghost:hover,
[data-theme="day"] .cin-cta-cinematic .cin-btn-cta-secondary:hover {
    box-shadow:
        0 6px 16px rgba(0,0,0,0.04),
        0 0 10px var(--btn-glow-color);
}

/* ── Focus visible — accessible ring ──────────────── */
.cinematic-btn:focus-visible,
.ds-cinematic .cin-btn:focus-visible,
.ds-cinematic .cin-btn-accent:focus-visible,
.ds-cinematic .cin-btn-dark:focus-visible,
.ds-cinematic .cin-btn-ghost:focus-visible,
.ds-cinematic .btn-nav-cta:focus-visible {
    outline: 2px solid var(--btn-glow-color);
    outline-offset: 2px;
}

/* ── Mobile — reduce lift, keep flare ─────────────── */
@media (hover: none) {
    .cinematic-btn:hover,
    .ds-cinematic .cin-btn:hover,
    .ds-cinematic .cin-btn-accent:hover,
    .ds-cinematic .cin-btn-dark:hover,
    .ds-cinematic .cin-btn-ghost:hover {
        transform: none;
    }
}