/*
  Bloque "Texto en marquesina" (spora/text-marquee) — estilos front + editor.

  Misma marquesina que spora/text-marquee-2 (deriva constante de derecha a
  izquierda aplicada por view.js con transform, sin @keyframes) y mismo sticky
  (el texto se queda centrado y acompaña el scroll), pero con el FONDO DENTRO DEL
  BLOQUE: un degradado del color elegido que sube desde el fondo de la pantalla
  mientras se hace scroll, hasta cubrirla entera. No toca el <body> (eso es lo que
  hace text-marquee-2, la versión anterior, y es justo lo que el cliente pidió
  quitar el 2026-10-02).

  Variables:
    --spora-tm-color   color con el que se pinta el fondo          (render.php)
    --spora-tm-soft    alto del difuminado, % de la pantalla (sin unidad)  (render.php)
    --spora-tm-speed   velocidad base (px/seg) — la lee view.js     (render.php)
    --spora-tm-size    tamaño de fuente base de cada texto          (render.php)
    --spora-tm-gap     separación entre textos                      (render.php)
    --spora-tm-edge    borde del color, px desde el top de la capa  (view.js)
    --spora-tm-band    alto del difuminado en px                    (view.js)
    --spora-tm-reach   cuánto sobresale la capa por ENCIMA del bloque (view.js)
    --spora-tm-shift   posición vertical del texto en el sticky     (view.js)
*/

/*
  El bloque es MÁS ALTO que la pantalla para crear el recorrido de scroll: mientras
  entra, el color sube por la pantalla; al quedar pinado ya la cubre entera.
  SIN overflow:hidden: rompería el position:sticky del texto (el recorte
  horizontal de la marquesina lo hace .viewport).
*/
.spora-text-marquee {
	position: relative;
	min-height: 110vh;
	/* Fondo base blanco: el bloque "empieza en blanco". */
	background-color: var(--wp--preset--color--spora-white, #ffffff);
}

/*
  Capa de color. El borde lo calcula view.js en coordenadas de PANTALLA (sube del
  fondo del viewport hasta arriba) y lo publica en px relativos a la capa. Por
  encima del borde − banda, transparente; en la banda, difuminado; por debajo,
  color sólido hasta el final del bloque (por eso al bajar se mantiene pintada
  toda la pantalla).

  SOBRESALE POR ARRIBA (--spora-tm-reach). 2026-10-02: con la capa recortada al
  bloque (inset:0), cuando el amarillo llega con el texto el difuminado quedaba
  por encima del top del bloque y se cortaba: se veía una LÍNEA RECTA entre la
  sección anterior y el amarillo. El cliente quiere siempre el efecto difuminado,
  así que la capa sube sobre la sección anterior (como mucho ABOVE_MAX de
  view.js; si el difuminado no cabe, se acorta).
  mix-blend-mode: multiply para no TAPAR esa sección: sobre blanco da el amarillo
  y el texto oscuro sigue oscuro y legible (en imágenes, un tinte amarillo suave).
  Requiere que ningún contenedor padre tenga overflow:hidden (el bloque tampoco:
  rompería el sticky).

  Sin JS (fallback 99999px) no se pinta nada. Sin transition: va ligado al scroll
  (Lenis ya lo suaviza y una transición aquí se notaría como retraso).
*/
.spora-text-marquee__bg {
	position: absolute;
	top: calc(-1 * var(--spora-tm-reach, 0px));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: multiply;
	background-image: linear-gradient(
		to bottom,
		transparent calc(var(--spora-tm-edge, 99999px) - var(--spora-tm-band, 0px)),
		var(--spora-tm-color, #ffeb36) var(--spora-tm-edge, 99999px)
	);
}

.spora-text-marquee__sticky {
	/*
	  Ventana pegajosa de 100vh. La POSICIÓN VERTICAL del texto dentro de ella la
	  calcula view.js (--spora-tm-shift), igual que en text-marquee-2.
	*/
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 1;
}

.spora-text-marquee__viewport {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	/* Ligado a la posición de scroll: sin transition. */
	transform: translateY(var(--spora-tm-shift, 0px));
	will-change: transform;
}

/* Pista que se desplaza. view.js clona el group hasta cubrir la pantalla. */
.spora-text-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--spora-tm-gap, 80px);
	width: max-content;
	will-change: transform;
}

.spora-text-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--spora-tm-gap, 80px);
}

.spora-text-marquee__item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 450px;
	white-space: nowrap;
	/*
	  Estado NORMAL: Geist (sans) fina. El cambio a STK itálica es OPT-IN por texto
	  con la clase global .hover-stk-italic (ver style.css del tema).
	*/
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-style: normal;
	/*
	  Permite que el navegador SINTETICE tanto negrita (weight) como itálica (style)
	  cuando la fuente no trae esas caras. Con solo "style" la negrita NO se aplicaba
	  en fuentes de un solo peso (p. ej. Geist cayendo al sistema).
	*/
	font-synthesis: weight style;
	font-size: var(--spora-tm-size, 80px);
	/*
	  line-height 1.2 para que el texto grande NO se recorte (con el viewport en
	  overflow:hidden, un line-height 0 colapsaba la caja y cortaba las letras). Los
	  textos multilínea (con <br>) controlan su propio interlineado envolviéndose en
	  display:inline-block. Ver textos por defecto.
	*/
	line-height: 1.2;
	color: var(--wp--preset--color--spora-dark-green, #001a17);
}

/* El HTML incrustado en cada texto manda: no forzamos margin en sus hijos. */
.spora-text-marquee__item > * {
	margin: 0;
}

/* Accesibilidad: sin animación la marquesina queda quieta; el fondo se sigue pintando. */
@media (prefers-reduced-motion: reduce) {
	.spora-text-marquee__track {
		will-change: auto;
	}
}

/* --- Vista en el editor -------------------------------------------------- */
.spora-text-marquee-editor {
	min-height: 40px;
}
/*
  En la SSR del editor no hay view.js: sin sticky ni recorrido de 110vh (sería una
  pantalla y pico de bloque) y con el fondo ya pintado, para ver el resultado final.
*/
.spora-text-marquee-editor .spora-text-marquee {
	min-height: 0;
	padding: 80px 0;
	--spora-tm-edge: 0px;
	--spora-tm-band: 0px;
	--spora-tm-reach: 0px;
}
.spora-text-marquee-editor .spora-text-marquee__sticky {
	position: relative;
	height: auto;
}