/* ================================================================ CASA LUJURIA — LA MÁQUINA DE ESCRIBIR Va de último, después de entrada.css, porque esconde texto y nadie puede pisarlo después. Los selectores de acá TIENEN que ser los mismos de js/maquina.js. Tres cosas que hay que entender antes de tocar este archivo: 1) Lo único que esconde es `html.mq ... :not(.mq-listo)`. El sólo prende html.mq si hay IntersectionObserver y el sistema no pidió menos movimiento, y se lo quita solo si maquina.js no reporta en 2.6 segundos. Sin JS, sin la clase, y sin la clase esta hoja no esconde nada. 2) Se esconde con `visibility`, no con `display`, y las letras con `opacity`. El hueco del titular mide lo mismo antes, durante y después: cero salto de layout, que es de las pocas cosas que Google mide de verdad. 3) Las letras son , que viene en cursiva de fábrica. De ahí el font-style:inherit — si no, la mitad de los titulares salen torcidos. ================================================================ */ html.mq .cl-fr-frase:not(.mq-listo), html.mq .cl-ed-h:not(.mq-listo){ visibility:hidden } /* la letra suelta */ .mq-c{ position:relative; font-style:inherit; font-weight:inherit; opacity:0; } .mq-c.on{ opacity:1 } /* el cursor: vive en la última letra escrita y se mueve con ella. currentColor lo pinta blanco encima de la foto y azul tinta dentro del editorial sin tener que declarar nada dos veces. */ .mq-c.mq-cur::after{ content:""; position:absolute; right:-.1em; top:.1em; bottom:.06em; width:.07em; min-width:2px; background:currentColor; border-radius:1px; animation:mqCur .78s steps(1,end) infinite; pointer-events:none; } @keyframes mqCur{ 0%,49%{opacity:1} 50%,100%{opacity:0} } /* Al terminar de escribir, el cursor ya se quitó en JS. Esta regla es el cinturón: si por lo que sea quedó marcado, deja de parpadear. */ .mq-fin .mq-c.mq-cur::after{ animation:none; opacity:0 } /* Nadie se marea: si el sistema pide menos movimiento el ni siquiera prende html.mq, pero por si la clase llega por otro lado, acá se apaga todo y se ve el texto entero. */ @media (prefers-reduced-motion:reduce){ html.mq .cl-fr-frase:not(.mq-listo), html.mq .cl-ed-h:not(.mq-listo){ visibility:visible } .mq-c{ opacity:1 !important } .mq-c.mq-cur::after{ display:none } }