/* Page enter/exit animations mirroring lib/core/app_transitions.dart.
   navigation.js adds "leave-*" to <body> before navigating away, and
   "enter-*" on the next page's <body> on load (see navigation.js). */

body.enter-fade {
  animation: t-fade-in 300ms var(--ease-enter) both;
}
body.leave-fade {
  animation: t-fade-out 300ms var(--ease-exit) both;
}

body.enter-fadeSlideUp {
  animation: t-fade-slide-up-in 350ms var(--ease-enter) both;
}
body.leave-fadeSlideUp {
  animation: t-fade-out 300ms var(--ease-exit) both;
}

body.enter-fadeScale {
  animation: t-fade-scale-in 280ms var(--ease-enter) both;
}
body.leave-fadeScale {
  animation: t-fade-scale-out 220ms var(--ease-exit) both;
}

body.enter-slideUp {
  animation: t-slide-up-in 300ms var(--ease-enter) both;
}
body.leave-slideUp {
  animation: t-fade-out 250ms var(--ease-exit) both;
}

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

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

@keyframes t-fade-slide-up-in {
  from {
    opacity: 0;
    transform: translateY(4vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes t-fade-scale-in {
  from {
    opacity: 0;
    transform: scale(0.93);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes t-fade-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes t-slide-up-in {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Generic fade-in-up utility for staggered element entrances (onboarding text,
   scan tiles, etc.) — applied via JS with a per-item animation-delay. */
.fade-in-up {
  opacity: 0;
  animation: el-fade-in-up var(--dur-slow) var(--ease-enter) forwards;
}

@keyframes el-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  opacity: 0;
  animation: el-fade-in var(--dur-slow) var(--ease-enter) forwards;
}

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