.fade-in {
  animation: fade-in 0.2s forwards;
}

.fade-out {
  animation: fade-out 0.2s forwards;
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

html[dir="ltr"] .app-go-deeper-out {
  animation: current-to-left var(--transition-duration) forwards;
}
html[dir="rtl"] .app-go-deeper-out {
  animation: current-to-right var(--transition-duration) forwards;
}

html[dir="ltr"] .app-go-deeper-in {
  animation: right-to-current var(--transition-duration) forwards;
}
html[dir="rtl"] .app-go-deeper-in {
  animation: left-to-current var(--transition-duration) forwards;
}

html[dir="ltr"] .app-go-deeper-back-in {
  animation: left-to-current var(--transition-duration) forwards;
}
html[dir="rtl"] .app-go-deeper-back-in {
  animation: right-to-current var(--transition-duration) forwards;
}

html[dir="ltr"] .app-go-deeper-back-out {
  animation: current-to-right var(--transition-duration) forwards;
}
html[dir="rtl"] .app-go-deeper-back-out {
  animation: current-to-left var(--transition-duration) forwards;
}

@keyframes show {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hide {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

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

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

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

@keyframes left-to-current {
  /* To pre-render the incoming screen and avoid a flick we are getting if
      setting it to 100%. */
  0%   { transform: translateX(-99.99%); }
  100% { transform: translateX(0); }
}

@keyframes header-current-to-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-30%); }
}

@keyframes header-left-to-current {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(0); }
}

.app-go-up-in {
  animation: app-go-up-in var(--transition-duration) forwards ease-in;
}

.app-go-up-back-out {
  animation: app-go-up-back-out var(--transition-duration) forwards ease-in;
}

@keyframes app-go-up-in {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes app-go-up-back-out {
  0% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

html[dir="ltr"] .app-go-in {
  animation: right-to-current var(--transition-duration) forwards ease-in;
}
html[dir="rtl"] .app-go-in {
  animation: left-to-current var(--transition-duration) forwards ease-in;
}

html[dir="ltr"] .app-go-back-out {
  animation: current-to-right var(--transition-duration) forwards ease-in;
}
html[dir="rtl"] .app-go-back-out {
  animation: current-to-left var(--transition-duration) forwards ease-in;
}

html[dir="ltr"] .move-in-from-forward {
  animation: move-left-in var(--transition-duration) forwards;
}
html[dir="rtl"] .move-in-from-forward {
  animation: move-right-in var(--transition-duration) forwards;
}

html[dir="ltr"] .move-out-from-forward {
  animation: move-left-out var(--transition-duration) forwards;
}
html[dir="rtl"] .move-out-from-forward {
  animation: move-right-out var(--transition-duration) forwards;
}

html[dir="ltr"] .move-in-from-backward {
  animation: move-right-in var(--transition-duration) forwards;
}
html[dir="rtl"] .move-in-from-backward {
  animation: move-left-in var(--transition-duration) forwards;
}

html[dir="ltr"] .move-out-from-backward {
  animation: move-right-out var(--transition-duration) forwards;
}
html[dir="rtl"] .move-out-from-backward {
  animation: move-left-out var(--transition-duration) forwards;
}

@keyframes move-left-in {
  0% { transform: translateX(100%);}
  100% { transform: translateX(0);}
}

@keyframes move-left-out {
  0% { transform: translateX(0);}
  100% { transform: translateX(-100%);}
}

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

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