/**
 * Bitpedia — نوار نرخ زنده‌ی ارز (Live Ticker)
 * مارکیِ افقیِ بی‌نهایت با CSS خالص (transform, بدون GSAP) — سبک و ۶۰fps.
 */

.ticker {
  position: relative;
  z-index: var(--z-ticker);
  overflow: hidden;
  background: var(--glass);
  border-block: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding-block: var(--space-4);
}

/* محو‌شدنِ نرم لبه‌ها به‌جای برش ناگهانی */
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  inset-block: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
/* این سایت همیشه RTL است (بدون نسخهٔ LTR)، پس مقدارهای فیزیکیِ گرادیان مستقیم
   نوشته شده‌اند، نه یک نسخهٔ پایه + بازنویسیِ [dir]. inset-inline-start در RTL
   یعنی لبهٔ راست، پس گرادیان باید در راست solid و به‌سمت چپ transparent شود. */
.ticker::before {
  inset-inline-start: 0;
  background: linear-gradient(to right, transparent, var(--bg-1));
}
.ticker::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, transparent, var(--bg-1));
}

.ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: max-content;
  animation: ticker-scroll 42s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.ticker__flag {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ticker__name {
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}

.ticker__price {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.ticker__unit {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

.ticker__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--glass-border-hi);
  flex-shrink: 0;
}

/* حالت خطا — وقتی fetch نرخ زنده شکست بخورد (شبکه/CORS/سرویس در دسترس نیست) */
.ticker--error .ticker__track {
  animation: none;
  width: 100%;
  justify-content: center;
}
.ticker__item--error {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}