/**
 * Scroll-driven Text Reveal — opacitetsräkning per bokstav/ord.
 *
 * Klasser:
 *   .sr-text-reveal       — Bokstav för bokstav
 *   .sr-text-reveal-word  — Ord för ord
 *
 * JS sätter följande CSS-variabler på containern:
 *   --sr-start-opacity   (0.05–0.5, default 0.12)
 *   --sr-softness        (1–15, default 8)
 *   --sr-blur            (0–2px, default 0.6px — bokstaven kommer i fokus)
 *   --sr-shift           (0–12px, default 4px — bokstaven höjer sig)
 *   --sr-reveal-index    (0..total, uppdateras vid scroll)
 *   --sr-total           (totala antalet bokstäver/ord)
 *
 * Och på varje span:
 *   --sr-i               (bokstavens/ordets index)
 */

/* Container — minimal styling, ärver typografi från elementet */
.sr-text-reveal,
.sr-text-reveal-word {
	overflow-wrap: break-word;
	/* Förbättrad rendering på containern — appliceras automatiskt på spans */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Ord-wrapper i bokstav-läget — håller ihop alla bokstäver i ett ord
   så browsen aldrig radbryter mitt i ord. Radbrytning sker bara mellan
   ord-wrappers (vid de vanliga mellanrummen). */
.sr-text-reveal__word {
	display: inline-block;
	white-space: nowrap;
}

/* Varje uppdelat tecken/ord */
.sr-text-reveal__item {
	display: inline-block;

	/* Räkna ut hur långt fram vi kommit relativt detta items index */
	--_sr-distance: calc(var(--sr-reveal-index, 0) - var(--sr-i, 0));
	--_sr-clamped: clamp(0, calc(var(--_sr-distance) / var(--sr-softness, 8)), 1);
	/* Inverterat värde för "från-tillstånd" (1 när helt dimmad, 0 när helt synlig) */
	--_sr-from: calc(1 - var(--_sr-clamped));

	/* Opacitet — tonar upp till 1 från start-opacity */
	opacity: calc(
		var(--sr-start-opacity, 0.12) +
		(1 - var(--sr-start-opacity, 0.12)) * var(--_sr-clamped)
	);

	/* Blur — bokstaven kommer "i fokus" snarare än bara fadar in.
	   Detta löser också det "kantiga" intrycket från opacity × antialiasing. */
	filter: blur(calc(var(--sr-blur, 0.6px) * var(--_sr-from)));

	/* Y-shift — bokstaven höjer sig mjukt på plats */
	transform: translateY(calc(var(--sr-shift, 4px) * var(--_sr-from)));

	/* Mjuk transition — jämnar ut mikro-jitter från rAF/scroll */
	transition:
		opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);

	/* Bevara lutning från em — italic ska smitta in i spanen */
	font-style: inherit;
	color: inherit;

	/* GPU-kompositering för jämnare rendering */
	will-change: opacity, filter, transform;
	backface-visibility: hidden;
}

/* Mellanrum i letter-läge — synliga och bryter rader naturligt */
.sr-text-reveal__item--space {
	white-space: pre;
	/* Inget blur/shift på mellanrum — de märks ändå inte */
	filter: none;
	transform: none;
}

/* Accentfärgade bokstäver/ord (ursprungliga <em> i texten) */
.sr-text-reveal__item--accent {
	color: var(--sr-accent-color, #B85A3A);
	font-style: italic;
}

/* Reduced motion — visa allt direkt, inga effekter */
@media (prefers-reduced-motion: reduce) {
	.sr-text-reveal__item {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Print — visa allt fullt synligt */
@media print {
	.sr-text-reveal__item {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
}