/* ═══════════════════════════════════════════════════════════════════════════ VIDA · DISTINTIVO componentes/vida/vida-distintivo.css Capa de vida de `.c-distintivo` en las cinco épocas. Se carga DESPUÉS de base.css y de las cinco hojas de época. ─────────────────────────────────────────────────────────────────────────── TESIS · Un distintivo no se acaricia: se ESTAMPA. Es la pieza más pequeña del sistema y no tiene vida de hover que valga la pena — tiene vida de ESTADO. Lo que aquí se anima es el instante en que la marca aparece o pasa a `--acento` / `--ok`: el momento en que alguien la pone. Después, quieta. LO QUE DISPARA (nunca hay bucle, nunca hay reposo animado): 1. `.is-nueva` → la entrada-en-estado completa, UNA vez. Se pone al pintar el distintivo (o al añadirle el modificador) y se puede quitar cuando se quiera: la hoja no depende de que se quite. 2. El cambio de modificador → las transiciones declaradas en cada época hacen el resto (color, cerco, inclinación) al velocímetro de la época. UNA IDEA POR ÉPOCA (doctrina MATERIA §5): 1 · CUEVA la marca SE SOPLA el pigmento llega en nube y se posa 2 · PIEDRA el relieve SE ASIENTA baja el canto y el peso lo encaja 3 · PAPEL LACRE aplastamiento breve + asentado largo 4 · HIERRO el TROQUEL golpea golpe seco y la chapa deja de sonar 5 · CABINA el PILOTO se enciende 130 ms, primero el núcleo REGLAS QUE CUMPLE (contrato 07 §A): · Todo va bajo `html[data-epoca="N"] .c-distintivo…`. Ni un selector fuera. · Cero JS, cero marcado, cero recursos. Solo clases de estado. · Solo se animan `opacity`, `scale`, `translate`, `filter`, `box-shadow`, `background-color`, `border-color`, `color` y `transform`. Nada que dispare layout. · LA CAJA NO CAMBIA: los golpes son `scale`/`translate` (longhands independientes), que se componen POR ENCIMA del `transform` de la piel — así la inclinación de la cueva y el troquelado del hierro siguen intactos y yo no piso ni una propiedad de reposo. · Pseudos: en la época 3 los dos están ocupados por los corchetes y en la 5 el `::before` es el piloto. Aquí NO se declara ni un `content` nuevo: en la 5 se anima el piloto que ya existe (es exactamente su fenómeno) y en la 3 no se toca ninguno. · Los fotogramas al 100 % coinciden con el valor de reposo de la piel, y el relleno es `backwards`: cuando la animación termina, manda la piel. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · CUEVA — LA MARCA SE SOPLA Nadie dibujó estas marcas: se sopló pigmento por un hueso hueco contra la pared. Por eso la marca llega ANCHA y DIFUSA, y solo al final el polvo se posa y el canto se define. Es la única época en la que el aire hace algo. Entrada: 828 ms (1,15 × los 720 ms de la cueva), con su curva orgánica. ═══════════════════════════════════════════════════════════════════════════ */ /* Cambio de estado: se mueve la INCLINACIÓN (nadie pinta dos veces con la misma mano) y el halo. El COLOR NO SE INTERPOLA a propósito, y es una decisión de contraste medida: la cueva es la única época que invierte la polaridad — `MÓDULO 01` es cal sobre pared oscura (7,26:1) y `ESTÁS AQUÍ` es tinta casi negra sobre brasa naranja (7,74:1). Cruzar de una a otra pasaría 720 ms por grises intermedios ilegibles. El pigmento no se funde: se vuelve a soplar (eso es lo que hace `.is-nueva`). El CALDEO del hover va aparte y por `filter`: entra en 720 ms y tarda 2,5 s en irse (la proporción 1:3,5 de la doctrina). */ html[data-epoca="1"] .c-distintivo{ transition: border-color var(--e-vel) var(--e-curva), box-shadow var(--e-vel) var(--e-curva), transform var(--e-vel) var(--e-curva), filter calc(var(--e-vel) * 3.5) var(--e-curva); } html[data-epoca="1"] .c-distintivo:hover{ filter: brightness(1.045) drop-shadow(0 0 9px rgba(255, 106, 31, .26)); transition: border-color var(--e-vel) var(--e-curva), box-shadow var(--e-vel) var(--e-curva), transform var(--e-vel) var(--e-curva), filter var(--e-vel) var(--e-curva); } html[data-epoca="1"] .c-distintivo.is-nueva{ animation: vdist-1-soplo calc(var(--e-vel) * 1.15) var(--e-curva) 1 backwards; } /* El acento ya trae halo en reposo: al soplarse llega ABIERTO y se recoge. (La luz es una fuente: si el pigmento cae encendido, el halo tiene que contarlo.) El 100 % es, letra por letra, la sombra que declara la piel. */ html[data-epoca="1"] .c-distintivo--acento.is-nueva{ animation: vdist-1-soplo calc(var(--e-vel) * 1.15) var(--e-curva) 1 backwards, vdist-1-aliento calc(var(--e-vel) * 1.15) var(--e-curva) 1 backwards; } @keyframes vdist-1-soplo{ 0% { opacity: 0; scale: 1.10; filter: blur(5px); } 18% { opacity: 1; } 46% { scale: 1.014; filter: blur(.7px); } 100% { opacity: 1; scale: 1; filter: blur(0); } } @keyframes vdist-1-aliento{ 0% { box-shadow: 0 0 34px 8px var(--e-halo); } 100% { box-shadow: 0 6px 20px -8px var(--e-halo); } } /* ═══════════════════════════════════════════════════════════════════════════ 2 · PIEDRA — EL RELIEVE SE ASIENTA Una cartela no aparece: se EMPOTRA. Baja los últimos milímetros, el muro la para en seco y el peso la encaja (una compresión de 6 milésimas, que es todo lo que se mueve la piedra en este sistema). Sin rebote: la piedra no bota. Entrada: 560 ms — la velocidad de la época, ni una más. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="2"] .c-distintivo{ transition: background var(--e-vel) var(--e-curva), border-color var(--e-vel) var(--e-curva), color var(--e-vel) var(--e-curva), box-shadow var(--e-vel) var(--e-curva); } html[data-epoca="2"] .c-distintivo.is-nueva{ animation: vdist-2-asienta var(--e-vel) var(--e-curva) 1 backwards; } @keyframes vdist-2-asienta{ 0% { opacity: 0; translate: 0 -5px; scale: 1.006; } 22% { opacity: 1; } 64% { translate: 0 .6px; scale: 1 .994; } /* el canto toca y el peso la encaja */ 100% { translate: 0 0; scale: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ 3 · PAPEL — LACRE La pieza de la época. El `--ok` no «se pone»: cae la gota, el cuño la APLASTA y luego lo lento es SECARSE. El reparto del tiempo es el mensaje: 120 ms de aplastamiento contra 500 ms de asentado (1:4, la proporción de la doctrina llevada a una entrada en vez de a un hover). El calor NO se cuenta con la tinta: se cuenta con el cerco que la cera caliente deja alrededor, que vive FUERA de la caja y por lo tanto no le quita ni una décima de contraste al texto (que en esta época es todo el componente: aquí el distintivo no tiene fondo, es tinta y corchetes). El color del cerco es el de lo que se estampa: tinta, rúbrica o corrector. Entrada: 900 ms (2,25 × los 400 ms de la imprenta). ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="3"] .c-distintivo{ --vd-cera: rgba(255, 214, 158, .16); /* prensa: la sombra del cuño */ transition: color var(--e-vel) var(--e-curva), border-color var(--e-vel) var(--e-curva), box-shadow calc(var(--e-vel) * 1.75) var(--e-curva); } html[data-epoca="3"] .c-distintivo--acento{ --vd-cera: rgba(168, 50, 30, .34); } html[data-epoca="3"] .c-distintivo--ok{ --vd-cera: rgba(27, 83, 52, .30); } html[data-epoca="3"] .c-distintivo.is-nueva{ animation: vdist-3-lacre calc(var(--e-vel) * 2.25) linear 1 backwards; } /* `linear` a propósito: el reparto del tiempo lo hacen los fotogramas, como en el original de MATERIA, que va pintado a mano milisegundo a milisegundo. PRESUPUESTO DE ANCHO (medido a 390 px): el aplastamiento se cuenta con el eje Y, no con el X. El original de MATERIA abre el charco a 1,16 uniforme; aquí el distintivo más ancho de la época (138 px) se salía 21,7 px de un marco de 390 con sus 20 px de aire, así que la X se queda en 1,09 y la Y baja a .87 para conservar la deformación (ratio 1,25 contra 1,29 del original). Un `scale` cuenta para el desbordamiento AUNQUE la opacidad sea 0. */ @keyframes vdist-3-lacre{ 0% { opacity: 0; scale: 1.12 1.07; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 6% { opacity: 1; } 13% { scale: 1.09 .87; box-shadow: 0 3px 17px -2px var(--vd-cera); } /* APLASTA */ 24% { scale: .985 1.04; } /* rebota */ 34% { scale: 1.008 .992; } 44% { scale: 1; box-shadow: 0 2px 11px -3px var(--vd-cera); } /* asentado */ 100% { scale: 1; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } /* frío */ } /* ═══════════════════════════════════════════════════════════════════════════ 4 · HIERRO — EL TROQUEL GOLPEA Una etiqueta de latón no aparece: sale de una prensa. La chapa entra, recibe el golpe (se achata en un fotograma), rebota y deja de sonar. Seco y corto: 360 ms, 1,5 × los 240 ms de la máquina. Y como la máquina está debajo de la bombilla, el golpe ENCIENDE: la etiqueta viva pega un fogonazo de filamento que se apaga hasta el resplandor que la piel ya le da en reposo (el 100 % es su `drop-shadow` exacto, no uno mío). Hover = caldeo: entra en 240 ms, se va en 840 ms. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="4"] .c-distintivo{ transition: background var(--e-vel) var(--e-curva), border-color var(--e-vel) var(--e-curva), color var(--e-vel) var(--e-curva), filter calc(var(--e-vel) * 3.5) var(--e-curva); } /* El latón coge la luz de la lámpara; el cardenillo también, pero sin brillo. */ html[data-epoca="4"] .c-distintivo:hover{ filter: drop-shadow(0 0 8px rgba(255, 176, 112, .30)); transition: background var(--e-vel) var(--e-curva), border-color var(--e-vel) var(--e-curva), color var(--e-vel) var(--e-curva), filter var(--e-vel) var(--e-curva); } /* La viva ya tiene resplandor de reposo: el hover lo SUBE, no lo sustituye. */ html[data-epoca="4"] .c-distintivo--acento:hover{ filter: drop-shadow(0 0 13px rgba(255, 176, 112, .62)); } html[data-epoca="4"] .c-distintivo--ok:hover{ filter: drop-shadow(0 0 8px rgba(159, 194, 160, .26)); } html[data-epoca="4"] .c-distintivo.is-nueva{ animation: vdist-4-troquel calc(var(--e-vel) * 1.5) var(--e-curva) 1 backwards; } html[data-epoca="4"] .c-distintivo--acento.is-nueva{ animation: vdist-4-troquel calc(var(--e-vel) * 1.5) var(--e-curva) 1 backwards, vdist-4-filamento calc(var(--e-vel) * 3.5) var(--e-curva) 1 backwards; } @keyframes vdist-4-troquel{ 0% { opacity: 0; translate: 0 -4px; scale: 1; } 7% { opacity: 1; } 22% { translate: 0 1px; scale: 1.04 .88; } /* el golpe: la chapa se achata */ 42% { translate: 0 0; scale: .99 1.03; } /* rebota una vez */ 64% { scale: 1.004 .994; } 100% { translate: 0 0; scale: 1; } } @keyframes vdist-4-filamento{ 0% { filter: drop-shadow(0 0 0 rgba(255, 224, 190, 0)); } 12% { filter: drop-shadow(0 0 19px rgba(255, 224, 190, .85)); } 100% { filter: drop-shadow(0 0 9px rgba(255, 176, 112, .55)); } } /* ═══════════════════════════════════════════════════════════════════════════ 5 · CABINA — EL PILOTO SE ENCIENDE Aquí no se mueve nada: sube la luz. 130 ms, seco y preciso, y el orden importa — primero prende el NÚCLEO (el punto de 5 px que la piel ya pone en el `::before`) y la cápsula aparece con él. El único exceso permitido es el pinchazo del piloto, que sobrepasa un instante y se clava: es lo que hace un led de verdad al recibir corriente. Sin hover: en una sala de mando los indicadores no responden al ratón. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="5"] .c-distintivo{ transition: background var(--e-vel) var(--e-curva), border-color var(--e-vel) var(--e-curva), color var(--e-vel) var(--e-curva), box-shadow var(--e-vel) var(--e-curva); } html[data-epoca="5"] .c-distintivo::before{ transition: background var(--e-vel) var(--e-curva), box-shadow var(--e-vel) var(--e-curva); } html[data-epoca="5"] .c-distintivo.is-nueva{ animation: vdist-5-corriente var(--e-vel) var(--e-curva) 1 backwards; } html[data-epoca="5"] .c-distintivo.is-nueva::before{ animation: vdist-5-piloto calc(var(--e-vel) * 2) var(--e-curva) 1 backwards; } /* La viva enciende con halo; el 100 % es el que declara la piel. */ html[data-epoca="5"] .c-distintivo--acento.is-nueva::before{ animation: vdist-5-piloto calc(var(--e-vel) * 2) var(--e-curva) 1 backwards, vdist-5-nucleo calc(var(--e-vel) * 2) var(--e-curva) 1 backwards; } @keyframes vdist-5-corriente{ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes vdist-5-piloto{ 0% { opacity: .25; scale: .5; } 55% { opacity: 1; scale: 1.45; } /* el pinchazo */ 100% { opacity: 1; scale: 1; } } @keyframes vdist-5-nucleo{ 0% { box-shadow: 0 0 0 rgba(255, 106, 31, 0); } 55% { box-shadow: 0 0 15px rgba(255, 192, 138, .95); } 100% { box-shadow: 0 0 8px rgba(255, 106, 31, .80); } } /* ═══════════════════════════════════════════════════════════════════════════ 6 · MOVIMIENTO REDUCIDO — inerte base.css ya deja las duraciones en .001 ms; aquí se apaga del todo para que no quede ni el fotograma inicial. Como el 100 % de cada animación ES el reposo de la piel, apagar no pierde ni un dato: el distintivo aparece ya estampado, asentado o encendido. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ html[data-epoca="1"] .c-distintivo, html[data-epoca="2"] .c-distintivo, html[data-epoca="3"] .c-distintivo, html[data-epoca="4"] .c-distintivo, html[data-epoca="5"] .c-distintivo, html[data-epoca="1"] .c-distintivo.is-nueva, html[data-epoca="2"] .c-distintivo.is-nueva, html[data-epoca="3"] .c-distintivo.is-nueva, html[data-epoca="4"] .c-distintivo.is-nueva, html[data-epoca="5"] .c-distintivo.is-nueva, html[data-epoca="5"] .c-distintivo.is-nueva::before{ animation: none !important; transition: none !important; } html[data-epoca="1"] .c-distintivo:hover, html[data-epoca="4"] .c-distintivo:hover, html[data-epoca="4"] .c-distintivo--acento:hover, html[data-epoca="4"] .c-distintivo--ok:hover{ filter: none; } html[data-epoca="4"] .c-distintivo--acento:hover{ filter: drop-shadow(0 0 9px rgba(255, 176, 112, .55)); /* el de reposo */ } }