/* ==========================================================================
   TRANSICIONES — View Transitions API + keyframes de entrada
   La coreografía completa:
     1. El fondo collage entra con fade-in + Ken Burns sutil (keyframes)
     2. El logo entra grande en el splash (keyframes)
     3. Splash → formulario: el logo VIAJA a la cabecera (View Transition:
        mismo view-transition-name en las dos vistas, el navegador interpola
        posición y tamaño solo) y los campos entran escalonados
     4. Formulario → gracias: el logo vuelve a viajar al centro
   Todo con progressive enhancement: sin soporte de la API, las vistas
   cambian igual (lo gestiona transiciones.js), solo que sin animar.
   reset.css ya apaga todo con prefers-reduced-motion, pero repetimos
   aquí las reglas específicas de ::view-transition por si el reset cambia.
   ========================================================================== */

/* ----- Duración por defecto de los grupos de transición ----- */
::view-transition-group(*) {
  animation-duration: var(--t-medio, 0.4s);
}

/* ----- El logo compartido entre vistas -----
   El elemento con view-transition-name "logo" es capturado en la
   vista vieja y en la nueva; el navegador crea la animación de "viaje".
   IMPORTANTE: solo puede haber UN elemento con este nombre a la vez. */
.logo {
  view-transition-name: logo;
}

/* El viaje del logo un pelín más largo que el resto, es el protagonista */
::view-transition-group(logo) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Entrada escalonada de los campos del formulario -----
   Cada campo lleva su view-transition-name (campo-1, campo-2...) asignado
   por renderizarFormulario.js, y un delay creciente vía la variable
   --indice-campo que también pone el JS. Al no existir en la vista vieja,
   el navegador solo ejecuta ::view-transition-new (entrada). */
.campo-animado {
  view-transition-name: var(--nombre-campo);
}

::view-transition-new(campo-1),
::view-transition-new(campo-2),
::view-transition-new(campo-3),
::view-transition-new(campo-4),
::view-transition-new(campo-5),
::view-transition-new(campo-6),
::view-transition-new(campo-7),
::view-transition-new(campo-8) {
  animation-name: campo-entrada;
  animation-duration: 0.45s;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

/* El escalonado: 60 ms más de espera por campo */
::view-transition-new(campo-1) { animation-delay: 0.1s; }
::view-transition-new(campo-2) { animation-delay: 0.16s; }
::view-transition-new(campo-3) { animation-delay: 0.22s; }
::view-transition-new(campo-4) { animation-delay: 0.28s; }
::view-transition-new(campo-5) { animation-delay: 0.34s; }
::view-transition-new(campo-6) { animation-delay: 0.4s; }
::view-transition-new(campo-7) { animation-delay: 0.46s; }
::view-transition-new(campo-8) { animation-delay: 0.52s; }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* Entrada del fondo: fade-in con zoom-out sutil (Ken Burns) */
@keyframes fondo-entrada {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Entrada del logo en el splash: llega desde abajo con elegancia */
@keyframes logo-entrada {
  from {
    opacity: 0;
    transform: translateY(2.5rem) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Entrada de cada campo del formulario (escalonada) */
@keyframes campo-entrada {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* El pie del horario sube deslizándose desde abajo del todo al revelarse */
@keyframes horario-desliza {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aparición del aviso de validación */
@keyframes aviso-entrada {
  from {
    opacity: 0;
    transform: translateY(-0.3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   ACCESIBILIDAD — sin animaciones para quien las tiene desactivadas
   (reset.css ya cubre animation/transition normales; esto cubre los
   pseudo-elementos de View Transitions, que el reset no alcanza)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}