/* Headline curtain — pantalla negra, titular que llega palabra por palabra y
   salida en columnas escalonadas.
   Todo lo que se puede cambiar sin tocar el JS está aquí arriba. */

.hc {
  --hc-bg: #000000;          /* la cortina */
  --hc-fg: #e5e5e5;          /* el titular (medido del video, no es blanco puro) */
  --hc-size: clamp(28px, 3.4vw, 64px);
  --hc-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter",
             "Segoe UI", Arial, sans-serif;
  --hc-weight: 500;
  --hc-tracking: -0.02em;

  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;          /* las columnas se van hacia arriba, fuera de aquí */
}

/* Cada columna es absoluta y se solapa 1 px con la siguiente: con flex y dpr
   fraccionario se ve una costura clara entre columna y columna. */
.hc__col {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--hc-bg);
  will-change: transform;
}

.hc__line {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 24px;
}

.hc__text {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--hc-fg);
  font-family: var(--hc-font);
  font-size: var(--hc-size);
  font-weight: var(--hc-weight);
  line-height: 1.1;
  letter-spacing: var(--hc-tracking);
  opacity: 0;                /* la opacidad de la línea entera, la sube el JS */
  will-change: opacity;
}

/* Una palabra. El espacio entre ellas es un espacio de verdad en el HTML,
   así que el titular sigue partiendo líneas como cualquier texto. */
.hc__w {
  display: inline-block;
  opacity: 0;
  will-change: opacity;
}

/* Estado final: ya no captura clics mientras termina de irse. */
.hc--done { pointer-events: none; }

/* Bloqueo de scroll mientras la cortina está montada. */
.hc-lock,
.hc-lock body {
  overflow: hidden !important;
}