:root {
	--card-animation-duration: 300ms;
	--card-animation-timing: ease-out;
	/* Changed from ease-in-out to ease-out */
}

.card-stack {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.card-stack > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	padding: 16px;

	overflow: hidden;
	box-sizing: border-box;

	transform: translateY(100%);
	transition: transform var(--card-animation-duration) var(--card-animation-timing);
	visibility: hidden;
	isolation: isolate;
}

.card-stack > div.base-card {
	padding: 0;

	transform: unset;
	transition: unset;
	visibility: unset;
}

.card-stack > div.active {
	transform: translateY(0);
	visibility: visible;
}

.card-stack > div.scrollable {
	overflow-y: scroll;
}