/* ==========================================================================
   Trang chủ như một cuốn phim liền mạch. Chỉ nạp ở trang chủ.
   Phần chuyển động nằm dưới html.cine, do cinema.js gắn khi khách không bật giảm chuyển động.
   Quy tắc để cuộn mượt: chỉ đổi transform và opacity, đặt thẳng lên phần tử cần đổi.
   Không animate clip-path, mask, filter, và không đổi biến CSS trên khối có nhiều phần tử con,
   vì mỗi thứ đó bắt trình duyệt vẽ lại hoặc tính lại style theo từng khung hình.
   ========================================================================== */

/* ---------- Một màu nền xuyên suốt: bỏ đường cắt giữa các khối ---------- */
body.home { background: transparent; }
body.home .section {
	--c-bg: var(--ink-1);
	--c-surface: #0d1628;
	--c-surface-2: #13203a;
	--c-text: #cfd6e4;
	--c-head: #f4f7fc;
	--c-muted: #9ca8bf;
	--c-line: rgba(255, 255, 255, .1);
	--c-line-2: rgba(255, 255, 255, .18);
	--c-accent: var(--gold);
	--c-link: var(--gold-2);
	--c-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8);
	background: transparent;
	border-top: 0;
	z-index: 1;
}
body.home .ph { background: radial-gradient(ellipse at 30% 20%, #142a52, #060c18 70%); }

/* Bỏ các hiệu ứng nặng của theme trên trang dài này */
body.home .grain { display: none; }
body.home, body.home * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.home .site-header.is-solid { background: rgba(5, 10, 20, .97) !important; }
body.home .ticker { background: rgba(3, 6, 13, .9); }
body.home .festival__beam { animation: none; filter: none; }
body.home .hero__title-b { filter: none; }
/* Ánh đèn nền đã lo phần này. Các lớp glow cũ bị overflow cắt thành đường viền cứng khi nền trong suốt. */
body.home .intro__glow, body.home .initiatives__bg, body.home .history-home__bg, body.home .media-home__glow { display: none; }

/* Nút Bật tiếng và Tạm dừng video ở bên phải, nhấc lên trên bong bóng chat để không bị che. */
body.home .hero--video .hero__right { margin-bottom: 40px; }
@media (max-width: 560px) {
	body.home .hero--video .hero__badge { display: none; }
	body.home .hero--video .hero__foot { align-items: flex-end; }
	body.home .hero--video .hero__right { margin-left: auto; }
}

/* Ánh đèn máy chiếu nằm sau toàn trang: hai lớp vẽ sẵn, đổi cảnh bằng cách mờ dần */
.cine-amb { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink-1); pointer-events: none; }
.cine-amb i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; will-change: opacity; }
.cine-amb i.is-on { opacity: 1; }

/* ---------- Tin tức ---------- */
body.home .news-feature__body { margin: 0; padding: 24px 0 0; background: none; }
.news-home .mini { border-color: var(--c-line); }

/* ---------- Ảnh ban ngày: pha tông tối cho hợp nền phòng chiếu ---------- */
.park__media img { filter: saturate(.82) contrast(1.06) brightness(.84); }

/* ---------- Lịch sử: bớt khoảng trống dưới dải phim ---------- */
body.home .history-home { padding-bottom: clamp(48px, 5vw, 72px); }
body.home .reel__nav { margin-top: 18px; }

/* ---------- Nền ảnh của khối Nền tảng: tan vào nền, không có mép ---------- */
.foundation__bg { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.foundation__bg::after { display: none; }

/* ---------- Liên hoan phim: ảnh sáng hơn và tan vào nền ở hai mép, không có đường cắt ---------- */
body.home .festival { overflow: hidden; }
body.home .festival__bg img { opacity: .5; filter: none; }
body.home .festival .fest__item { background: rgba(6, 11, 22, .72); }
.festival__bg, .festival::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }

/* ---------- Dòng thời gian: vừa khung, đường sáng chạy theo cuộn ---------- */
@media (min-width: 1100px) {
	.tl { overflow: visible; cursor: default; }
	.tl__track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); min-width: 0; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
	.tl__track::before, .tl__track::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 94px; height: 1px; background: rgba(255, 255, 255, .14); }
	.tl__track::after { height: 2px; top: 93.5px; background: linear-gradient(90deg, var(--cyan), var(--gold)); box-shadow: 0 0 12px rgba(255, 195, 34, .55); transform-origin: left; }
	.tl__item { padding: 0; }
	.tl__item::before, .tl__item.is-last::before { display: none; }
	.tl__dot { background: var(--ink-1); }
	.tl__text { font-size: .9rem; }
	html.cine .tl__track::after { transform: scaleX(var(--p, 0)); }
	html.cine .tl__dot { border-color: rgba(255, 255, 255, .28); box-shadow: none; transition: border-color .5s, box-shadow .5s, background .5s; }
	html.cine .tl__item.is-lit .tl__dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 6px rgba(255, 195, 34, .18), 0 0 22px var(--gold); }
	html.cine .tl__no { transition: -webkit-text-stroke-color .5s; -webkit-text-stroke-color: rgba(255, 255, 255, .2); }
	html.cine .tl__item.is-lit .tl__no { -webkit-text-stroke-color: rgba(255, 195, 34, .7); }
}

/* ==========================================================================
   Chuyển động
   ========================================================================== */

/* Lenis tự cuộn từng khung hình, cuộn mượt mặc định của theme sẽ làm nó trễ */
html.cine { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }

/* ---------- Mở đầu: ống kính khép lại khi rời hero, khớp với lúc mở trang ---------- */
html.cine .hero { position: sticky; top: 0; z-index: 0; }
html.cine .hero.is-gone { visibility: hidden; }
html.cine .hero.is-gone * { animation-play-state: paused !important; }
html.cine .hero__media, html.cine .hero__content, html.cine .cine-bar { will-change: transform, opacity; }
html.cine .hero__foot { animation-fill-mode: backwards; }
.cine-bar { position: absolute; left: 0; right: 0; height: 50.5%; z-index: 5; background: var(--ink-0); pointer-events: none; transform: scaleY(0); }
.cine-bar--t { top: 0; transform-origin: top; }
.cine-bar--b { bottom: 0; transform-origin: bottom; }

/* ---------- Tiêu đề khối: từng từ trồi lên từ sau mép khung ---------- */
html.cine .cine-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em .03em .06em; margin: -.24em -.03em -.06em; }
html.cine .cine-w > span { display: inline-block; transform: translateY(112%); transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.cine .sec-title.is-seen .cine-w > span { transform: none; }
html.cine .sec-head .kicker { opacity: 0; transform: translateX(-14px); transition: opacity .9s ease, transform .9s var(--ease-out); }
html.cine .sec-head.is-seen .kicker { opacity: 1; transform: none; }
html.cine .sec-head .link-more { opacity: 0; transition: opacity 1s ease .5s; }
html.cine .sec-head.is-seen .link-more { opacity: 1; }

/* ---------- Khối chữ ---------- */
html.cine .reveal { transform: translateY(44px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
html.cine .reveal.is-in { transform: none; }

/* ---------- Ảnh: hiện dần và lùi nhẹ về đúng cỡ ---------- */
html.cine .cine-lens img, html.cine .cine-lens .ph { opacity: 0; scale: 1.14; transition: opacity .9s ease, scale 1.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
html.cine .cine-lens.is-seen img, html.cine .cine-lens.is-seen .ph { opacity: 1; scale: 1; }

/* ---------- Ảnh trôi chậm hơn trang ---------- */
html.cine .city__img img, html.cine .park__media img { height: 116%; top: -8%; max-width: none; }
html.cine .city__img img { position: relative; display: block; }

/* ---------- Tường poster: hai hàng trượt ngược chiều theo cuộn trang ---------- */
html.cine .posters__move { margin-left: -26vw; }
html.cine .posters:not(.is-near) .posters__move, html.cine .site-footer:not(.is-near) .foot-marquee__move { animation-play-state: paused; }

/* ---------- Liên hoan phim: ảnh nền trôi chậm hơn trang ---------- */
html.cine .festival__bg img { position: relative; height: 124%; top: -12%; max-width: none; will-change: translate; }

/* ---------- Thanh cảnh phim bên phải: biết mình đang ở đâu, bấm để nhảy ---------- */
.cine-rail { display: none; }
@media (min-width: 1280px) {
	html.cine .cine-rail { position: fixed; right: 8px; top: 50%; z-index: 90; display: flex; flex-direction: column; gap: 2px; padding: 8px 5px; border-radius: 8px; background: rgba(3, 6, 13, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); transform: translateY(-50%); transition: opacity .5s; }
	html.cine .cine-rail.is-off, html.cine .cine-rail.is-foot { opacity: 0; pointer-events: none; }
	.cine-rail button { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 24px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; }
	.cine-rail button::after { content: ""; width: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .38); transition: width .35s var(--ease-out), background .25s; }
	.cine-rail button:hover::after { width: 15px; background: var(--gold-2); }
	.cine-rail button[aria-current="true"]::after { width: 22px; background: var(--gold); }
	.cine-rail span {
		position: absolute; right: 34px; top: 50%; padding: 5px 11px; border-radius: 3px; white-space: nowrap; pointer-events: none;
		font-family: var(--display); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-0); background: var(--gold);
		opacity: 0; transform: translate(8px, -50%); transition: opacity .25s, transform .25s var(--ease-out);
	}
	.cine-rail button:hover span, .cine-rail button:focus-visible span { opacity: 1; transform: translate(0, -50%); }
}
@media print { .cine-amb, .cine-rail { display: none !important; } }