@property --reveal-color {
	syntax: "<color>";
	inherits: false;
	initial-value: hsl(0, 0%, 0%);
}

@property --reveal-color-transparent {
	syntax: "<color>";
	inherits: false;
	initial-value: hsla(0, 0%, 0%, 0);
}

.reveal {
	max-width: calc(100% - var(--margin-double));
	margin-left: -0.03em;
	font-size: 2.5vw;
	line-height: 1;
	letter-spacing: -0.03em;
	/* text-wrap: balance; */
}

.reveal + .reveal {
	margin-top: calc(33vh - var(--margin-double));
	margin-top: calc(33svh - var(--margin-double));
}

.reveal > span {
	transition: none !important;
}

.reveal--muted > span {
	color: hsl(var(--hsl-medium-grey));
}

/* @supports(background-clip: text) {
	.reveal > span {
		--reveal-color: hsl(var(--foreground));
		--reveal-color-transparent: hsl(var(--hsl-medium-grey));
		background: linear-gradient(to right, var(--reveal-color) calc(100% - var(--margin-double)), transparent) no-repeat text, var(--reveal-color-transparent) text;
		background-position: calc(200% + var(--margin-double)) 0%;
		background-size: calc((100% + var(--margin-double)) * 2) 100%;
		color: transparent !important;
		transition:
			background-position-x 1s cubic-bezier(.3, 0, .15, 1),
			--reveal-color 1s,
			--reveal-color-transparent 1s;
	}

	.reveal--muted > span {
		--reveal-color: hsl(var(--hsl-medium-grey));
	}
	
	.reveal--on > span {
		background-position-x: calc(100% + var(--margin-double));
	}
} */

@media (orientation: portrait) {
	.reveal {
		margin-left: -0.06em;
	}
}

@media (min-width: 2560px) {
	.reveal {
		max-width: 80%;
	}
}

@media (min-width: 1920px) {
	.reveal {
		max-width: 90%;
	}
}

@media (max-width: 1024px) {
	.reveal {
		font-size: 3.6vw;
	}
}

@media (max-width: 600px) {
	.reveal {
		font-size: 6vw;
	}
}

@media (max-width: 480px) {
	.reveal {
		font-size: 3em;
	}
}