/* =====================================================================
   HERO ĐIỆN ẢNH — "Đêm giỗ tổ"
   Một màn hình mở đầu tối: ảnh sân từ đường chìm dần vào đêm, 5.554 ngọn
   đèn (mỗi người một chấm) dựng thành hình nón các đời sau tên họ, chữ hiện
   dần. Cuộn xuống là về nền giấy để đọc. Chỉ dùng trên trang chủ.
   Không JS: ảnh + chữ vẫn hiện đầy đủ (mọi thứ mặc định là hiện, JS chỉ
   thêm chuyển động). Reduced-motion: mọi chuyển động tắt, canvas vẽ 1 khung.
   ===================================================================== */
:root{
  --dem-900:#0E0C08; --dem-800:#181209; --dem-700:#241A0E;
  --son-600:#A8322A; --son-700:#7A2119;
  --vang-200:#F3DCA4; --vang-300:#E9C56A; --vang-400:#CBB07A;
  --giay-100:#F1EADA; --giay-50:#F8F3E7;
  --tro:#B3A98F;
}
/* WP ép margin-block-start:0 cho phần tử đầu của nhóm và thêm block-gap cho <main> ⇒ phải !important để hero nằm dưới header */
.td-front .wp-site-blocks > main.wp-block-group{margin-block-start:0!important}
.td-cine{position:relative; isolation:isolate; min-height:100svh; background:var(--dem-900); color:var(--giay-100);
  margin-block-start:calc(-1 * var(--td-header-h, 84px))!important; padding-top:var(--td-header-h, 84px); overflow:clip}
/* lớp 1: ảnh thật, tối dần, thở rất chậm (Ken Burns 22s) */
.td-cine__photo{position:absolute; inset:0; z-index:-3; overflow:hidden}
.td-cine__photo img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; display:block;
  filter:sepia(.35) saturate(.75) brightness(.62) contrast(1.05); transform:scale(1.06); transform-origin:55% 45%}
.js-anim .td-cine__photo img{animation:td-kb 22s var(--td-ease, cubic-bezier(.16,.84,.44,1)) both}
@keyframes td-kb{from{transform:scale(1.12) translateY(1.5%)} to{transform:scale(1.02) translateY(0)}}
/* lớp 2: màn đêm — tối ở đáy để chữ đọc được, hở sáng ở đỉnh để thấy mái từ đường */
.td-cine__veil{position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,12,8,.55) 0%, rgba(14,12,8,.28) 28%, rgba(14,12,8,.62) 58%, rgba(14,12,8,.96) 86%, var(--dem-900) 100%),
    radial-gradient(70% 55% at 62% 48%, rgba(233,197,106,.16), transparent 70%)}
/* lớp 3: những ngọn đèn (canvas 2D) */
.td-cine__lamps{position:absolute; inset:0; z-index:-1; width:100%; height:100%; display:block; pointer-events:none;
  mix-blend-mode:screen; opacity:.95}
/* chữ */
.td-cine__in{position:relative; z-index:1; min-height:calc(100svh - var(--td-header-h, 84px)); display:flex; flex-direction:column; justify-content:flex-end;
  max-width:1080px; margin:0 auto; padding:2rem var(--wp--style--root--padding-left, 1.5rem) clamp(4.5rem, 9vh, 7rem)}
.td-cine__kicker{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:clamp(1.15rem,2.1vw,1.55rem); color:var(--vang-300); margin:0 0 .6rem; letter-spacing:.01em; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.td-cine h1{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; text-transform:uppercase; letter-spacing:.1em; line-height:.98; margin:0;
  font-size:clamp(2.6rem, 8.4vw, 6rem); color:var(--giay-50); text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.55)}
.td-cine h1 .l2{display:block; color:var(--vang-300); font-size:.72em; letter-spacing:.22em; margin-top:.08em}
.td-cine__motto{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--giay-100); margin:1rem 0 0; max-width:34ch}
.td-cine__motto b{font-weight:500; color:var(--vang-200)}
.td-cine__cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
.td-cine__cta a{display:inline-flex; align-items:center; gap:.6rem; min-height:52px; padding:.85rem 1.7rem; border-radius:2px; text-decoration:none;
  font-family:'Be Vietnam Pro',sans-serif; font-size:.9rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:transform var(--td-d,340ms) var(--td-ease), background var(--td-d,340ms) var(--td-ease), color var(--td-d,340ms) var(--td-ease), box-shadow var(--td-d,340ms) var(--td-ease)}
.td-cine__cta a svg{width:18px; height:18px; transition:transform var(--td-d,340ms) var(--td-ease)}
.td-cine__cta a:hover svg{transform:translateX(4px)}
.td-cine__cta .p{background:var(--vang-300); color:var(--dem-900); box-shadow:0 14px 34px -14px rgba(233,197,106,.55)}
.td-cine__cta .p:hover{background:var(--vang-200); transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(233,197,106,.7)}
.td-cine__cta .s{color:var(--giay-100); border:1px solid rgba(203,176,122,.55)}
.td-cine__cta .s:hover{border-color:var(--vang-300); color:var(--vang-200); transform:translateY(-2px)}
.td-cine__cta a:focus-visible{outline:2px solid var(--vang-300); outline-offset:3px}
/* số liệu nhỏ dưới CTA: đọc như một dòng phụ đề phim, không phải "hero-metric" */
.td-cine__sub{margin:1.6rem 0 0; font-size:.95rem; color:var(--tro); letter-spacing:.02em; font-variant-numeric:lining-nums tabular-nums}
.td-cine__sub b{color:var(--vang-200); font-weight:500}
/* gợi ý cuộn */
.td-cine__scroll{position:absolute; right:var(--wp--style--root--padding-right,1.5rem); bottom:1.6rem; z-index:1; display:flex; align-items:center; gap:.6rem;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tro); writing-mode:vertical-rl}
.td-cine__scroll i{display:block; width:1px; height:44px; background:linear-gradient(to bottom, var(--vang-400), transparent); position:relative; overflow:hidden}
.js-anim .td-cine__scroll i::after{content:""; position:absolute; left:0; top:-44px; width:1px; height:44px; background:var(--vang-200); animation:td-drop 2.2s var(--td-ease) infinite}
@keyframes td-drop{to{transform:translateY(88px)}}
/* núi Ngũ Hành Sơn — hình học vector, đường chuyển từ đêm sang giấy */
.td-cine__nui{position:absolute; left:0; right:0; bottom:-2px; z-index:2; width:100%; height:clamp(56px, 9vw, 120px); display:block; pointer-events:none}
.td-cine__nui path{fill:var(--td-giay, #F1EADA)}
.td-cine__nui .far{fill:#2A2214}
.td-cine__nui .mid{fill:#3A2E1B}

/* ---------- màn mở: chữ hiện dần (chỉ khi có JS + không reduced-motion) ---------- */
.js-anim .td-cine [data-rise]{opacity:0; transform:translateY(18px); filter:blur(6px)}
.js-anim .td-cine.is-on [data-rise]{opacity:1; transform:none; filter:blur(0);
  transition:opacity .9s var(--td-ease), transform .9s var(--td-ease), filter .9s var(--td-ease)}
.js-anim .td-cine.is-on [data-rise="1"]{transition-delay:.15s}
.js-anim .td-cine.is-on [data-rise="2"]{transition-delay:.35s}
.js-anim .td-cine.is-on [data-rise="3"]{transition-delay:.6s}
.js-anim .td-cine.is-on [data-rise="4"]{transition-delay:.85s}
.js-anim .td-cine.is-on [data-rise="5"]{transition-delay:1.05s}

/* ---------- header trong suốt khi nằm trên hero, đặc khi cuộn qua ---------- */
.td-header.td-header--over{background:transparent; border-bottom-color:transparent;
  transition:background var(--td-d,340ms) var(--td-ease), border-color var(--td-d,340ms) var(--td-ease)}
.td-header.td-header--over .wp-block-site-title a,.td-header.td-header--over .wp-block-navigation a,
.td-header.td-header--over .wp-block-navigation__responsive-container-open{color:var(--giay-50)}
.td-header.td-header--over .wp-block-site-tagline{color:var(--vang-300)}
.td-header.td-header--over .wp-block-navigation a:hover{border-bottom-color:var(--vang-300)}
.td-header.td-header--over .wp-block-site-logo img{box-shadow:0 0 0 2px var(--dem-900),0 0 0 3px var(--vang-400)}
.td-header.td-header--over .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container a{color:var(--td-nau)}
/* ⛔ Chữ sáng của hero PHẢI dừng lại ở cửa lớp phủ. Khi menu điện thoại mở, lớp phủ có nền sáng
   riêng của nó, giữ màu chữ sáng ở đây là chữ giấy trên nền giấy — đo được 1,04:1, coi như vô
   hình. Quy tắc cho submenu ngay trên đã lường trước chuyện này, nhưng bỏ sót chính lớp phủ. */
.td-header.td-header--over .wp-block-navigation__responsive-container.is-menu-open :is(a,.wp-block-navigation-item__content){color:var(--td-nau)}
.td-header.td-header--over .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{color:var(--td-nau)}
/* nhịp sau hero: dải số liệu về sát mép núi */
.td-cine + .td-sec{padding-top:2.6rem}

/* chữ luôn có nền tối sau lưng, dù đèn có trôi tới đâu */
.td-cine__in::before{content:""; position:absolute; left:0; right:0; bottom:0; height:min(78%, 620px); z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(14,12,8,.55) 35%, rgba(14,12,8,.9) 75%, var(--dem-900))}
@media (max-width:781px){
  .td-cine__in{justify-content:flex-end; padding-bottom:4.2rem}
  .td-cine h1{font-size:2.05rem; letter-spacing:.06em; white-space:nowrap}
  .td-cine h1 .l2{font-size:.78em; letter-spacing:.2em}
  .td-cine__motto{font-size:1.2rem}
  .td-cine__cta a{flex:1 1 100%; justify-content:center}
  .td-cine__scroll{display:none}
  /* Trên điện thoại, khối chữ chiếm gần hết bề ngang và đứng ngay chỗ cụm đèn sáng nhất của cây —
     không có "khoảng trống bên cạnh" để né như trên desktop. Sửa bằng hai lớp cùng lúc: (1) cho
     dải đèn MỜ DẦN trước khi chạm vùng chữ (mask), để nền không còn tranh sáng với chữ; (2) lớp
     phủ tối bắt đầu SẪM NGAY TỪ ĐẦU khối chữ thay vì "transparent" ở mép trên — trước đó lớp phủ
     chỉ cao 70% và bắt đầu trong suốt hoàn toàn, nên dòng kicker và nửa trên tiêu đề không có gì
     che, lộ thẳng lên nền ảnh + đèn sáng phía sau, đọc rất khó. */
  .td-cine__lamps{opacity:.5; -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 62%); mask-image:linear-gradient(to bottom, #000 0%, #000 34%, transparent 62%)}
  .td-cine__in::before{height:100%; background:linear-gradient(180deg, rgba(14,12,8,.18) 0%, rgba(14,12,8,.62) 20%, rgba(14,12,8,.88) 42%, rgba(14,12,8,.96) 66%, var(--dem-900) 100%)}
  .td-cine__photo img{object-position:50% 30%}
}
@media (prefers-reduced-motion:reduce){
  .js-anim .td-cine [data-rise]{opacity:1; transform:none; filter:none; transition:none}
  .js-anim .td-cine__photo img{animation:none}
  .js-anim .td-cine__scroll i::after{animation:none}
}