/* css/animations.css */
@keyframes myAnim {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: translateY(250px);
  }

  38% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: translateY(0);
  }

  55% {
    animation-timing-function: ease-in;
    transform: translateY(65px);
  }

  72% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }

  81% {
    animation-timing-function: ease-in;
    transform: translateY(28px);
  }

  90% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }

  95% {
    animation-timing-function: ease-in;
    transform: translateY(8px);
  }

  100% {
    animation-timing-function: ease-out;
    transform: translateY(0);
  }
}

.view-container {
  position: relative;
  width: 100%;
  min-height: 100%;
}

.page-view {
  width: 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.page-view-enter {
  animation: slideUpModern 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}

.page-view-exit {
  animation: slideExitQuick 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
.page {
  animation: myAnim 2s ease 0s 1 normal forwards;
}