/* ==========================================================================
   fx-native.css — movimiento continuo sin librería.

   QUÉ CAMBIÓ Y POR QUÉ
   Antes este archivo aplicaba una animación `fx-float` infinita a
   .bento-card, .price-card y .blog-card: diez cajas grandes, con sombra y
   (entonces) backdrop-filter, trasladándose sin parar, dentro y fuera de
   pantalla, para siempre. El compositor tenía que recomponer esas diez
   capas en cada frame durante toda la vida de la página. Ese era el mayor
   responsable de que el scroll se sintiera duro: no había ni un solo frame
   libre. La flotación se ha eliminado.

   Lo que queda es parallax ligado al scroll con `animation-timeline: view()`.
   Se ejecuta ENTERO en el compositor: no toca el hilo principal, no hay
   listener de scroll, y si el navegador no lo soporta simplemente no hay
   parallax (degradación invisible). Es la única estrategia de parallax de
   imágenes del sitio; GSAP ya no duplica este efecto.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .blog-card img,
    .feature-visual img,
    .cta-visual img {
      animation: fx-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Recorrido corto a propósito: lo justo para dar profundidad sin que la
       imagen se despegue del marco que la recorta. */
    @keyframes fx-parallax {
      from { translate: 0 -3.2% }
      to   { translate: 0  3.2% }
    }

    /* La captura del sistema queda fuera: su movimiento lo controla el
       levantamiento 3D de script.js y dos animaciones sobre el mismo
       elemento se pisarían. */
  }
}