.tt-pt {
	--tt-pt-color: #746df8;
	position: fixed !important;
	inset: 0 !important;
	width: 100%;
	height: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	z-index: 100100;
	pointer-events: none;
	visibility: hidden;
}

.tt-pt.is-busy,
html.tt-pt-pending .tt-pt {
	pointer-events: auto;
	visibility: visible;
}

html.tt-pt-pending,
html.tt-pt-pending body {
	background: var(--tt-pt-color, #746df8);
}

.tt-pt__blocks {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.tt-pt__row {
	flex: 1;
	display: flex;
}

.tt-pt__row--1 .tt-pt__block {
	transform-origin: top;
}

.tt-pt__row--2 .tt-pt__block {
	transform-origin: bottom;
}

.tt-pt__block {
	flex: 1;
	background: var(--tt-pt-color);
	transform: scaleY(0);
	will-change: transform;
	visibility: hidden;
}

.tt-pt--blocks.is-busy .tt-pt__block,
html.tt-pt-pending .tt-pt--blocks .tt-pt__block {
	visibility: visible;
}

html.tt-pt-pending .tt-pt--blocks .tt-pt__block {
	transform: scaleY(1);
}

.tt-pt__sheet {
	position: absolute;
	inset: 0;
	background: var(--tt-pt-color);
}

.tt-pt--clip .tt-pt__sheet {
	clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
	will-change: clip-path;
}

html.tt-pt-pending .tt-pt--clip .tt-pt__sheet {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

html.tt-pt-pending[data-tt-pt-style="slide"],
html.tt-pt-busy[data-tt-pt-style="slide"] {
	overflow: hidden;
}

html.tt-pt-pending[data-tt-pt-style="slide"] {
	background: var(--tt-pt-color, #746df8);
}

.tt-pt--slide .tt-pt__sheet {
	transform-origin: center center;
	will-change: transform;
}

.tt-pt--band .tt-pt__sheet {
	clip-path: var(--clip, polygon(0% 44%, 0% 44%, 0% 56%, 0% 56%));
}

html.tt-pt-pending .tt-pt--band .tt-pt__sheet {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.tt-pt--iris .tt-pt__sheet {
	clip-path: polygon(15% 75%, 85% 75%, 85% 75%, 15% 75%);
}

html.tt-pt-pending .tt-pt--iris .tt-pt__sheet {
	clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%);
}

html.tt-pt-pending .tt-pt--morph,
html.tt-pt-pending .tt-pt--draw,
html.tt-pt-pending .tt-pt--logo {
	background: var(--tt-pt-color);
}

html.tt-pt-pending .tt-pt--draw.is-busy,
html.tt-pt-pending .tt-pt--logo.is-busy,
.tt-pt--draw.is-busy,
.tt-pt--logo.is-busy {
	background: none;
}

/* Keep the solid cover while pending so enter does not flash before the SVG path is set. */
html.tt-pt-pending .tt-pt--morph,
html.tt-pt-pending .tt-pt--morph.is-busy {
	background: var(--tt-pt-color);
}

.tt-pt--morph.is-busy {
	background: none;
}

.tt-pt__morph {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--tt-pt-color);
	overflow: visible;
}

.tt-pt__morph path {
	fill: var(--tt-pt-color);
}

.tt-pt__draw {
	position: absolute;
	inset: 0;
	color: var(--tt-pt-color);
	opacity: 0;
}

html.tt-pt-pending .tt-pt--draw .tt-pt__draw {
	opacity: 1;
}

.tt-pt__draw svg {
	display: block;
	width: 100%;
	height: 100%;
}

.tt-pt__draw path {
	stroke: currentColor;
}

.tt-pt__logo-cols {
	position: absolute;
	inset: 0;
	display: flex;
	pointer-events: none;
}

.tt-pt__logo-block {
	flex: 1;
	height: 100%;
	background: var(--tt-pt-color);
	transform: scaleX(0);
	transform-origin: left;
	will-change: transform;
}

html.tt-pt-pending .tt-pt--logo .tt-pt__logo-block {
	transform: scaleX(1);
	transform-origin: right;
}

.tt-pt__logo-stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tt-pt-color);
	color: var(--tt-pt-logo-color, #ffffff);
	opacity: 0;
	pointer-events: none;
}

.tt-pt__logo-wrap {
	width: min(var(--tt-pt-logo-size, 420px), 80vw);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-pt__logo-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	fill: none;
	stroke: currentColor;
}

.tt-pt__logo-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.tt-pt {
		display: none !important;
	}

	html.tt-pt-pending .tt-pt {
		display: none !important;
	}
}