:root {
  --net-red: #e50914;
  --ink-900: #07080d;
  --ink-800: #0d1017;
  --ink-700: #131726;
  --ink-500: #2a314a;
  --text-soft: #95a0b8;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
  background:
    radial-gradient(circle at 8% 0%, rgba(229, 9, 20, 0.26), transparent 22%),
    radial-gradient(circle at 92% 12%, rgba(35, 76, 255, 0.2), transparent 30%),
    linear-gradient(180deg, #05060a 0%, #080a12 52%, #07080d 100%);
}

h1,
h2,
h3,
h4,
.brand-font {
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background: rgba(160, 177, 214, 0.3);
  border-radius: 999px;
}

.poster-shadow {
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.42),
    inset 0 -20px 35px rgba(0, 0, 0, 0.55);
}

.surface-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.netflix-gradient {
  background:
    linear-gradient(to right, rgba(5, 7, 12, 0.95) 20%, rgba(5, 7, 12, 0.72) 45%, rgba(5, 7, 12, 0.18) 70%, rgba(5, 7, 12, 0.88) 100%),
    linear-gradient(to top, rgba(5, 7, 12, 0.94) 4%, rgba(5, 7, 12, 0.2) 40%);
}

.card-overlay {
  background: linear-gradient(to top, rgba(5, 6, 10, 0.95), rgba(5, 6, 10, 0.35) 58%, rgba(5, 6, 10, 0.05));
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #131724 20%, #1c2231 38%, #131724 55%);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

.fade-up {
  animation: fadeUp 420ms ease-out both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scale-hover {
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.scale-hover:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

.scroll-row {
  scroll-snap-type: x mandatory;
}

.scroll-card {
  scroll-snap-align: start;
}

.video-range {
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.video-range::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #e50914;
}

.video-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #e50914;
}