:root {
  --bg: #090c14;
  --surface: #101421;
  --surface-soft: #151b2d;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f8fafc;
  --text-muted: #a6adc8;
  --accent: #f25f4c;
  --accent-2: #ff9f1c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at -10% -15%, rgba(242, 95, 76, 0.25), transparent 60%),
    radial-gradient(900px 500px at 110% -20%, rgba(255, 159, 28, 0.18), transparent 60%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text-muted);
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.nav-link:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.movie-tile {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.row-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 4px 16px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.row-scroll > * {
  scroll-snap-align: start;
}

.row-scroll::-webkit-scrollbar {
  height: 8px;
}

.row-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.row-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.soft-panel {
  border: 1px solid var(--line);
  background: rgba(16, 20, 33, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}