* { font-family: 'Vazirmatn', sans-serif; }

body { margin: 0; background: #fafaf9; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f5f5f4; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

img { -webkit-user-drag: none; user-select: none; }

/* smooth image fade-in */
img { transition: opacity 0.3s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
main .grid > div { animation: fadeIn 0.4s ease backwards; }
main .grid > div:nth-child(1) { animation-delay: 0.02s; }
main .grid > div:nth-child(2) { animation-delay: 0.06s; }
main .grid > div:nth-child(3) { animation-delay: 0.10s; }
main .grid > div:nth-child(4) { animation-delay: 0.14s; }
main .grid > div:nth-child(5) { animation-delay: 0.18s; }
main .grid > div:nth-child(6) { animation-delay: 0.22s; }

input[type="range"] { cursor: pointer; }
html { scroll-behavior: smooth; }