/* ===== Auto-Mob.IR — دیزاین‌سیستم و انیمیشن‌ها ===== */

:root {
  --brand-1: #2563eb;
  --brand-2: #7c3aed;
  --brand-3: #06b6d4;
  --ink: #0f172a;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Vazirmatn', 'Tahoma', sans-serif;
  background: #f8fafc;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* اسکرول‌بار سفارشی */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- انیمیشن‌ها ---------- */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, -30px) scale(1.1); }
  66%  { transform: translate(-30px, 20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.anim-fade-up { animation: fadeUp .6s ease-out both; }
.anim-fade-in { animation: fadeIn .9s ease-out both; }
.anim-float   { animation: floatY 7s ease-in-out infinite; }
.anim-drift   { animation: drift 18s ease-in-out infinite; }
.anim-pulse   { animation: pulseGlow 3.5s ease-in-out infinite; }

.delay-1 { animation-delay: .1s }
.delay-2 { animation-delay: .2s }
.delay-3 { animation-delay: .3s }
.delay-4 { animation-delay: .4s }
.delay-5 { animation-delay: .5s }

/* ---------- افکت‌ها ---------- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.card-lift {
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 45px -18px rgba(15, 23, 42, 0.28);
}

.hero-mesh {
  background:
    radial-gradient(60% 70% at 15% 15%, rgba(124, 58, 237, 0.55) 0%, transparent 55%),
    radial-gradient(50% 60% at 85% 20%, rgba(6, 182, 212, 0.45) 0%, transparent 55%),
    radial-gradient(60% 70% at 60% 90%, rgba(37, 99, 235, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 45%, #0c4a6e 100%);
}
.hero-mesh-light {
  background:
    radial-gradient(55% 65% at 12% 10%, rgba(124, 58, 237, 0.18) 0%, transparent 55%),
    radial-gradient(45% 55% at 90% 15%, rgba(6, 182, 212, 0.20) 0%, transparent 55%),
    radial-gradient(55% 65% at 55% 95%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
    linear-gradient(160deg, #eef2ff 0%, #f8fafc 50%, #ecfeff 100%);
}

.text-gradient {
  background: linear-gradient(120deg, #60a5fa, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shadow-glow { box-shadow: 0 0 0 1px rgba(96, 165, 250, .25), 0 20px 50px -20px rgba(59, 130, 246, .5); }

/* ---------- Skeleton / اسکلتون ---------- */
.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

/* ---------- شبكه نقطه‌چین ---------- */
.dot-grid {
  background-image: radial-gradient(rgba(255,255,255,0.13) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dot-grid-dark {
  background-image: radial-gradient(rgba(15,23,42,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- برچسب‌ها ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: #eef2ff;
  color: #4338ca;
}
.pill-soft {
  background: #f1f5f9;
  color: #475569;
}
.pill-green { background: #d1fae5; color: #065f46; }
.pill-amber { background: #fef3c7; color: #92400e; }

/* ---------- خط‌شکن پاراگراف ---------- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }