/* =============================================================
   MINIPOLY — لایهٔ حرکت
   آخرین شیتی که لود می‌شود. هر انیمیشن، هر ترنزیشن و هر تأخیرِ
   سایت اینجاست و هیچ‌جای دیگر.

   دو قانون:
   ۱) فقط transform و opacity و رنگ — تا چیدمان دوباره محاسبه نشود.
   ۲) بلوک انتهایی، با prefers-reduced-motion، همه‌چیز را می‌کشد و
      در همان حال محتوای reveal را کاملاً دیدنی نگه می‌دارد.
   ============================================================= */

/* ===== ۱) ترنزیشن پایه — فهرست صریح، نه `all` ===== */
a,
.btn,
.nav__link,
.nav__link::after,
.side__link,
.chip,
.panel,
.input,
.trust,
.pick,
.podium__slot,
.toc__link,
.filter-btn,
.nav-toggle,
.api-endpoint,
button {
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    text-decoration-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur) var(--ease);
}

html { scroll-behavior: smooth; }

/* هدر چسبان نباید روی تیتر مقصدِ لنگر بیفتد */
[id] { scroll-margin-top: 104px; }

/* ===== ۲) وزن فیزیکی روی تعامل ===== */

/* دکمه واقعاً فشرده می‌شود — حس جرم، بدون سایهٔ سختِ رترو */
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.985); }
.btn--primary:hover,
.btn--flat:hover,
.btn--violet:hover,
.btn--ember:hover { transform: translateY(-1px); }

.nav-toggle:active { transform: scale(.94); }
.trust:active { transform: scale(.97); }

.brand__mark {
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease);
}
.brand:hover .brand__mark {
  transform: translateY(-2px) rotate(-2deg);
  box-shadow: var(--bevel-logo), 0 10px 30px rgba(124, 245, 107, .45);
}

/* کارت با وزن بلند می‌شود، نه با پرش */
.card-lift {
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur) var(--ease);
}
.card-lift:hover { transform: translateY(-3px); }

.tcard__art { transition: transform var(--dur-cine) var(--ease-out), filter var(--dur-slow) var(--ease); }
.card-lift:hover .tcard__art { transform: scale(1.045); }

.podium__slot {
  transition:
    transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out),
    border-color var(--dur) var(--ease);
}
.podium__slot:hover { transform: translateY(-4px); }

.lb-table tbody tr { transition: background-color var(--dur) var(--ease); }

.meter__fill { transition: width var(--dur-cine) var(--ease-out); }

.toc__anchor { transition: opacity var(--dur) var(--ease); }
.skip-link { transition: top var(--dur) var(--ease-out); }

.nav-toggle__bar {
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur-fast) var(--ease);
}

.nav-scrim { transition: opacity var(--dur) var(--ease); }

.nav {
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}
.nav.is-open {
  transition:
    transform var(--dur-slow) var(--ease-out),
    visibility 0s;
}

.site-head {
  transition:
    padding var(--dur-slow) var(--ease-out),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* ===== ۳) ورود هنگام اسکرول =====
   ui.js کلاس is-in را با IntersectionObserver می‌گذارد. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* مرحله‌بندی: هر فرزندِ مستقیم ۶۰ms دیرتر می‌آید. عمق دو، تا
   یک ردیف کارت پشت‌سرِ هم بریزد نه همه با هم. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger.is-in > *:nth-child(n+7) { transition-delay: 360ms; }

/* ===== ۴) ورود سینمایی هیرو =====
   بدون اسکرول اجرا می‌شود؛ اولین چیزی که کاربر می‌بیند. */
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise-soft {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes art-in {
  from { opacity: 0; transform: translateY(20px) scale(1.04); }
  to { opacity: .78; transform: none; }
}

.hero__copy > * { animation: rise var(--dur-cine) var(--ease-out) both; }
.hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.hero__copy > *:nth-child(2) { animation-delay: 140ms; }
.hero__copy > *:nth-child(3) { animation-delay: 220ms; }
.hero__copy > *:nth-child(4) { animation-delay: 300ms; }
.hero__copy > *:nth-child(5) { animation-delay: 380ms; }
.hero__copy > *:nth-child(n+6) { animation-delay: 460ms; }

.hero__canvas { animation: art-in 1.4s var(--ease-out) both; }
.hero__rail > * { animation: rise-soft var(--dur-cine) var(--ease-out) both; }
.hero__rail > *:nth-child(1) { animation-delay: 520ms; }
.hero__rail > *:nth-child(2) { animation-delay: 600ms; }
.hero__rail > *:nth-child(3) { animation-delay: 680ms; }
.hero__rail > *:nth-child(4) { animation-delay: 760ms; }

/* ===== ۵) پارالاکس =====
   ui.js متغیر --sy را روی هر [data-parallax] با rAF می‌نویسد.
   فقط translate3d — هیچ خصوصیتِ چیدمانی. */
[data-parallax] {
  transform: translate3d(0, calc(var(--sy, 0) * 1px), 0);
  will-change: transform;
}

/* ===== ۶) ضربان زنده ===== */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.72); }
}
.chip--live::before,
.livebar__dot { animation: pulse-dot 1.6s var(--ease) infinite; }

/* هالهٔ آرام دور نقطهٔ زندهٔ هیرو */
@keyframes halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 245, 107, .34); }
  70% { box-shadow: 0 0 0 10px rgba(124, 245, 107, 0); }
}
.pulse-halo { animation: halo 2.4s var(--ease-out) infinite; }

/* ===== ۷) اسکلتون ===== */
@keyframes skel-slide {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.skel { animation: skel-slide 1.5s linear infinite; }

/* ===== ۸) توست و تب ===== */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.toast { animation: toast-in var(--dur) var(--ease-out); }
.toast--out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

@keyframes tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.tabpanel { animation: tab-in var(--dur-slow) var(--ease-out) both; }

/* ===== ۹) بلوکِ گم‌شدهٔ صفحهٔ ۴۰۴ ===== */
@keyframes block-miss {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(-10px); opacity: 1; }
}
.error-page__block { animation: block-miss 3s var(--ease) infinite; }

/* ===== ۱۰) شمارندهٔ عددی =====
   home.js عدد را با rAF بالا می‌برد؛ CSS فقط باید مانع پرشِ
   عرض ستون شود. */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* =============================================================
   ۱۱) کلید خاموشی
   کاربری که حرکت را خاموش کرده هیچ انیمیشنی نمی‌بیند — ولی
   محتوا را کامل و بی‌کم‌وکاست می‌بیند. این تفاوت مهم است:
   حذف انیمیشن نباید محتوا را نامرئی جا بگذارد.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  /* محتوا همیشه دیده می‌شود */
  .reveal,
  .reveal-stagger > *,
  .hero__copy > *,
  .hero__rail > *,
  .hero__canvas {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero__canvas { opacity: 1; }

  /* هیچ چیزی زیر انگشت یا اشاره‌گر جابه‌جا نمی‌شود */
  .card-lift:hover,
  .podium__slot:hover,
  .btn:hover,
  .btn:active,
  .nav-toggle:active,
  .trust:active,
  .brand:hover .brand__mark,
  .card-lift:hover .tcard__art { transform: none; }

  /* پارالاکس کاملاً خاموش */
  [data-parallax] { transform: none !important; will-change: auto; }

  /* حرکت تکرارشونده ممنوع */
  .chip--live::before,
  .livebar__dot,
  .pulse-halo,
  .error-page__block { animation: none; }

  .skel { animation: none; background: var(--surface-3); }
}