/* Ensayos — dos cintas sin fin en sentido opuesto (animations/topics.js): avanzan solas, el scroll las arrastra
   y su velocidad las inclina. Una recta en crema; la otra cursiva en hueso, que se enciende con la luz del cursor.
   Ambas con relleno sólido: cada tema se lee entero al cruzar la pantalla. */
.topics {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 14px);
  padding: clamp(80px, 14vh, 160px) 0;
  overflow: hidden;
}
.topics__label { padding: 0 var(--gutter) clamp(24px, 4vw, 48px); }

.topics__row {
  padding-block: 0.08em;                    /* tildes de mayúscula y descendentes dentro de la máscara */
  font: var(--w-medium) clamp(52px, 8vw, 132px) / 1.05 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--cream);
  /* Las palabras entran y salen de la tela desvaneciéndose, no se cortan en seco contra el borde */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.topics__belt,
.topics__set {
  display: flex;
  gap: 0.5em;
  width: max-content;
}
.js .topics__belt { will-change: transform; }

.topics__set li {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
/* Separador dibujado (no el carácter ·), a media altura de la x */
.topics__set li::after {
  content: "";
  flex: none;
  width: 0.13em;
  height: 0.13em;
  margin-top: 0.12em;
  border-radius: 50%;
  background: var(--blood);
}

/* Segunda cinta: cursiva, más ligera y en hueso; su separador es un aro (eco del contorno) */
.topics__row--alt {
  font-style: italic;
  font-weight: var(--w-regular);
  color: var(--bone);
}
.topics__row--alt .topics__set li::after {
  width: 0.15em;
  height: 0.15em;
  background: none;
  box-shadow: inset 0 0 0 0.025em var(--bone);
}
/* Con la luz del cursor (ui/lit.js): sobre el hueso, la tinta se calienta y brilla donde cae la luz.
   Sin puntero fino --li no existe y queda el hueso liso */
.topics__row--alt [data-lit="text"] {
  background-image:
    radial-gradient(
      calc(200px + 140px * var(--li, 0)) circle at var(--lx, 50%) var(--ly, 50%),
      rgb(255 238 224 / calc(0.95 * var(--li, 0))),
      rgb(var(--ember) / calc(0.55 * var(--li, 0))) 45%,
      transparent 75%
    ),
    linear-gradient(var(--bone), var(--bone));
}

/* Sin animación (reduced motion o sin JS): todos los temas a la vista, en líneas que fluyen */
.no-js .topics__row,
.topics.is-static .topics__row {
  padding-inline: var(--gutter);
  white-space: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.no-js .topics__belt,
.no-js .topics__set,
.topics.is-static .topics__belt,
.topics.is-static .topics__set {
  flex-wrap: wrap;
  width: auto;
}
.no-js .topics__set li:last-child::after,
.topics.is-static .topics__set li:last-child::after { display: none; }