/**
 * === Reveal Patterns CSS - Initial + visible states cho 5 entrance patterns ===
 *
 * Mô tả: Định nghĩa trạng thái initial (ẩn) và final (.is-visible) của mỗi
 *        pattern dùng với [data-reveal] + IntersectionObserver.
 *        Tất cả duration/easing/distance đều dùng tokens từ design-tokens.css —
 *        KHÔNG hardcode literal values.
 *
 * Flow:
 *   1. [data-reveal] — base: opacity 0, transition 3 properties
 *   2. Per-pattern: gán transform/clip-path initial state
 *   3. [data-reveal].is-visible — reset tất cả về natural (opacity 1, transform none)
 *   4. mask-reveal special: opacity luôn 1, chỉ animate clip-path
 *   5. prefers-reduced-motion — bypass hoàn toàn: opacity 1, no transition
 *   6. visibility: hidden / pointer-events: none ở initial để ẩn khỏi screen reader
 *
 * Tokens sử dụng:
 *   --motion-entrance-base (600ms), --motion-entrance-slow (800ms)
 *   --motion-entrance-fast (400ms), --ease-standard, --ease-bounce
 *   --reveal-distance-sm (10px), --reveal-distance-md (20px), --reveal-distance-lg (40px)
 */

/* ============================================================
   BASE: Mọi [data-reveal] element — hidden ban đầu
   ============================================================ */

[data-reveal] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--motion-entrance-base) var(--ease-standard),
		transform var(--motion-entrance-base) var(--ease-standard),
		clip-path var(--motion-entrance-base) var(--ease-standard),
		visibility 0s var(--motion-entrance-base);
	will-change: opacity, transform;
}

/* ============================================================
   PER-PATTERN: Initial transform state
   ============================================================ */

/**
 * fade-up — translateY(40px → 0) + opacity
 * Dùng cho: headings, cards, paragraphs, form fields
 */
[data-reveal="fade-up"] {
	transform: translateY(var(--reveal-distance-lg));
}

/**
 * slide-left — translateX(-40px → 0) + opacity
 * Dùng cho: trust badge, tab navigation, left-column content
 */
[data-reveal="slide-left"] {
	transform: translateX(calc(-1 * var(--reveal-distance-lg)));
}

/**
 * slide-right — translateX(40px → 0) + opacity
 * Dùng cho: sidebar, carousel container, step content
 */
[data-reveal="slide-right"] {
	transform: translateX(var(--reveal-distance-lg));
}

/**
 * scale-in — scale(0.9 → 1) + opacity
 * Dùng cho: submit button, avatars, special CTA
 * Dùng --ease-bounce cho pop effect
 */
[data-reveal="scale-in"] {
	transform: scale(0.9);
	transition:
		opacity var(--motion-entrance-base) var(--ease-standard),
		transform var(--motion-entrance-base) var(--ease-bounce),
		clip-path var(--motion-entrance-base) var(--ease-standard),
		visibility 0s var(--motion-entrance-base);
}

/**
 * slide-up — translateY(-20px → 0) + opacity
 * Dùng cho: Contact Hub heading (form feel, từ trên xuống)
 */
[data-reveal="slide-up"] {
	transform: translateY(calc(-1 * var(--reveal-distance-md)));
}

/**
 * slide-down — translateY(-20px → 0) + opacity
 * Dùng cho: Quick Info strip container (xuất hiện từ trên xuống)
 */
[data-reveal="slide-down"] {
	transform: translateY(calc(-1 * var(--reveal-distance-md)));
}

/**
 * mask-reveal — clip-path inset(0 100% 0 0) → inset(0)
 * Dùng cho: hero image blob, image reveal
 * opacity = 1 luôn — chỉ animate clip-path
 */
[data-reveal="mask-reveal"] {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
	transition:
		clip-path var(--motion-entrance-slow) var(--ease-standard),
		visibility 0s var(--motion-entrance-slow);
	will-change: clip-path;
}

/* ============================================================
   VISIBLE STATE: .is-visible reset về natural
   ============================================================ */

[data-reveal].is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	clip-path: inset(0 0% 0 0);
	transition:
		opacity var(--motion-entrance-base) var(--ease-standard),
		transform var(--motion-entrance-base) var(--ease-standard),
		clip-path var(--motion-entrance-base) var(--ease-standard),
		visibility 0s 0s;
}

[data-reveal="scale-in"].is-visible {
	transition:
		opacity var(--motion-entrance-base) var(--ease-standard),
		transform var(--motion-entrance-base) var(--ease-bounce),
		visibility 0s 0s;
}

[data-reveal="mask-reveal"].is-visible {
	opacity: 1;
	transition:
		clip-path var(--motion-entrance-slow) var(--ease-standard),
		visibility 0s 0s;
}

/* ============================================================
   REDUCED MOTION: Bypass hoàn toàn — show ngay
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal="fade-up"],
	[data-reveal="slide-left"],
	[data-reveal="slide-right"],
	[data-reveal="slide-up"],
	[data-reveal="slide-down"],
	[data-reveal="scale-in"],
	[data-reveal="mask-reveal"] {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		will-change: auto !important;
	}
}

/* ============================================================
   MOBILE: Giảm distance để tránh jarring trên màn nhỏ
   ============================================================ */

@media (max-width: 767px) {
	[data-reveal="fade-up"] {
		transform: translateY(var(--reveal-distance-md));
	}

	[data-reveal="slide-left"] {
		transform: translateX(calc(-1 * var(--reveal-distance-md)));
	}

	[data-reveal="slide-right"] {
		transform: translateX(var(--reveal-distance-md));
	}

	[data-reveal="slide-up"],
	[data-reveal="slide-down"] {
		transform: translateY(calc(-1 * var(--reveal-distance-sm)));
	}
}