/**
 * FPW Scroll Timeline - Frontend
 *
 * Nur die Timeline: kein Intro, keine Section-Rahmung. Ueberschriften und
 * Fliesstext drumherum baut man mit den normalen Core-Bloecken.
 *
 * Jeder Token laesst sich per Block-Inspector (Inline-Custom-Property) oder
 * global per CSS ueberschreiben. Ohne Angabe gilt der Wert aus dem Theme
 * (theme.json presets), zuletzt ein harter Fallback. Keine Web-Fonts, keine
 * externen Requests.
 */

.fpw-scroll-timeline {
	/* Basisfarben.
	   Verschachtelte Fallbacks, damit sowohl die Slugs aus dem Bauplan
	   (ink / body-on-white / background) als auch die real im fpw-block-theme
	   vorhandenen (primary / muted-on-light / light-background) greifen. */
	--fpw-tl-ink: var(--wp--preset--color--ink, var(--wp--preset--color--primary, #17181a));
	--fpw-tl-muted: var(--wp--preset--color--body-on-white, var(--wp--preset--color--muted-on-light, #57585a));
	--fpw-tl-bg: var(--wp--preset--color--background, var(--wp--preset--color--light-background, #faf9f6));

	/* Linie */
	--fpw-tl-track: var(--wp--preset--color--border, #e4e0d6);
	--fpw-tl-line-width: 2px;

	/* Geometrie (an mehreren Stellen gebraucht -> hier aufgeloest) */
	--fpw-tl-marker-size: 2rem;
	--fpw-tl-gutter: clamp(1rem, 2vw, 1.5rem);
	--fpw-tl-step-gap: clamp(2rem, 4.5vw, 3.25rem);

	/* Von JS gesetzt: 0..1 */
	--fpw-tl-progress: 0;

	box-sizing: border-box;
}

.fpw-scroll-timeline *,
.fpw-scroll-timeline *::before,
.fpw-scroll-timeline *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------- Track & Linie */

.fpw-scroll-timeline__track {
	position: relative;
	min-width: 0;
}

.fpw-scroll-timeline__line {
	position: absolute;
	top: calc(var(--fpw-tl-marker-size) / 2);
	bottom: 0;
	left: calc((var(--fpw-tl-marker-size) - var(--fpw-tl-line-width)) / 2);
	width: var(--fpw-tl-line-width);
	pointer-events: none;
}

/* Sobald JS gemessen hat, endet die Linie exakt auf der Mitte des letzten
   Markers (ohne JS laeuft sie bis zum Listenende - unauffaelliger Fallback). */
.fpw-scroll-timeline.is-ready .fpw-scroll-timeline__line {
	top: var(--fpw-tl-line-top, calc(var(--fpw-tl-marker-size) / 2));
	bottom: var(--fpw-tl-line-bottom, 0px);
}

.fpw-scroll-timeline__line-bg,
.fpw-scroll-timeline__line-progress {
	position: absolute;
	inset: 0;
	display: block;
}

.fpw-scroll-timeline__line-bg {
	background-color: var(--fpw-tl-track);
}

.fpw-scroll-timeline__line-progress {
	background-color: var(--fpw-tl-line-active, var(--fpw-tl-ink));
	transform: scaleY(var(--fpw-tl-progress));
	transform-origin: top center;
	will-change: transform;
	/* Bewusst keine transition: scroll-gekoppelte Werte wuerden gummieren. */
}

/* ---------------------------------------------------------------- Steps */

.fpw-scroll-timeline__steps {
	display: grid;
	row-gap: var(--fpw-tl-step-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fpw-scroll-timeline__step {
	display: grid;
	grid-template-columns: var(--fpw-tl-marker-size) minmax(0, 1fr);
	column-gap: var(--fpw-tl-gutter);
	align-items: start;
	margin: 0;
	padding: 0;
}

.fpw-scroll-timeline__step::marker {
	content: none;
}

/* ---------------------------------------------------------------- Marker */

.fpw-scroll-timeline__marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--fpw-tl-marker-size);
	height: var(--fpw-tl-marker-size);
	border: var(--fpw-tl-line-width) solid var(--fpw-tl-track);
	border-radius: var(--fpw-tl-marker-radius, 0);
	background-color: var(--fpw-tl-marker-idle-bg, var(--fpw-tl-bg));
	color: var(--fpw-tl-marker-idle-color, var(--fpw-tl-muted));
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.fpw-scroll-timeline__marker-label {
	font-family: var(--fpw-tl-marker-family, var(--wp--preset--font-family--sora, inherit));
	font-size: var(--fpw-tl-marker-font-size, 0.75rem);
	font-weight: var(--fpw-tl-marker-weight, 600);
	line-height: 1;
	letter-spacing: 0.04em;
}

.fpw-scroll-timeline__step.is-active .fpw-scroll-timeline__marker {
	border-color: var(--fpw-tl-marker-bg, var(--fpw-tl-ink));
	background-color: var(--fpw-tl-marker-bg, var(--fpw-tl-ink));
	color: var(--fpw-tl-marker-color, var(--fpw-tl-bg));
}

/* --------------------------------------------------------------- Inhalt */

.fpw-scroll-timeline__content {
	display: grid;
	gap: 0.5rem;
	padding-top: 0.125rem;
}

.fpw-scroll-timeline__step-title {
	margin: 0;
	color: var(--fpw-tl-title-color, var(--fpw-tl-ink));
	font-family: var(--fpw-tl-title-family, var(--wp--preset--font-family--sora, inherit));
	font-size: var(--fpw-tl-title-size, clamp(1.125rem, 1.8vw, 1.375rem));
	font-weight: var(--fpw-tl-title-weight, 600);
	line-height: var(--fpw-tl-title-leading, 1.25);
	letter-spacing: var(--fpw-tl-title-spacing, -0.005em);
	text-transform: var(--fpw-tl-title-transform, none);
}

.fpw-scroll-timeline__step-text {
	margin: 0;
	color: var(--fpw-tl-text-color, var(--fpw-tl-muted));
	font-family: var(--fpw-tl-text-family, inherit);
	font-size: var(--fpw-tl-text-size, clamp(0.9375rem, 1.2vw, 1.0625rem));
	font-weight: var(--fpw-tl-text-weight, 400);
	line-height: var(--fpw-tl-text-leading, 1.6);
	letter-spacing: var(--fpw-tl-text-spacing, normal);
}

/* Dezentes Reveal - nur wenn JS aktiv ist, damit ohne JS alles voll lesbar
   bleibt. Kein display/visibility-Toggle: Inhalt ist immer im Accessibility-
   Tree und immer druckbar. */
.fpw-scroll-timeline.is-ready .fpw-scroll-timeline__content {
	opacity: 0.72;
	transition: opacity 240ms ease, transform 240ms ease;
	transform: translateY(0.25rem);
}

.fpw-scroll-timeline.is-ready .fpw-scroll-timeline__step.is-active .fpw-scroll-timeline__content {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------- A11y/Motion */

@media (prefers-reduced-motion: reduce) {
	.fpw-scroll-timeline.is-ready .fpw-scroll-timeline__content,
	.fpw-scroll-timeline.is-ready .fpw-scroll-timeline__step.is-active .fpw-scroll-timeline__content {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fpw-scroll-timeline__marker,
	.fpw-scroll-timeline__line-progress {
		transition: none;
	}
}

@media print {
	.fpw-scroll-timeline .fpw-scroll-timeline__content {
		opacity: 1 !important;
		transform: none !important;
	}
}