/*
 * Reveal khi cuộn (assets/js/reveal.js).
 * Trạng thái ẩn chỉ áp dụng khi <html> có class vg-reveal-ready (gắn sớm trong <head>),
 * nên không có JS thì nội dung vẫn hiện bình thường.
 */

.vg-reveal-ready [data-reveal] {
	--reveal-distance: 40px;
	--reveal-x: 0px;
	--reveal-y: var(--reveal-distance);
	--reveal-scale: 1;

	opacity: 0;
	transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale));
	transition:
		opacity 0.8s ease,
		transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
}

/* Đang cuộn lên: phần tử vào từ đỉnh → trượt xuống */
.vg-reveal-ready [data-reveal][data-reveal-from="top"] {
	--reveal-y: calc(var(--reveal-distance) * -1);
}

.vg-reveal-ready [data-reveal="fade"] {
	--reveal-y: 0px;
}

.vg-reveal-ready [data-reveal="zoom"] {
	--reveal-y: 24px;
	--reveal-scale: 0.94;
}

.vg-reveal-ready [data-reveal="left"] {
	--reveal-x: -32px;
	--reveal-y: 0px;
}

.vg-reveal-ready [data-reveal="right"] {
	--reveal-x: 32px;
	--reveal-y: 0px;
}

.vg-reveal-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Khi ẩn lại (ra khỏi khung nhìn) thì ẩn ngay, không trễ */
.vg-reveal-ready [data-reveal]:not(.is-revealed) {
	transition-delay: 0s;
	transition-duration: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
	.vg-reveal-ready [data-reveal] {
		transform: none;
		transition: opacity 0.4s ease;
	}
}