/* Namespace opcional para evitar choques: sustituye .svc-cards por el wrapper de tu bloque si quieres aislar */
:root {
  --reveal-distance: 40px;
}

/* ✅ Visible por defecto (por si SP “come” el JS) */
.scroll-item {
  opacity: 1;
  transform: none;
}

/* Solo aplica el efecto si el HTML tiene .js-io (la pone el JS al cargar) */
.js-io .scroll-item {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}

/* Al hacerse visible */
.js-io .scroll-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respeta “reducir movimiento” */
@media (prefers-reduced-motion: reduce) {
  .js-io .scroll-item {
    transition: none;
    transform: none;
    opacity: 1;
  }
}