html[data-page-type='random'] {
	--rp-accent: var(--primary);
}

html[data-page-type='random'] header,
html[data-page-type='random'] footer {
	display: none;
}

.rp-main {
	min-height: 99.5vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: var(--background);
}

.rp-stage {
	width: 100%;
	max-width: 40rem;
	text-align: center;
	color: var(--foreground);
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	animation: rp-focus-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
		filter: none;
		opacity: 1;
		transform: none;
	}

	html[data-a11y-reduce-motion] & {
		animation: none;
		filter: none;
		opacity: 1;
		transform: none;
	}
}

.rp-title {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	min-height: 1.25em;

	&.rp-typing .rp-title-line {
		@media (prefers-reduced-motion: reduce) {
			animation: none;
			border-right-color: transparent;
		}

		html[data-a11y-reduce-motion] & {
			animation: none;
			border-right-color: transparent;
		}
	}
}

.rp-sub {
	font-size: 0.95rem;
	color: var(--muted-foreground);
	margin: 0 0 2.5rem 0;
	opacity: 0;
	animation: rp-fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
		opacity: 1;
	}

	html[data-a11y-reduce-motion] & {
		animation: none;
		opacity: 1;
	}
}

@keyframes rp-focus-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
@keyframes rp-fade-up {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}