/* ==========================================================================
   kh-motion — لایه‌ی حرکت و هاور (v9)
   روی kh-v8.css سوار می‌شود و چیزی از آن را نمی‌شکند؛ اگر این فایل را
   بردارید، سایت دقیقاً به v8 برمی‌گردد.

   قواعدی که رعایت شده:
   · فقط transform و opacity متحرک می‌شوند — چیدمان دوباره محاسبه نمی‌شود
     و CLS ایجاد نمی‌کند.
   · ورود ۱۵۰ تا ۳۰۰ میلی‌ثانیه، خروج کوتاه‌تر از ورود.
   · هر حرکتی باید معنا داشته باشد؛ تزئین محض نداریم.
   · احترام کامل به prefers-reduced-motion در انتهای فایل.
   ========================================================================== */

:root{
  --e-out:cubic-bezier(.22,1,.36,1);      /* ورود نرم و قاطع */
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.16s; --t-mid:.26s; --t-slow:.42s;
}

/* ───────────── ۱. ظاهر شدن هنگام اسکرول ─────────────
   عناصر با کلاس .r شروع می‌شوند پایین و محو؛ وقتی وارد دید شدند
   .is-in می‌گیرند. تأخیر پلکانی از --i می‌آید که JS ست می‌کند. */
.r{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out);
  transition-delay:calc(var(--i,0) * 55ms)}
.r.is-in{opacity:1;transform:none}

/* اگر جاوااسکریپت اجرا نشد، محتوا نباید نامرئی بماند */
.no-js .r{opacity:1;transform:none}

/* ───────────── ۲. کارت‌ها ─────────────
   بلند شدن + درخشش نرمی که از لبه رد می‌شود. */
a.card,.card--hover,.tool,.svc,.proj,.prow,.path,.gterm{
  transition:transform var(--t-mid) var(--e-soft),
             box-shadow var(--t-mid) var(--e-soft),
             border-color var(--t-mid) var(--e-soft)}
a.card:hover,.card--hover:hover{transform:translateY(-6px)}
.tool:hover,.svc:hover{transform:translateY(-5px)}
.proj:hover{transform:translateY(-6px) scale(1.006)}

/* درخشش عبوری روی جلد کارت */
.cover{position:relative}
.cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);opacity:0}
a.card:hover .cover::before{transform:translateX(120%);opacity:1;
  transition:transform .85s var(--e-out),opacity .2s linear}

/* بزرگ‌نمایی ملایم کد حرفیِ روی جلد */
.cover b{transition:transform var(--t-slow) var(--e-out)}
a.card:hover .cover b{transform:scale(1.07)}

/* برچسب دسته کمی جلو می‌آید */
.cover__tag{transition:transform var(--t-mid) var(--e-out)}
a.card:hover .cover__tag{transform:translateY(-2px)}

/* ───────────── ۳. فلش‌ها ─────────────
   فلش «مطالعه ←» و «جزئیات ←» در جهت خواندن سُر می‌خورد.
   در RTL جهت پیشروی به چپ است، پس مقدار منفی. */
.go,.more,.bmini span,.svc__f .go{display:inline-flex;align-items:center;gap:5px}
.go::after,.more::after,.bmini span::after{content:"";display:inline-block;width:0}
a.card:hover .go,.svc:hover .go,.tool:hover span,.bmini:hover span,.more:hover{
  transform:translateX(-4px)}
.go,.more,.tool span,.bmini span{
  transition:transform var(--t-mid) var(--e-out),color var(--t-fast) linear}

/* ───────────── ۴. دکمه‌ها ─────────────
   پرشدن از پایین به بالا، به‌جای عوض شدن ناگهانی رنگ. */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast) var(--e-soft),
             box-shadow var(--t-mid) var(--e-soft),
             color var(--t-fast) linear}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--accent-2);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform var(--t-mid) var(--e-out)}
.btn--cta:hover::before{transform:scaleY(1)}
.btn--cta:hover{box-shadow:0 10px 24px -12px rgba(var(--accent-rgb),.8)}
.btn--line::before{background:var(--accent-soft)}
.btn--line:hover::before{transform:scaleY(1)}
.btn:active{transform:scale(.97)}

/* ───────────── ۵. منو ─────────────
   خط زیر آیتم از وسط باز می‌شود. */
.top nav a{position:relative;padding-block:4px}
.top nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;
  border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform var(--t-mid) var(--e-out)}
.top nav a:hover::after{transform:scaleX(1)}
.top nav a[aria-current="page"]::after{transform:scaleX(1)}

/* برند: مربع KH کمی می‌چرخد */
.brand i{transition:transform var(--t-mid) var(--e-out)}
.brand:hover i{transform:rotate(-8deg) scale(1.06)}

/* ───────────── ۶. آیکون‌ها ─────────────
   آیکون سرویس/ابزار موقع هاور کارت جان می‌گیرد. */
.svc__i,.tool i,.empty i{transition:transform var(--t-mid) var(--e-out),
                                    background-color var(--t-mid) var(--e-soft)}
.svc:hover .svc__i{transform:scale(1.09) rotate(-5deg)}
.tool:hover i{transform:scale(1.09) rotate(5deg)}

/* دکمه‌های گرد هدر */
.tgl{transition:transform var(--t-mid) var(--e-out),border-color var(--t-fast) linear}
.tgl:hover{transform:rotate(18deg) scale(1.07);border-color:var(--accent)}

/* ───────────── ۷. پادکست ─────────────
   ردیف به سمت خواندن می‌لغزد و دکمه‌ی پخش نبض می‌گیرد. */
.prow:hover{transform:translateX(-5px)}
.play i{transition:transform var(--t-mid) var(--e-out),box-shadow var(--t-mid) var(--e-soft)}
.prow:hover .play i,a.card:hover .play i{transform:scale(1.12)}
.prow:hover .play i{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.16)}

/* ───────────── ۸. فرم ─────────────
   حلقه‌ی فوکوس باز می‌شود، نه اینکه بپرد. */
.inp{transition:border-color var(--t-fast) linear,
                box-shadow var(--t-mid) var(--e-out)}
.fchip{transition:transform var(--t-fast) var(--e-soft),
                  background-color var(--t-fast) linear,
                  border-color var(--t-fast) linear,color var(--t-fast) linear}
.fchip:hover{transform:translateY(-2px)}

/* ───────────── ۹. آکاردئون ─────────────
   محتوا باز می‌شود به‌جای اینکه ناگهان ظاهر شود. */
.acc details[open] .acc__b{animation:accIn .3s var(--e-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc summary{transition:color var(--t-fast) linear,background-color var(--t-fast) linear}
.acc summary:hover{color:var(--accent)}

/* ───────────── ۱۰. نوار پیشرفت مسیرها ─────────────
   عرض از صفر پر می‌شود وقتی وارد دید شد. */
.bar i{width:0;transition:width 1s var(--e-out) .15s}
.bar.is-in i{width:var(--w,0%)}

/* ───────────── ۱۱. اسلایدر ─────────────
   محتوای اسلاید فعال با تأخیر کوتاه بالا می‌آید. */
.slide[aria-hidden="false"] .slide__tag{animation:sIn .5s var(--e-out) .05s both}
.slide[aria-hidden="false"] h3{animation:sIn .5s var(--e-out) .12s both}
.slide[aria-hidden="false"] p{animation:sIn .5s var(--e-out) .19s both}
.slide[aria-hidden="false"] .slide__cta{animation:sIn .5s var(--e-out) .26s both}
@keyframes sIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sbtn{transition:background-color var(--t-fast) linear,transform var(--t-fast) var(--e-soft)}
.sbtn:hover{transform:scale(1.1)}
.sbtn:active{transform:scale(.94)}

/* ───────────── ۱۲. بنرها ─────────────
   حباب تزئینی آرام جابه‌جا می‌شود. */
.bmini,.banner{transition:transform var(--t-mid) var(--e-soft),
                          box-shadow var(--t-mid) var(--e-soft)}
.bmini::after{transition:transform var(--t-slow) var(--e-out)}
.bmini:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.bmini:hover::after{transform:scale(1.18) translate(-6%,-6%)}
.bstrip{transition:border-color var(--t-mid) var(--e-soft)}
.bstrip:hover{border-color:var(--accent)}

/* ───────────── ۱۳. جدول و فهرست ───────────── */
.tbl tbody tr{transition:background-color var(--t-fast) linear}
.tbl tbody tr:hover{background:var(--accent-soft)}
.toc a{display:inline-block;transition:transform var(--t-fast) var(--e-out),color var(--t-fast) linear}
.toc a:hover{transform:translateX(-3px)}
.gterm:hover{transform:translateY(-3px)}

/* ───────────── ۱۴. صفحه‌بندی و پیوندهای فوتر ───────────── */
.pager a{transition:transform var(--t-fast) var(--e-soft),
                    border-color var(--t-fast) linear,color var(--t-fast) linear}
.pager a:hover{transform:translateY(-2px)}
.fgrid a{display:inline-block;transition:transform var(--t-fast) var(--e-out),color var(--t-fast) linear}
.fgrid a:hover{transform:translateX(-3px)}

/* ───────────── ۱۵. احترام به کاهش حرکت ─────────────
   این بخش عمداً آخر فایل است تا بر همه‌چیز غلبه کند. کاربری که کاهش
   حرکت را روشن کرده، محتوا را کامل و ثابت می‌بیند — نه نامرئی. */
@media (prefers-reduced-motion:reduce){
  .r{opacity:1 !important;transform:none !important;transition:none !important}
  .bar i{width:var(--w,0%) !important;transition:none !important}
  .cover::before{display:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}