.tassel-landing-intro {
	background: var( --wp--preset--color--contrast, #000 );
	display: grid;
	grid-template-rows:
		var( --epoch-site-header-height, 80px )
		minmax( min-content, 1fr )
		var( --tassel-landing-line-height, 100px );
	min-height: var( --tassel-landing-height, 450px );
	margin-block: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.tassel-landing-intro.tassel-landing-intro.alignfull {
	max-width: none;
	margin-inline: calc( 50% - 50vw );
	width: 100vw;
}

.editor-styles-wrapper
	.tassel-landing-intro.tassel-landing-intro.is-width-full {
	margin-inline: calc( 50% - 50vw ) !important;
	max-width: none !important;
	width: 100vw !important;
}

.tassel-landing-intro.has-viewport-height {
	min-height: calc(
		100vh -
		var( --wp-admin--admin-bar--height, 0px ) -
		var( --epoch-page-main-offset, 0px )
	);
	min-height: calc(
		100dvh -
		var( --wp-admin--admin-bar--height, 0px ) -
		var( --epoch-page-main-offset, 0px )
	);
}

.tassel-landing-intro__media,
.tassel-landing-intro__overlay {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.tassel-landing-intro__media {
	object-fit: cover;
}

.tassel-landing-intro__overlay {
	background: var( --tassel-landing-overlay, #000 );
	opacity: var( --tassel-landing-overlay-opacity, 0.35 );
	z-index: 1;
}

.tassel-landing-intro__content {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var( --tassel-landing-content-gap, 30px );
	grid-row: 2;
	justify-content: var( --tassel-landing-content-alignment, center );
	max-width: none;
	padding-block: clamp( 24px, 4vh, 60px );
	padding-inline: 20px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.tassel-landing-headlines,
.tassel-landing-intro__headline {
	align-items: center;
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	height: auto;
	justify-items: center;
	margin: 0;
	max-width: var(
		--tassel-landing-headline-width,
		var( --wp--style--global--content-size, 1253px )
	);
	min-height: 120px;
	position: relative;
	width: 100%;
}

.tassel-landing-headlines > *,
.tassel-landing-intro__headline-pair {
	align-items: center;
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
	justify-content: center;
	margin: 0;
	min-width: 0;
	opacity: 0;
	transform: translateY( 120px );
	transition:
		opacity 0.55s ease,
		transform 0.55s ease;
	visibility: hidden;
	width: 100%;
}

.tassel-landing-headlines
	> .tassel-landing-headlines__item.tassel-landing-headlines__item {
	box-sizing: border-box;
	gap: 0;
	max-width: 100%;
	min-width: 0;
	padding-inline: 0;
}

.tassel-landing-headlines:not(.is-initialized) > :first-child {
	opacity: 1;
	transform: translateY( 0 );
	visibility: visible;
}

.tassel-landing-headlines .wp-block-heading,
.tassel-landing-headlines .wp-block-paragraph {
	color: var( --wp--preset--color--base, #fff );
	margin-block: 0;
	text-align: center;
}

.tassel-landing-headlines > *.is-active,
.tassel-landing-intro__headline-pair.is-active {
	opacity: 1;
	transform: translateY( 0 );
	visibility: visible;
}

.tassel-landing-headlines > *.is-leaving,
.tassel-landing-intro__headline-pair.is-leaving {
	opacity: 0;
	transform: translateY( -70px );
	visibility: visible;
}

.tassel-landing-headlines__lead,
.tassel-landing-headlines__display,
.tassel-landing-intro__lead,
.tassel-landing-intro__display {
	color: var( --wp--preset--color--base, #fff );
	font-family: var( --wp--preset--font-family--heading );
	letter-spacing: 0;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	text-align: center;
	width: 100%;
}

.tassel-landing-headlines__lead,
.tassel-landing-intro__lead {
	font-size: clamp(
		32px,
		12.5cqw,
		var( --wp--preset--font-size--h-2, 46.1px )
	);
	font-weight: 700;
	line-height: 1.15;
}

.tassel-landing-headlines__display,
.tassel-landing-intro__display {
	font-size: clamp(
		42px,
		16cqw,
		var( --wp--preset--font-size--display, 73.1px )
	);
	font-weight: 700;
	line-height: 0.84;
	text-transform: uppercase;
}

.tassel-landing-actions,
.tassel-landing-intro__buttons {
	align-items: center;
	display: flex;
	flex-direction: var( --tassel-landing-actions-direction, row );
	flex-wrap: wrap;
	gap: var( --tassel-landing-actions-gap, 24px );
	justify-content: center;
	margin-inline: auto;
	max-width: var(
		--tassel-landing-actions-width,
		var( --wp--style--global--content-size, 1253px )
	);
	width: 100%;
}

.tassel-landing-actions > .tassel-button,
.tassel-landing-actions > .block-editor-block-list__block,
.tassel-landing-actions
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout
	> .block-editor-block-list__block {
	margin-block: 0;
}

.tassel-landing-intro__buttons {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--gap, 20px );
	justify-content: center;
}

.tassel-landing-intro__playback {
	align-items: center;
	background: rgb( 0 0 0 / 60% );
	border: 1px solid rgb( 255 255 255 / 40% );
	border-radius: 50%;
	box-sizing: border-box;
	color: var( --wp--preset--color--base, #fff );
	cursor: pointer;
	display: flex;
	height: 50px;
	justify-content: center;
	left: var( --wp--preset--spacing--inner, 30px );
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	bottom: var( --wp--preset--spacing--inner, 30px );
	width: 50px;
	z-index: 3;
}

.tassel-landing-intro__playback::before {
	background: var( --wp--preset--color--primary-light, #7ba6de );
	bottom: -3px;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX( -50% );
	transition: height 0.25s ease;
	width: 54px;
	z-index: 0;
}

.tassel-landing-intro__playback:hover::before,
.tassel-landing-intro__playback:focus-visible::before {
	height: 54px;
}

.tassel-landing-intro__playback-icon {
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	position: relative;
	z-index: 1;
}

.tassel-landing-intro__playback.is-playing .tassel-landing-intro__playback-icon {
	background-image: url("../../assets/icon-pause.svg");
	background-size: 13px 14px;
	height: 14px;
	width: 13px;
}

.tassel-landing-intro__playback.is-paused {
	padding-left: 3px;
}

.tassel-landing-intro__playback.is-paused .tassel-landing-intro__playback-icon {
	background-image: url("../../assets/icon-play.svg");
	background-size: 17.0823px 20.437px;
	height: 22px;
	width: 18px;
}

.tassel-landing-intro__line {
	background: rgb( 255 255 255 / 40% );
	bottom: 0;
	height: var( --tassel-landing-line-height, 100px );
	left: 50%;
	position: absolute;
	z-index: 2;
	width: 1px;
}

@media ( max-width: 1024px ) {
	.tassel-landing-intro {
		min-height: var( --tassel-landing-height-tablet, 450px );
	}

	.tassel-landing-intro.has-viewport-height {
		min-height: calc(
			100vh -
			var( --wp-admin--admin-bar--height, 0px ) -
			var( --epoch-page-main-offset, 0px )
		);
		min-height: calc(
			100dvh -
			var( --wp-admin--admin-bar--height, 0px ) -
			var( --epoch-page-main-offset, 0px )
		);
	}

	.tassel-landing-intro__content {
		gap: var( --tassel-landing-content-gap-tablet, 30px );
	}

	.tassel-landing-headlines {
		max-width: var(
			--tassel-landing-headline-width-tablet,
			var( --wp--style--global--content-size, 1253px )
		);
	}

	.tassel-landing-actions,
	.tassel-landing-intro__buttons {
		flex-direction: var(
			--tassel-landing-actions-direction-tablet,
			row
		);
		gap: var( --tassel-landing-actions-gap-tablet, 24px );
		max-width: var(
			--tassel-landing-actions-width-tablet,
			var( --wp--style--global--content-size, 1253px )
		);
	}
}

@media ( max-width: 781px ) {
	.tassel-landing-intro {
		min-height: var( --tassel-landing-height-mobile, 450px );
	}

	.tassel-landing-intro.has-viewport-height {
		min-height: calc(
			100vh -
			var( --wp-admin--admin-bar--height, 0px ) -
			var( --epoch-page-main-offset, 0px )
		);
		min-height: calc(
			100dvh -
			var( --wp-admin--admin-bar--height, 0px ) -
			var( --epoch-page-main-offset, 0px )
		);
	}

	.tassel-landing-intro__content {
		gap: var( --tassel-landing-content-gap-mobile, 30px );
	}

	.tassel-landing-headlines {
		max-width: var(
			--tassel-landing-headline-width-mobile,
			var( --wp--style--global--content-size, 1253px )
		);
	}

	.tassel-landing-headlines__lead,
	.tassel-landing-intro__lead {
		line-height: 1.15;
	}

	.tassel-landing-headlines__display,
	.tassel-landing-intro__display {
		line-height: 0.85;
	}

	.tassel-landing-actions,
	.tassel-landing-intro__buttons {
		flex-direction: var(
			--tassel-landing-actions-direction-mobile,
			row
		);
		gap: var( --tassel-landing-actions-gap-mobile, 24px );
		max-width: var(
			--tassel-landing-actions-width-mobile,
			var( --wp--style--global--content-size, 1253px )
		);
	}

	.tassel-landing-intro__playback {
		bottom: 22px;
		left: 22px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tassel-landing-headlines > *,
	.tassel-landing-intro__headline-pair {
		transition: none;
	}

	.tassel-landing-intro__playback::before {
		transition: none;
	}

}