/*
 * ریزپویانمایی طراحی تازه (۱۷ آبان ۱۴۰۵) — جدا از redesign.css تا با برداشتن دو خط از layout کنار برود.
 *
 * - فقط transform و opacity؛ هیچ چیزی جابه‌جای چیدمان (layout shift) نمی‌سازد.
 * - نمایان شدن هنگام اسکرول فقط وقتی فعال است که motion.js کلاس nm-motion را روی html بگذارد؛
 *   بدون جاوااسکریپت همه‌چیز از اول دیده می‌شود.
 * - کاربری که «کاهش حرکت» را در دستگاهش خواسته هیچ‌کدام را نمی‌بیند (پایین فایل).
 * - سلکتورها با :where() نوشته شده‌اند (وزن صفر) تا hover و استایل خود هر صفحه برنده بماند.
 */

:root {
    --nm-ease: cubic-bezier(.2, .7, .2, 1);
    --nm-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ───── نمایان شدن هنگام اسکرول ───── */
.nm-motion [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .45s var(--nm-ease), transform .55s var(--nm-ease-out);
    transition-delay: var(--nm-delay, 0ms);
}
.nm-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
}
/* پس از نمایان شدن، motion.js خود data-reveal را برمی‌دارد تا hover و transition خود عنصر آزاد بماند */

/* ───── هیرو: متن هنگام بارگذاری بالا می‌آید، عکس آرام جا می‌افتد ───── */
@keyframes nm-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes nm-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
.nm-motion .nm-hero-text > * { animation: nm-rise .7s var(--nm-ease-out) both; }
.nm-motion .nm-hero-text > *:nth-child(2) { animation-delay: .08s; }
.nm-motion .nm-hero-text > *:nth-child(3) { animation-delay: .16s; }
.nm-motion .nm-hero-text > *:nth-child(4) { animation-delay: .24s; }
.nm-motion .nm-hero-img { animation: nm-settle 1.8s var(--nm-ease-out) both; transform-origin: 50% 60%; }

/* خط زیر «آینده» پس از بالا آمدن تیتر، از راست به چپ کشیده می‌شود */
@keyframes nm-draw { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.nm-motion .nm-hl::after { animation: nm-draw .7s .45s var(--nm-ease-out) both; }

/* ───── hover: کارت‌ها کمی بالا می‌آیند و عکسشان آرام بزرگ می‌شود ───── */
:where(.nm-page) :where(article, .nm-lift, .nm-zoom) {
    transition: transform .3s var(--nm-ease-out), box-shadow .3s var(--nm-ease), border-color .2s;
}
@media (hover: hover) {
    :where(.nm-page) :where(article, .nm-lift, .nm-zoom):hover {
        transform: translate3d(0, -4px, 0);
        box-shadow: 0 22px 40px -26px rgba(31, 51, 36, .38);
    }
    :where(.nm-page) :where(article, .nm-lift) img,
    :where(.nm-page) :where(.nm-zoom) img {
        transition: transform .6s var(--nm-ease-out);
    }
    :where(.nm-page) :where(article, .nm-lift, .nm-zoom):hover img {
        transform: scale(1.045);
    }
}

/* ───── دکمه‌ها و پیوندها ───── */
:where(.nm-page, .nm-header, .nm-footer) :where(a, button) {
    transition: background-color .22s, color .22s, border-color .22s, box-shadow .25s, transform .18s var(--nm-ease);
}
/* دکمه‌های گرد (کپسولی): فشردن، بازخورد لمسی می‌دهد */
:where(.nm-page, .nm-header) :where(a, button)[style*="border-radius:999px"]:active,
:where(.nm-header) :where(.nm-btn-solid, .nm-btn-outline):active,
:where(.nm-page) .plf-submit:active { transform: scale(.97); }
/* فلش «←» در پیوندها کمی جلو می‌رود */
:where(.nm-page) a > span:last-child { transition: transform .3s var(--nm-ease-out); display: inline-block; }
@media (hover: hover) {
    :where(.nm-page) a:hover > span:last-child { transform: translate3d(-4px, 0, 0); }
}

/* ───── هدر: با اسکرول سایهٔ نرم می‌گیرد ───── */
.nm-header { transition: box-shadow .3s var(--nm-ease), background-color .3s; }
.nm-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(31, 51, 36, .45); }
/* زیرمنوی «طرح‌های نخل‌من» با کمی حرکت باز می‌شود */
.nm-nav__panel-in { animation: nm-rise .28s var(--nm-ease-out) both; }

/* ───── پرسش‌ها و هر بخشی که Alpine باز و بسته می‌کند ───── */
@keyframes nm-fade-down { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }
:where(.nm-page) [x-show] { animation: nm-fade-down .35s var(--nm-ease-out); }
:where(.nm-page) button[aria-expanded] span:last-child { transition: transform .3s var(--nm-ease-out), background-color .2s; }
:where(.nm-page) button[aria-expanded="true"] span:last-child { transform: rotate(180deg); }

/* ───── چاپ: همه‌چیز دیده شود ───── */
@media print {
    .nm-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ───── کاهش حرکت: همه خاموش ───── */
@media (prefers-reduced-motion: reduce) {
    .nm-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .nm-motion .nm-hero-text > *, .nm-motion .nm-hero-img, .nm-nav__panel-in, :where(.nm-page) [x-show], .nm-motion .nm-hl::after { animation: none !important; }
    :where(.nm-page, .nm-header, .nm-footer) * { transition: none !important; }
    :where(.nm-page) :where(article, .nm-lift, .nm-zoom):hover,
    :where(.nm-page) :where(article, .nm-lift, .nm-zoom):hover img,
    :where(.nm-page) a:hover > span:last-child { transform: none !important; }
}