/* =========================================================
   Microinteracciones globales
   Transiciones reutilizadas por enlaces, botones y tarjetas
   ========================================================= */

.link {
  transition:
    transform 250ms ease,
    color 250ms ease;
}

.link:hover {
  transform: translateY(2px);
}

.btn,
button {
  transition:
    transform var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out);
}

.btn:hover,
.btn:focus-visible,
button:hover,
button:focus-visible,
.btn-google:hover,
.btn-github:hover {
  transform: scale(1.02);
}

.btn:active,
button:active,
.btn-google:active,
.btn-github:active {
  transform: translateY(0);
  transition: transform 150ms ease-in-out;
}

.placeholder-visual {
  transition: transform var(--dur-short) var(--ease-out);
}

.motion-card {
  transition:
    transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out);
}

.motion-entry {
  animation: fade-slide-up var(--dur-medium) var(--ease-out) both;
}

.confirmation-card {
  animation: confirmation-pop 360ms var(--ease-out) both;
}

@media (hover: hover) and (pointer: fine) {
  .motion-card:hover {
    transform: translateY(-3px);
  }

  .motion-card:hover .placeholder-visual {
    transform: scale(1.01);
  }
}

/* =========================================================
   Keyframes base de transición
   ========================================================= */

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes confirmation-pop {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }

  70% {
    opacity: 1;
    transform: scale(1.01);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   Accesibilidad y reducción de movimiento
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms;
    animation-duration: 1ms;
  }

  .motion-entry,
  .confirmation-card {
    animation: none;
  }
}

/* =========================================================
   Animaciones de autenticación y bienvenida
   ========================================================= */

.auth-intro {
  animation: entrar-texto 1.6s ease-in-out 1 both;
}

.auth-card {
  animation: entrar-formulario 1.6s ease-in-out 1 both;
}

@keyframes entrar-texto {
  from {
    opacity: 0;
    transform: translateX(100vw);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes entrar-formulario {
  from {
    opacity: 0;
    transform: translateX(-100vw);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =========================================================
   Animaciones de vistas principales y catálogo
   ========================================================= */

body.home-page>main,
body.catalog-page>main {
  animation: fade-slide-up var(--dur-medium) var(--ease-out) both;
}

/* =========================================================
   Animaciones de carrito y pasarela de pago
   ========================================================= */

.page-container>.page-header {
  animation: carrito-header 0.8s ease-out 1 both;
}

.page-container>.catalog-card {
  animation: carrito-producto 1s ease-out 0.2s 1 both;
}

.page-container>.order-summary {
  animation: carrito-resumen 1s ease-out 0.35s 1 both;
}

@keyframes carrito-header {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes carrito-producto {
  0% {
    opacity: 0;
    transform: translateX(-100vw);
  }

  75% {
    opacity: 1;
    transform: translateX(12px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes carrito-resumen {
  0% {
    opacity: 0;
    transform: translateX(100vw);
  }

  75% {
    opacity: 1;
    transform: translateX(-12px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes entradaPago {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.payment-card.motion-entry {
  animation: entradaPago 1s ease-in-out both;
}

/* =========================================================
   Animaciones de servicios y tarjetas interactivas
   ========================================================= */

.tipo-trabajo-card {
  transition:
    transform var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out);
}

.tipo-trabajo-card:hover {
  transform: translateY(-2px);
}

/* =========================================================
   Animaciones de aula virtual y visor de cursos
   ========================================================= */

.layout-sidebar>.sidebar {
  animation: curso-sidebar 1s ease-out 1 both;
}

.layout-sidebar>.main-content {
  animation: curso-contenido 1s ease-out 0.15s 1 both;
}

.main-content video {
  animation: curso-video 0.8s ease-out 0.5s 1 both;
}

.main-content h3:nth-of-type(1),
.main-content h3:nth-of-type(1)+p {
  animation: curso-aparecer 0.7s ease-out 0.8s 1 both;
}

.main-content h3:nth-of-type(2),
.main-content h3:nth-of-type(2)+p,
.main-content .flex-row {
  animation: curso-aparecer 0.7s ease-out 1s 1 both;
}

.main-content>p:last-child {
  animation: curso-boton 0.7s ease-out 1.2s 1 both;
}

@keyframes curso-sidebar {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes curso-contenido {
  from {
    opacity: 0;
    transform: translateX(120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes curso-video {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  70% {
    opacity: 1;
    transform: scale(1.015);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes curso-aparecer {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes curso-boton {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   Animaciones de formularios de registro y acceso
   ========================================================= */

.auth-page .auth-intro {
  animation-name: entrar-desde-derecha;
  animation-duration: 1.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.auth-page .auth-card--registro {
  animation-name: entrar-desde-izquierda;
  animation-duration: 1.8s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes entrar-desde-derecha {
  0% {
    opacity: 0;
    transform: translateX(100vw);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes entrar-desde-izquierda {
  0% {
    opacity: 0;
    transform: translateX(-100vw);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes authEntradaInicial {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 900px) {
  body.auth-page .auth-container {
    animation: authEntradaInicial 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* =========================================================
   Animaciones de onboarding y pasos guiados
   ========================================================= */

.onboarding-step {
  animation: none;
}

.onboarding-step:nth-child(1) {
  animation-delay: 50ms;
}

.onboarding-step:nth-child(2) {
  animation-delay: 100ms;
}

.onboarding-step:nth-child(3) {
  animation-delay: 150ms;
}

.onboarding-step:nth-child(4) {
  animation-delay: 200ms;
}

.onboarding-step:nth-child(5) {
  animation-delay: 250ms;
}

.onboarding-step:nth-child(6) {
  animation-delay: 300ms;
}

.onboarding-step:nth-child(7) {
  animation-delay: 350ms;
}

.onboarding-step:nth-child(8) {
  animation-delay: 400ms;
}

.onboarding-step:nth-child(9) {
  animation-delay: 450ms;
}

.onboarding-step--active {
  animation: fade-slide-up var(--dur-medium, 250ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

/* =========================================================
   Animaciones de perfil de usuario y navegación por pestañas
   ========================================================= */

.profile-tabs button {
  animation: fade-slide-up 1.2s var(--ease-out) both;
}

.profile-tabs button:nth-child(1) {
  animation-delay: 200ms;
}

.profile-tabs button:nth-child(2) {
  animation-delay: 380ms;
}

.profile-tabs button:nth-child(3) {
  animation-delay: 560ms;
}

.profile-tabs button:nth-child(4) {
  animation-delay: 740ms;
}

.profile-tabs button:nth-child(5) {
  animation-delay: 920ms;
}

.profile-tabs button:nth-child(6) {
  animation-delay: 1100ms;
}

.profile-tabs button:nth-child(7) {
  animation-delay: 1280ms;
}

/* =========================================================
   Animaciones de alertas y tarjetas de publicación
   ========================================================= */

.alert {
  animation: fade-slide-up var(--dur-medium, 300ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.pub-card {
  transition: transform var(--dur-short, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow var(--dur-short, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.pub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.pub-actions-link:hover {
  transform: translateY(-1px);
  text-decoration: underline;
}

.btn-status:hover {
  transform: scale(1.05);
  opacity: 0.85;
}

.btn-status,
.pub-actions-link {
  transition: transform var(--dur-short, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    opacity var(--dur-short, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── Cuenta bloqueada — animación de entrada sutil ──── */
@keyframes blocked-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.blocked-card {
    animation: blocked-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}