/* V171 — تنوع حرکت در سایت: هر نوع محتوا ورود مخصوص خودش را دارد تا صفحه یکنواخت نباشد.
   فقط transform، opacity، clip-path و filter متحرک می‌شوند؛ ورودها ease-out و کوتاه؛ هاور فقط برای ماوس؛
   با «کاهش حرکت» سیستم‌عامل، همه چیز بی‌حرکت و کامل نمایش داده می‌شود. */
:root{--mv-out:cubic-bezier(.23,1,.32,1);--mv-io:cubic-bezier(.77,0,.175,1);--mv-spring:cubic-bezier(.34,1.36,.64,1)}

@media (prefers-reduced-motion:no-preference){

/* ── ۱) بخش‌ها: چهار نوع ورود به‌نوبت (بالا آمدن، بزرگ شدن، از کنار، از حالت مات) ── */
html.js [data-reveal][data-mv="scale"]{transform:scale(.965);transform-origin:50% 0}
html.js [data-reveal][data-mv="side"]{transform:translateX(28px)}
html.js [data-reveal][data-mv="blur"]{transform:none;filter:blur(8px);transition:opacity .8s var(--mv-out),filter .8s var(--mv-out)}
html.js [data-reveal][data-mv].in{opacity:1;transform:none;filter:none}

/* تیتر بخش از پشت یک خط پنهان بالا می‌آید (ماسک) */
html.js [data-reveal] .section-head h2,html.js [data-reveal]>h2,html.js .section-head[data-reveal] h2{clip-path:inset(0 0 100% 0);transform:translateY(.35em);transition:clip-path .75s var(--mv-io) .08s,transform .75s var(--mv-out) .08s}
html.js [data-reveal].in .section-head h2,html.js [data-reveal].in>h2,html.js .section-head[data-reveal].in h2{clip-path:inset(0 0 -10% 0);transform:none}
/* متن زیر تیتر کمی دیرتر و نرم */
html.js [data-reveal] .section-head p{opacity:0;transition:opacity .7s var(--mv-out) .22s}
html.js [data-reveal].in .section-head p,html.js .section-head[data-reveal].in p{opacity:1}

/* ── ۲) گروه کارت‌ها: هر نوع کارت حرکت خودش را دارد ── */
/* خدمات صفحهٔ اصلی: بزرگ شدن از کمی کوچک‌تر */
html.js .home-svc-grid.v157-stagger>*{transform:translateY(10px) scale(.955);transition:opacity .5s var(--mv-out),transform .6s var(--mv-spring);transition-delay:calc(var(--i,0) * 70ms)}
/* کارت‌های خدمات: یکی از راست، یکی از چپ */
html.js .service-grid.v157-stagger>*:nth-child(odd){transform:translateX(26px)}
html.js .service-grid.v157-stagger>*:nth-child(even){transform:translateX(-26px)}
html.js .service-grid.v157-stagger>*{transition:opacity .55s var(--mv-out),transform .7s var(--mv-out);transition-delay:calc(var(--i,0) * 55ms)}
/* نمونه‌کارها و مقاله‌ها: آشکار شدن از وسط */
html.js .v157-stagger>.result-card,html.js .v157-stagger>.article-full{clip-path:inset(8% 8% 8% 8% round 14px);transform:scale(.985);transition:clip-path .8s var(--mv-io),opacity .5s var(--mv-out),transform .8s var(--mv-out);transition-delay:calc(var(--i,0) * 80ms)}
/* ارزش‌ها و ردیف‌های اطلاعات: خم شدن سه‌بعدی */
html.js .v157-stagger>.value-item,html.js .v157-stagger>.info-row{transform:perspective(700px) rotateX(16deg) translateY(12px);transform-origin:50% 100%;transition:opacity .55s var(--mv-out),transform .75s var(--mv-out);transition-delay:calc(var(--i,0) * 60ms)}
/* شبکهٔ لینک‌ها: کمی چرخش و جا افتادن فنری */
html.js .link-hub-grid.v157-stagger>*{transform:scale(.92) rotate(-1.2deg);transition:opacity .45s var(--mv-out),transform .55s var(--mv-spring);transition-delay:calc(var(--i,0) * 45ms)}
/* حالت نهایی همهٔ گروه‌ها (قوی‌تر از حالت‌های اولیهٔ بالا) */
html.js .v157-stagger.in>*:nth-child(n):nth-child(n){opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}

/* ── ۳) پرسش و پاسخ: از کنار با فاصلهٔ کوتاه ── */
html.mv-ready .faq-list>.faq-item,html.mv-ready .home-faq details{opacity:0;transform:translateX(18px);transition:opacity .5s var(--mv-out),transform .6s var(--mv-out);transition-delay:calc(var(--i,0) * 45ms)}
html.mv-ready .faq-list.mv-in>.faq-item,html.mv-ready .home-faq.mv-in details{opacity:1;transform:none}
/* باز شدن پاسخ */
@keyframes mv-open{from{opacity:0;transform:translateY(-6px)}}
details[open]>:not(summary){animation:mv-open .26s var(--mv-out)}
details>summary{transition:color .2s ease}

/* ── ۴) تصاویر مقاله: جهت آشکار شدن به‌نوبت عوض می‌شود ── */
html.js img.v157-img[data-mv="r"]{clip-path:inset(0 0 0 100%)}
html.js img.v157-img[data-mv="l"]{clip-path:inset(0 100% 0 0)}
html.js img.v157-img[data-mv="c"]{clip-path:inset(18% 18% 18% 18% round 18px);transform:scale(1.08)}
html.js img.v157-img[data-mv].in{clip-path:inset(0 0 0 0 round 0);transform:none}

/* ── ۵) دکمه‌ها: بازخورد فشار و درخشش یک‌باره ── */
.btn-primary,.btn-ghost,.cta-primary,.cta-secondary,.nav-cta,.mc-book,.mc-call,.back-home-btn,.map-chip{transition:transform .16s var(--mv-out),box-shadow .25s ease,background-color .25s ease}
.btn-primary:active,.btn-ghost:active,.cta-primary:active,.cta-secondary:active,.nav-cta:active,.mc-book:active,.mc-call:active,.back-home-btn:active,.map-chip:active{transform:scale(.97)}
.mv-shine{position:relative;overflow:hidden;isolation:isolate}
.mv-shine::after{content:"";position:absolute;inset:-2px;pointer-events:none;z-index:1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);transform:translateX(110%)}
.mv-shine.mv-go::after{transition:transform 1.05s var(--mv-io);transform:translateX(-110%)}

/* ── ۶) نقطهٔ «مشاوره آنلاین» در منو: موج آرام ── */
nav a.nav-consult{position:relative}
@keyframes mv-ping{0%{box-shadow:0 0 0 0 rgba(47,179,109,.45)}70%,100%{box-shadow:0 0 0 7px rgba(47,179,109,0)}}
nav a.nav-consult::before{animation:mv-ping 2.6s ease-out infinite}

/* ── ۷) نوار پایین موبایل: فقط در اولین صفحهٔ هر بازدید از پایین بالا می‌آید ── */
@keyframes mv-bar{from{transform:translateY(110%)}}
html.mv-first .mobile-cta{animation:mv-bar .55s var(--mv-out) .45s both}

/* ── ۸) پیشرفت خواندن مقاله ── */
.mv-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:1200;pointer-events:none;background:linear-gradient(90deg,#c4325a,#a32748 60%,#dcc08a);transform:scaleX(0);transform-origin:100% 50%;will-change:transform}

/* ── ۹) حرکت ملایم تصویر صفحهٔ اول هنگام اسکرول (فقط مرورگرهای پشتیبان) ── */
@supports (animation-timeline:scroll()){
  @keyframes mv-parallax{to{transform:translateY(60px) scale(1.04)}}
  .hero#top .hero-portrait img{animation:mv-parallax linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  @keyframes mv-head{from{box-shadow:none}to{box-shadow:0 8px 28px rgba(40,10,20,.12)}}
  #siteHeader{animation:mv-head linear both;animation-timeline:scroll(root);animation-range:0 160px}
}

/* ── ۱۰) هاور فقط برای ماوس: هر نوع کارت واکنش متفاوت ── */
@media (hover:hover) and (pointer:fine){
  .home-svc{transition:transform .3s var(--mv-out),box-shadow .3s ease,border-color .3s ease}
  .home-svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(60,20,30,.12)}
  .service-card:hover{transform:translateY(-3px) rotate(-.3deg)}
  .link-hub-grid>a,.link-hub-grid>*{transition:transform .25s var(--mv-spring)}
  .link-hub-grid>a:hover,.link-hub-grid>*:hover{transform:scale(1.025)}
  .map-chip:hover{transform:translateY(-2px)}
  .post-body img{transition:transform .5s var(--mv-out)}
  .post-body figure:hover img{transform:scale(1.015)}
  .btn-primary:hover,.cta-primary:hover{box-shadow:0 14px 34px rgba(90,31,43,.42)}
  .faq-item{transition:transform .25s var(--mv-out),background-color .25s ease}
  .faq-item:hover{transform:translateX(-4px)}
}
}