@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view.active {
  animation: view-enter 240ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

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

#view-more.active,
#view-levels.active {
  animation: overlay-fade 200ms ease-out backwards;
}

@keyframes sheet-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.more-open .figma-more-menu,
.language-sheet-panel {
  animation: sheet-rise 240ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@keyframes item-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.view-entering .view.active .quest-item,
body.view-entering .view.active .shop-item,
body.view-entering .view.active .card-room {
  animation: item-rise 300ms ease-out backwards;
}

body.view-entering .view.active .quest-item:nth-child(2),
body.view-entering .view.active .shop-item:nth-child(2),
body.view-entering .view.active .card-room:nth-child(2) {
  animation-delay: 45ms;
}

body.view-entering .view.active .quest-item:nth-child(3),
body.view-entering .view.active .shop-item:nth-child(3),
body.view-entering .view.active .card-room:nth-child(3) {
  animation-delay: 90ms;
}

body.view-entering .view.active .quest-item:nth-child(n + 4),
body.view-entering .view.active .shop-item:nth-child(n + 4),
body.view-entering .view.active .card-room:nth-child(n + 4) {
  animation-delay: 135ms;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

.status {
  animation: toast-in 200ms ease-out backwards;
}

.status.toast-leaving {
  animation: toast-out 180ms ease-in forwards;
}

.nav-icon {
  transition: transform 140ms ease;
}

.nav-item:active .nav-icon {
  transform: scale(0.88);
}

@keyframes nav-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

.nav-item.active .nav-icon {
  animation: nav-pop 260ms ease-out;
}

@keyframes balance-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.balance-bump {
  display: inline-block;
  animation: balance-pulse 420ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .view.active,
  #view-more.active,
  #view-levels.active,
  body.more-open .figma-more-menu,
  .language-sheet-panel,
  body.view-entering .view.active .quest-item,
  body.view-entering .view.active .shop-item,
  body.view-entering .view.active .card-room,
  .status,
  .status.toast-leaving,
  .nav-item.active .nav-icon,
  .balance-bump {
    animation: none;
  }

  .nav-icon {
    transition: none;
  }
}
