/* Entrada animada de la portada (index, es, urdu).
   Solo actúa si <html> tiene la clase .anim (la pone un script en <head>;
   no se pone con ?edit ni con "reducir movimiento"). El orden lo marca intro.js. */

/* estado inicial: oculto hasta que intro.js le da su turno */
.anim #intro #blocks > *:not(.cols):not(.steps),
.anim #intro .cols > div > .mono,
.anim #intro .cols p:not(.split),
.anim #intro #start,
.anim #intro .progress,
.anim #intro .presented { opacity: 0; }

/* bloques: suben un poco y aparecen */
.anim #intro .in { animation: intro-in .6s cubic-bezier(.2, .7, .2, 1) both; }
/* el botón solo con opacidad, para no pisar su efecto al pulsar */
.anim #intro #start.in, .anim #intro .progress.in { animation-name: intro-fade; }

/* texto palabra a palabra */
.anim #intro .w { animation: word-in .35s ease-out both; }

@keyframes intro-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
/* solo opacidad: el desenfoque (filter: blur) en palabras sueltas se quedaba pegado en Safari/Chrome de iPhone */
@keyframes word-in { from { opacity: 0; } to { opacity: 1; } }