/* ============================================================================ inloff — Capa de movimiento de las páginas editoriales. ============================================================================ Un solo vocabulario para las seis páginas. La alternativa —que cada hoja se invente sus curvas y sus tiempos— se nota enseguida: el visitante no sabría decir por qué, pero la casa deja de parecer la misma casa al pasar de una página a otra. TRES REGLAS QUE NO SE NEGOCIAN 1. **Sin JavaScript, la página se ve entera.** Nada nace en `opacity: 0` esperando a un observador. El estado oculto cuelga de `html.js-mov`, una clase que solo pone el propio JavaScript; si no carga, no se oculta nada y la página se lee completa. Un texto que no aparece porque falló un script no es una animación sutil: es contenido perdido. 2. **`prefers-reduced-motion` no significa "más rápido".** Significa que no hay movimiento: aquí se desactiva el estado inicial entero, así que quien lo tenga puesto ve la página quieta y completa, no un parpadeo de 10 ms. 3. **Solo `transform`, `opacity` y color.** Nada que obligue al navegador a recalcular la maqueta mientras se desplaza la página. TONO Esto es un taller artesano, no una landing de software. El movimiento va por debajo del umbral de "mira qué animación": acompaña la lectura y se olvida. Una sola entrada por sección, escalonada, y micro-respuestas al puntero en lo que de verdad se toca. @package inloff-theme/assets/css @version 1.1.0 ========================================================================= */ :root { /* Curvas de salida (deceleración). Nada de rebote ni elástico: llaman la atención sobre la animación en vez de sobre el contenido. */ --inloff-mov-suave: cubic-bezier(0.25, 1, 0.5, 1); /* quart */ --inloff-mov-firme: cubic-bezier(0.22, 1, 0.36, 1); /* quint */ --inloff-mov-decidida: cubic-bezier(0.16, 1, 0.3, 1); /* expo */ --inloff-mov-respuesta: 180ms; /* lo que se toca responde al instante */ --inloff-mov-estado: 300ms; /* un cambio de estado */ --inloff-mov-entrada: 720ms; /* algo que entra en escena */ /* El escalón entre hermanos. Por debajo de 60 ms no se percibe como secuencia; por encima de 110 ms se percibe como espera. */ --inloff-mov-escalon: 78ms; /* — EL TRAZO ————————————————————————————————————————————————————————— Tres páginas inventaron por separado el MISMO gesto —«el filete se traza de izquierda a derecha»— con tres duraciones y tres curvas. Medido en producción el 2026-09-19: /nuestra-historia/ a 560 ms con expo, /sostenibilidad/ a 620 ms con quart y /el-taller/ a 820 ms con una curva propia. Quien va de El taller a Sostenibilidad ve la misma raya dibujarse un 32 % más rápido y con otra aceleración. Es exactamente lo que esta hoja existe para impedir, así que el trazo pasa a ser vocabulario de la casa. LA CURVA ES LO QUE MÁS IMPORTA, Y NO PUEDE SER NINGUNA DE LAS TRES DE ARRIBA. Las de salida están calibradas para algo que LLEGA: salen disparadas y frenan, que es lo correcto para una pieza que aterriza, y lo peor posible para una línea que se está DIBUJANDO. Medido sobre el filete de 1.130 px de la portada de /sostenibilidad/: con quart iba por 788 px a los 170 ms de arrancar —el 70 % del recorrido— y los 342 px restantes se arrastraban. Eso no se lee como un trazo, se lee como un fallo de pintado. Esta arranca despacio, coge cuerpo y frena, que es lo que hace una mano que tira una línea. Sin rebote: los dos puntos de control se quedan dentro de [0,1], así que nunca se pasa del final. LA DURACIÓN SALE DEL LARGO DEL FILETE, PERO NO A VELOCIDAD CONSTANTE. Una velocidad única en px/s dejaría el filete de firma de 32 px de /nuestra-historia/ resuelto en 33 ms: un parpadeo, no un gesto. Y una duración única tampoco sirve: la misma marca de 32 px estirada a 820 ms seguiría dibujándose cuando la cifra que encabeza ya ha asentado su tinta, justo al revés del orden que esa página quiere que se lea. Una mano tampoco va a velocidad constante — en un trazo corto nunca llega a la velocidad de crucero—, así que el sitio tiene DOS pasos, no una fórmula: · `--inloff-mov-trazo` el filete que cruza una columna o una banda · `--inloff-mov-trazo-corto` la marca corta y el separador vertical El corte está en ~200 px, y no es una cifra de despacho: son los dos grupos que existen de verdad en las tres páginas. Medidos a 1440: las marcas caen en 32, 36, 114 y 168 px, y los filetes en 337, 436, 537, 598, 634, 800, 860 y 1.130 px. En medio no hay nada. Y el paso largo aguanta ese abanico de 3,4× sin partirse porque ya lo hacía: /el-taller/ lleva sus 337 px y sus 1.130 px a la misma duración y se lee como una sola mano. */ --inloff-mov-trazo-curva: cubic-bezier(0.42, 0.06, 0.24, 1); --inloff-mov-trazo: 820ms; --inloff-mov-trazo-corto: 460ms; /* Lo que el filete espera al texto de su columna. La columna entra en 720 ms; no espera a que termine, porque esa entrada es casi toda visible en su primer tercio. Con esto la línea sale cuando la pieza ya se está leyendo, y se lee como un segundo tiempo y no como un detalle más de la entrada. */ --inloff-mov-trazo-espera: 150ms; /* El escalón ENTRE RENGLONES de una misma lista, que no es el de arriba y por eso tiene su propio nombre. `--inloff-mov-escalon` separa columnas: bloques de contenido que llegan uno detrás de otro. Esto separa las líneas de una misma pauta, que son un solo objeto y pueden ir más juntas. Dos páginas llegaron a esto por su cuenta y cayeron en 58 y 62 ms; se queda el 62 porque el 58 se cuela por debajo del suelo de 60 ms que declara esta misma hoja cuatro líneas más arriba. */ --inloff-mov-escalon-trazo: 62ms; } /* --------------------------------------------------------------------------- ENTRADAS · LA PARTITURA ESTRUCTURAL --------------------------------------------------------------------------- Quién se mueve NO es una lista de selectores por página: es la estructura. El contenido de estas seis páginas lo compone quien lleva la tienda desde el constructor visual, y cualquier lista («el titular, las cuatro tarjetas») quedaría desfasada la primera vez que alguien añada una columna — y fallaría en silencio, que es lo peor: sin error, esa pieza simplemente deja de entrar. Lo estable es lo que impone el constructor: cada banda es una `section`, dentro van filas y dentro de cada fila, columnas. Eso ya es la partitura. Cada fila es un compás y cada columna una nota, escalonada por su posición. Añadir una tarjeta en el constructor la mete en la secuencia sola. Y va aquí, en CSS, y no marcado desde JavaScript, por una razón de tiempos: marcar después de cargar significaría enseñar el contenido, esconderlo y volver a enseñarlo. Desde CSS el estado inicial existe ya en el primer pintado. El JavaScript solo añade `.esta-dentro`. ------------------------------------------------------------------------- */ html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col, html.js-mov [data-revelar] { opacity: 0; transition: opacity var(--inloff-mov-entrada) var(--inloff-mov-firme), transform var(--inloff-mov-entrada) var(--inloff-mov-firme); transition-delay: var(--inloff-mov-retraso, 0ms); will-change: opacity, transform; } /* El gesto por defecto: el contenido llega con la lectura, desde abajo. */ html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col, html.js-mov [data-revelar="subir"], html.js-mov [data-revelar=""] { transform: translate3d(0, 22px, 0); } /* Tres gestos más, para cuando la hoja de una página quiera otra cosa: - `lado` : lo que entra desde fuera del raíl, para piezas laterales. - `asentar` : lo que estaba y se acomoda, para figuras y tarjetas. - `velo` : solo opacidad, para lo que no debe moverse (una cifra grande, un titular donde el desplazamiento se leería como un salto). */ html.js-mov [data-revelar="lado"] { transform: translate3d(-26px, 0, 0); } html.js-mov [data-revelar="asentar"] { transform: scale(0.972); } html.js-mov [data-revelar="velo"] { transform: none; } html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col.esta-dentro, html.js-mov [data-revelar].esta-dentro { opacity: 1; transform: none; will-change: auto; } /* Escalonado. El índice lo escribe el JS en `--i`; el retraso se calcula aquí para que ajustar el ritmo sea tocar una variable y no el script. Con tope: a partir de la octava, el retraso deja de crecer — una rejilla de doce tarjetas tardaría casi un segundo en terminar y las últimas llegarían cuando el ojo ya está en otra parte. */ html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col, html.js-mov [data-revelar-hijos] > * { --inloff-mov-retraso: calc(min(var(--i, 0), 7) * var(--inloff-mov-escalon)); } /* La excepción que no puede fallar: una columna que contiene algo pegajoso se queda quieta y visible. El `transform` de la entrada convierte a su columna en bloque contenedor y `position: sticky` deja de comportarse como se espera; en /tarjeta-regalo/, la tarjeta que acompaña al formulario dejaría de acompañarlo. Va en CSS y no en el script porque lo que oculta es el CSS: si solo lo supiera el script, esa columna se quedaría escondida para siempre. */ html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col:has(.inloff-gc-previa), html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col:has([data-quieto]) { opacity: 1; transform: none; transition: none; will-change: auto; } /* --------------------------------------------------------------------------- MICRO-RESPUESTAS Solo en lo que se toca de verdad. Un hover en algo que no es pulsable es una promesa falsa. ------------------------------------------------------------------------- */ /* Enlaces de texto dentro del cuerpo editorial: el subrayado se dibuja de izquierda a derecha en vez de encenderse de golpe. */ body[class*="inloff-pag-"] .inloff-enlace-editorial { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--inloff-mov-estado) var(--inloff-mov-firme); } body[class*="inloff-pag-"] .inloff-enlace-editorial:hover, body[class*="inloff-pag-"] .inloff-enlace-editorial:focus-visible { background-size: 100% 1px; } /* Botones y llamadas a la acción. El desplazamiento es de 1 px: suficiente para que la mano lo note, no tanto como para que el ojo lo lea como un salto. */ body[class*="inloff-pag-"] .inloff-cta, body[class*="inloff-pag-"] .button { transition: transform var(--inloff-mov-respuesta) var(--inloff-mov-firme), box-shadow var(--inloff-mov-estado) var(--inloff-mov-firme), background-color var(--inloff-mov-estado) var(--inloff-mov-firme), color var(--inloff-mov-estado) var(--inloff-mov-firme); } body[class*="inloff-pag-"] .inloff-cta:hover, body[class*="inloff-pag-"] .button:hover { transform: translate3d(0, -1px, 0); } /* Al pulsar vuelve a su sitio: el botón "se hunde" bajo el dedo. */ body[class*="inloff-pag-"] .inloff-cta:active, body[class*="inloff-pag-"] .button:active { transform: none; transition-duration: 80ms; } /* El foco de teclado nunca se anima: tiene que aparecer, no llegar. */ body[class*="inloff-pag-"] :focus-visible { transition: none; } /* --------------------------------------------------------------------------- QUIETO No es "lo mismo pero rápido": es sin movimiento y con todo visible. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* El script también se rinde solo en este caso (descubre todo y ni crea el observador), pero esto va aquí ADEMÁS y a propósito: una garantía de accesibilidad no puede depender de que un fichero JavaScript llegue. Si tarda, quien pidió no ver movimiento no debería estar mirando una página en blanco mientras tanto. */ html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col, html.js-mov body[class*="inloff-pag-"] .section-content > .row > .col.esta-dentro, html.js-mov [data-revelar], html.js-mov [data-revelar].esta-dentro { opacity: 1; transform: none; transition: none; will-change: auto; } body[class*="inloff-pag-"] .inloff-cta:hover, body[class*="inloff-pag-"] .button:hover, body[class*="inloff-pag-"] .inloff-cta:active, body[class*="inloff-pag-"] .button:active { transform: none; } body[class*="inloff-pag-"] .inloff-enlace-editorial { background-size: 100% 1px; transition: none; } }