/* ========================================================
   LETTERBOXD BUTTON
======================================================== */

.letterboxd-button {
  position: fixed;

  top: 25px;
  right: 28px;

  z-index: 100;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    10px
    16px;

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

  border-radius:
    30px;

  background:
    rgba(10, 10, 10, 0.65);

  backdrop-filter:
    blur(10px);

  color:
    var(--cream);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    0.72rem;

  font-weight:
    500;

  letter-spacing:
    1.4px;

  text-transform:
    uppercase;

  text-decoration:
    none;

  box-shadow:
    0 5px 20px
    rgba(0, 0, 0, 0.35);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


/* Hover effect */

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

  border-color:
    var(--gold);

  background:
    rgba(20, 18, 16, 0.9);

  box-shadow:
    0 8px 25px
    rgba(0, 0, 0, 0.5);
}


/* Letterboxd-style colored dots */

.letterboxd-dots {
  display: flex;

  align-items: center;

  gap: 3px;
}


.dot {
  display: block;

  width: 8px;
  height: 8px;

  border-radius: 50%;
}


.dot.green {
  background:
    #00e054;
}


.dot.orange {
  background:
    #ff8000;
}


.dot.blue {
  background:
    #40bcf4;
}


/* ========================================================
   HOME BUTTON
   Completely independent from Letterboxd button
======================================================== */

.movie-home-button {
  position: fixed;

  top: 24px;
  left: 28px;

  z-index: 100;

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

  gap: 10px;

  min-width: 145px;

  padding:
    10px
    16px;

  /* Dark old-Hollywood background */

  background:
    linear-gradient(
      145deg,
      #211b16,
      #0d0b0a
    );

  /* Gold border */

  border:
    1px solid
    #d7ad5a;

  color:
    #f0cf83;

  text-decoration:
    none;

  box-shadow:
    0 7px 25px
    rgba(0, 0, 0, 0.55),

    inset 0 0 0 3px
    rgba(215, 173, 90, 0.08);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* ========================================================
   INNER ART DECO BORDER
======================================================== */

.movie-home-button::before {
  content: "";

  position: absolute;

  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;

  border:
    1px solid
    rgba(215, 173, 90, 0.22);

  pointer-events: none;
}


/* ========================================================
   HOME TEXT CONTAINER
======================================================== */

.movie-home-text {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  line-height: 1;
}


/* Small "RETURN TO" text */

.movie-home-small {
  margin-bottom: 4px;

  color:
    #aaa092;

  font-family:
    "Montserrat",
    Arial,
    sans-serif;

  font-size:
    0.48rem;

  font-weight:
    500;

  letter-spacing:
    2.5px;

  text-transform:
    uppercase;
}


/* Large HOME text */

.movie-home-title {
  color:
    #f0cf83;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    1.2rem;

  font-weight:
    700;

  letter-spacing:
    2px;

  text-transform:
    uppercase;
}


/* ========================================================
   DECORATIVE DIAMONDS
======================================================== */

.movie-home-decoration {
  color:
    #d7ad5a;

  font-size:
    0.5rem;

  opacity:
    0.85;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}


/* ========================================================
   HOVER
======================================================== */

.movie-home-button:hover {
  transform:
    translateY(-3px);

  background:
    linear-gradient(
      145deg,
      #33271c,
      #14100d
    );

  border-color:
    #f0cf83;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.65),

    0 0 20px
    rgba(215, 173, 90, 0.18),

    inset 0 0 0 3px
    rgba(215, 173, 90, 0.12);
}


/* Make diamonds move slightly */

.movie-home-button:hover
.movie-home-decoration {
  color:
    #ffe3a1;

  transform:
    rotate(45deg)
    scale(1.2);
}


/* HOME text brightens */

.movie-home-button:hover
.movie-home-title {
  color:
    #ffe3a1;
}


/* ========================================================
   CLICK
======================================================== */

.movie-home-button:active {
  transform:
    translateY(0)
    scale(0.97);
}


/* ========================================================
   KEYBOARD ACCESSIBILITY
======================================================== */

.movie-home-button:focus-visible {
  outline:
    2px solid
    #f0cf83;

  outline-offset:
    4px;
}


/* ========================================================
   MOBILE
======================================================== */

@media (max-width: 650px) {

  .movie-home-button {
    top: 14px;
    left: 14px;

    min-width: 110px;

    padding:
      8px
      10px;

    gap:
      6px;
  }


  .movie-home-title {
    font-size:
      0.9rem;

    letter-spacing:
      1.5px;
  }


  .movie-home-small {
    font-size:
      0.4rem;

    letter-spacing:
      1.5px;
  }


  .movie-home-decoration {
    font-size:
      0.4rem;
  }

}