/* subrayado-marcador — un trazo de rotulador que se pinta solo bajo una palabra
   del titular cuando entra en pantalla. Portado del `pointer-highlight` /
   `text-highlight` de la cantera.

   Es de los detalles más rentables que hay: cuesta nada, dirige la mirada a la
   palabra que vende, y hace que el titular parezca escrito por alguien y no
   generado. */
[data-lui~="marcador"]{
  --lui-alto:.42em;         /* grosor del trazo, en relación al tamaño de letra */
  --lui-baja:.06em;         /* cuánto baja respecto a la línea base */
  --lui-tinta:var(--lui-acento,#c8a24a);
  --lui-opacidad:.32;
  position:relative;
  display:inline;
  /* El trazo va DETRÁS del texto, así que el texto no cambia de color y se
     sigue leyendo igual de bien sobre él. */
  background-image:linear-gradient(var(--lui-tinta),var(--lui-tinta));
  background-repeat:no-repeat;
  /* Empieza sin ancho; el JS pone la clase y el CSS lo lleva al 100%. */
  background-size:0% var(--lui-alto);
  background-position:0 calc(100% - var(--lui-baja));
  /* El trazo se dibuja de izquierda a derecha, como al pasar un rotulador. */
  transition:background-size .6s cubic-bezier(.22,1,.36,1);
}

/* La opacidad se aplica al gradiente mezclando con transparente: bajar la
   opacidad del elemento entero apagaría también el texto. */
[data-lui~="marcador"]{
  background-image:linear-gradient(
    color-mix(in srgb,var(--lui-tinta) calc(var(--lui-opacidad) * 100%),transparent),
    color-mix(in srgb,var(--lui-tinta) calc(var(--lui-opacidad) * 100%),transparent));
}

[data-lui~="marcador"].lui-pintado{background-size:100% var(--lui-alto)}

/* Variantes de trazo. */
[data-lui~="marcador"][data-lui-trazo="fino"]{--lui-alto:.14em;--lui-opacidad:.85;--lui-baja:0em}
[data-lui~="marcador"][data-lui-trazo="pleno"]{--lui-alto:1em;--lui-baja:-.08em;--lui-opacidad:.22}

@media (prefers-reduced-motion:reduce){
  /* Pintado desde el principio, sin animación: el subrayado es parte del
     mensaje, no un adorno. */
  [data-lui~="marcador"]{transition:none;background-size:100% var(--lui-alto)}
}