/* ========================================================================= LAQUIN FOODS · Entrada del titular del hero Lo carga el plugin «Laquin Foods — Optimización» (assets/titulo.css), sólo en la portada. El propio plugin parte el titular antes de servirlo:

LAQUIN FOODS!

Maestría y … Los espacios entre palabras siguen siendo texto llano, así que el titular parte líneas exactamente donde partía antes: esto no toca la maqueta, sólo añade de dónde viene cada pieza. Dos decisiones que sostienen todo lo demás: 1. **El estado final es el estado normal.** Aquí no se esconde nada: lo escondido vive dentro de los @keyframes, y la animación entra con `backwards`, que pinta el primer fotograma durante la espera y suelta el elemento a sus estilos de siempre en cuanto termina. Si el navegador no llega a animar, si el visitante pide menos movimiento o si esta hoja no carga, el titular se ve entero y quieto. Nunca en blanco. 2. **El desenfoque va en `em`.** El titular pasa de 85 px en escritorio a la mitad en móvil; un desenfoque en píxeles que insinúa humo en la pantalla grande borraría el texto en la chica. En `em` se encoge con la letra y el efecto se ve igual en las tres medidas. El humo es de la casa: la marca ahúma, el video del fondo es humo, y las palabras llegan desenfocadas y se posan nítidas, como algo que se define al disiparse. Debajo de cada una pasa un rescoldo —el cobre de la paleta, --ast-global-color-8— que se enciende a media entrada y se apaga al posarse. ========================================================================= */ .lq-titulo { /* Curva de salida decidida: arranca rápido y se posa sin rebote. */ --lq-curva: cubic-bezier(0.16, 0.82, 0.26, 1); /* El compás que el titular pasa apagado antes de encenderse. No es un retraso muerto: es el tiempo en que se lee el espectro, que es la mitad del efecto. Con menos, la portada llega con todo puesto y no se ve que haya pasado nada. */ --lq-espera: 620ms; /* Lo que se descuelga cada palabra de la anterior. Cuanto más largo, más se lee la cascada como cascada y menos como un fundido de golpe. */ --lq-paso: 120ms; /* La opacidad del espectro: el titular apagado que se ve desde el primer pintado. Sobre el hero, que es casi negro, por debajo del 25 % no se distingue del fondo y la entrada parece no existir. */ --lq-fantasma: 0.3; /* El cobre de la marca (#A77443), aclarado hasta brasa para que el resplandor se note sobre el vino oscuro del hero. */ --lq-brasa: 212, 149, 92; /* La misma sombra que hero.css le pone al titular. Se repite dentro de los @keyframes porque una animación de text-shadow necesita el mismo número de sombras en todos sus fotogramas. */ --lq-sombra: 0 2px 28px rgba(0, 0, 0, 0.55); } /* Cada pieza necesita caja propia para poder desplazarse y desenfocarse por su cuenta. `inline-block` se la da sin sacarla del renglón. */ .lq-titulo__rotulo, .lq-titulo__palabra { display: inline-block; } /* ---------- El rótulo ---------- */ /* El rótulo no tiene espectro: llega. Es lo único que aparece de la nada, y por eso encabeza sin competir con el titular, que ya está insinuado detrás. Además del desenfoque lleva una apertura de letra que se cierra: es el gesto de las marcas de lujo, y en una línea corta en versales se lee como firma. Cierra en `normal`, que es lo que tiene de suyo —nada en la cascada le pone otra cosa—, así que al terminar no queda ningún ajuste colgando. Sale antes que la primera palabra para que la vista tenga dónde posarse mientras el titular sigue apagado. */ .lq-titulo__rotulo { animation: lq-rotulo-entra 760ms var(--lq-curva) calc(var(--lq-espera) - 240ms) backwards; } /* ---------- Las palabras del titular ---------- */ /* Todas esperan en su primer fotograma —tenues y desenfocadas, el titular entero insinuado— y se van encendiendo una tras otra. El orden lo pone el plugin en `--lq-orden`; si algo se llevara ese atributo por delante, el valor de reserva es 0 y entrarían todas a la vez: se pierde el escalonado, no la entrada. Cada palabra dura menos que el hueco entre la primera y la última: así se solapan de dos en dos y la cascada se lee como un solo movimiento que recorre el titular, no como seis fundidos seguidos. */ .lq-titulo__palabra { animation: lq-palabra-entra 640ms var(--lq-curva) backwards; animation-delay: calc(var(--lq-espera) + var(--lq-orden, 0) * var(--lq-paso)); } /* ---------- Los fotogramas ---------- */ @keyframes lq-rotulo-entra { from { opacity: 0; letter-spacing: 0.44em; transform: translateY(0.5em); filter: blur(0.3em); text-shadow: var(--lq-sombra), 0 0 0.7em rgba(var(--lq-brasa), 0); } 55% { opacity: 1; text-shadow: var(--lq-sombra), 0 0 0.7em rgba(var(--lq-brasa), 0.5); } to { opacity: 1; letter-spacing: normal; transform: none; filter: none; text-shadow: var(--lq-sombra), 0 0 0 rgba(var(--lq-brasa), 0); } } /* La opacidad no arranca de cero: arranca del espectro. La palabra ya está ahí; lo que llega es la luz. De ahí sale toda la idea, y de paso el bloque nunca se ve vacío. El desenfoque de partida es el que decide si el efecto se entiende. Empezó en 0,16em y a esa medida el espectro era un borrón: se veía humo, no un titular apagado, y encendiéndose desde ahí parecía que el texto llegaba de fuera en lugar de aclararse. En 0,09em el espectro se lee —se sabe qué pone antes de que se encienda— y sigue habiendo bastante para que la nitidez al posarse se note. El achicado es mínimo (2,5 %) y va con el desplazamiento: por sí solo se notaría como un zoom; acompañando la subida sólo aporta el peso de algo que se asienta. */ @keyframes lq-palabra-entra { from { opacity: var(--lq-fantasma); transform: translateY(0.34em) scale(0.975); filter: blur(0.09em); text-shadow: var(--lq-sombra), 0 0 0.34em rgba(var(--lq-brasa), 0); } 50% { text-shadow: var(--lq-sombra), 0 0 0.34em rgba(var(--lq-brasa), 0.6); } to { opacity: 1; transform: none; filter: none; text-shadow: var(--lq-sombra), 0 0 0 rgba(var(--lq-brasa), 0); } } /* ---------- Tablet ---------- */ /* Aquí el titular se planta encima de la carne y ocupa más renglones. Con más palabras a la vista el escalonado se alarga, así que se acorta el paso para que la entrada siga cerrando en el mismo tiempo. */ @media (max-width: 976px) { .lq-titulo { --lq-espera: 560ms; --lq-paso: 108ms; } } /* ---------- Móvil ---------- */ /* En vertical el titular ocupa casi toda la pantalla y la primera impresión se juega en menos tiempo: la entrada entera se aprieta. */ @media (max-width: 767px) { .lq-titulo { --lq-espera: 480ms; --lq-paso: 96ms; /* Aquí el titular ya no cae sobre negro: cae sobre la chuleta, que es lo más claro de la pantalla. Un espectro calculado para el fondo oscuro se deslavaza justo encima de la carne, que es donde más se mira. Sube. */ --lq-fantasma: 0.42; } .lq-titulo__rotulo { animation-duration: 660ms; } .lq-titulo__palabra { animation-duration: 560ms; } } /* ---------- Movimiento reducido ---------- */ /* Quien pide menos movimiento ve el titular puesto, sin entrada. Basta con quitar la animación: como el estado final es el estado normal, al no haber animación no hay nada que deshacer. */ @media (prefers-reduced-motion: reduce) { .lq-titulo__rotulo, .lq-titulo__palabra { animation: none; } }