/* Webbler Statement – big animated statement / banner / quote */

.wstm {
	--wstm-faded: 0.15;
	--wstm-blur: 6px;
	--wstm-photo: 56px;
	--wstm-block: center;

	display: flex;
	flex-direction: column;
	align-items: var(--wstm-block);
	text-align: center;
}

.wstm .wstm__label {
	margin: 0 0 var(--wel-sp-sub, 24px);
	color: #6bcbc2;
	font-family: "FS Meridian", serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
}

.wstm .wstm__mark {
	margin: 0 0 var(--wel-sp-sub, 24px);
	color: #6bcbc2;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 96px;
	line-height: 0.6;
	height: 0.45em;
}

.wstm .wstm__text {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	color: #333;
	font-family: "FS Meridian", serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 52px;
	quotes: none;
	background: none;
}

.wstm .wstm__text::before,
.wstm .wstm__text::after {
	content: none;
}

.wstm__hl {
	color: #6bcbc2;
}

/* Name below */
.wstm__by {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
	text-align: left;
}

.wstm .wstm__photo {
	display: block;
	flex-shrink: 0;
	height: var(--wstm-photo);
	margin: 0;
}

.wstm .wstm__photo--circle {
	width: var(--wstm-photo);
	border-radius: 50%;
	object-fit: cover;
}

.wstm .wstm__photo--logo {
	width: auto;
	max-width: calc(var(--wstm-photo) * 4);
	object-fit: contain;
}

.wstm__name {
	color: #333;
	font-family: "FS Meridian", serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
}

.wstm__role {
	color: #6bcbc2;
	font-family: "FS Meridian", serif;
	font-size: 16px;
	line-height: 22px;
}

.wstm .wit__buttons {
	justify-content: var(--wit-justify, center);
}

/* ---------- Animations (classes are only added by webbler-statement.js) ---------- */

.wstm .wstm__w,
.wstm .wstm__c {
	display: inline-block;
}

.wstm.is-split .wstm__text {
	white-space: normal;
}

/* Before the script has started (max. 3 s, see the small script in <head>) */
.wel-st .wstm--line[data-webbler-statement]:not(.is-ready) .wstm__text,
.wel-st .wstm--word[data-webbler-statement]:not(.is-ready) .wstm__text,
.wel-st .wstm--letter[data-webbler-statement]:not(.is-ready) .wstm__text,
.wel-st .wstm[data-webbler-statement]:not(.is-ready) .wstm__by,
.wel-st .wstm[data-webbler-statement]:not(.is-ready) .wit__buttons {
	opacity: 0;
}

/* Waiting to start */
.wstm.is-waiting .wstm__text,
.wstm.is-waiting .wstm__after {
	opacity: 0;
}

/* Word / letter: fade up, with an optional soft blur */
.wstm--word.is-split .wstm__w,
.wstm--letter.is-split .wstm__c {
	opacity: 0;
	transform: translate3d(0, 0.35em, 0);
	filter: blur(var(--wstm-blur, 0px));
	transition:
		opacity var(--wstm-d, 800ms) ease-out var(--wstm-delay, 0ms),
		transform var(--wstm-d, 800ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--wstm-delay, 0ms),
		filter var(--wstm-d, 800ms) ease-out var(--wstm-delay, 0ms);
}

.wstm--word.is-in .wstm__w,
.wstm--letter.is-in .wstm__c {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Line by line (flex column so the lines' margins never collapse = exact original spacing) */
.wstm--line.is-split .wstm__text {
	display: flex;
	flex-direction: column;
}

.wstm .wstm__line {
	display: block;
	overflow: hidden;
	padding: 0.1em 0.2em 0.2em;
	margin: -0.1em -0.2em -0.2em;
}

.wstm .wstm__li {
	display: block;
	opacity: 0;
	transform: translate3d(0, 80%, 0);
	filter: blur(var(--wstm-blur, 0px));
	transition:
		transform var(--wstm-d, 800ms) cubic-bezier(0.22, 0.61, 0.36, 1) var(--wstm-delay, 0ms),
		opacity var(--wstm-d, 800ms) ease-out var(--wstm-delay, 0ms),
		filter var(--wstm-d, 800ms) ease-out var(--wstm-delay, 0ms);
}

.wstm--line.is-in .wstm__li {
	opacity: 1;
	transform: none;
	filter: none;
}

/* Highlight on scroll */
.wstm--highlight.is-split .wstm__w {
	opacity: var(--wstm-o, var(--wstm-faded));
	transition: opacity 120ms linear;
}

/* Name and buttons follow the text */
.wstm .wstm__after {
	transition:
		opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--wstm-after-delay, 0ms),
		transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--wstm-after-delay, 0ms);
}

.wstm.is-waiting .wstm__after,
.wstm.is-split:not(.is-done) .wstm__after {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}

.wstm.is-done .wstm__after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wstm *,
	.wstm .wstm__li {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

@media print {
	.wstm * {
		opacity: 1 !important;
		transform: none !important;
	}
}