, data-mv="aparecer" | "escalar" | "izquierda" | "derecha"
data-mv-orden="3" para la cadencia dentro de un grupo (empieza en 0)
data-mv-retraso="200" en ms, para un retraso fijo
-------------------------------------------------------------------------- */
html.mv-js [data-mv] {
opacity: 0;
transition:
opacity var(--mv-dur) var(--mv-ease),
transform var(--mv-dur) var(--mv-ease);
transition-delay: calc(var(--mv-orden, 0) * var(--mv-paso) + var(--mv-retraso, 0ms));
will-change: opacity, transform;
}
html.mv-js [data-mv="subir"] { transform: translateY(var(--mv-dist)); }
html.mv-js [data-mv="izquierda"] { transform: translateX(calc(var(--mv-dist) * -1)); }
html.mv-js [data-mv="derecha"] { transform: translateX(var(--mv-dist)); }
html.mv-js [data-mv="escalar"] { transform: scale(.96); }
html.mv-js [data-mv].mv-visto {
opacity: 1;
transform: none;
will-change: auto;
}
/* --------------------------------------------------------------------------
2 · Revelado por escena
La sección entra como un plano nuevo: fondo primero, después sus hijos en
cadencia. Los hijos directos no necesitan data-mv: los ordena el JS.
-------------------------------------------------------------------------- */
html.mv-js [data-mv-escena] {
--mv-dist: 40px;
clip-path: inset(6% 0 6% 0 round 0);
transition: clip-path calc(var(--mv-dur) * 1.4) var(--mv-ease);
}
html.mv-js [data-mv-escena].mv-visto {
clip-path: inset(0 0 0 0 round 0);
}
/* --------------------------------------------------------------------------
3 · Texto que se oculta y se revela
o
data-mv-figura="url(figura.webp)"; data-mv-sube="1" para brasas que suben.
Va como capa de fondo, decorativa (aria-hidden), nunca sobre el texto
corrido. Fuera de pantalla se pausa.
-------------------------------------------------------------------------- */
.mv-deriva {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.mv-deriva__p {
position: absolute;
top: -8%;
left: var(--x, 50%);
width: var(--t, 18px);
height: var(--t, 18px);
background: var(--figura, none) center / contain no-repeat;
font-size: var(--t, 18px);
line-height: 1;
opacity: 0;
animation: mv-caer var(--dur, 12s) linear infinite;
animation-delay: var(--delay, 0s);
animation-play-state: paused;
will-change: transform, opacity;
}
.mv-deriva[data-mv-sube="1"] .mv-deriva__p {
top: auto;
bottom: -8%;
animation-name: mv-subir;
}
.mv-deriva.mv-visto .mv-deriva__p { animation-play-state: running; }
@keyframes mv-caer {
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
8% { opacity: var(--op, .8); }
50% { transform: translate3d(var(--dx, 40px), 55vh, 0) rotate(160deg); }
92% { opacity: var(--op, .8); }
100% { transform: translate3d(calc(var(--dx, 40px) * -.6), 115vh, 0) rotate(340deg); opacity: 0; }
}
@keyframes mv-subir {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
10% { opacity: var(--op, .7); }
100% { transform: translate3d(var(--dx, 30px), -115vh, 0) scale(.4); opacity: 0; }
}
/* --------------------------------------------------------------------------
5 · Contador
1250+
El número final está en el HTML: sin JS se lee el valor real.
-------------------------------------------------------------------------- */
[data-mv-contador] { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
6 · Marquee
El JS duplica la pista para el loop. --mv-vel en px/s (data-mv-vel).
Con movimiento reducido no corre: queda una tira desplazable a mano.
-------------------------------------------------------------------------- */
.mv-marquee {
overflow: hidden;
display: flex;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mv-marquee > * {
display: flex;
flex: none;
gap: var(--mv-marquee-gap, 3rem);
padding-right: var(--mv-marquee-gap, 3rem);
margin: 0;
list-style: none;
animation: mv-marquee var(--mv-marquee-dur, 30s) linear infinite;
}
.mv-marquee:hover > *,
.mv-marquee:focus-within > * { animation-play-state: paused; }
@keyframes mv-marquee {
to { transform: translate3d(-100%, 0, 0); }
}
/* --------------------------------------------------------------------------
Movimiento reducido: todo quieto y completo. Es la promesa del presupuesto
de movimiento (animacion-escenica.md, sección 6) y no se negocia.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html.mv-js [data-mv],
html.mv-js [data-mv-escena],
html.mv-js .mv-tapa .mv-tapa__linea {
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
.mv-deriva { display: none; }
.mv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.mv-marquee > * { animation: none; }
.mv-marquee > * + * { display: none; } /* sin loop, no hace falta el duplicado */
}