/* Motion de la web de NightLust: un solo sistema para todas las páginas (portada, normas, novedades, sistemas y las
del portal). Se carga después de estilo.css:
Reglas: solo transform y opacity (más clip-path en elementos pequeños y de una vez); curvas y duraciones de los
tokens de abajo; el hover que mueve algo, solo con ratón (hover: hover y pointer: fine); todo lo que se desplaza,
dentro de prefers-reduced-motion: no-preference (con movimiento reducido quedan los cambios de color y opacidad).
En reposo la página se ve entera: nada empieza escondido esperando a un observer; los revelados al hacer scroll solo
desplazan unos píxeles, sin ocultar.
Lo que da por clase, sin JS:
- .boton (pulsar y barrido del relleno en .boton-linea), .barra (menú y botón Entrar);
- .ficha, .nota, .destacada: el «tirón» de señal y el zoom de la imagen al pasar el ratón;
- .mo-revela: el revelado al entrar en pantalla (ya va en cabeceras de módulo, tarjetas y rejillas);
- .mo-entrada con --mo-i (0, 1, 2…): la entrada escalonada al cargar, como el texto de la portada;
- el cambio de página con View Transitions (Chromium; en otros navegadores, el cambio de siempre). */
:root{
--mo-ease-out:cubic-bezier(0.23, 1, 0.32, 1); /* entradas, salidas y respuesta a la mano */
--mo-ease-in-out:cubic-bezier(0.77, 0, 0.175, 1); /* lo que se mueve dentro de la pantalla */
--mo-pulsar:140ms; /* pulsar un botón */
--mo-hover:200ms; /* hover de botones, menú y enlaces */
--mo-imagen:700ms; /* zoom lento de la imagen de una tarjeta */
--mo-entrada:720ms; /* entrada de la portada (es la presentación, puede ir más lenta que la interfaz) */
--mo-paso:70ms; /* escalonado entre elementos que entran juntos */
--mo-recorrido:28px; /* lo que suben las entradas y los revelados */
}
/* ---- Color y opacidad: también con movimiento reducido ------------------------------------------------------ */
.cabecera .marca{transition:opacity var(--mo-hover) ease}
.barra li a,.pie ul a{transition:color var(--mo-hover) ease}
.barra .barra-entrar{transition:background-color var(--mo-hover) ease,color var(--mo-hover) ease}
.boton{transition:background-color var(--mo-hover) ease,color var(--mo-hover) ease}
#estado-detalle{font-variant-numeric:tabular-nums}
/* Titular roto al cargar (las dos copias de color del «desde dentro»; pagina.js pone .al-cargar 1,8 s) */
.roto::before,.roto::after{content:attr(data-t);position:absolute;inset:0;opacity:0;pointer-events:none}
.roto::before{color:var(--rojo);transform:translateX(-.03em)}
.roto::after{color:var(--cian);transform:translateX(.03em)}
@keyframes roto{0%{opacity:1;clip-path:inset(10% 0 64% 0)}25%{clip-path:inset(62% 0 8% 0)}50%{clip-path:inset(34% 0 40% 0)}75%{clip-path:inset(0 0 82% 0)}100%{opacity:0}}
@keyframes tiron{0%{clip-path:inset(0 0 0 0);transform:translateX(0)}30%{clip-path:inset(18% 0 52% 0);transform:translateX(-6px)}60%{clip-path:inset(56% 0 12% 0);transform:translateX(5px)}100%{clip-path:inset(0 0 0 0);transform:none}}
@keyframes latido{50%{opacity:.15}}
@keyframes mo-sube{from{opacity:0;transform:translateY(var(--mo-recorrido))}}
@keyframes mo-arte{from{opacity:0;transform:scale(1.05) translateX(2%)}}
@keyframes mo-revela{from{transform:translateY(var(--mo-recorrido))}}
@keyframes mo-paralaje{to{transform:translateY(14%)}}
@keyframes mo-sale{to{opacity:0}}
@keyframes mo-entra{from{opacity:0;transform:translateY(12px)}}
/* ---- Movimiento: solo sin movimiento reducido ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.estado i{animation:latido 1.6s steps(2) infinite}
.al-cargar .roto::before,.al-cargar .roto::after{animation:roto .8s steps(1) 2}
/* Pulsar: el botón responde a la mano */
.boton,.barra .barra-entrar{transition:background-color var(--mo-hover) ease,color var(--mo-hover) ease,
transform var(--mo-pulsar) var(--mo-ease-out),background-size var(--mo-hover) var(--mo-ease-out),
clip-path var(--mo-hover) var(--mo-ease-out)}
.boton:not(:disabled):active,.barra .barra-entrar:active{transform:scale(.97)}
/* El relleno del botón de línea entra barriendo desde el lado del corte contrario, y el estado del servidor da un
tirón al cambiar */
.boton-linea{background-image:linear-gradient(var(--c),var(--c));background-repeat:no-repeat;background-size:0% 100%}
.estado b.mo-cambia{animation:tiron .32s steps(2) 1}
/* Tarjetas: la imagen se acerca despacio */
.ficha-img img,.nota-img img,.destacada-marco img{transition:transform var(--mo-imagen) var(--mo-ease-out)}
/* Entrada de la portada: el arte aparece acercándose y el texto sube escalonado; el titular, línea a línea */
.portada:not(.portada-sub) .portada-arte img{animation:mo-arte 1100ms var(--mo-ease-out) both}
.portada-texto > .modulo,.portada-texto > .entrada,.portada-texto > .acciones,.portada-texto > .estado,
.titular > span,.mo-entrada{animation:mo-sube var(--mo-entrada) var(--mo-ease-out) both;
animation-delay:calc(var(--mo-i, 0) * var(--mo-paso))}
.portada-texto > .modulo{--mo-i:0}
.titular > span:nth-child(1){--mo-i:1}
.titular > span:nth-child(2){--mo-i:2}
.titular > span:nth-child(3){--mo-i:3}
.portada-texto > .entrada{--mo-i:4}
.portada-texto > .acciones{--mo-i:5}
.portada-texto > .estado{--mo-i:6}
/* Cambio de página: la cabecera se queda y el contenido entra (View Transitions entre documentos) */
@view-transition{navigation:auto}
.cabecera{view-transition-name:cabecera}
::view-transition-old(root){animation:mo-sale 160ms var(--mo-ease-out) both}
::view-transition-new(root){animation:mo-entra 280ms var(--mo-ease-out) both}
}
/* Hover que mueve algo: solo con ratón y sin movimiento reducido */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
/* Menú: una raya amarilla nace bajo el enlace; Entrar abre su esquina cortada */
.barra li a{position:relative}
.barra li a::after{content:"";position:absolute;left:var(--barra-pad,16px);right:var(--barra-pad,16px);bottom:7px;height:2px;background:var(--amarillo);
transform:scaleX(0);transform-origin:left;transition:transform var(--mo-hover) var(--mo-ease-out)}
.barra li a:hover::after{transform:scaleX(1)}
.barra .barra-entrar:hover{clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.boton-linea:not(:disabled):hover{background-color:transparent;background-size:100% 100%}
.ficha:hover .ficha-img img,.nota:hover .nota-img img,.destacada:hover .destacada-marco img{transform:scale(1.045)}
.ficha:hover .ficha-img,.nota:hover .nota-img,.destacada:hover .destacada-marco{animation:tiron .32s steps(2) 1}
}
/* Revelado al hacer scroll, ligado al propio scroll (sin JS ni observer): lo que entra en pantalla sube unos píxeles
hasta su sitio. Siempre visible: solo se desplaza. Sin soporte de animation-timeline, no pasa nada. */
@supports (animation-timeline: view()){
@media (prefers-reduced-motion:no-preference){
.mo-revela,.cab-modulo,.cab-amarilla,.noticias > *,.marco-negro > .ficha,.pasos > .paso,.normas-rejilla > *,
.dev-rejilla > *,.rejilla-novedades > *,.rejilla-sistemas > *,.leyenda{
animation:mo-revela linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
/* Paralaje del arte de la portada en escritorio: baja más despacio que la página */
@media (prefers-reduced-motion:no-preference) and (min-width:821px){
.portada:not(.portada-sub) .portada-arte{animation:mo-paralaje linear both;animation-timeline:scroll(root);
animation-range:0 100vh}
}
}