/* Animaciones base de TASKMIND.
   Reproducen las transiciones observadas en el boceto React/Motion usando CSS para mantener MVC
   con rutas reales y sin convertir la aplicacion en una SPA. */
.tm-screen-login {
  animation: tm-login-in var(--tm-transition-screen) var(--tm-ease) both;
}

.tm-screen-register {
  animation: tm-register-in var(--tm-transition-screen) var(--tm-ease) both;
}

.tm-screen-recover {
  animation: tm-recover-in var(--tm-transition-screen) var(--tm-ease) both;
}

.app-shell,
.tm-private-screen {
  animation: tm-private-in var(--tm-transition-screen) var(--tm-ease) both;
}

.modal[open],
.tm-modal-enter {
  animation: tm-modal-in 180ms var(--tm-ease) both;
}

.floating-card {
  animation: tm-float 4.5s ease-in-out infinite;
}

.delay-one {
  animation-delay: .4s;
}

.delay-two {
  animation-delay: .8s;
}

@keyframes tm-login-in {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tm-register-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tm-recover-in {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tm-private-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tm-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Respeta accesibilidad: usuarios que piden reducir movimiento no reciben animaciones. */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}