/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@view-transition {
  navigation: auto;
}

@keyframes fade-out-to-left {
  0% {
    opacity: 1;
    transform: translateZ(0)
  }

  100% {
    opacity: 0;
    transform: translate3d(-4rem, 0, 0)
  }
}

@keyframes fade-in-from-left {
  0% {
    opacity: 0;
    transform: translate3d(-4rem, 0, 0)
  }

  100% {
    opacity: 1;
    transform: translateZ(0)
  }
}

@keyframes fade-out-to-right {
  0% {
    opacity: 1;
    transform: translateZ(0)
  }

  100% {
    opacity: 0;
    transform: translate3d(4rem, 0, 0)
  }
}

@keyframes fade-in-from-right {
  0% {
    opacity: 0;
    transform: translate3d(4rem, 0, 0)
  }

  100% {
    opacity: 1;
    transform: translateZ(0)
  }
}

html[data-turbo-visit-direction="forward"]::view-transition-old(prompt) {
  animation: fade-out-to-right 1s ease-out forwards;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(prompt) {
  animation: fade-in-from-right 1s ease-out forwards;
}

html[data-turbo-visit-direction="forward"]::view-transition-old(reply) {
  animation: fade-out-to-left 1s ease-out forwards;
}

html[data-turbo-visit-direction="forward"]::view-transition-new(reply) {
  animation: fade-in-from-left 1s ease-out forwards;
}