/* Relleno · Moxen — los estilos del efecto y de la demostración. */
:root {
  --rl-fondo: #0a0a0a;
  --rl-texto: #f4f4f4;
  --rl-suave: rgba(255, 255, 255, .5);
  --rl-linea: rgba(255, 255, 255, .12);
  /* el papel (la palabra sin leer) y la tinta (la palabra leída) */
  --rl-papel: rgba(244, 244, 244, .17);
  --rl-tinta: #f4f4f4;
  --rl-borde: 1.1em;          /* lo ancho del borde suave de la tinta */
  --rl-sesgo: 100deg;         /* el frente de tinta va algo inclinado, como si corriera */
  /* el peso: el del párrafo, el golpe de la palabra clave y donde se asienta */
  --rl-peso: 380;
  --rl-pico: 860;
  --rl-asiento: 640;
  --rl-letra: clamp(1.55rem, 4vw, 3.35rem);
}
/* El avance de cada palabra: un número que se puede animar (lo usa la
   variante solo CSS; con JS se escribe directamente) */
@property --rl-f { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --rl-raya { syntax: "<number>"; inherits: true; initial-value: 0; }


/* ── el efecto ─────────────────────────────────────────────────────── */
/* Cada palabra es un recorte del texto (background-clip: text) sobre un
   degradado de tinta a papel. --rl-f (0 a 1) corre el frente: a 0 el
   frente está antes de la palabra (todo papel) y a 1 después (toda
   tinta). El borde mide lo mismo en todas (--rl-borde, en em), así la
   tinta avanza igual en una palabra corta que en una larga. */
.rl-palabra {
  background-image: linear-gradient(var(--rl-sesgo),
    var(--rl-tinta) calc(var(--rl-f) * (100% + var(--rl-borde)) - var(--rl-borde)),
    var(--rl-papel) calc(var(--rl-f) * (100% + var(--rl-borde))));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* un pelo de aire a los lados para que el recorte no corte los remates */
  padding: 0 .04em; margin: 0 -.04em;
}

/* La palabra clave: el JS le sube el peso al pasar la tinta (--rl-w) y
   le cierra el espaciado a la vez (--rl-ls) para que la línea no se
   empuje; después se asienta. Debajo, un filete que se traza. */
.rl-clave {
  position: relative; font-style: normal;
  font-weight: var(--rl-w, var(--rl-peso)); letter-spacing: var(--rl-ls, 0em);
}
.rl-clave::after {
  content: ""; position: absolute; left: .04em; right: .04em; bottom: .13em; height: max(1px, .045em);
  background: var(--rl-tinta); transform-origin: 0 50%; transform: scaleX(var(--rl-raya, 0));
}

/* ── la variante solo CSS ──────────────────────────────────────────── */
/* Opcional: con data-relleno="css" el avance no lo escribe el JS (que
   solo parte el párrafo y le da a cada palabra su tramo, --rl-de y
   --rl-a en %). Las palabras van fijas (sticky), así que la línea de
   tiempo no es la de cada palabra sino la de su sección: view-timeline. */
@supports (animation-timeline: view()) {
  [data-relleno="css"] .rl-tramo { view-timeline: --rl-tramo block; }
  [data-relleno="css"] .rl-palabra {
    animation: rl-tinta linear both;
    animation-timeline: --rl-tramo;
    animation-range: contain calc(var(--rl-de) * 1%) contain calc(var(--rl-a) * 1%);
  }
  [data-relleno="css"] .rl-clave {
    animation: rl-tinta linear both, rl-negrita linear both;
    animation-timeline: --rl-tramo, --rl-tramo;
    animation-range: contain calc(var(--rl-de) * 1%) contain calc(var(--rl-a) * 1%),
      contain calc(var(--rl-a) * 1%) contain calc(var(--rl-a) * 1% + 12%);
  }
}
@keyframes rl-tinta { from { --rl-f: 0; } to { --rl-f: 1; } }
@keyframes rl-negrita {
  0% { font-weight: var(--rl-peso); --rl-raya: 0; }
  35% { font-weight: var(--rl-pico); letter-spacing: var(--rl-ls-pico, 0em); --rl-raya: 1; }
  100% { font-weight: var(--rl-asiento); letter-spacing: var(--rl-ls-asiento, 0em); --rl-raya: 1; }
}

/* ── la demostración ───────────────────────────────────────────────── */
/* el contenedor tiene su propio scroll: la rueda la lleva un muelle */
[data-relleno] {
  height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: none; outline: none;
}
[data-relleno]::-webkit-scrollbar { display: none; }
.rl-tramo { position: relative; height: 270vh; }
.rl-escenario {
  position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 7vw; overflow: hidden;
}
.rl-caja { width: min(1060px, 100%); }

.rl-cabeza {
  display: flex; align-items: center; gap: 18px; margin-bottom: clamp(26px, 4.5vh, 44px);
  font-size: .76rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rl-suave);
}
.rl-cabeza p { margin: 0; }
/* una línea entre el título y el avance, que se llena con la lectura */
.rl-cabeza::after {
  content: ""; order: 1; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--rl-texto) calc(var(--rl-leido, 0) * 100%), var(--rl-linea) 0);
}
.rl-avance { order: 2; min-width: 4.2em; text-align: right; font-variant-numeric: tabular-nums; }

.rl-parrafo {
  margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: var(--rl-letra);
  font-weight: var(--rl-peso); font-optical-sizing: auto; line-height: 1.17; letter-spacing: -.012em;
  text-wrap: pretty; color: var(--rl-tinta);
}

.rl-firma {
  display: flex; align-items: center; gap: 14px; margin-top: clamp(26px, 4.5vh, 44px);
  font-size: .82rem; font-weight: 500; color: var(--rl-suave);
  opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .8s cubic-bezier(.22, 1, .36, 1);
}
.rl-firma i { width: 40px; height: 1px; background: currentColor; }
.rl-firma span + span::before { content: "·"; margin-right: 14px; }
.is-leido .rl-firma { opacity: 1; transform: none; }

/* la pista: se va en cuanto empieza la lectura */
.rl-pista {
  position: absolute; left: 0; right: 0; bottom: 5vh; margin: 0; text-align: center;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rl-suave);
  transition: opacity .4s;
}
.rl-pista::after {
  content: ""; display: block; width: 1px; height: 40px; margin: 12px auto 0; background: currentColor;
  transform-origin: 50% 0; animation: rl-hilo 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes rl-hilo {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
.is-leyendo .rl-pista { opacity: 0; }

/* el foco del teclado: se marca la línea del avance */
[data-relleno]:focus-visible .rl-cabeza { color: var(--rl-texto); }
[data-relleno]:focus-visible .rl-cabeza::after { height: 2px; }

@media (max-width: 640px) {
  .rl-escenario { padding: 0 22px; }
  .rl-parrafo { line-height: 1.2; }
  .rl-cabeza { margin-bottom: 22px; }
}

/* quieta: todo en tinta, la clave en negrita, sin transiciones */
@media (prefers-reduced-motion: reduce) {
  .rl-palabra { --rl-f: 1; animation: none !important; }
  .rl-clave { --rl-w: var(--rl-asiento); --rl-raya: 1; animation: none !important; }
  .rl-firma { opacity: 1; transform: none; transition: none; }
  .rl-pista { display: none; }
}