/* Custom animations */

@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes fade-and-move-out {
  from {
    opacity: 1;
    transform: translateY(0%);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes fade-and-move-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes move-in-from-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes move-out-to-right {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

/* View Transitions */

:root {
  --easing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

::view-transition-old(movie-row) {
  animation: 0.25s var(--easing-function) both move-out;
}

::view-transition-new(movie-row) {
  animation: 0.25s var(--easing-function) both move-in;
}

::view-transition-old(featured-details) {
  animation: 0.35s var(--easing-function) both fade-and-move-out;
}

::view-transition-new(featured-details) {
  animation: 0.35s var(--easing-function) both fade-and-move-in;
}

::view-transition-old(movie-details):only-child {
  animation: 0.35s var(--easing-function) both fade-and-move-out;
}

::view-transition-new(movie-details):only-child {
  animation: 0.35s var(--easing-function) both fade-and-move-in;
}

::view-transition-old(side-panel) {
  animation: 0.25s var(--easing-function) both move-out-to-right;
}

::view-transition-new(side-panel) {
  animation: 0.25s var(--easing-function) both move-in-from-right;
}
