/* ============================================================
   CFX — لایهٔ اجزای «پریمیوم» مشترک چیز فیز
   بدون هیچ کتابخانه‌ای. فقط transform و opacity انیمیت می‌شوند
   تا کامپوزیت روی GPU بماند و صفحه سبک بماند.

   هر طراحی این متغیرها را مقداردهی می‌کند:
     --cfx-accent  --cfx-accent-2  --cfx-ink
     --cfx-muted   --cfx-surface   --cfx-line
   ============================================================ */

:root {
  --cfx-accent:   #ffb703;
  --cfx-accent-2: #ffd166;
  --cfx-ink:      #fff7e8;
  --cfx-muted:    #a89bbd;
  --cfx-surface:  #141119;
  --cfx-line:     #322b40;
  --cfx-ease:     cubic-bezier(.22,.61,.36,1);
  --cfx-spring:   cubic-bezier(.34,1.4,.64,1);
}

/* ---------- ۱) نوار پیشرفت اسکرول ---------- */
.cfx-progress {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 200;
  transform-origin: right center;          /* راست‌چین */
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--cfx-accent-2), var(--cfx-accent));
  pointer-events: none;
}
html[dir="ltr"] .cfx-progress { transform-origin: left center; }

/* ---------- ۲) ظاهرشدن هنگام اسکرول ---------- */
[data-cfx-reveal] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity .62s var(--cfx-ease), transform .62s var(--cfx-ease);
  transition-delay: calc(var(--cfx-i, 0) * 70ms);
}
[data-cfx-reveal].is-in { opacity: 1; transform: none; }

/* ---------- ۳) نوار روان (مارکی) ---------- */
.cfx-marquee {
  /* ltr روی خودِ قاب — این است که جای دو ردیف را تعیین می‌کند. اگر
     rtl بماند، ردیف بدل سمت چپ می‌نشیند و translateX(-100%) هر دو را
     با هم بیرون می‌برد؛ از راست چیزی نمی‌آید و شکاف بزرگ‌تر می‌شود. */
  direction: ltr;
  position: relative; overflow: hidden; display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cfx-marquee__row {
  display: flex; flex: none; gap: var(--cfx-mq-gap, 30px);
  padding-inline-end: var(--cfx-mq-gap, 30px);
  animation: cfx-mq var(--cfx-mq-dur, 34s) linear infinite;
  will-change: transform;
}
.cfx-marquee:hover .cfx-marquee__row { animation-play-state: paused; }
.cfx-marquee[data-dir="rtl"] .cfx-marquee__row { animation-direction: reverse; }
@keyframes cfx-mq { to { transform: translate3d(-100%, 0, 0); } }
.cfx-marquee__item {
  direction: rtl;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-weight: 700; color: var(--cfx-muted); font-size: .95rem;
}
.cfx-marquee__item b { color: var(--cfx-accent); font-weight: 800; }

/* ---------- ۴) نور دنبال‌کنندهٔ نشانگر ----------
   دو سطح جدا، چون کارت‌های هر طراحی خودشان transform روی hover دارند:
     data-cfx-glow → فقط هالهٔ نور (بی‌خطر، روی هر کارتی سوار می‌شود)
     data-cfx-tilt → هاله + کج‌شدن سه‌بعدی (فقط جاهایی که transform آزاد است) */
@media (hover: hover) and (pointer: fine) {
  [data-cfx-glow]::after,
  [data-cfx-tilt]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2;
    background: radial-gradient(220px circle at var(--cfx-mx, 50%) var(--cfx-my, 50%),
                rgba(255,255,255,.10), transparent 62%);
  }
  [data-cfx-glow].is-hot::after,
  [data-cfx-tilt].is-hot::after { opacity: 1; }

  [data-cfx-tilt] {
    transform: perspective(900px)
               rotateX(calc(var(--cfx-ty, 0) * -5deg))
               rotateY(calc(var(--cfx-tx, 0) *  5deg))
               translate3d(0, 0, 0);
    transition: transform .5s var(--cfx-ease);
    will-change: transform;
  }
  [data-cfx-tilt].is-hot { transition: transform .09s linear; }
}

/* ---------- ۵) پالت فرمان (Ctrl+K) ---------- */
.cfx-k {
  position: fixed; inset: 0; z-index: 300; display: grid;
  place-items: start center; padding: max(9vh, 60px) 16px 16px;
  background: rgba(4, 3, 6, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--cfx-ease), visibility .22s;
}
.cfx-k.is-open { opacity: 1; visibility: visible; }
.cfx-k__box {
  width: min(620px, 100%); border-radius: 20px; overflow: hidden;
  background: var(--cfx-surface); border: 1px solid var(--cfx-line);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9);
  transform: translate3d(0, -14px, 0) scale(.985);
  transition: transform .26s var(--cfx-spring);
  display: flex; flex-direction: column; max-height: min(70vh, 560px);
}
.cfx-k.is-open .cfx-k__box { transform: none; }
.cfx-k__in {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--cfx-line);
}
.cfx-k__in svg { flex: none; color: var(--cfx-muted); }
.cfx-k__in input {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--cfx-ink); font-size: 1.05rem; font-weight: 600; min-width: 0;
}
.cfx-k__in input::placeholder { color: var(--cfx-muted); }
.cfx-k__esc {
  flex: none; font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: var(--cfx-muted); border: 1px solid var(--cfx-line);
  border-radius: 7px; padding: 3px 8px;
}
.cfx-k__list { overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }
.cfx-k__row {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 11px 13px; border-radius: 13px; text-align: start;
  color: var(--cfx-ink); transition: background .14s;
}
.cfx-k__row.on { background: color-mix(in srgb, var(--cfx-accent) 16%, transparent); }
.cfx-k__ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid;
  place-items: center; font-size: 1.1rem; font-weight: 800;
  background: color-mix(in srgb, var(--cfx-accent) 18%, transparent);
  color: var(--cfx-accent);
}
.cfx-k__t { flex: 1; min-width: 0; line-height: 1.35; }
.cfx-k__t b { display: block; font-weight: 700; font-size: .96rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfx-k__t span { font-size: .78rem; color: var(--cfx-muted); }
.cfx-k__p { flex: none; font-weight: 800; font-size: .88rem; color: var(--cfx-accent); }
.cfx-k__empty { padding: 40px 16px; text-align: center; color: var(--cfx-muted); }
.cfx-k__foot {
  display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--cfx-line);
  font-size: .74rem; color: var(--cfx-muted);
}
.cfx-k__foot kbd {
  font-family: inherit; font-size: .68rem; font-weight: 800;
  border: 1px solid var(--cfx-line); border-radius: 5px; padding: 1px 6px;
}

/* دکمهٔ کوچک «جست‌وجوی سریع» در هدر */
.cfx-kbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  color: var(--cfx-muted); border: 1px solid var(--cfx-line);
  background: color-mix(in srgb, var(--cfx-ink) 4%, transparent);
  transition: color .2s, border-color .2s;
}
.cfx-kbtn:hover { color: var(--cfx-ink); border-color: var(--cfx-accent); }
.cfx-kbtn kbd { font-family: inherit; font-size: .68rem; font-weight: 800; opacity: .8; }
@media (max-width: 860px) { .cfx-kbtn { display: none; } }

/* ---------- هیروی «برگر بازشونده» — فعلاً خاموش ----------
   استایل‌هایش دست‌نخورده رفته توی shared/cfx-hero.parked.css
   (CSS کامنت تودرتو ندارد، پس نمی‌شد همین‌جا کامنتش کرد).
   برای برگرداندن، محتوای آن فایل را همین‌جا برگردان و بخش ۷ در
   cfx.js و <section class="cfxh"> در index.html‌ها را از کامنت دربیاور. */

/* ---------- ۷) اعداد شمارشی ---------- */
[data-cfx-count] { font-variant-numeric: tabular-nums; }

/* ---------- احترام به کم‌کردن حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-cfx-reveal] { opacity: 1; transform: none; transition: none; }
  .cfx-marquee__row { animation: none; }
  [data-cfx-tilt] { transform: none !important; transition: none; }
}