/* ========================================================================== ANIMACIONES — Balio la Pena ========================================================================== Se carga en las 31 páginas, después de marca.css. Dos cosas y nada más: 1. APARICIÓN. Los bloques repetidos —las tarjetas de destino, las fichas de los fundadores, los bloques de experiencias, la galería de cada destino— entran al hacer scroll en vez de estar ya puestos. Van escalonados dentro de su grupo, así que la rejilla se dibuja sola en vez de aparecer de golpe. 2. RESPUESTA AL PUNTERO. Lo que se puede pulsar reacciona: la tarjeta sube un poco y su foto se acerca despacio. Reglas que condicionan el cómo: - El manual de marca prohíbe el sombreado (restricción 2), así que el relieve no se hace con sombra sino con movimiento y con el turquesa de marca en el borde. Aquí además se apagan las sombras que las tarjetas traían de antes. - Solo se animan `opacity` y `transform`, que el navegador resuelve en la capa de composición. Nada de animar `height`, `top` o `width`, que obligan a recalcular la página en cada fotograma. - La aparición la enciende el JS (clase `.js-anima` en ). Sin JS no se oculta nada: el contenido se ve entero, como hasta ahora. - Con `prefers-reduced-motion` no se mueve nada. No es un adorno: a quien tiene trastorno vestibular, el desplazamiento le sienta mal. ========================================================================== */ :root { --anim-curva: cubic-bezier(0.22, 0.61, 0.36, 1); --anim-dur: 0.62s; --anim-paso: 0.07s; /* retardo entre hermanos de un mismo grupo */ } /* -------------------------------------------------------------------------- 1. Aparición al entrar en pantalla -------------------------------------------------------------------------- */ /* El estado oculto se escribe con `:not(.r-visible)`, y el revelado no declara `transform` en absoluto. La forma evidente —ocultar en `.r-anima` y poner `transform: none` al revelar— tiene un fallo que costó encontrar: esa regla de llegada pesa más que cualquier `:hover` (0,3,0 contra 0,2,0), así que en cuanto un bloque terminaba de aparecer dejaba de reaccionar al puntero. Se cargaba incluso el gesto que las tarjetas de destino ya tenían de antes. Sin regla de llegada no hay nada que estorbe al `:hover`. La `transition` sí va en la clase base, sin condición: si solo estuviera en el estado oculto, al quitarse esa regla no habría transición que animar y el bloque aparecería de golpe. */ .js-anima .r-anima { transition: opacity var(--anim-dur) var(--anim-curva), transform var(--anim-dur) var(--anim-curva); } .js-anima .r-anima:not(.r-visible) { opacity: 0; transform: translate3d(0, 22px, 0); will-change: opacity, transform; } /* Variante lateral para lo que entra en una fila: la ficha del fundador y el bloque de experiencia alternan lado, y el gesto lo acompaña. */ .js-anima .r-anima--izda:not(.r-visible) { transform: translate3d(-26px, 0, 0); } .js-anima .r-anima--dcha:not(.r-visible) { transform: translate3d(26px, 0, 0); } /* La foto de una tarjeta entra con un punto de escala de más y se asienta. Es el mismo gesto que hace el hero de la portada. */ .js-anima .r-anima--foto img { transition: transform 0.8s var(--anim-curva); } .js-anima .r-anima--foto:not(.r-visible) img { transform: scale(1.06); } /* -------------------------------------------------------------------------- 2. Respuesta al puntero Sin sombra: el relieve es el desplazamiento y el filete turquesa. -------------------------------------------------------------------------- */ /* Los bloques que reaccionan al puntero necesitan que `outline-color` esté en la lista de transiciones, y la del reveal solo lleva `opacity` y `transform`. Como la del reveal pesa 0,2,0 y `.destino-card` a secas pesa 0,1,0, la segunda lista repite el selector junto a `.r-anima` para ganarle: así el filete turquesa se funde en vez de aparecer de golpe. */ .destino-card, .founder-card, .destino-gallery__image-container { box-shadow: none !important; /* restricción 2 del manual */ outline: 2px solid transparent; outline-offset: -2px; } .destino-card, .founder-card, .destino-gallery__image-container, .js-anima .r-anima.destino-card, .js-anima .r-anima.founder-card, .js-anima .r-anima.destino-gallery__image-container { transition: opacity var(--anim-dur) var(--anim-curva), transform 0.42s var(--anim-curva), outline-color 0.42s var(--anim-curva); } @media (hover: hover) and (pointer: fine) { .destino-card:hover, .founder-card:hover, .destino-gallery__image-container:hover { transform: translate3d(0, -6px, 0); outline-color: var(--marca-turquesa, #33c3b2); } /* El recorte de la tarjeta ya es overflow:hidden, así que la foto puede crecer sin desbordar. */ .destino-card__image, .destino-gallery__image, .founder-image img { transition: transform 0.7s var(--anim-curva); } .destino-card:hover .destino-card__image, .destino-gallery__image-container:hover .destino-gallery__image, .founder-card:hover .founder-image img { transform: scale(1.05); } /* El botón de la tarjeta de destino sube con ella y se llena de turquesa. */ .destino-card__button { transition: background-color 0.3s var(--anim-curva), color 0.3s var(--anim-curva); } } /* Los datos de contacto son enlaces: el icono se adelanta al pasar por encima. */ .connect-contact__item { transition: transform 0.32s var(--anim-curva); } @media (hover: hover) and (pointer: fine) { .connect-contact__item:hover { transform: translate3d(5px, 0, 0); } } /* -------------------------------------------------------------------------- 3. Menos movimiento -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-anima .r-anima, .js-anima .r-anima:not(.r-visible), .js-anima .r-anima--izda:not(.r-visible), .js-anima .r-anima--dcha:not(.r-visible) { opacity: 1; transform: none; transition: none; } .js-anima .r-anima--foto img, .js-anima .r-anima--foto:not(.r-visible) img { transform: none; transition: none; } .destino-card, .founder-card, .destino-gallery__image-container, .connect-contact__item, .destino-card__image, .destino-gallery__image, .founder-image img { transition: none; } .destino-card:hover, .founder-card:hover, .destino-gallery__image-container:hover, .connect-contact__item:hover { transform: none; } .destino-card:hover .destino-card__image, .destino-gallery__image-container:hover .destino-gallery__image, .founder-card:hover .founder-image img { transform: none; } }