/** * Primitivas de movimiento — EMPRENDERE. * * El movimiento aquí es realce, nunca estructura. La regla que gobierna el * archivo entero, y de la que depende que la web no se quede en blanco: * * TODO ES VISIBLE POR DEFECTO. Solo se oculta lo que va a animarse, solo * cuando `` lleva la clase `emp-movimiento`, y esa clase solo la pone * JavaScript. Sin guion, con el guion caído o con `prefers-reduced-motion: * reduce`, no hay una sola regla de este archivo que esconda nada. * * De ahí que las reglas que ocultan vivan dentro de `prefers-reduced-motion: * no-preference` en lugar de anularse después en un `reduce`. La diferencia * importa: un navegador que no entienda la consulta falla el `no-preference` y * recibe la página entera visible. Anular a posteriori habría dejado a ese mismo * navegador con el contenido oculto y sin nada que lo revelara. * * Duraciones entre 150 y 400 ms y una sola curva de salida. Nada de rebotes: * esto es una casa con solera, no una aplicación que celebra cada scroll. * * CONTRASTE. El único color que aparece en este archivo es el bronce #B07A47 del * estriado, y solo como decoración: 5,42 sobre negro y 3,20 sobre beige, ambos * por encima del 3:1 que WCAG 1.4.11 pide a un elemento gráfico. No porta * información y nunca es texto. */ /** * Los tres tokens de movimiento se declaran en `:root` y no en `.emp-movimiento`. * El motivo es exactamente el de arriba: si colgaran de la clase que pone el * guion, sin JavaScript quedarían sin valor y `.emp-transicion` se anularía sola. * Son tokens de diseño, no estado. * * `--emp-retardo` se declara aquí en cero y lo sobrescribe el guion elemento a * elemento, leyendo `data-emp-retardo`. */ :root { --emp-curva: cubic-bezier( 0.22, 0.61, 0.36, 1 ); --emp-duracion: 200ms; --emp-retardo: 0ms; } /* ------------------------------------------------------------- Transiciones */ /** * Transición de estado coherente en todo el sitio. * * Vive fuera de la consulta de movimiento a propósito: no oculta nada, solo * suaviza un cambio que iba a ocurrir igual. Por eso aquí sí basta con anularla * bajo `reduce`. * * `transition-property` enumerado y no `all`: con `all`, un cambio de `height` o * de `grid-template` acaba animándose sin que nadie lo haya pedido. */ .emp-transicion { transition-property: color, background-color, border-color, box-shadow, opacity, transform, letter-spacing; transition-duration: var( --emp-duracion ); transition-timing-function: var( --emp-curva ); } .emp-transicion--lenta { --emp-duracion: 320ms; } .emp-transicion--rapida { --emp-duracion: 150ms; } @media ( prefers-reduced-motion: reduce ) { .emp-transicion { transition: none; } } /* ---------------------------------------------------------------- Contadores */ /** * La cifra ya está escrita en el HTML; el guion solo la sustituye mientras * cuenta. Las cifras tabulares evitan que la caja cambie de ancho en cada * fotograma y arrastre a su alrededor: sin esto, una fila de tres cifras baila. */ [data-emp-contador] { font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------- Estriado */ /** * El motivo de la columna. * * Estrías verticales sobre una banda. Es el estriado del fuste del logotipo * llevado a separador de sección, canto de tarjeta o relleno de barra, y es lo * que hace que este sitio no se parezca a ningún otro: sale de la marca, no de * una tendencia. * * El dibujo es puro CSS y existe siempre, con guion o sin él. Lo único que el * movimiento añade es que las estrías se descubran al entrar en pantalla. */ [data-emp-estriado] { --emp-estria: #B07A47; --emp-estria-paso: 6px; --emp-estria-grosor: 1px; display: block; inline-size: 100%; block-size: 1.5rem; background-image: repeating-linear-gradient( 90deg, var( --emp-estria ) 0, var( --emp-estria ) var( --emp-estria-grosor ), transparent var( --emp-estria-grosor ), transparent var( --emp-estria-paso ) ); } /* Canto vertical: la banda se pone de pie y las estrías corren a lo largo del fuste, que es como corren en una columna de verdad. */ [data-emp-estriado="vertical"] { inline-size: 0.75rem; block-size: 100%; } /* Filete: una sola línea de estrías finas, para separar dos bandas sin peso. */ [data-emp-estriado="filete"] { --emp-estria-paso: 5px; block-size: 0.5rem; } /* ------------------------------------------------------- Estados de revelado */ @media ( prefers-reduced-motion: no-preference ) { /** * Estado de partida. `opacity` y `transform` y nada más: son las dos únicas * propiedades que el navegador puede animar sin recalcular la maquetación, y * eso es lo que mantiene el desplazamiento fluido en un móvil modesto. */ .emp-movimiento [data-emp-revelar] { opacity: 0; transition: opacity 320ms var( --emp-curva ) var( --emp-retardo ), transform 320ms var( --emp-curva ) var( --emp-retardo ); } /* Sin valor, fundido limpio. Los desplazamientos son cortos: 14 y 18 px. Un elemento que llega desde fuera de la pantalla es una web de agencia. */ .emp-movimiento [data-emp-revelar="abajo"] { transform: translateY( 14px ); } .emp-movimiento [data-emp-revelar="izquierda"] { transform: translateX( -18px ); } .emp-movimiento [data-emp-revelar="derecha"] { transform: translateX( 18px ); } .emp-movimiento [data-emp-revelar="escala"] { transform: scale( 0.965 ); } .emp-movimiento [data-emp-revelar][data-emp-visible] { opacity: 1; transform: none; } /** * Las estrías se dibujan. * * Con `clip-path` y no con `width`: recortar no toca la maquetación, así que * el separador ocupa su sitio desde el primer momento y nada salta cuando la * animación termina. La banda horizontal se descubre de izquierda a derecha, * como se lee; la vertical, de arriba abajo, como se levanta una columna. */ .emp-movimiento [data-emp-estriado] { clip-path: inset( 0 100% 0 0 ); transition: clip-path 400ms var( --emp-curva ) var( --emp-retardo ); } .emp-movimiento [data-emp-estriado="vertical"] { clip-path: inset( 0 0 100% 0 ); } .emp-movimiento [data-emp-estriado][data-emp-visible] { clip-path: inset( 0 ); } }