:root {
  --bg: #080b12;
  --bg-soft: #101520;
  --surface: #151b28;
  --surface-hover: #1c2535;

  --text: #f7f8fb;
  --text-soft: #aab1bf;
  --text-muted: #747d8c;

  --primary: #7c5cff;
  --primary-hover: #9279ff;
  --accent: #20d6c7;

  --border: rgba(255, 255, 255, 0.08);

  --shadow:
    0 20px 60px rgba(0, 0, 0, 0.45);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --container: 1240px;

  --transition: 0.25s ease;
}


/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    sans-serif;

  background:
    radial-gradient(
      circle at top right,
      rgba(124, 92, 255, 0.12),
      transparent 30%
    ),
    var(--bg);

  color:
    var(--text);

  line-height: 1.6;

  min-height: 100vh;
}

body.modal-open,
body.search-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

img {
  max-width: 100%;
  display: block;
}


/* CONTAINER */

.container {
  width:
    min(
      92%,
      var(--container)
    );

  margin-inline: auto;
}


/* HEADER */

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    linear-gradient(
      to bottom,
      rgba(8, 11, 18, 0.95),
      rgba(8, 11, 18, 0.68),
      transparent
    );

  backdrop-filter:
    blur(10px);
}

.header__content {
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.logo,
.footer__logo {
  font-size: 1.6rem;

  font-weight: 800;

  letter-spacing:
    -0.04em;
}

.logo span,
.footer__logo span {
  color:
    var(--primary);
}


/* NAVIGATION */

.navigation {
  display: flex;
  align-items: center;

  gap: 30px;
}

.navigation a {
  color:
    var(--text-soft);

  font-size: 0.92rem;

  font-weight: 500;

  transition:
    color var(--transition);
}

.navigation a:hover {
  color:
    var(--text);
}


/* HEADER ACTIONS */

.header__actions {
  display: flex;
  align-items: center;

  gap: 14px;
}

.search-button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    var(--border);

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  color:
    var(--text);

  cursor: pointer;

  transition:
    transform var(--transition),
    background var(--transition);
}

.search-button:hover {
  transform:
    translateY(-2px);

  background:
    rgba(
      255,
      255,
      255,
      0.1
    );
}

.profile {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--accent)
    );

  color: #fff;

  font-size: 0.8rem;

  font-weight: 700;
}


/* SEARCH */

.search-panel {
  position: fixed;

  inset: 0;

  z-index: 1900;

  padding-top: 110px;

  background:
    rgba(
      5,
      8,
      14,
      0.96
    );

  backdrop-filter:
    blur(18px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(-12px);

  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility var(--transition);
}

.search-panel.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0);
}

.search-panel__content {
  height:
    calc(
      100vh - 110px
    );

  overflow-y: auto;

  padding-bottom: 60px;
}

.search-field {
  display: flex;
  align-items: center;

  width:
    min(
      100%,
      920px
    );

  margin:
    0 auto 24px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.search-field:focus-within {
  border-color:
    rgba(
      124,
      92,
      255,
      0.62
    );
}

.search-field__icon {
  margin-left: 20px;
}

.search-field input {
  width: 100%;

  padding:
    18px 16px;

  border: 0;

  outline: 0;

  background:
    transparent;

  color:
    var(--text);
}

.search-field input::placeholder {
  color:
    var(--text-muted);
}

.search-close {
  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  margin-right: 8px;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.05
    );

  color:
    var(--text-soft);

  cursor: pointer;
}


/* FILTERS */

.genre-filters {
  width:
    min(
      100%,
      920px
    );

  margin:
    0 auto 34px;

  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;
}

.genre-filter {
  padding:
    10px 16px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  color:
    var(--text-soft);

  cursor: pointer;
}

.genre-filter.is-active {
  color: #fff;

  background:
    rgba(
      124,
      92,
      255,
      0.22
    );

  border-color:
    rgba(
      124,
      92,
      255,
      0.62
    );
}


/* SEARCH RESULTS */

.search-results__header {
  margin-bottom: 18px;

  color:
    var(--text-muted);

  font-size: 0.85rem;
}

.search-empty {
  width:
    min(
      100%,
      760px
    );

  margin:
    50px auto;

  padding:
    45px 30px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  border:
    1px dashed
    var(--border);

  border-radius:
    var(--radius-lg);

  color:
    var(--text-muted);
}

.search-empty__icon {
  font-size: 2.8rem;

  margin-bottom: 12px;
}

.search-empty strong {
  color:
    var(--text);
}


/* HERO */

.hero {
  min-height: 92vh;

  position: relative;

  display: flex;
  align-items: center;

  padding-top: 100px;

  overflow: hidden;

  transition:
    background 0.6s ease;
}

.hero::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 72% 36%,
      rgba(
        255,
        255,
        255,
        0.12
      ),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 60%,
      rgba(
        124,
        92,
        255,
        0.2
      ),
      transparent 28%
    );
}

.hero::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 200px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--bg)
    );
}

.hero__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(
        8,
        11,
        18,
        0.7
      ),
      transparent 45%
    );
}

.hero__content {
  position: relative;

  z-index: 2;

  max-width: 760px;
}

.hero__badge,
.section-label {
  display: inline-block;

  margin-bottom: 14px;

  color:
    var(--accent);

  font-size: 0.78rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing:
    0.16em;
}

.hero h1 {
  max-width: 760px;

  font-size:
    clamp(
      3rem,
      7vw,
      6.6rem
    );

  line-height: 0.95;

  letter-spacing:
    -0.055em;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 16px;

  margin-top: 22px;

  color:
    rgba(
      255,
      255,
      255,
      0.76
    );

  font-size: 0.86rem;
}

.hero p {
  max-width: 640px;

  margin-top: 18px;

  color:
    var(--text-soft);

  font-size: 1.05rem;
}

.hero--changing
.hero__content {
  animation:
    heroContentIn
    0.55s ease;
}


/* HERO BUTTONS */

.hero__buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 30px;
}


/* HERO CAROUSEL */

.hero-carousel {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-top: 34px;
}

.hero-carousel__arrow {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  color: #fff;

  cursor: pointer;

  transition:
    transform var(--transition),
    background var(--transition);
}

.hero-carousel__arrow:hover {
  transform:
    scale(1.08);

  background:
    rgba(
      255,
      255,
      255,
      0.15
    );
}

.hero-carousel__indicators {
  display: flex;

  align-items: center;

  gap: 8px;
}

.hero-carousel__indicator {
  width: 9px;
  height: 9px;

  padding: 0;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.35
    );

  cursor: pointer;

  transition:
    width 0.25s ease,
    background 0.25s ease;
}

.hero-carousel__indicator.is-active {
  width: 30px;

  background:
    var(--accent);
}


/* BUTTON */

.button {
  min-height: 48px;

  padding:
    0 22px;

  border-radius:
    999px;

  cursor: pointer;

  font-weight: 700;

  transition:
    transform var(--transition),
    opacity var(--transition),
    background var(--transition);
}

.button:hover {
  transform:
    translateY(-2px);
}

.button--primary {
  background:
    var(--text);

  color:
    var(--bg);
}

.button--secondary {
  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    var(--text);

  border:
    1px solid
    var(--border);
}

.button--secondary.is-saved {
  background:
    rgba(
      124,
      92,
      255,
      0.22
    );

  border-color:
    rgba(
      124,
      92,
      255,
      0.65
    );
}


/* CATALOG */

.catalog {
  padding:
    54px 0 26px;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 22px;
}

.section-header h2 {
  font-size:
    clamp(
      1.6rem,
      3vw,
      2.4rem
    );

  line-height: 1.1;

  letter-spacing:
    -0.035em;
}


/* GRID */

.movie-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 24px;
}


/* CARD */

.movie-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    18px;

  background:
    var(--surface);

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      0.22
    );

  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.movie-card:hover {
  transform:
    translateY(-9px);

  border-color:
    rgba(
      124,
      92,
      255,
      0.38
    );

  box-shadow:
    0 24px 55px
    rgba(
      0,
      0,
      0,
      0.5
    );
}


/* POSTER */

.movie-card__poster {
  position: relative;

  aspect-ratio:
    2 / 3;

  overflow: hidden;

  isolation: isolate;
}

.movie-card__poster::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    radial-gradient(
      circle at 65% 30%,
      rgba(
        255,
        255,
        255,
        0.14
      ),
      transparent 25%
    );
}

.movie-card__poster::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      to bottom,
      rgba(
        0,
        0,
        0,
        0.04
      ),
      rgba(
        0,
        0,
        0,
        0.08
      ) 45%,
      rgba(
        0,
        0,
        0,
        0.9
      ) 100%
    );
}

.movie-card__poster-effects {
  position: absolute;

  inset:
    15% -20%
    auto auto;

  width: 80%;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  filter:
    blur(40px);
}

.movie-card__poster-top {
  position: absolute;

  top: 14px;
  left: 14px;
  right: 14px;

  z-index: 4;

  display: flex;
  justify-content: space-between;

  gap: 8px;
}

.movie-type-badge,
.movie-rating-badge {
  padding:
    6px 9px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius:
    999px;

  background:
    rgba(
      0,
      0,
      0,
      0.3
    );

  color:
    rgba(
      255,
      255,
      255,
      0.9
    );

  font-size:
    0.67rem;

  font-weight: 600;
}

.movie-card__poster-center {
  position: absolute;

  inset: 0;

  z-index: 3;

  display: grid;
  place-items: center;

  padding-bottom: 50px;
}

.movie-card__icon {
  font-size:
    clamp(
      4rem,
      7vw,
      6rem
    );

  filter:
    drop-shadow(
      0 22px 22px
      rgba(
        0,
        0,
        0,
        0.42
      )
    );

  transition:
    transform 0.35s ease;
}

.movie-card:hover
.movie-card__icon {
  transform:
    scale(1.12)
    rotate(-2deg);
}

.movie-card__poster-bottom {
  position: absolute;

  left: 18px;
  right: 18px;
  bottom: 18px;

  z-index: 4;
}

.movie-card__year {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size: 0.72rem;
}

.movie-card__poster-title {
  margin-top: 4px;

  color: #fff;

  font-size:
    clamp(
      1.45rem,
      2.5vw,
      2rem
    );

  line-height: 0.98;

  letter-spacing:
    -0.05em;
}

.movie-card__poster-genre {
  display: block;

  margin-top: 9px;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 0.72rem;
}


/* CARD CONTENT */

.movie-card__content {
  padding:
    16px 17px 18px;
}

.movie-card__info h3 {
  font-size: 0.98rem;

  margin-bottom: 8px;
}

.movie-card__meta {
  display: flex;
  flex-wrap: wrap;

  gap:
    6px 10px;

  color:
    var(--text-muted);

  font-size: 0.72rem;
}

.movie-card__actions {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 15px;
}


/* CARD BUTTONS */

.trailer-button,
.details-button,
.favorite-button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color: #fff;

  cursor: pointer;

  transition:
    transform var(--transition),
    background var(--transition);
}

.trailer-button:hover,
.details-button:hover,
.favorite-button:hover {
  transform:
    scale(1.08);

  background:
    rgba(
      124,
      92,
      255,
      0.2
    );
}

.favorite-button {
  font-size: 1.22rem;
}

.favorite-button.is-saved {
  color:
    #ff6685;

  background:
    rgba(
      255,
      102,
      133,
      0.12
    );
}


/* TRAILER */

.movie-card__trailer {
  position: absolute;

  inset: 0;

  z-index: 10;

  background:
    rgba(
      0,
      0,
      0,
      0.95
    );

  opacity: 0;

  pointer-events: none;
}

.movie-card.is-playing
.movie-card__trailer {
  opacity: 1;

  pointer-events: auto;
}

.trailer-preview {
  position: relative;

  width: 100%;
  height: 100%;
}

.trailer-preview iframe {
  width: 100%;
  height: 100%;

  border: 0;
}

.trailer-close {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 15;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      0.7
    );

  color: #fff;

  cursor: pointer;
}


/* MODAL */

.details-modal {
  position: fixed;

  inset: 0;

  z-index: 2000;

  display: grid;
  place-items: center;

  padding: 24px;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity var(--transition);
}

.details-modal.is-open {
  opacity: 1;

  pointer-events: auto;
}

.details-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(
      0,
      0,
      0,
      0.8
    );

  backdrop-filter:
    blur(9px);
}

.details-modal__content {
  position: relative;

  z-index: 2;

  width:
    min(
      92vw,
      760px
    );

  max-height: 90vh;

  overflow-y: auto;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-lg);

  background:
    var(--bg);

  box-shadow:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      0.75
    );
}

.details-modal__close {
  position: absolute;

  top: 16px;
  right: 16px;

  z-index: 10;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background:
    rgba(
      0,
      0,
      0,
      0.52
    );

  color: #fff;

  cursor: pointer;
}

.details-modal__hero {
  position: relative;

  min-height: 340px;

  display: grid;
  place-items: center;

  overflow: hidden;
}

.details-modal__poster-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(
        0,
        0,
        0,
        0.05
      ),
      rgba(
        0,
        0,
        0,
        0.18
      ) 55%,
      var(--bg) 100%
    );
}

.details-modal__hero-content {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.details-modal__type {
  padding:
    7px 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius: 999px;

  background:
    rgba(
      0,
      0,
      0,
      0.25
    );

  font-size: 0.7rem;
}

.details-modal__icon {
  margin:
    25px 0 20px;

  font-size: 5.5rem;
}

.details-modal__hero-title {
  font-size:
    clamp(
      2.2rem,
      6vw,
      4.2rem
    );

  line-height: 0.95;

  font-weight: 700;

  letter-spacing:
    -0.055em;
}

.details-modal__body {
  padding:
    6px 34px 38px;
}

.details-modal__body h2 {
  font-size:
    clamp(
      2rem,
      5vw,
      3.2rem
    );

  line-height: 1;

  margin-bottom: 18px;
}

.details-modal__meta {
  display: flex;
  flex-wrap: wrap;

  gap:
    10px 16px;

  color:
    var(--text-soft);

  margin-bottom: 22px;
}

.details-modal__description {
  color:
    var(--text-soft);

  line-height: 1.8;
}

.details-modal__buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;
}


/* EMPTY */

.empty-list {
  min-height: 220px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 40px;

  border:
    1px dashed
    var(--border);

  border-radius:
    var(--radius-lg);
}

.empty-list span {
  font-size: 2.3rem;

  color:
    var(--primary);
}

.empty-list p {
  margin-top: 8px;

  font-weight: 600;
}

.empty-list small {
  color:
    var(--text-muted);
}


/* FOOTER */

.footer {
  margin-top: 70px;

  padding:
    54px 0;

  border-top:
    1px solid
    var(--border);

  color:
    var(--text-soft);
}

.footer .container {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.footer__technology {
  color:
    var(--text-muted);

  font-size: 0.84rem;
}


/* TMDB CREDITS */

.footer__credits {
  width:
    min(
      100%,
      720px
    );

  margin-top:
    22px;

  padding-top:
    20px;

  border-top:
    1px solid
    var(--border);

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  color:
    var(--text-muted);

  font-size:
    0.76rem;

  line-height:
    1.6;
}

.footer__credits p {
  margin: 0;
}

.footer__credits a {
  color:
    var(--text-soft);

  font-weight:
    600;

  transition:
    color var(--transition);
}

.footer__credits a:hover {
  color:
    var(--accent);
}

.tmdb-credit {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    4px;
}

.tmdb-credit img {
  width:
    78px;

  height:
    auto;

  object-fit:
    contain;
}

.tmdb-credit__label {
  color:
    var(--text-soft);

  font-size:
    0.8rem;

  font-weight:
    600;
}


/* ANIMATIONS */

@keyframes heroContentIn {

  from {
    opacity: 0;

    transform:
      translateY(15px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


@keyframes fadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.my-list-grid,
.search-results__grid {
  animation:
    fadeIn
    0.35s ease;
}


/* TABLET */

@media (
  max-width: 980px
) {

  .movie-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* MOBILE */

@media (
  max-width: 760px
) {

  .header__content {
    min-height: 68px;
  }

  .navigation {
    display: none;
  }

  .search-panel {
    padding-top: 88px;
  }

  .search-panel__content {
    height:
      calc(
        100vh - 88px
      );
  }

  .genre-filters {
    justify-content:
      flex-start;
  }

  .hero {
    min-height: 88vh;
  }

  .hero h1 {
    font-size:
      clamp(
        2.8rem,
        15vw,
        4.5rem
      );
  }

  .hero-carousel {
    margin-top: 28px;
  }

}


/* SMALL MOBILE */

@media (
  max-width: 560px
) {

  .movie-grid {
    grid-template-columns:
      1fr;
  }

  .movie-card {
    width:
      min(
        100%,
        360px
      );

    margin-inline: auto;
  }

  .hero__buttons,
  .details-modal__buttons {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-carousel__arrow {
    width: 38px;
    height: 38px;
  }

  .footer__credits {
    padding-inline:
      0;
  }

  .tmdb-credit {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      8px;
  }

  .tmdb-credit img {
    width:
      68px;
  }

}