/* ============================================================================
   AURA DISCOVERY™ — animations.css
   Keyframes y transiciones de pantalla.
   ----------------------------------------------------------------------------
   Principio: 300 ms, desplazamientos cortos (8–16 px) y curvas suaves.
   La animación confirma el cambio de contexto; nunca lo protagoniza.
   ========================================================================== */


/* ============================================================================
   01. KEYFRAMES
   ========================================================================== */

/* Entrada: la pantalla nueva sube y aparece */
@keyframes screen-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Salida hacia adelante: la pantalla actual se va hacia arriba */
@keyframes screen-out-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, -12px, 0); }
}

/* Entrada hacia atrás: invierte la dirección para reforzar el "volver" */
@keyframes screen-in-back {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes screen-out-back {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 12px, 0); }
}

/* Aparición escalonada de los elementos internos */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Sólo opacidad — para textos secundarios */
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Latido discreto del indicador de guardado */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Aviso de error: microdesplazamiento lateral, sin sacudidas bruscas */
@keyframes nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(-4px, 0, 0); }
  75%      { transform: translate3d(4px, 0, 0); }
}

/* Envío en curso */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Confirmación del sello final */
@keyframes seal-in {
  0%   { opacity: 0; transform: scale(0.82); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}


/* ============================================================================
   02. TRANSICIONES DE PANTALLA
   Las clases las aplica js/ui.js al contenedor .screen.
   ========================================================================== */
.screen {
  animation: screen-in var(--duration) var(--ease) both;
}

.screen.is-back {
  animation-name: screen-in-back;
}

.screen.is-leaving {
  animation: screen-out-forward var(--duration-fast) var(--ease) both;
  pointer-events: none;
}

.screen.is-leaving.is-back {
  animation-name: screen-out-back;
}


/* ============================================================================
   03. ENTRADA ESCALONADA DEL CONTENIDO
   Cada bloque entra 60 ms después del anterior: el ojo lee en orden.
   ========================================================================== */
.screen .prisma        { animation: rise var(--duration) var(--ease) 40ms both; }
.screen .screen__head  { animation: rise var(--duration) var(--ease) 100ms both; }
.screen .screen__body  { animation: rise var(--duration) var(--ease) 160ms both; }
.screen .hero__actions { animation: rise var(--duration) var(--ease) 220ms both; }

/* Tarjetas: cascada corta, con retardo calculado en ui.js (--i) */
.choices .card {
  animation: rise var(--duration) var(--ease) both;
  animation-delay: calc(180ms + var(--i, 0) * 45ms);
}

.hero__fact {
  animation: fade var(--duration) var(--ease) both;
  animation-delay: calc(200ms + var(--i, 0) * 70ms);
}

.next-step {
  animation: rise var(--duration) var(--ease) both;
  animation-delay: calc(200ms + var(--i, 0) * 80ms);
}

.seal { animation: seal-in 480ms var(--ease) 60ms both; }


/* ============================================================================
   04. MICROESTADOS
   ========================================================================== */

/* Guardando en localStorage */
.autosave.is-saving .autosave__dot { animation: pulse 900ms var(--ease) infinite; }

/* Campo inválido tras intentar avanzar */
.field.is-invalid { animation: nudge 260ms var(--ease); }

/* Tarjeta rechazada por haber alcanzado el máximo de selecciones */
.card.is-nudge { animation: nudge 260ms var(--ease); }

/* Aparición del mensaje de error */
.error { animation: fade var(--duration-fast) var(--ease) both; }

/* Envío del diagnóstico en curso */
.spinner { animation: spin 700ms linear infinite; }


/* ============================================================================
   05. RESPETO POR LA PREFERENCIA DEL SISTEMA
   Si el usuario pidió menos movimiento, se lo damos: todo pasa a ser opacidad.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .screen { animation: fade 1ms both; }
}