/* ──────────────────────────────────────────────────────────────────────
   سیستم شیشه‌ای سه‌بعدی
   یک کلاس `.glass` برای همه‌ی بلاک‌ها، به‌علاوه‌ی `.tilt` برای عمق.
   ────────────────────────────────────────────────────────────────────── */

.glass {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  /* ⚠ backdrop-filter روی عنصری که والدش overflow:hidden یا filter دارد
     در سافاری خاموش می‌شود. هیچ والد کارت‌ها filter ندارد — عمدی. */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  /* سایه‌ی سه‌لایه: لبه‌ی نور بالا (inset)، هاله‌ی نزدیک، سایه‌ی بلند و نرم.
     همین سه‌لایه است که شیشه را «ضخیم» نشان می‌دهد نه یک مستطیل مات. */
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 2px 6px -2px var(--glass-shadow),
    0 30px 70px -32px var(--glass-shadow);
  transition:
    background var(--t-theme) var(--ease-calm),
    border-color var(--t-theme) var(--ease-calm),
    box-shadow var(--t-mid) var(--ease-calm),
    transform var(--t-mid) var(--ease-glide);
}

/* ⚠ اینجا یک «درخشش» رادیالی بود که با اشاره‌گر حرکت می‌کرد و روی
   :hover و :focus-within با شفافیت ۰.۷۵ روی کارت می‌نشست. برداشته شد:
   روی متن می‌افتاد و خوانایی را کم می‌کرد. روی لمس بدتر هم بود — چون
   دستگاه لمسی بعد از هر ضربه :hover را نگه می‌دارد، پس درخشش روی
   کارتی که کاربر لمس کرده می‌ماند تا جای دیگری را لمس کند. */

/* ── عمق: چرخش حداکثر ۶ درجه ──────────────────────────────────────
   ⚠ عدد بزرگ‌تر حس آرامش را می‌شکند. عمقِ واقعی از translateZ لایه‌های
     داخلی می‌آید، نه از زاویه‌ی چرخش. */
.tilt-scene { perspective: 1200px; }

.tilt {
  transform-style: preserve-3d;
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  will-change: transform;
}
.tilt > * { transform-style: preserve-3d; }
.tilt .z1 { transform: translateZ(18px); }
.tilt .z2 { transform: translateZ(34px); }
.tilt .z3 { transform: translateZ(52px); }

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .tilt .z1, .tilt .z2, .tilt .z3 { transform: none; }
}

/* ── دکمه‌ها ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;          /* هدف لمس ≥۴۸px */
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-variation-settings: "wght" 500, "KASH" 2;
  font-size: 15.5px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-glide),
    box-shadow var(--t-mid) var(--ease-calm),
    background var(--t-theme) var(--ease-calm),
    color var(--t-theme) var(--ease-calm);
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-primary {
  background: linear-gradient(155deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 26px -12px var(--brand-600);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 16px 34px -12px var(--brand-600);
  transform: translateY(-2px);
}

.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--fg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.btn-ghost:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
  transform: translateY(-2px);
}

.btn .ic { width: 19px; height: 19px; flex: none; }

/* ── چیپ ─────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-size: 13.5px;
  color: var(--muted);
}
.chip .ic { width: 16px; height: 16px; color: var(--brand-500); flex: none; }

/* ── ظهور تدریجی هنگام اسکرول ─────────────────────────────────────
   حالت پایه «دیده‌شده» است و ui.js کلاس `.rv` را اضافه می‌کند تا مخفی
   شود. ⚠ برعکسش خطر دارد: اگر جاوااسکریپت نرسد، کل صفحه نامرئی
   می‌ماند. این‌طوری بدترین حالت «بدون انیمیشن» است، نه «بدون سایت». */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s var(--ease-glide),
    transform 0.85s var(--ease-glide);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}