/* ===================================================================== animaciones.css — cómo se ve el movimiento Este archivo es la otra mitad de js/animaciones.js. El reparto es: · el JavaScript decide CUÁNDO (cuando el bloque asoma, cuando bajaste 60px), y lo único que hace es poner y sacar clases; · este CSS decide CÓMO se ve cada uno de esos estados. Se cargan separados porque son dos oficios distintos: si mañana hay que cambiar cuánto dura un fundido, se toca acá y no se abre un programa. Va ÚLTIMO en la lista del a propósito. Cuando dos reglas de CSS compiten con la misma fuerza gana la que se leyó al final, así que desde acá podemos pisar estados que hayan dejado las otras hojas. Es lo que corresponde para una capa de animación: llega después de que todo lo demás ya se dibujó. REGLA QUE NO SE ROMPE -------------------- Ninguna regla de este archivo esconde nada por su cuenta. Todo lo que oculta cuelga de "html.js-animaciones", y esa clase la pone el JavaScript. Si el JavaScript no corre —navegador viejo, un error, el archivo que no bajó— la clase no aparece, estas reglas no se aplican y la tienda se ve completa. Nunca al revés: un CSS que esconde y espera que el JavaScript lo muestre es una página en blanco esperando a pasar. Y todo lo que se anima acá es "opacity" o "translate". Son las dos cosas que el navegador puede mover sin recalcular la página entera: se las pasa directo a la placa de video. Animar "top", "height" o "margin" en cambio lo obliga a rehacer las cuentas de dónde va cada elemento en cada cuadro, y ahí es donde el scroll se pone pegajoso en el celular. ===================================================================== */ /* --- 1. El deslizamiento de la página -------------------------------- Una sola línea que cambia el sitio entero: cuando algo manda la pantalla a otro lado (un link a #catalogo, volver a un ancla con el botón "atrás"), en vez de teletransportarse, se desliza. El salto seco es desorientador: la pantalla cambia de golpe y uno no sabe si bajó, si subió o si cambió de página. El deslizamiento contesta esa pregunta sola. Es, casi literalmente, la queja de "no se baja la ventana como una página profesional". El scroll-padding-top que hace que el encabezado pegajoso no tape el título de destino NO está acá: vive en tienda.css, que es su dueño. Ojo: esta regla no lleva !important, y eso es a propósito. La regla global de "reducir movimiento" de tienda.css sí lo lleva, así que le gana y apaga el deslizamiento para quien lo pidió. El orden de fuerzas ya está resuelto; no hay que hacer nada más acá. */ html { scroll-behavior: smooth; } /* --- 2. Los bloques que aparecen al bajar ----------------------------- El HTML de la portada marca los bloques con class="revelar". Esa clase sola no hace NADA: es un cartelito para que el JavaScript sepa a quién vigilar. Recién cuando el JavaScript confirma que está vivo (poniendo js-animaciones en el ) estas reglas empiezan a valer. El estado escondido no es "invisible del todo": es transparente y corrido 22px hacia abajo. Al revelarse sube esos 22px mientras se opaca. Ese desplazamiento cortito es el que hace que se lea como "esto viene entrando" y no como "esto estaba prendiéndose". */ html.js-animaciones .revelar { opacity: 0; /* "translate" en vez de "transform: translateY()" a propósito: son dos propiedades distintas y el navegador las SUMA en vez de pisarse. Si usáramos transform y el CSS de otro agente ya tuviera un transform en ese mismo bloque, uno le borraría el otro. Así conviven. */ translate: 0 22px; /* Los tiempos. 620ms suena a mucho escrito, pero en pantalla es un parpadeo largo: abajo de 400 el movimiento se siente nervioso y arriba de 800 uno empieza a esperar a la página. La curva cubic-bezier arranca rápido y frena de a poco, como cualquier cosa que se mueve en el mundo real. La opacidad va un toque más rápida que el movimiento para que el bloque termine de verse justo antes de terminar de acomodarse: si se acomoda primero y después se ilumina, se nota el truco. */ transition: opacity 480ms cubic-bezier(.22, .61, .36, 1), translate 620ms cubic-bezier(.22, .61, .36, 1); /* La espera escalonada cuando varios bloques asoman juntos. El JavaScript escribe esta variable con 0ms, 90ms, 180ms… Si no la escribió, el "0ms" de respaldo hace que no haya ninguna espera. */ transition-delay: var(--retraso-revelar, 0ms); } /* El estado final. Es exactamente lo mismo que el bloque tendría sin ninguna de estas reglas: opaco y en su lugar. Por eso los bloques que ya se veían al cargar la página nacen con esta clase puesta y no se animan nunca: no hay diferencia entre su estado y el normal, y una transición entre dos valores iguales no dibuja nada. */ html.js-animaciones .revelar.revelado { opacity: 1; translate: none; } /* --- 3. La flechita del hero ----------------------------------------- La flecha que rebota abajo del hero dice "seguí bajando". Apenas empezás a bajar ya cumplió: dejarla rebotando encima del contenido es ruido. El JavaScript pone "pagina-desplazada" en el en el mismo momento en que compacta el encabezado, así que sale gratis. Se apaga con opacidad, no con display:none. Con display el elemento desaparece de golpe y no hay forma de animarlo; además el hueco que ocupaba se cierra de un tirón. Y va pointer-events:none para que, ya invisible, no se coma ningún clic. */ html.pagina-desplazada .hero-flecha { opacity: 0; pointer-events: none; transition: opacity 300ms ease-out; } /* --- 4. Imprimir ------------------------------------------------------ Red de seguridad. Si alguien manda la página a la impresora (o a "guardar como PDF") mientras hay bloques esperando su turno para aparecer, esos bloques saldrían en blanco: para la impresora, opacity 0 es tinta que no se pone. Acá se muestra todo, quieto y en su lugar. */ @media print { html.js-animaciones .revelar { opacity: 1 !important; translate: none !important; transition: none !important; } html.pagina-desplazada .hero-flecha { opacity: .55; } } /* --- 5. Reducir movimiento ------------------------------------------- El cinturón de seguridad, por triplicado. Ya hay una regla global en tienda.css que apaga todas las transiciones del sitio, y el JavaScript además consulta la preferencia y directamente no esconde nada. Esta tercera vuelta existe por si alguna de las dos falla: acá los bloques se muestran enteros aunque la clase js-animaciones esté puesta. Lo que se anula no es sólo la animación: es el ESTADO ESCONDIDO. Apagar nada más la transición dejaría los bloques invisibles para siempre si el vigilante no llegara a avisar, que es peor que la animación. El paralaje de las imágenes no aparece en esta lista porque no se hace con CSS: lo escribe el JavaScript, que ya lo apaga por su cuenta (y lo apaga incluso si alguien prende la preferencia con la página abierta). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js-animaciones .revelar { opacity: 1; translate: none; transition: none; } html.pagina-desplazada .hero-flecha { transition: none; } }