/**
 * Section 1: Hero — Figma desktop 4095:4497 · mobile 4095:5937
 *
 * Khung hero theo từng frame Figma:
 *   desktop 1400×641 (2.184) · laptop 1272×583 (2.182) · tablet 794×364 (2.181)
 *   mobile  350×380  (0.921)  ← DUY NHẤT khác hẳn, dùng asset cắt dọc riêng
 *
 * Hero là <video> designer xuất ra (videos/hero.mp4 — 2672×1224 = @2x khung
 * 1336×612, 6.9s, H.264, không tiếng), chạy ở MỌI viewport kể cả mobile.
 * Bản dựng lại bằng CSS @keyframes từ node Figma 4194:2160 đã bỏ; timeline cũ
 * còn lưu ở customer_referral_animation.md.
 */

#cr-hero .cr-hero__media {
	width: 100%;
}

/* ============================================================
   Khung video

   Figma desktop 1400×641 · laptop 1272×583 · tablet 794×364 đều ~2.183, đúng
   tỉ lệ 1336/612 của video → đặt aspect-ratio cố định, bề rộng co theo cột.
   ============================================================ */
#cr-hero .cr-hero__video {
	width: 100%;
	height: auto;
	aspect-ratio: 1336 / 612;
	object-fit: cover;
	/* nền chờ trong lúc poster/video chưa tải — dùng luôn nền trang */
	background: var(--color-reverse-bg);
}

#cr-hero .cr-hero__logos {
	width: 100%;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
	/* Figma mobile 4095:5940 là khung DỌC 350×380 — kiểm chứng bằng cách dò tương
	   quan giữa ảnh export 1050×1140 của node đó với khung 0 của video: khớp nhất
	   (0.987, đỉnh rất rõ, lệch 2% là tụt còn 0.85) tại cửa sổ 1127×1224 lấy TRỌN
	   chiều cao video và căn giữa ngang. Nói cách khác Figma không vẽ lại cảnh
	   khác, chỉ crop — nên chỉ cần đổi aspect-ratio, `object-fit: cover` +
	   `object-position` mặc định (center) tự ra đúng khung đó. */
	#cr-hero .cr-hero__video {
		aspect-ratio: 350 / 380;
	}
}

/* prefers-reduced-motion: CRMotion.scrollToPlay() thoát sớm nên video không bao
   giờ play(), poster giữ nguyên — không cần rule CSS nào. */