/* ========================================================= SOLARA · ANIMACIONES El movimiento va último, y es poco a propósito: en un sitio que ya se mueve solo (las Lucías, el degradé que baja de luz), sumar animación es ruido. ========================================================= */ /* El elemento arranca oculto SOLO si JS está vivo. Sin esta condición, un fallo de JS deja la página entera invisible: .reveal nunca se sacaría y el contenido no aparecería nunca. main.js pone la clase `js` en antes de cualquier otra cosa. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(.2, .7, .3, 1), transform 600ms cubic-bezier(.2, .7, .3, 1); } .js .reveal.visible { opacity: 1; transform: none; } /* El indicador de scroll del hero: una gota que cae, no un rebote. Invita a bajar sin gritar. */ @keyframes gota { 0% { transform: translate(-50%, 0); opacity: 1; } 70% { transform: translate(-50%, 14px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 0; } } .hero__scroll span { animation: gota 2s ease-in-out infinite; } /* La flecha del carrusel se asoma cada tanto, para que se entienda que hay más fotos al costado. Misma idea que la gota del hero: invitar, no gritar. Por eso el ciclo tiene una pausa larga y después dos empujoncitos cortos, en vez de un movimiento continuo que terminaría siendo ruido. Se anima `translate` y no `transform` porque el botón YA usa transform para centrarse vertical y para el scale del hover. Son propiedades distintas: componen entre sí en vez de pisarse. No se anima la flecha de volver: al abrir, la tira está al principio y la única dirección que existe es hacia adelante. */ @keyframes asomarse { 0%, 55%, 100% { translate: 0 0; } 68% { translate: 5px 0; } 80% { translate: 0 0; } 88% { translate: 3px 0; } } .carrusel__flecha--next:not([disabled]) { animation: asomarse 3.2s ease-in-out infinite; } /* Se corta apenas la persona usa el carrusel, por cualquier via: flecha, punto, dedo o rueda. Una vez que entendió que se mueve, seguir moviendo la flecha es insistir sobre algo ya sabido. La clase la pone main.js. */ .carrusel.ya-navego .carrusel__flecha--next { animation: none; } /* Respetar a quien pidió menos movimiento no es opcional: es WCAG 2.1 AA y está en los criterios de aceptación. Las Lucías directamente no se dibujan (lo decide js/lucias.js). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } /* Todo lo que se MUEVE al pasar el mouse queda quieto. Las dos ultimas faltaban: las 12 fechas se levantaban 4 px y las 12 fotos de la galeria hacian zoom al 104%. Bajar la duracion a 0.01ms no alcanza para eso —lo vuelve instantaneo, no lo saca—, y un salto seco es justo lo que esta preferencia pide evitar. Lo que NO entra aca, a proposito: la cruz del acordeon que rota y el hamburger que se vuelve X. Esos transform no son decoracion, son la unica senal de que algo se abrio o se cerro. Quitarlos deja al sitio sin indicar estado. */ .btn:hover, .razon:hover, .paso:hover, .via:hover, .fecha:hover { transform: none; } .galeria__item:hover img { transform: none; } } /* El latido del boton de WhatsApp: un aro que crece y se apaga. La pausa esta adentro del propio ciclo -del 60% al 100% ya es invisible- para que sea un pulso cada tanto y no un palpito continuo, que a los treinta segundos deja de leerse como invitacion y pasa a ser molestia. */ @keyframes latido { 0% { transform: scale(1); opacity: 0.55; } 55% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } }