/* Premium folded cards. */

.tll-premium {
	position: relative;
	width: 100%;
	--tll-stage-bg: transparent;
	--tll-card-w-live: min(var(--tll-card-w), max(200px, 26vw), calc(100vw - 40px));
	--tll-card-h-live: min(var(--tll-card-h), max(260px, 38vw));
	--tll-exp-h-live: min(var(--tll-exp-h, var(--tll-card-h)), max(260px, 42vw));
}

.tll-premium__bleed {
	position: relative;
	width: 100%;
}

.tll-premium.is-fullwidth[data-tll-state="expanded"] .tll-premium__bleed,
.tll-premium.is-fullwidth[data-tll-state="unfolding"] .tll-premium__bleed {
	width: var(--tll-bleed-width, 100%);
	max-width: var(--tll-bleed-width, 100%);
	margin-left: calc(-1 * var(--tll-bleed-left, 0px));
	margin-right: 0;
	overflow: hidden;
}

.tll-premium__stage {
	position: relative;
	background: var(--tll-stage-bg);
	padding: 44px 0 48px;
	overflow: visible;
}

.tll-premium[data-tll-state="expanded"] .tll-premium__stage,
.tll-premium[data-tll-state="unfolding"] .tll-premium__stage {
	padding: 36px 0 44px;
	overflow: hidden;
}

.tll-premium__deck {
	display: block;
	width: var(--tll-card-w-live, var(--tll-card-w));
	height: var(--tll-card-h-live, var(--tll-card-h));
	margin: 0 auto;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}

.tll-premium__stack {
	position: relative;
	width: 100%;
	height: 100%;
}

.tll-premium[data-tll-state="folded"] .tll-premium__stack .tll-card,
.tll-premium[data-tll-state="folding"] .tll-premium__stack .tll-card {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	transform: rotate(var(--tll-rot)) translate(var(--tll-x), var(--tll-y));
	z-index: var(--tll-z);
	transition: transform var(--tll-anim, 700ms) cubic-bezier(0.22, 1, 0.36, 1);
	outline: none;
	border: 0;
}

.tll-premium[data-tll-state="folded"] .tll-premium__stack .tll-card__platform,
.tll-premium[data-tll-state="folding"] .tll-premium__stack .tll-card__platform {
	display: inline-flex;
	visibility: visible;
	opacity: 1;
	top: 14px;
	right: 14px;
	z-index: 6;
}

@keyframes tll-stack-nudge {
	0%,
	100% {
		transform: rotate(var(--tll-rot)) translate(var(--tll-x), var(--tll-y));
	}
	50% {
		transform: rotate(var(--tll-rot)) translate(calc(var(--tll-x) + 8px), calc(var(--tll-y) - 10px));
	}
}

.tll-premium[data-tll-state="folded"] .tll-premium__stack .tll-card:last-child {
	animation: tll-stack-nudge 2.6s ease-in-out infinite;
}

.tll-premium__deck .tll-card__more,
.tll-premium__stack .tll-card__more {
	display: none !important;
}

.tll-premium__deck .tll-card--expandable {
	cursor: inherit;
}

.tll-premium__row {
	width: 100%;
	overflow: visible;
}

.tll-premium__viewport {
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	padding: 20px 0 36px;
}

.tll-premium__track {
	display: flex;
	gap: var(--tll-gap, 22px);
	width: max-content;
	max-width: none;
	padding: 0;
	will-change: transform;
	transform: translateX(0);
}

.tll-premium[data-tll-state="expanded"] .tll-premium__track .tll-card {
	flex: 0 0 var(--tll-card-w-live, var(--tll-card-w));
	width: var(--tll-card-w-live, var(--tll-card-w));
	max-width: var(--tll-card-w-live, var(--tll-card-w));
	height: var(--tll-exp-h-live, var(--tll-exp-h, var(--tll-card-h)));
	min-height: var(--tll-exp-h-live, var(--tll-exp-h, var(--tll-card-h)));
	transform: none;
	box-shadow: var(--tll-shadow);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.tll-premium[data-tll-state="expanded"].is-playing .tll-premium__track {
	animation: tll-marquee var(--tll-scroll, 40s) linear infinite;
}

.tll-premium[data-tll-state="expanded"].is-playing.is-reverse .tll-premium__track {
	animation-direction: reverse;
}

.tll-premium[data-tll-state="expanded"].is-paused .tll-premium__track,
.tll-premium[data-tll-state="expanded"].is-hover-pause:has(.tll-premium__track .tll-card:hover) .tll-premium__track {
	animation-play-state: paused;
}

@keyframes tll-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--tll-marquee-shift, 0px)));
	}
}

.tll-premium__controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.tll-premium__expand {
	border: 0;
	background: none;
	text-decoration: underline;
	color: inherit;
	padding: 6px 8px;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.tll-premium__collapse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	padding: 10px 28px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 600;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.tll-premium[data-tll-state="folded"] .tll-premium__collapse,
.tll-premium[data-tll-state="expanded"] .tll-premium__expand,
.tll-premium[data-tll-state="unfolding"] .tll-premium__expand,
.tll-premium[data-tll-state="expanded"] .tll-premium__deck,
.tll-premium[data-tll-state="unfolding"] .tll-premium__deck {
	display: none;
}

.tll-premium[data-tll-state="folded"] .tll-premium__row {
	display: none !important;
}

.tll-premium[data-tll-state="unfolding"] .tll-premium__row,
.tll-premium[data-tll-state="expanded"] .tll-premium__row {
	display: block !important;
}

.tll-premium[data-tll-state="unfolding"] .tll-premium__track .tll-card,
.tll-premium[data-tll-state="expanded"] .tll-premium__track .tll-card {
	flex: 0 0 var(--tll-card-w-live, var(--tll-card-w));
	width: var(--tll-card-w-live, var(--tll-card-w));
	max-width: var(--tll-card-w-live, var(--tll-card-w));
	height: var(--tll-exp-h-live, var(--tll-exp-h, var(--tll-card-h)));
	min-height: var(--tll-exp-h-live, var(--tll-exp-h, var(--tll-card-h)));
	transform: none;
	box-shadow: var(--tll-shadow);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.tll-premium[data-tll-state="expanded"] .tll-premium__track .tll-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

/* Collapse button uses current text color. */
.et-db #et-boc .tll-premium__collapse,
.et-db #et-boc .tll-premium__expand,
.tll-premium__collapse,
.tll-premium__expand {
	outline: none;
	box-shadow: none;
}

.et-db #et-boc .tll-premium__collapse,
.tll-premium__collapse {
	border: 1px solid currentColor;
	background: #fff;
}

@media (max-width: 781px) {
	.tll-premium {
		--tll-card-w-live: min(var(--tll-card-w), calc(100vw - 40px));
		--tll-card-h-live: min(var(--tll-card-h), 320px);
		--tll-exp-h-live: min(var(--tll-exp-h, var(--tll-card-h)), 320px);
	}

	.tll-premium.is-fullwidth[data-tll-state="expanded"] .tll-premium__bleed,
	.tll-premium.is-fullwidth[data-tll-state="unfolding"] .tll-premium__bleed {
		width: var(--tll-bleed-width, 100%);
		max-width: var(--tll-bleed-width, 100%);
		margin-left: calc(-1 * var(--tll-bleed-left, 0px));
		margin-right: 0;
	}
}

.tll-premium.tll-reduce-motion.is-playing .tll-premium__track,
.tll-premium.tll-reduce-motion[data-tll-state="folded"] .tll-premium__stack .tll-card:last-child {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.tll-premium[data-tll-state="folded"] .tll-premium__stack .tll-card:last-child,
	.tll-premium[data-tll-state="expanded"] .tll-premium__track .tll-card {
		animation: none;
		transition: none;
	}

	.tll-premium[data-tll-state="expanded"] .tll-premium__track .tll-card:hover {
		transform: none;
	}
}