/* ---------- custom scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a4a; }

/* ---------- hide scrollbar for horizontal sections ---------- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- horizontal scroll sections ---------- */
.section-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scroll-behavior: smooth;
}
.section-card {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
}
@media (min-width: 640px) { .section-card { width: 160px; } }
@media (min-width: 768px) { .section-card { width: 175px; } }

/* ---------- line clamp ---------- */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.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; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- smooth transitions ---------- */
* { scroll-behavior: smooth; }

/* ---------- image fade-in ---------- */
img { background-color: #13131a; }

/* ---------- selection ---------- */
::selection { background: #7c3aed; color: white; }

/* ---------- portal grid background ---------- */
.bg-grid {
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}