/*
  Bloque "Texto revelado al scroll" (spora/scroll-opacity-text) — estilos front + editor.

  El texto se trocea en palabras (.spora-sot__word). Cada palabra arranca en una
  opacidad baja (--so-min-opacity) y view.js la sube hasta 1 según el progreso de
  scroll (variable --so-reveal por palabra, 0..1). La opacidad final es:
      min + (1 - min) * reveal
  Como es función pura del scroll, al subir se vuelve a atenuar (reversible).

  Variables (las publica render.php en el wrapper):
    --so-font-family   stack tipográfico (STK Light por defecto, o Geist)
    --so-color         color del texto
    --so-weight        peso de fuente
    --so-size          tamaño de fuente
    --so-size-m        tamaño de fuente en móvil (<= 544px)
    --so-line-height   interlineado (multiplicador; 1.1 = 110%)
    --so-min-opacity   opacidad de las palabras aún "sin leer"
*/

.spora-scroll-opacity-text {
	/*
	  Contenedor flex para poder colocar el texto en horizontal (justify-content) y
	  en vertical (align-items). La altura mínima da recorrido al ajuste vertical.
	*/
	display: flex;
	justify-content: var(--so-justify, flex-start);
	align-items: var(--so-align, center);
	
}

/*
  El texto puede ser un heading (h1-h6), p o div. Como el tema estila los headings
  con !important (font-family, márgenes...), forzamos aquí también con !important
  para que la tipografía elegida en el bloque mande sea cual sea la etiqueta.
*/
.spora-scroll-opacity-text .spora-sot__text {
	margin: 0 !important;
	/* Se ajusta al contenido para que justify-content pueda posicionarlo. */
	max-width: 100%;
	text-align: var(--so-text-align, left);
	font-family: var(--so-font-family, "STK Bureau Serif Light", "STK Bureau Serif", Georgia, serif) !important;
	font-weight: var(--so-weight, 300) !important;
	font-size: var(--so-size, 40px) !important;
	line-height: var(--so-line-height, 1.1) !important;
	color: var(--so-color, #50c878) !important;
	/*
	  Permite al navegador SINTETIZAR negrita/itálica cuando la fuente no trae esa
	  cara (STK solo tiene Light 300 normal + Italic 400). Sin esto, un peso alto
	  sobre la STK no engordaría.
	*/
	font-synthesis: weight style;
}

/*
  Ocultar por dispositivo, con los límites de Astra: tablet 545-921px, móvil
  hasta 544px. Se excluye el lienzo del editor (.editor-styles-wrapper) para que
  el bloque siga visible y seleccionable en la previsualización de tablet/móvil.
*/
@media (min-width: 545px) and (max-width: 921px) {
	body:not(.editor-styles-wrapper) .spora-scroll-opacity-text.is-hidden-tablet {
		display: none;
	}
}

@media (max-width: 544px) {
	body:not(.editor-styles-wrapper) .spora-scroll-opacity-text.is-hidden-mobile {
		display: none;
	}
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 544px) {
	.spora-scroll-opacity-text .spora-sot__text {
		font-size: var(--so-size-m, 24px) !important;
	}
}

.spora-scroll-opacity-text .spora-sot__word {
	display: inline-block;
	/* Opacidad inicial; view.js la reescribe palabra a palabra con el scroll. */
	opacity: var(--so-min-opacity, 0.1);
	/* Suaviza el cambio cuando el scroll da pasos discretos. */
	transition: opacity 0.12s linear;
	will-change: opacity;
}

/*
  Accesibilidad: si el usuario pide menos movimiento, mostramos el texto legible
  al 100% y sin transiciones. view.js también evita animar en ese caso.
*/
@media (prefers-reduced-motion: reduce) {
	.spora-scroll-opacity-text .spora-sot__word {
		opacity: 1;
		transition: none;
	}
}

/* --- Vista en el editor -------------------------------------------------- */
.spora-scroll-opacity-text-editor {
	min-height: 40px;
}