/*
 * ALPHA FITNESS — TRANSITION SYSTEM (canonical)
 * ─────────────────────────────────────────────────────────────────
 * Sistema unificado de animaciones y transiciones para todo el sitio.
 *
 * REGLAS DE DISEÑO:
 *  • Durations estandarizadas: --t-fast (150ms), --t-normal (250ms),
 *    --t-slow (400ms), --t-page (300ms).
 *  • Easings consistentes: cubic-bezier de tipo "ease-out smooth"
 *    para entradas, "ease-in smooth" para salidas.
 *  • Sin animaciones bruscas (no .05s, no .8s salvo casos especiales).
 *  • Respeta prefers-reduced-motion para accesibilidad.
 *
 * USO desde el código:
 *
 *   <div class="alpha-anim-fade-in">             enter
 *   <div class="alpha-anim-slide-up">             enter from below
 *   <div class="alpha-anim-slide-down">           enter from above
 *   <div class="alpha-anim-slide-in-right">       enter from right (mobile nav)
 *   <div class="alpha-anim-slide-in-left">        enter from left
 *   <div class="alpha-anim-scale-in">             enter with scale (modals)
 *   <div class="alpha-page-transition">           wrapper para páginas SPA
 *
 * Refactor: 2026-06-02
 */

/* ═══════════════════════════════════════════════════════════════
   CSS Variables canonical
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Durations */
  --t-instant: 80ms;
  --t-fast:    150ms;
  --t-normal:  250ms;
  --t-slow:    400ms;
  --t-page:    300ms;

  /* Easings: pensados para sentirse "naturales" */
  --ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1.00);   /* entrada suave (Material) */
  --ease-in:         cubic-bezier(0.55, 0.06, 0.68, 0.19);   /* salida suave */
  --ease-in-out:     cubic-bezier(0.65, 0.05, 0.36, 1.00);   /* ida-vuelta balanceada */
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1.00);   /* rebote sutil (popups) */
  --ease-overshoot:  cubic-bezier(0.20, 0.90, 0.30, 1.40);   /* overshoot fuerte (CTA) */
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES canonical
   Prefijo "ax-" (Alpha-X) para evitar colisión con keyframes legacy.
   ═══════════════════════════════════════════════════════════════ */

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

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

@keyframes ax-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ax-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ax-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ax-slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ax-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ax-scale-in-bounce {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ax-page-enter {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ax-page-leave {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-20px); }
}

@keyframes ax-modal-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ax-modal-backdrop {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES — para aplicar directamente
   ═══════════════════════════════════════════════════════════════ */

.alpha-anim-fade-in {
  animation: ax-fade-in var(--t-normal) var(--ease-out) both;
}

.alpha-anim-fade-in-fast {
  animation: ax-fade-in var(--t-fast) var(--ease-out) both;
}

.alpha-anim-slide-up {
  animation: ax-slide-up var(--t-normal) var(--ease-out) both;
}

.alpha-anim-slide-down {
  animation: ax-slide-down var(--t-normal) var(--ease-out) both;
}

.alpha-anim-slide-in-right {
  animation: ax-slide-in-right var(--t-normal) var(--ease-out) both;
}

.alpha-anim-slide-in-left {
  animation: ax-slide-in-left var(--t-normal) var(--ease-out) both;
}

.alpha-anim-scale-in {
  animation: ax-scale-in var(--t-normal) var(--ease-out) both;
}

.alpha-anim-scale-bounce {
  animation: ax-scale-in-bounce var(--t-slow) var(--ease-bounce) both;
}

.alpha-anim-page-enter {
  animation: ax-page-enter var(--t-page) var(--ease-out) both;
}

.alpha-anim-modal-enter {
  animation: ax-modal-enter var(--t-normal) var(--ease-out) both;
}

/* ═══════════════════════════════════════════════════════════════
   STAGGER: anima hijos con delay incremental
   ═══════════════════════════════════════════════════════════════ */
.alpha-stagger > * {
  animation: ax-slide-up var(--t-normal) var(--ease-out) both;
}
.alpha-stagger > *:nth-child(1) { animation-delay: 0ms; }
.alpha-stagger > *:nth-child(2) { animation-delay: 50ms; }
.alpha-stagger > *:nth-child(3) { animation-delay: 100ms; }
.alpha-stagger > *:nth-child(4) { animation-delay: 150ms; }
.alpha-stagger > *:nth-child(5) { animation-delay: 200ms; }
.alpha-stagger > *:nth-child(6) { animation-delay: 250ms; }
.alpha-stagger > *:nth-child(7) { animation-delay: 300ms; }
.alpha-stagger > *:nth-child(8) { animation-delay: 350ms; }
.alpha-stagger > *:nth-child(n+9) { animation-delay: 400ms; }

/* ═══════════════════════════════════════════════════════════════
   TRANSICIONES de propiedades (no animaciones, hover/state)
   Aplicar como class="alpha-trans"
   ═══════════════════════════════════════════════════════════════ */

.alpha-trans {
  transition:
    color           var(--t-fast) var(--ease-out),
    background      var(--t-fast) var(--ease-out),
    border-color    var(--t-fast) var(--ease-out),
    box-shadow      var(--t-fast) var(--ease-out),
    transform       var(--t-fast) var(--ease-out),
    opacity         var(--t-fast) var(--ease-out);
}

.alpha-trans-slow {
  transition:
    color           var(--t-normal) var(--ease-out),
    background      var(--t-normal) var(--ease-out),
    border-color    var(--t-normal) var(--ease-out),
    box-shadow      var(--t-normal) var(--ease-out),
    transform       var(--t-normal) var(--ease-out),
    opacity         var(--t-normal) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TRANSITIONS — wrapper para secciones SPA
   ═══════════════════════════════════════════════════════════════ */

.alpha-page {
  animation: ax-page-enter var(--t-page) var(--ease-out) both;
}

/* Reverse direction cuando volvemos atrás */
.alpha-page-back {
  animation: ax-slide-in-left var(--t-page) var(--ease-out) both;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — respeta prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Anular todas las animaciones de entrada (mantener solo fade) */
  .alpha-anim-fade-in,
  .alpha-anim-fade-in-fast,
  .alpha-anim-slide-up,
  .alpha-anim-slide-down,
  .alpha-anim-slide-in-right,
  .alpha-anim-slide-in-left,
  .alpha-anim-scale-in,
  .alpha-anim-scale-bounce,
  .alpha-anim-page-enter,
  .alpha-anim-modal-enter,
  .alpha-page,
  .alpha-page-back,
  .alpha-stagger > * {
    animation: ax-fade-in 200ms ease both !important;
    transform: none !important;
  }

  .alpha-trans,
  .alpha-trans-slow {
    transition-duration: 50ms !important;
  }
}