/* ===================================================================
   Monex v3 — Bold scroll-driven motion layer
   موشن‌های اسکرول‌محور: پارالاکس، ورودِ سینمایی، گالریِ افقیِ پین‌شده.
   لایه‌ای روی style.css + sections.css + polish.css (قابل‌حذف).
   موتورِ JS: assets/js/scroll-motion.js
   =================================================================== */

/* --- سیستمِ reveal قدیمی را خاموش می‌کنیم تا v3 کنترل ورودها را بگیرد --- */
@supports (animation-timeline: view()) {
  .reveal, .section-head.reveal, .svc-banner.reveal,
  .mkt.reveal, .course.reveal, .ncard.reveal { animation: none !important; }
}

/* =====================================================================
   1) ورودهای سینمایی (JS کلاسِ .v3-in را هنگام دیده‌شدن اضافه می‌کند)
   کلاس‌های مرکب (specificity بالاتر) تا بر .reveal غلبه کنند.
   ===================================================================== */
.v3-anim { will-change: opacity, transform, filter;
  transition: opacity .95s var(--ease-out), transform 1.05s var(--ease-out), filter .9s var(--ease-out); }
.v3-anim.v3-rise  { opacity: 0; transform: translateY(90px); }
.v3-anim.v3-left  { opacity: 0; transform: translateX(-90px) rotate(-3deg); }
.v3-anim.v3-right { opacity: 0; transform: translateX(90px) rotate(3deg); }
.v3-anim.v3-zoom  { opacity: 0; transform: scale(.82); }
.v3-anim.v3-blur  { opacity: 0; transform: translateY(46px); filter: blur(16px); }
.v3-anim.v3-in    { opacity: 1; transform: none; filter: none; }

/* =====================================================================
   2) پارالاکس — لایه‌های عمق که با اسکرول با سرعت‌های متفاوت حرکت می‌کنند
   ===================================================================== */
[data-plx], [data-plxy] { will-change: transform; }

/* گویچه‌های نوریِ شناور (عمقِ پس‌زمینه) */
.plx-orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; z-index: 0; }
.plx-orb.magenta { background: radial-gradient(circle, rgba(178,62,125,.50), transparent 68%); }
.plx-orb.gold    { background: radial-gradient(circle, rgba(245,196,81,.38), transparent 68%); }
.plx-orb.navy    { background: radial-gradient(circle, rgba(52,62,130,.50), transparent 68%); }
[data-theme="light"] .plx-orb { opacity: .3; filter: blur(80px); }

/* بخش‌ها relative شوند تا گویچه‌ها لنگر بگیرند و محتوا رویشان بیاید.
   (بدنه overflow-x:hidden دارد؛ پس گویچه‌های لبه اسکرول‌بار افقی نمی‌سازند) */
.section { position: relative; }
.section > .container { position: relative; z-index: 1; }
.hero .container { position: relative; z-index: 1; }

/* =====================================================================
   3) MARKETS — گالریِ افقیِ پین‌شده (با اسکرولِ عمودی، افقی حرکت می‌کند)
   ===================================================================== */
.hpin-sec { position: relative; height: 240vh; padding: 0; background: transparent; }
.hpin-stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(18px, 4vh, 40px); }
.hpin-head { text-align: center; }
.hpin-head .section-head { margin-bottom: 0; }

/* گریدِ نهایی — کارت‌ها یکی‌یکی از راست پرواز می‌کنند و سرِ جایشان می‌چینند */
.hpin-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; width: 100%; }
.hpin-grid .mkt { height: min(50vh, 420px); will-change: transform, opacity;
  transition: box-shadow .4s var(--ease-out); }

/* راهنمای پیشرفتِ افقی */
.hpin-hint { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--text-dim); font-size: .78rem; letter-spacing: 2px; }
.hpin-bar { width: 130px; height: 3px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.hpin-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-2), var(--gold)); }

/* موبایل: اسکرولِ افقیِ لمسی به‌جای پین */
@media (max-width: 940px) {
  .hpin-sec { height: auto; padding: 64px 0; }
  .hpin-stage { position: static; height: auto; overflow: visible; }
  .hpin-grid { grid-template-columns: repeat(3, 1fr); }
  .hpin-grid .mkt { height: 300px; transform: none !important; opacity: 1 !important; }
  .hpin-hint { display: none; }
}
@media (max-width: 560px) {
  .hpin-grid { grid-template-columns: repeat(2, 1fr); }
  .hpin-grid .mkt { height: 240px; }
}

/* =====================================================================
   4) احترام به reduced-motion — همه‌چیز ساکن و استاتیک
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hpin-sec { height: auto; }
  .hpin-stage { position: static; height: auto; overflow: visible; }
  .hpin-grid .mkt { transform: none !important; opacity: 1 !important; }
  [data-plx], [data-plxy] { transform: none !important; }
  .plx-orb { display: none; }
}