/* Movimiento sobrio: aparición suave al hacer scroll y fotos que se alternan.
   Las clases solo ocultan cosas bajo html.motion (lo pone motion.js); sin JavaScript
   o con "reducir movimiento" activado, todo se ve normal y quieto. */

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 24, 15, 0.35); } 60% { box-shadow: 0 0 0 7px rgba(200, 24, 15, 0); } }
@keyframes check-in { to { stroke-dashoffset: 0; } }

/* Aparición al entrar en pantalla */
html.motion [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--delay, 0ms); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Entrada de la portada, en cascada */

/* Fotos que se alternan solas. El ciclo depende de cuántas haya: cada foto se ve
   lo mismo y siempre hay una en pantalla mientras la siguiente aparece. */
.slides img { opacity: 0; animation: 12s linear infinite; }
.slides.of-2 img { animation-name: slide-of-2; animation-duration: 8s; }
.slides.of-2 img:nth-child(2) { animation-delay: -4s; }
.slides.of-3 img { animation-name: slide-of-3; }
.slides.of-3 img:nth-child(2) { animation-delay: -8s; }
.slides.of-3 img:nth-child(3) { animation-delay: -4s; }
@keyframes slide-of-2 { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slide-of-3 { 0%, 29% { opacity: 1; } 33.34%, 95.66% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .slides img:first-child { opacity: 1; } }

/* Contenido que acaba de cargar */
.fade-in { animation: rise 0.35s var(--ease-out) both; }
.list-in > * { animation: rise 0.35s var(--ease-out) both; }
.list-in > *:nth-child(2) { animation-delay: 50ms; }
.list-in > *:nth-child(3) { animation-delay: 100ms; }
.list-in > *:nth-child(n+4) { animation-delay: 150ms; }

/* Esqueleto mientras carga */
.skeleton { display: grid; gap: 14px; }
.skeleton i { display: block; height: 118px; border-radius: var(--r-lg); background: linear-gradient(100deg, #f3efe7 30%, #faf8f3 50%, #f3efe7 70%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }