/* ======= Maan Motion — انیمیشن ورود با AOS (بدون رنگ؛ برای هر دو تم) =======
   این بخش را به انتهای CSS هر دو تم (یا CSS مشترک سایت) اضافه کنید.
   اصل کار: AOS فقط «ماشه» است (کلاس aos-animate را اضافه می‌کند)؛ خود حرکت‌ها اینجا
   تعریف شده‌اند تا یک زبان حرکتی واحد داشته باشند: یک منحنی، یک مدت، یک فاصله.
   همه‌ی قواعد زیر .maan-motion هستند؛ این کلاس را JS فقط وقتی AOS آماده است
   روی <html> می‌گذارد، پس اگر JS لود نشد، محتوا همیشه دیده می‌شود. */

:root {
    --mm-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mm-dur: 900ms;
    --mm-dist: 28px;
}

/* ---------- انیمیشن‌های تکی (روی خود عنصر) ---------- */
.maan-motion [data-aos^="maan-"] {
    transition-property: opacity, transform;
    transition-duration: var(--mm-dur) !important;
    transition-timing-function: var(--mm-ease) !important;
}

.maan-motion [data-aos="maan-up"] {
    opacity: 0;
    transform: translate3d(0, var(--mm-dist), 0);
}

.maan-motion [data-aos="maan-left"] {
    opacity: 0;
    transform: translate3d(calc(var(--mm-dist) * -1.4), 0, 0);
}

.maan-motion [data-aos="maan-right"] {
    opacity: 0;
    transform: translate3d(calc(var(--mm-dist) * 1.4), 0, 0);
}

.maan-motion [data-aos="maan-zoom"] {
    opacity: 0;
    transform: scale(0.96);
}

.maan-motion [data-aos="maan-fade"] {
    opacity: 0;
}

.maan-motion [data-aos="maan-line"] {
    opacity: 0;
    transform: scaleY(0.2);
    transform-origin: top center;
}

/* حالت نهایی: transform: none تا stacking-context اضافه نماند
   (برای position: sticky و متن شفاف و بدون تاری مهم است) */
.maan-motion [data-aos^="maan-"].aos-animate {
    opacity: 1;
    transform: none;
}

/* ---------- Stagger: والد را AOS می‌بیند، فرزندها پله‌پله می‌آیند ----------
   فرزندها با keyframes (نه transition) حرکت می‌کنند و fill-mode فقط backwards است؛
   پس بعد از پایان، transform دوباره دست خود فرزند است و هاور کارت‌ها/دکمه‌ها
   خراب نمی‌شود. اندیس هر فرزند (--mm-i) و فاصله (--mm-step) را JS می‌گذارد. */
.maan-motion [data-aos="maan-stagger"]:not(.aos-animate) > *,
.maan-motion [data-aos="maan-stagger-fade"]:not(.aos-animate) > * {
    opacity: 0;
}

.maan-motion [data-aos="maan-stagger"].aos-animate > * {
    animation: mm-rise var(--mm-dur) var(--mm-ease) backwards;
    animation-delay: calc(var(--mm-i, 0) * var(--mm-step, 90ms));
}

.maan-motion [data-aos="maan-stagger-fade"].aos-animate > * {
    animation: mm-fade 700ms ease-out backwards;
    animation-delay: calc(var(--mm-i, 0) * var(--mm-step, 60ms));
}

@keyframes mm-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mm-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
    .maan-motion [data-aos^="maan-"],
    .maan-motion [data-aos^="maan-"] > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}