/* ============================================
   MetaVision – Scroll Reveal Animations
   Pure CSS – no existing styles are modified.
   Uses IntersectionObserver classes toggled by
   js/animations.js
   ============================================ */

/* ---------- base hidden state ---------- */
.mv-reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* direction variants */
.mv-reveal--up {
    transform: translateY(40px);
}

.mv-reveal--down {
    transform: translateY(-40px);
}

.mv-reveal--left {
    transform: translateX(40px);
}

.mv-reveal--right {
    transform: translateX(-40px);
}

.mv-reveal--scale {
    transform: scale(0.92);
}

/* ---------- visible state ---------- */
.mv-reveal.mv-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ---------- stagger children ---------- */
.mv-stagger > .mv-reveal:nth-child(1)  { transition-delay: 0s; }
.mv-stagger > .mv-reveal:nth-child(2)  { transition-delay: 0.1s; }
.mv-stagger > .mv-reveal:nth-child(3)  { transition-delay: 0.2s; }
.mv-stagger > .mv-reveal:nth-child(4)  { transition-delay: 0.3s; }
.mv-stagger > .mv-reveal:nth-child(5)  { transition-delay: 0.4s; }
.mv-stagger > .mv-reveal:nth-child(6)  { transition-delay: 0.5s; }
.mv-stagger > .mv-reveal:nth-child(7)  { transition-delay: 0.6s; }
.mv-stagger > .mv-reveal:nth-child(8)  { transition-delay: 0.7s; }
.mv-stagger > .mv-reveal:nth-child(9)  { transition-delay: 0.8s; }
.mv-stagger > .mv-reveal:nth-child(10) { transition-delay: 0.9s; }

/* ---------- counter / number animation ---------- */
.mv-counter-reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.mv-counter-reveal.mv-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .mv-reveal,
    .mv-counter-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media screen and (max-width: 767px) {
    .mv-reveal,
    .mv-counter-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}