/**
 * Chăm Film — tầng hiệu ứng.
 *
 * Tách riêng khỏi style.css để có thể tắt hoàn toàn trong
 * Giao diện → Tuỳ biến → ✨ Hiệu ứng mà không đụng gì tới bố cục.
 *
 * Nguyên tắc: mọi hiệu ứng chỉ là lớp trang trí. Tắt hết đi thì
 * trang vẫn đọc được và dùng được bình thường.
 */

/* ═══════════════════════════════════════════
   1. HẠT PHIM — lớp nhiễu phủ toàn trang
   Đúng chất phim nhựa, làm nền phẳng có "da thịt".
═══════════════════════════════════════════ */
.cf-grain {
	position: fixed;
	inset: -150%;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: cfGrainShift 0.7s steps(4) infinite;
	will-change: transform;
}
.dark .cf-grain { opacity: 0.08; mix-blend-mode: soft-light; }

@keyframes cfGrainShift {
	0%   { transform: translate3d(0, 0, 0); }
	25%  { transform: translate3d(-3%, 2%, 0); }
	50%  { transform: translate3d(2%, -3%, 0); }
	75%  { transform: translate3d(-2%, -2%, 0); }
	100% { transform: translate3d(3%, 1%, 0); }
}

/* ═══════════════════════════════════════════
   2. LỘ ẢNH THEO CUỘN
   Ảnh không "hiện ra" mà được vén lên từ dưới,
   kèm phóng nhẹ — giống cú máy mở đầu cảnh phim.
═══════════════════════════════════════════ */
/* LƯỚI AN TOÀN — ảnh KHÔNG BAO GIỜ được phép ẩn vĩnh viễn.
   Trước đây ảnh bắt đầu ở opacity:0 và chỉ hiện khi JavaScript
   chạy xong. Mạng chậm, JS lỗi hoặc bị chặn là khách nhìn thấy
   một trang trống. Nay hiệu ứng chỉ bật khi JS đã sẵn sàng
   (class .fx-ready), và có thêm đồng hồ đếm ngược trong JS. */
.cf-fx.fx-ready [data-fx-mask] {
	clip-path: inset(0 0 100% 0);
	transition:
		clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s ease;
	opacity: 0;
	will-change: clip-path;
}
.cf-fx [data-fx-mask].fx-in {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}
/* Ảnh bên trong phóng từ 1.12 về 1 — tạo cảm giác ống kính zoom out */
.cf-fx.fx-ready [data-fx-mask] img {
	transform: scale(1.1);
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.cf-fx [data-fx-mask].fx-in img { transform: scale(1); }

/* ═══════════════════════════════════════════
   3. CHỮ TRƯỢT LÊN TỪ MẶT NẠ
   Tiêu đề lớn không mờ dần mà trồi lên từ dưới
   một đường cắt — dứt khoát và đắt hơn nhiều.
═══════════════════════════════════════════ */
.cf-fx [data-fx-line] {
	display: block;
	overflow: hidden;
}
.cf-fx.fx-ready [data-fx-line] > span {
	display: block;
	transform: translateY(105%);
	transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.cf-fx [data-fx-line].fx-in > span { transform: translateY(0); }

/* Đoạn chữ và nút đi theo sau, lệch nhịp một chút */
.cf-fx.fx-ready [data-fx-rise] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.55s ease var(--fx-delay, 0s),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--fx-delay, 0s);
}
.cf-fx [data-fx-rise].fx-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════
   4. PARALLAX — ảnh trôi chậm hơn trang
═══════════════════════════════════════════ */
.cf-fx [data-fx-parallax] {
	will-change: transform;
	transition: none;
}

/* ═══════════════════════════════════════════
   5. HERO — chữ dạt lên, ảnh lùi lại khi cuộn
═══════════════════════════════════════════ */
.cf-fx .hero-section .hero-content {
	transform: translate3d(0, var(--fx-hero-y, 0px), 0);
	opacity: var(--fx-hero-o, 1);
	will-change: transform, opacity;
}
.cf-fx .hero-section .hero-media {
	transform: scale(var(--fx-hero-s, 1)) translate3d(0, var(--fx-hero-my, 0px), 0);
	will-change: transform;
}
.cf-fx .hero-section .scroll-cue { opacity: var(--fx-hero-o, 1); }

/* ═══════════════════════════════════════════
   7. NÚT HÚT THEO CHUỘT + GẠCH CHÂN QUÉT
═══════════════════════════════════════════ */
.cf-fx [data-fx-magnetic] {
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.cf-fx .primary-nav a {
	position: relative;
	overflow: hidden;
}
.cf-fx .primary-nav a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0.25rem;
	width: 100%; height: 1px;
	/* Vàng đồng thay vì màu chữ — gạch chân quét qua là một trong vài
	   điểm vàng ít ỏi cho phép trên mỗi màn hình, và nó chỉ hiện lúc rê chuột
	   nên không phá nguyên tắc "tối đa 1–2 điểm vàng". */
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-fx .primary-nav a:hover::after,
.cf-fx .primary-nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ═══════════════════════════════════════════
   8. SỐ KHỔ LỚN LÀM NỀN
   Con số mờ rất to phía sau tiêu đề — thủ pháp
   quen thuộc của các studio biên tập.
═══════════════════════════════════════════ */
.cf-fx .cf-pillar-row { position: relative; }
.cf-fx .cf-pillar-row .cf-pillar-row-body { position: relative; }
.cf-fx .cf-pillar-row .cf-pillar-row-body::before {
	content: attr(data-fx-ghost);
	position: absolute;
	top: -3.5rem;
	right: -1rem;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: clamp(7rem, 16vw, 15rem);
	font-weight: 700;
	line-height: 0.75;
	color: var(--ink);
	opacity: 0.04;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}
.cf-fx .cf-pillars.tone-dark .cf-pillar-row-body::before { color: var(--snow); opacity: 0.05; }
.cf-fx .cf-pillar-row-body > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════
   9. THẺ PHIM — lộ chữ mềm hơn, viền sáng khi rê
═══════════════════════════════════════════ */
.cf-fx .film-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(250, 250, 250, 0);
	transition: border-color 0.5s ease;
	pointer-events: none;
	z-index: 3;
}
.cf-fx .film-card:hover::after { border-color: rgba(250, 250, 250, 0.28); }
.cf-fx .film-card-info { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cf-fx .film-card:hover .film-card-info { transform: translateY(-4px); }

/* ═══════════════════════════════════════════
   10. VẠCH SÁNG CHẠY Ở ĐẦU CÁC SECTION TỐI
═══════════════════════════════════════════ */
.cf-fx .tone-dark { position: relative; }
.cf-fx .tone-dark::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 1px;
	background: linear-gradient(90deg,
		transparent, rgba(139, 158, 149, 0.55) 35%, rgba(139, 158, 149, 0.55) 65%, transparent);
	transform: scaleX(0);
	transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cf-fx .tone-dark.fx-in::before { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   TÔN TRỌNG NGƯỜI DÙNG
   Ai bật "giảm chuyển động" trong hệ điều hành
   thì tắt sạch, chỉ giữ nội dung.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.cf-grain { animation: none; opacity: 0.03; }

	.cf-fx [data-fx-mask],
	.cf-fx [data-fx-mask] img,
	.cf-fx [data-fx-line] > span,
	.cf-fx [data-fx-rise] {
		clip-path: none !important;
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.cf-fx [data-fx-parallax] { transform: none !important; }
	.cf-fx .hero-section .hero-content,
	.cf-fx .hero-section .hero-media { transform: none !important; opacity: 1 !important; }
	.cf-fx .tone-dark::before { transform: scaleX(1); transition: none; }

	/* Chuyển cảnh giữa trang: gỡ hẳn lớp phủ. Ai bật "giảm chuyển động"
	   thường là vì màn hình nhấp nháy gây khó chịu — che kín màn hình rồi
	   mở ra đúng là kiểu nhấp nháy đó. */
	.cf-page-fade { display: none !important; }
}

/* Điện thoại: bỏ parallax và con trỏ (không có chuột, và tiết kiệm pin) */
@media (max-width: 900px) {
	.cf-fx [data-fx-parallax] { transform: none !important; }
	.cf-fx .hero-section .hero-media { transform: none; }
	.cf-fx .cf-pillar-row .cf-pillar-row-body::before { font-size: 7rem; top: -2rem; right: -0.5rem; }
}

/* ═══════════════════════════════════════════
   9. CHUYỂN CẢNH GIỮA CÁC TRANG
   Bấm sang trang khác thì màn tối dần rồi mới
   chuyển, thay vì "chớp trắng" như web thường.
═══════════════════════════════════════════ */
/* LƯỚI AN TOÀN — lớp phủ che kín màn hình nên không được phép kẹt lại:
   1. Lớp phủ do JavaScript tạo ra. JS hỏng hoặc bị chặn = không có lớp phủ,
      trang vẫn dùng bình thường.
   2. Mờ đi bằng animation CSS thuần chứ không phải transition chờ JS gỡ class
      — đã chạy là chắc chắn kết thúc. Xong thì JS gỡ luôn thẻ ra khỏi trang.
   Cố ý KHÔNG làm hiệu ứng lúc RỜI trang: chặn điều hướng để chạy animation
   khiến mỗi cú bấm chậm thêm, và server chậm một nhịp là trông như lỗi. */
.cf-page-fade {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--canvas);
	pointer-events: none;
	opacity: 0;
}

/* Vào trang: hiện sẵn màu nền rồi mờ đi. Dùng animation chứ không dùng
   transition, vì animation tự chạy hết chu kỳ mà không chờ JS làm gì thêm. */
.cf-page-fade.is-entering {
	animation: cfPageIn 0.35s ease-out forwards;
}
@keyframes cfPageIn {
	from { opacity: 1; }
	to   { opacity: 0; }
}



/* Máy in: bỏ sạch */
@media print {
	.cf-grain { display: none !important; }
	.cf-fx [data-fx-mask], .cf-fx [data-fx-line] > span, .cf-fx [data-fx-rise] {
		clip-path: none !important; opacity: 1 !important; transform: none !important;
	}
}