/* Mantto · motion común de las landings (v01, 16/10/2026)
   Contrato: data-m = entrada | revelar | cascada | escena | trazo | puntos | pulso | contar | luz,
   más data-m-orden, data-m-item, data-m-valor, data-m-dec, data-m-prefijo y data-m-sufijo.
   - Sin la clase m-js en <html>: todo visible, nada se toca.
   - Con prefers-reduced-motion: reduce: todo visible y quieto (estas reglas no aplican).
   - Sólo se animan opacity, translate, scale, transform y stroke-dashoffset (lo hace motion.js).
   - Se anima con las propiedades sueltas translate y scale: no pisan el transform propio de un elemento. */

:root{
  --m-llega:cubic-bezier(.16,1,.3,1);   /* entradas y llegadas: cola larga, final lento */
  --m-entra:cubic-bezier(.22,1,.36,1);  /* opacidad de entrada y presión */
  --m-viaja:cubic-bezier(.65,0,.25,1);  /* trazos que se dibujan */
  --m-sale:cubic-bezier(.3,0,.8,.15);   /* lo que se va */
}

/* 1. Estado previo: oculto hasta que motion.js lo hace entrar. Sólo en pantalla y sin movimiento reducido. */
@media screen and (prefers-reduced-motion:no-preference){
  .m-js :is([data-m="entrada"],[data-m="revelar"],[data-m="escena"],[data-m="luz"],[data-m="trazo"],[data-m="contar"]):not(.m-ok),
  .m-js :is([data-m="entrada"],[data-m="revelar"],[data-m="cascada"],[data-m="escena"]) [data-m-item]:not(.m-ok),
  .m-js [data-m="puntos"] circle:not(.m-ok),
  .m-js svg:has(> [data-m="luz"]:not(.m-ok)){opacity:0}  /* la luz se enciende con su <svg> entero (GPU) */

  /* Red de seguridad: si motion.js no llega a correr, todo aparece solo a los 2,4 s. */
  .m-js:not(.m-listo) :is([data-m="entrada"],[data-m="revelar"],[data-m="escena"],[data-m="luz"],[data-m="trazo"],[data-m="contar"]):not(.m-ok),
  .m-js:not(.m-listo) :is([data-m="entrada"],[data-m="revelar"],[data-m="cascada"],[data-m="escena"]) [data-m-item]:not(.m-ok),
  .m-js:not(.m-listo) [data-m="puntos"] circle:not(.m-ok),
  .m-js:not(.m-listo) svg:has(> [data-m="luz"]:not(.m-ok)){animation:m-rescate .8s cubic-bezier(.22,1,.36,1) 6s both}
}
@keyframes m-rescate{to{opacity:1}}

/* Puntos de una red: crecen desde su centro. */
.m-js [data-m="puntos"] circle{transform-box:fill-box;transform-origin:center}

/* 2. Apoyos que motion.js agrega y quita. Son elementos propios (m-eco, m-reserva, m-vivo):
   ningún selector de la página (".cifras span", ".leyenda span"…) los alcanza. */
.m-rel{position:relative}
m-eco{display:block;position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transform-origin:center}
svg .m-eco{opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
m-reserva{visibility:hidden}
m-vivo{display:block;position:absolute;left:0;top:0;right:0;white-space:nowrap;text-align:inherit;pointer-events:none}
/* si la cifra se pinta con un degradé recortado al texto (color transparente), la capa que cuenta lo hereda:
   sin esto el número era invisible mientras contaba y aparecía entero al final (18/10). */
m-vivo{background:inherit;-webkit-background-clip:inherit;background-clip:inherit;-webkit-text-fill-color:inherit}

/* 3. Hover: una capa propia (::before o ::after libre, según lo que encuentre motion.js) que sólo cambia de opacidad.
   El levante y la flecha los mueve motion.js con translate y scale. */
@media screen and (hover:hover) and (pointer:fine){
  .m-hov-b::before,.m-hov-a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .6s var(--m-llega)}
  .m-hov-b.m-sobre::before,.m-hov-a.m-sobre::after{opacity:1;transition-duration:.45s}

  /* botón claro: halo blanco difuso */
  .m-h-boton.m-hov-b::before,.m-h-boton.m-hov-a::after{
    box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 38px rgba(255,255,255,.26),0 14px 34px rgba(0,0,0,.28)}
  /* botón secundario y chip: vidrio que se enciende un punto */
  .m-h-sec.m-hov-b::before,.m-h-sec.m-hov-a::after{
    background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.10)}
  .m-h-chip.m-hov-b::before,.m-h-chip.m-hov-a::after{
    background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  /* tarjeta: luz cenital suave y filo de arriba */
  .m-h-tarjeta.m-hov-b::before,.m-h-tarjeta.m-hov-a::after{
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 58%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07),0 24px 50px rgba(0,0,0,.16)}
}
@media (prefers-reduced-motion:reduce){
  .m-hov-b::before,.m-hov-a::after{transition-duration:.01s!important}
}