/* Entradas al scroll y hover en imágenes — respeta prefers-reduced-motion */ /* Revelado al hacer scroll (oculto solo con JS: clase en ) */ [data-reveal] { opacity: 1; transform: none; transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } html.js-reveal-active [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(1.5rem); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); will-change: auto; } .service-grid > [data-reveal]:nth-child(1) { transition-delay: 0.03s; } .service-grid > [data-reveal]:nth-child(2) { transition-delay: 0.1s; } .service-grid > [data-reveal]:nth-child(3) { transition-delay: 0.17s; } .service-grid > [data-reveal]:nth-child(4) { transition-delay: 0.24s; } .service-grid > [data-reveal]:nth-child(5) { transition-delay: 0.31s; } .service-grid > [data-reveal]:nth-child(6) { transition-delay: 0.38s; } @media (prefers-reduced-motion: no-preference) { /* Imágenes: “flotan” solo al pasar el cursor (sin bucle continuo) */ .service-block__media img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .service-block:hover .service-block__media img { transform: scale(1.04); } .spotlights.hero-carousel .spotlight-card__media img { transition: none; } } @media (prefers-reduced-motion: reduce) { html.js-reveal-active [data-reveal]:not(.is-revealed) { opacity: 1 !important; transform: none !important; } [data-reveal] { transition: none !important; } }