/* Base initial state */
.sae-from-left, .fx-izq-der,
.sae-from-right, .fx-der-izq,
.sae-from-top, .fx-arriba-abajo,
.sae-from-bottom, .fx-abajo-arriba {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 700ms ease, opacity 700ms ease;
  transform: translate3d(0,0,0);
}

/* Off-screen starting transforms */
.sae-from-left, .fx-izq-der     { transform: translate3d(-40px, 0, 0); }
.sae-from-right, .fx-der-izq    { transform: translate3d( 40px, 0, 0); }
.sae-from-top, .fx-arriba-abajo { transform: translate3d(0, -40px, 0); }
.sae-from-bottom, .fx-abajo-arriba { transform: translate3d(0, 40px, 0); }

/* Final state when in view */
.sae-in-view {
  opacity: 1 !important;
  transform: translate3d(0,0,0) !important;
}

/* Optional: small stagger for children inside a container with .sae-stagger */
.sae-stagger > * {
  transition-delay: 0ms;
}
.sae-stagger.sae-in-view > * {
  transition-delay: calc(var(--sae-stagger, 50ms) * var(--sae-index, 1));
}
.sae-stagger > *:nth-child(1) { --sae-index: 1; }
.sae-stagger > *:nth-child(2) { --sae-index: 2; }
.sae-stagger > *:nth-child(3) { --sae-index: 3; }
.sae-stagger > *:nth-child(4) { --sae-index: 4; }
.sae-stagger > *:nth-child(5) { --sae-index: 5; }