/* ============================================================
   scroll-reveal.css — MARKETONEX Scroll Reveal Animations
   Pairs with js/scroll-reveal.js (Intersection Observer)
   Does NOT modify any existing class or layout.
   ============================================================ */

/* ── Initial hidden state ───────────────────────────────────
   Applied by JS before the observer fires.
   Elements start invisible and slightly below their position.
──────────────────────────────────────────────────────────── */
.sr-hidden {
    opacity: 0;
    transform: translateY(48px);
    transition: none; /* no transition until .sr-show is added */
}

/* ── Visible / revealed state ───────────────────────────────
   JS adds .sr-show when element enters viewport.
──────────────────────────────────────────────────────────── */
.sr-show {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity  1.1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Stagger delay variants (for grid children) ─────────────
   JS assigns these via data-sr-delay on each child element.
──────────────────────────────────────────────────────────── */
.sr-show[data-sr-delay="1"] { transition-delay: 0.15s; }
.sr-show[data-sr-delay="2"] { transition-delay: 0.30s; }
.sr-show[data-sr-delay="3"] { transition-delay: 0.45s; }
.sr-show[data-sr-delay="4"] { transition-delay: 0.60s; }
.sr-show[data-sr-delay="5"] { transition-delay: 0.75s; }
.sr-show[data-sr-delay="6"] { transition-delay: 0.90s; }

/* ── Fade-only variant (for section titles, banners) ────────
   Slides 20px instead of 48px for a more subtle entrance.
──────────────────────────────────────────────────────────── */
.sr-hidden.sr-subtle {
    transform: translateY(20px);
}

/* ── Scale variant (for hero image) ────────────────────────
   Slight scale-up as it fades in.
──────────────────────────────────────────────────────────── */
.sr-hidden.sr-scale {
    transform: translateY(30px) scale(0.96);
}
.sr-show.sr-scale {
    transform: translateY(0) scale(1);
}

/* ── Slide-left variant (for review / financing left panel) ─ */
.sr-hidden.sr-left {
    transform: translateX(-40px);
}
.sr-show.sr-left {
    transform: translateX(0);
}

/* ── Slide-right variant (for review right panel) ─────────── */
.sr-hidden.sr-right {
    transform: translateX(40px);
}
.sr-show.sr-right {
    transform: translateX(0);
}

/* ── Respect reduced-motion preference ─────────────────────
   Users who prefer no animation see elements instantly.
──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sr-hidden {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .sr-show {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Card hover lift animations ────────────────────────────
   Applied to product-item, feature-card, trust-card, vendor-card
   No layout shift — uses transform only.
──────────────────────────────────────────────────────────── */
.product-item,
.feature-card,
.trust-card,
.vendor-card {
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.product-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.trust-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.vendor-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.20);
}

/* ── Responsive: reduce transform distance on mobile ────────
   Keeps the animation subtle on small screens.
──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sr-hidden          { transform: translateY(28px); }
    .sr-hidden.sr-left  { transform: translateX(-20px); }
    .sr-hidden.sr-right { transform: translateX(20px); }
    .sr-hidden.sr-scale { transform: translateY(16px) scale(0.97); }
}