@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-left {
  from {
    transform: translateX(-100%);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-100%);
  }
}

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

@keyframes slide-up {
  from {
    transform: translateY(130px);
  }
}

@keyframes slide-to-right {
  to {
    transform: translateX(100%);
  }
}

/* Global but more fancy */
/* html[data-turbo-visit-direction="forward"]::view-transition-old(main-container) {
  animation: 400ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(main-container) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
} */
/* ::view-transition-old(container-slide-left) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

::view-transition-new(container-slide-left) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

html[data-turbo-visit-direction="forward"]::view-transition-old(container-parent) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(container-parent) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
} */
/*

html[data-turbo-visit-direction="forward"]::view-transition-old(bottom-nav) {
  animation: none;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(bottom-nav) {
  animation: none;
} */