/* ==========================================================================
   Movimiento — un solo idioma de animación para las tres pantallas: la del
   invitado, la del sorteo y la de la puerta. Pedido del 28/09/2026: "que no
   haya elementos forzados… cualquier movimiento prolijo".

   Las reglas, que valen también para movimiento.js:
   · Lo que ENTRA sube unos pocos px y se asienta: arranca rápido y frena
     suave. Lo que SE VA sale más rápido de lo que entró.
   · Solo se anima opacity y transform. Son las dos que el celular mueve sin
     recalcular la página en cada cuadro; lo demás, en un Android barato, se
     ve a los saltos.
   · Lo que se ve nunca depende de que una animación termine.
   · Quien pidió menos movimiento en su teléfono ve los cambios sin animar.

   Se carga PRIMERO en las tres páginas: el resto de las hojas usa sus
   variables.
   ========================================================================== */

:root {
  --mov-entra:  cubic-bezier(.16, 1, .3, 1);  /* aparece: rápido y se asienta */
  --mov-sale:   cubic-bezier(.4, 0, 1, 1);    /* se va: acelera y desaparece */
  --mov-estado: cubic-bezier(.4, 0, .2, 1);   /* cambia un color, un borde, un fondo */

  --dur-toque: 120ms;  /* la respuesta a un dedo */
  --dur-corta: 180ms;  /* salidas y cambios de color */
  --dur-media: 280ms;  /* entradas */
  --dur-larga: 600ms;  /* un fondo entero que cambia de color */
}

/* Entre páginas —acreditarse y pasar al sorteo, o volver del sorteo para
   acreditar a otra persona—: un fundido en lugar del corte en blanco de la
   carga. Lo hacen Chrome y Edge desde 2024 y Safari desde la 18.2; los demás
   navegan como siempre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Para lo que se muestra sacándole el `display: none` (un aviso de error): la
   animación corre sola cada vez que vuelve a verse, sin JS. */
@keyframes mov-aparece {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Un cartel que baja desde arriba y se acomoda. */
@keyframes mov-cae {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}