/* Animación de entrada sencilla al llegar a cada página (parecida a la baraja de Fotografía).
   Solo actúa mientras el contenedor tiene la clase .entrada (se quita sola a los 2 s),
   así no se repite al pasar el ratón por la lista. */
@keyframes entraFila{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes entraFoto{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes entraSube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.entrada .fila{animation:entraFila .7s cubic-bezier(.2,.8,.2,1) both}
.entrada .fila:nth-child(2){animation-delay:.07s}.entrada .fila:nth-child(3){animation-delay:.14s}
.entrada .fila:nth-child(4){animation-delay:.21s}.entrada .fila:nth-child(5){animation-delay:.28s}
.entrada .fila:nth-child(6){animation-delay:.35s}.entrada .fila:nth-child(7){animation-delay:.42s}
.entrada .fila:nth-child(n+8){animation-delay:.49s}
/* la miniatura de la lista (Vídeo y Dirección) aparece creciendo SIEMPRE que cambia al pasar el ratón */
.ver>*{animation:entraFoto .8s cubic-bezier(.2,.8,.2,1) both}
.entrada .ver>*{animation-delay:.2s}
.entrada .c1 canvas{animation:entraFoto .9s cubic-bezier(.2,.8,.2,1) both}
.entrada .c1 .datos>*{animation:entraSube .7s cubic-bezier(.2,.8,.2,1) both}
.entrada .c1 .datos>*:nth-child(1){animation-delay:.35s}.entrada .c1 .datos>*:nth-child(2){animation-delay:.45s}
/* proyecto de Dirección creativa: el título sube al abrirlo */
.full .sobre>*:not(.baja){animation:entraSube .8s cubic-bezier(.2,.8,.2,1) both}
.full .sobre>*:nth-child(1){animation-delay:.25s}.full .sobre>*:nth-child(2){animation-delay:.38s}
@media (prefers-reduced-motion:reduce){.entrada *,.ver>*,.full .sobre>*:not(.baja){animation:none!important}}