/* ==========================================================================
   GLOBAL CHAPTER
   ========================================================================== */

.chapter {
	position: fixed;
	inset: 0;

	width: 100%;
	height: 100svh;
	overflow: hidden;

	pointer-events: none;

	transform: translateY(100%);
}

.chapter.is-current {
	transform: translateY(0);
	pointer-events: auto;
}

.chapter.is-current,
.chapter.is-incoming,
.chapter.is-outgoing {
	visibility: visible;
	pointer-events: auto;
}

.chapter.is-moving {
	transition:
		transform 700ms cubic-bezier(0.76, 0, 0.24, 1);
}

.chapter.is-outgoing.is-forward.is-moving {
	transform: translateY(-100%);
}

.chapter.is-outgoing.is-backward.is-moving {
	transform: translateY(100%);
}

/* FORWARD
   Incoming chapter starts below.
*/

.chapter.is-incoming.is-forward {
	transform: translateY(100vh);
}

/* BACKWARD
   Incoming chapter starts above.
*/

.chapter.is-incoming.is-backward {
	transform: translateY(-100%);
}

/* Outgoing chapter remains in place for now.
   We'll animate it in the next step.
*/

.chapter.is-outgoing {
	transform: translateY(0);
}

.chapter.is-incoming.is-moving {
	transform: translateY(0);
}

/* ==========================================================================
   CHAPTER MARKER
   ========================================================================== */

.chapter-marker {
	display: flex;
	flex-direction: column;
	gap: 4px;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.chapter-marker span:first-child {
	color: var(--color-accent);
}

/* ==========================================================================
   PAGE SPECIFIC CHAPTER
   ========================================================================== */

.chapter-why {
	z-index: 200;
}

.chapter-how {
	z-index: 100;

}

/* ==========================================================================
   TABLET AND MOBILE
   ========================================================================== */

@media (max-width: 900px) {

	.chapter-me,
	.chapter-hello {
		overflow-x: hidden;
		overflow-y: auto;

		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
	}

	.chapter-me .stage,
	.chapter-hello .stage {
		position: relative;
		top: auto;

		height: auto;
		min-height: 100svh;

		overflow: visible;
	}

}