/* Transitions — tokens: --duration-*, --easing-* */

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

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

@keyframes screen-push-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes screen-push-out {
  from { transform: translateY(0); }
  to { transform: translateY(18%); }
}

@keyframes screen-push-in-back {
  from { transform: translateY(18%); }
  to { transform: translateY(0); }
}

@keyframes screen-push-out-back {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes screen-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes screen-sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(12%); }
}

@keyframes screen-sheet-in-back {
  from { transform: translateY(12%); }
  to { transform: translateY(0); }
}

@keyframes screen-sheet-out-back {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes screen-fullscreen-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes screen-fullscreen-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes screen-fullscreen-in-back {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes screen-fullscreen-out-back {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.04);
  }
}

.screen-anim-fade-in {
  animation: screen-fade-in var(--duration-normal) var(--easing-default) forwards;
}

.screen-anim-fade-out {
  animation: screen-fade-out var(--duration-normal) var(--easing-default) forwards;
}

.screen-anim-push-in {
  animation: screen-push-in var(--duration-normal) var(--easing-out) forwards;
}

.screen-anim-push-out {
  animation: screen-push-out var(--duration-normal) var(--easing-default) forwards;
}

.screen-anim-push-in-back {
  animation: screen-push-in-back var(--duration-normal) var(--easing-out) forwards;
}

.screen-anim-push-out-back {
  animation: screen-push-out-back var(--duration-normal) var(--easing-default) forwards;
}

.screen-anim-sheet-in {
  animation: screen-sheet-in var(--duration-normal) var(--easing-out) forwards;
}

.screen-anim-sheet-out {
  animation: screen-sheet-out var(--duration-fast) var(--easing-default) forwards;
}

.screen-anim-sheet-in-back {
  animation: screen-sheet-in-back var(--duration-normal) var(--easing-out) forwards;
}

.screen-anim-sheet-out-back {
  animation: screen-sheet-out-back var(--duration-normal) var(--easing-default) forwards;
}

.screen-anim-fullscreen-in {
  animation: screen-fullscreen-in var(--duration-fast) var(--easing-default) forwards;
}

.screen-anim-fullscreen-out {
  animation: screen-fullscreen-out var(--duration-fast) var(--easing-default) forwards;
}

.screen-anim-fullscreen-in-back {
  animation: screen-fullscreen-in-back var(--duration-fast) var(--easing-default) forwards;
}

.screen-anim-fullscreen-out-back {
  animation: screen-fullscreen-out-back var(--duration-fast) var(--easing-default) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .screen-anim-fade-in,
  .screen-anim-fade-out,
  .screen-anim-push-in,
  .screen-anim-push-out,
  .screen-anim-push-in-back,
  .screen-anim-push-out-back,
  .screen-anim-sheet-in,
  .screen-anim-sheet-out,
  .screen-anim-sheet-in-back,
  .screen-anim-sheet-out-back,
  .screen-anim-fullscreen-in,
  .screen-anim-fullscreen-out,
  .screen-anim-fullscreen-in-back,
  .screen-anim-fullscreen-out-back {
    animation-duration: 1ms;
  }
}