.page {
	width: 100%;
	max-width: calc(var(--layout-max-width) + (var(--layout-gutter) * 2));
	margin: 0 auto;
	padding: var(--s4) var(--layout-gutter) 96px;
	display: flex;
	flex-direction: column;
	gap: 72px;
}

.hero,
.animal-section {
	width: 100%;
}

.auth-page {
	min-height: calc(100vh - 88px);
	display: grid;
	place-items: center;
}

body.is-transitioning {
	overflow: hidden;
}

.page-transition-viewport {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	isolation: isolate;
	background: var(--bg);
	z-index: 90;
	pointer-events: none;
}

.page-transition-track {
	display: flex;
	width: 200%;
	height: 100%;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	contain: layout paint;
}

.page-transition-item {
	flex: 0 0 50%;
	min-width: 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
}

.page-transition-item > .page {
	width: 100%;
	max-width: calc(var(--layout-max-width) + (var(--layout-gutter) * 2));
	margin: 0 auto;
	flex: 0 0 auto;
}

.page-transition-item > .auth-page {
	min-height: 0;
	display: block;
	padding-top: var(--s4);
}

.grid-debug-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--layout-track-width);
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	z-index: 95;
}

.grid-debug-overlay::before,
.grid-debug-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(208, 83, 22, 0.38);
}

.grid-debug-overlay::before {
	left: 0;
}

.grid-debug-overlay::after {
	right: 0;
}

.grid-debug-column {
	height: 100%;
	background: linear-gradient(to bottom, var(--grid-debug-column-top, rgba(224, 183, 79, 0.18)), var(--grid-debug-column-bottom, rgba(216, 106, 22, 0.12)));
	border-inline: 1px solid rgba(208, 83, 22, 0.22);
}

.grid-debug-column:nth-child(1),
.grid-debug-column:nth-child(12) {
	--grid-debug-column-top: rgba(110, 201, 124, 0.28);
	--grid-debug-column-bottom: rgba(72, 165, 94, 0.18);
}

.grid-debug-column:nth-child(2),
.grid-debug-column:nth-child(11) {
	--grid-debug-column-top: rgba(244, 128, 182, 0.28);
	--grid-debug-column-bottom: rgba(215, 69, 110, 0.18);
}

.grid-debug-column:nth-child(3),
.grid-debug-column:nth-child(10) {
	--grid-debug-column-top: rgba(109, 170, 244, 0.28);
	--grid-debug-column-bottom: rgba(61, 126, 220, 0.18);
}

.grid-debug-column:nth-child(4),
.grid-debug-column:nth-child(9) {
	--grid-debug-column-top: rgba(255, 195, 101, 0.28);
	--grid-debug-column-bottom: rgba(224, 143, 36, 0.18);
}

.grid-debug-column:nth-child(5),
.grid-debug-column:nth-child(8) {
	--grid-debug-column-top: rgba(160, 124, 255, 0.28);
	--grid-debug-column-bottom: rgba(112, 81, 212, 0.18);
}

.grid-debug-column:nth-child(6),
.grid-debug-column:nth-child(7) {
	--grid-debug-column-top: rgba(88, 214, 208, 0.28);
	--grid-debug-column-bottom: rgba(36, 163, 158, 0.18);
}

body.is-grid-debug .grid-debug-overlay {
	opacity: 1;
	visibility: visible;
}

@media (max-width: 900px) {
	.page {
		padding: var(--s3) var(--layout-gutter) 72px;
		gap: 56px;
	}

	.page-transition-item > .auth-page {
		padding-top: var(--s3);
	}
}

@media (max-width: 600px) {
	.page {
		padding: var(--s2) var(--layout-gutter) 56px;
	}

	.page-transition-item > .auth-page {
		padding-top: var(--s2);
	}
}