/**
 * Vybrant motion system — medium-intensity polish for homepage + category pages.
 *
 * Class API:
 *   .vm-reveal               — base hidden state; pair with a variant below
 *   .vm-reveal--up           — slides up 24px as it fades in (default)
 *   .vm-reveal--fade         — opacity-only, no translate
 *   .vm-reveal--zoom         — scales from 0.96 as it fades in
 *   .vm-reveal.vm-visible    — final visible state (added by motion.js)
 *   [style="--vm-delay:Nms"] — stagger individual children
 *   .vm-parallax-bg          — gentle parallax on background images
 *   .product-card-lift       — card hover lift + image zoom
 *
 * All animations disable under `prefers-reduced-motion: reduce`.
 */

/* ============================================================
   Scroll-reveal base
   ============================================================ */

.vm-reveal {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.9, 0.3, 1),
        transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
    transition-delay: var(--vm-delay, 0ms);
    will-change: opacity, transform;
}

.vm-reveal--up    { transform: translateY(24px); }
.vm-reveal--fade  { transform: none; }
.vm-reveal--zoom  { transform: scale(0.96); }

.vm-reveal.vm-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   Parallax (modern + fallback)
   - Supporting browsers: scroll-linked transform via animation-timeline
   - Fallback: background-attachment: fixed (works in most desktop browsers,
     degrades gracefully on iOS which ignores it)
   ============================================================ */

.vm-parallax-bg {
    position: relative;
    background-attachment: fixed;
}

@supports (animation-timeline: scroll()) {
    .vm-parallax-bg > img,
    .vm-parallax-bg > picture > img {
        animation: vm-parallax-shift linear both;
        animation-timeline: view();
        animation-range: cover;
    }
    @keyframes vm-parallax-shift {
        from { transform: translateY(-8%); }
        to   { transform: translateY(8%);  }
    }
}

/* ============================================================
   Product card hover lift
   ============================================================ */

.product-card-lift {
    transition:
        transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.product-card-lift:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 28px -12px rgba(17, 24, 39, 0.18),
        0 4px 10px -4px rgba(17, 24, 39, 0.08);
}

/* ============================================================
   Animated counters — tabular nums so digits don't jiggle mid-count
   ============================================================ */

[data-vm-count] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ============================================================
   Reduced motion — disable everything
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .vm-reveal,
    .vm-reveal.vm-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .vm-parallax-bg {
        background-attachment: scroll !important;
    }
    .vm-parallax-bg > img,
    .vm-parallax-bg > picture > img {
        animation: none !important;
        transform: none !important;
    }

    .product-card-lift {
        transition: none !important;
    }
    .product-card-lift:hover {
        transform: none !important;
    }
}