/* =========================================================
 VIX HOSTING — SCROLL MOTION SYSTEM
 Animaciones de entrada sutiles y progresivas.
 Capa puramente visual: no modifica layout ni dimensiones.
 ========================================================= */

:root{
  --vix-motion-duration: 640ms;
  --vix-motion-ease: cubic-bezier(.22,.72,.24,1);
  --vix-motion-distance: 24px;
}

/* La ocultación solo se activa cuando JS confirma soporte. */
html.vix-motion-ready [data-vix-reveal]{
  opacity:0;
  translate:0 var(--vix-motion-distance);
  scale:1;
  transition:
    opacity var(--vix-motion-duration) var(--vix-motion-ease),
    translate var(--vix-motion-duration) var(--vix-motion-ease),
    scale var(--vix-motion-duration) var(--vix-motion-ease);
  transition-delay:var(--vix-motion-delay,0ms);
  will-change:opacity,translate,scale;
  backface-visibility:hidden;
}

html.vix-motion-ready [data-vix-reveal="left"]{
  translate:calc(var(--vix-motion-distance) * -1) 0;
}
html.vix-motion-ready [data-vix-reveal="right"]{
  translate:var(--vix-motion-distance) 0;
}
html.vix-motion-ready [data-vix-reveal="scale"]{
  translate:0 12px;
  scale:.975;
}
html.vix-motion-ready [data-vix-reveal="soft"]{
  translate:none;
  scale:1;
}
html.vix-motion-ready [data-vix-reveal].is-vix-visible{
  opacity:1;
  translate:0 0;
  scale:1;
  will-change:auto;
}

/* Imágenes/visuales: una entrada algo más larga pero discreta. */
html.vix-motion-ready .vix-motion-visual[data-vix-reveal]{
  --vix-motion-duration:760ms;
}

/* Mantiene hover de tarjetas independiente de la animación de entrada. */
html.vix-motion-ready [data-vix-reveal].is-vix-visible:hover{
  transition-delay:0ms;
}

/* Evita flashes en elementos que JS identifica como ya visibles. */
html.vix-motion-ready [data-vix-reveal].is-vix-immediate{
  transition-duration:0ms!important;
  transition-delay:0ms!important;
}

/* Accesibilidad: cero desplazamiento/ocultación cuando se reduce movimiento. */
@media (prefers-reduced-motion: reduce){
  html.vix-motion-ready [data-vix-reveal],
  html.vix-motion-ready [data-vix-reveal="left"],
  html.vix-motion-ready [data-vix-reveal="right"],
  html.vix-motion-ready [data-vix-reveal="scale"],
  html.vix-motion-ready [data-vix-reveal="soft"]{
    opacity:1!important;
    translate:none!important;
    scale:1!important;
    transition:none!important;
    animation:none!important;
  }
}

/* En móvil la distancia es menor para que la interfaz se sienta rápida. */
@media (max-width:760px){
  :root{--vix-motion-distance:16px;--vix-motion-duration:560ms}
}