Para
llax

// La idea del parallax en CSS

/* El truco: cada capa tiene un translateY
   diferente en el mismo scroll range.
   Menos movimiento = parece más lejos. */

/* Capa lejana — se mueve poco */
.layer-bg {
  animation: move linear;
  animation-timeline: --page;
}
@keyframes move {
  from { transform: translateY(0%); }
  to   { transform: translateY(-8%); }  /* poco */
}

/* Capa del medio */
.layer-mid {
  @keyframes move {
    to { transform: translateY(-20%); } /* medio */
  }
}

/* Capa cercana — se mueve mucho */
.layer-front {
  @keyframes move {
    to { transform: translateY(-50%); } /* mucho */
  }
}