/* ── Reveal From Center ──────────────────────────────────────────────
   Element starts clipped at its center and reveals outward to both
   edges, like a curtain opening horizontally.
   ----------------------------------------------------------------- */

@keyframes revealFromCenter {
	0% {
		clip-path: inset(0 50%);
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0%);
		opacity: 1;
	}
}

.revealFromCenter {
	animation-name: revealFromCenter;
}

/* ── Reveal From Left ──────────────────────────────────────────────
   Element starts clipped from the right (only a thin sliver at the
   left is visible) and reveals rightward to its full width.
   ----------------------------------------------------------------- */

@keyframes revealFromLeft {
	0% {
		clip-path: inset(0 100% 0 0);
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}

.revealFromLeft {
	animation-name: revealFromLeft;
}

/* ── Reveal From Right ─────────────────────────────────────────────
   Element starts clipped from the left and reveals leftward.
   ----------------------------------------------------------------- */

@keyframes revealFromRight {
	0% {
		clip-path: inset(0 0 0 100%);
		opacity: 0;
	}
	1% {
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0 0 0);
		opacity: 1;
	}
}

.revealFromRight {
	animation-name: revealFromRight;
}