/* =====================================================================
 * MyVideoStudio — Marketplace v2 Motion Layer  (v1.99.24)
 * Pure enhancement over marketplace-v2.css: entrance choreography, hover
 * micro-interactions, cursor-reactive glow, badge motion, count-up hero
 * stats. Never changes layout. Scoped to .mvs-marketv2. Reduced-motion safe.
 * Loads AFTER marketplace-v2.css.
 * ===================================================================== */

.mvs-marketv2 {
    --mvs-mk-primary: #3C50E0;
    --mvs-mk-success: #10B981;
    --mvs-mk-ink: #1C2434;
    --mvs-mk-stroke: #E2E8F0;
    --mvs-mk-glow: rgba(60, 80, 224, .10);
    --mvs-mk-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------------
 * 1. Entrance choreography
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .mvs-marketv2 .mvs-marketv2__hero        { animation: mvsMkRise .6s var(--mvs-mk-ease) both; }
    .mvs-marketv2 .mvs-marketv2__toolbar     { animation: mvsMkRise .6s var(--mvs-mk-ease) both; animation-delay: .08s; }
    .mvs-marketv2 .mvs-marketv2__section-title { animation: mvsMkRise .6s var(--mvs-mk-ease) both; animation-delay: .14s; }

    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool {
        animation: mvsMkPop .5s var(--mvs-mk-ease) both;
    }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(1)  { animation-delay: .16s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(2)  { animation-delay: .20s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(3)  { animation-delay: .24s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(4)  { animation-delay: .28s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(5)  { animation-delay: .32s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(6)  { animation-delay: .36s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(7)  { animation-delay: .40s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(8)  { animation-delay: .44s; }
    .mvs-marketv2 .mvs-marketv2__grid .mvs-marketv2__tool:nth-child(n+9) { animation-delay: .48s; }
}

@keyframes mvsMkRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mvsMkPop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * 2. Hero stats — tabular + subtle
 * ------------------------------------------------------------------- */
.mvs-marketv2 .mvs-marketv2__hero-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.mvs-marketv2 .mvs-marketv2__hero-stat {
    transition: transform .25s var(--mvs-mk-ease);
}
.mvs-marketv2 .mvs-marketv2__hero-stat:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------------
 * 3. Tool cards — lift, glow, icon & CTA motion
 * ------------------------------------------------------------------- */
.mvs-marketv2 .mvs-marketv2__tool {
    position: relative;
    overflow: hidden;
    transition: transform .26s var(--mvs-mk-ease), box-shadow .26s ease, border-color .26s ease;
}
.mvs-marketv2 .mvs-marketv2__tool::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity .3s ease;
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), var(--mvs-mk-glow), transparent 62%);
    pointer-events: none;
}
.mvs-marketv2 .mvs-marketv2__tool-icon,
.mvs-marketv2 .mvs-marketv2__tool-body {
    position: relative;
    z-index: 1;
}

/* Clickable (Live/Beta) cards get the full lift + glow */
a.mvs-marketv2__tool:hover {
    transform: translateY(-6px);
    border-color: #C7CEFF;
    box-shadow: 0 22px 44px -22px rgba(60, 80, 224, .42);
}
a.mvs-marketv2__tool:hover::before { opacity: 1; }

/* Coming-soon cards: gentle, no colored glow */
.mvs-marketv2 .mvs-marketv2__tool--coming-soon:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(28, 36, 52, .22);
}

.mvs-marketv2 .mvs-marketv2__tool-icon {
    transition: transform .3s var(--mvs-mk-ease);
}
a.mvs-marketv2__tool:hover .mvs-marketv2__tool-icon {
    transform: scale(1.08) rotate(-3deg);
}
.mvs-marketv2 .mvs-marketv2__tool-cta {
    transition: gap .2s var(--mvs-mk-ease), color .2s ease;
}
.mvs-marketv2 .mvs-marketv2__tool-cta svg {
    transition: transform .24s var(--mvs-mk-ease);
}
a.mvs-marketv2__tool:hover .mvs-marketv2__tool-cta--primary svg {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------------
 * 4. Badges — live pulse + soon shimmer
 * ------------------------------------------------------------------- */
.mvs-marketv2 .mvs-marketv2__tool-badge--live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mvs-marketv2 .mvs-marketv2__tool-badge--live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .mvs-marketv2 .mvs-marketv2__tool-badge--live::before {
        animation: mvsMkPulse 1.5s ease-in-out infinite;
    }
    .mvs-marketv2 .mvs-marketv2__tool-badge--soon {
        position: relative;
        overflow: hidden;
    }
    .mvs-marketv2 .mvs-marketv2__tool-badge--soon::after {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
        transform: skewX(-18deg);
        animation: mvsMkShimmer 3.2s ease-in-out infinite;
    }
}
@keyframes mvsMkPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}
@keyframes mvsMkShimmer {
    0%, 100% { left: -120%; }
    55%, 70% { left: 130%; }
}

/* ---------------------------------------------------------------------
 * 5. Category tabs — hover lift + count pop
 * ------------------------------------------------------------------- */
.mvs-marketv2 .mvs-marketv2__cat {
    transition: transform .18s var(--mvs-mk-ease), background .18s ease, border-color .18s ease, color .18s ease;
}
.mvs-marketv2 .mvs-marketv2__cat:not(.mvs-marketv2__cat--active):hover {
    transform: translateY(-2px);
}
.mvs-marketv2 .mvs-marketv2__cat-count {
    transition: transform .2s var(--mvs-mk-ease);
}
.mvs-marketv2 .mvs-marketv2__cat:hover .mvs-marketv2__cat-count {
    transform: scale(1.12);
}
.mvs-marketv2 .mvs-marketv2__cat-emoji {
    transition: transform .25s var(--mvs-mk-ease);
}
.mvs-marketv2 .mvs-marketv2__cat:hover .mvs-marketv2__cat-emoji {
    transform: scale(1.12) rotate(-4deg);
}