/* Motion Engine · animaciones serias, solo transform y opacity.
   El estado inicial oculto se aplica únicamente cuando <html> tiene .motion-ready (lo pone motion.js):
   si el script falla, todo el contenido queda visible. */
.motion-ready [data-motion] {
  transition: opacity var(--sh-motion-dur) var(--sh-motion-curva), transform var(--sh-motion-dur) var(--sh-motion-curva);
  transition-delay: calc(var(--motion-i, 0) * 70ms + var(--motion-delay, 0ms));
}
.motion-ready [data-motion]:not(.motion-visible) { opacity: 0; }
.motion-ready [data-motion="reveal-up"]:not(.motion-visible) { transform: translate3d(0, var(--sh-motion-dist), 0); }
.motion-ready [data-motion="reveal-fade"]:not(.motion-visible) { transform: none; }
.motion-ready [data-motion="depth"]:not(.motion-visible) { transform: translate3d(0, calc(var(--sh-motion-dist) * .6), 0) scale(.985); }
.motion-ready [data-motion="title"]:not(.motion-visible) { transform: translate3d(0, calc(var(--sh-motion-dist) * .5), 0); }

/* Hover de tarjetas: profundidad moderada. */
@media (hover: hover) {
  .sh-tarjeta { transition: transform calc(var(--sh-motion-dur) * .4) var(--sh-motion-curva), box-shadow calc(var(--sh-motion-dur) * .4) var(--sh-motion-curva); }
  .sh-tarjeta:hover { transform: translate3d(0, calc(var(--sh-motion-dist) * -0.18), 0); box-shadow: var(--sh-sombra-hover); }
}

/* Modal: fundido y ligera subida. */
.sh-modal[open] { animation: sh-modal-entra calc(var(--sh-motion-dur) * .6) var(--sh-motion-curva); }
.sh-modal[open]::backdrop { animation: sh-fundido calc(var(--sh-motion-dur) * .6) ease-out; }
@keyframes sh-modal-entra { from { opacity: 0; transform: translate3d(0, calc(var(--sh-motion-dist) * .75), 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sh-fundido { from { opacity: 0; } to { opacity: 1; } }

/* Preferencia del sistema o del visitante («Reducir movimiento» en el pie): solo fundidos muy cortos. */
@media (prefers-reduced-motion: reduce) {
  :root { --sh-motion-dur: 120ms; --sh-motion-dist: 0px; }
  .sh-tarjeta:hover { transform: none; }
}
html.motion-reducido { --sh-motion-dur: 120ms; --sh-motion-dist: 0px; }
html.motion-reducido .sh-tarjeta:hover { transform: none; }
html.motion-apagado [data-motion] { opacity: 1 !important; transform: none !important; transition: none !important; }