/* tpl-scrub-motion.css — DÙNG CHUNG cho mọi template bật hệ chuyển động scrub.
 *
 * Chỉ chứa phần CSS mà hệ chuyển động BẮT BUỘC phải có, không chứa thẩm mỹ của
 * riêng template nào. Mọi rule đều nằm dưới `.tpl-scrub` — template không bọc nội
 * dung trong `.tpl-scrub` thì file này vô hại.
 *
 * Cặp với: assets/js/tpl-motion-scrub.js + -effects.js + -scenes.js.
 * Phần CSS riêng của từng template (vd. `will-change` cho 3 lớp hero) để lại trong
 * `public/template{N}/css/style.css`.
 */

/* `drift()` đặt phần tử ở x:+55.2px (fade-left) / -40.8px (fade-right) làm trạng thái
   NGHỈ, chỉ kéo về 0 khi ScrollTrigger chạm. Phần tử nào sát mép phải thì trạng thái
   nghỉ đó nong `scrollWidth` của trang ra — và vì phần tử tràn nặng nhất nằm cuối trang
   (chưa vào tầm nhìn), khoảng trắng hiện ngay từ lúc tải, ở MỌI vị trí cuộn. Đo ở 390px:
   t44/t60..t63 rộng 445 thay vì 390. Cắt ở đây là điều kiện BẮT BUỘC của drift, không
   phải vá riêng cho template nào.

   `clip` chứ không `hidden`: `hidden` ép overflow-y thành auto, biến `.tpl-scrub` thành
   scroll container (hỏng position:sticky, đổi scroller mặc định của ScrollTrigger).
   Safari < 16 chưa có `clip` -> lùi về `hidden`, ở đó chấp nhận đánh đổi. */
.tpl-scrub {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  .tpl-scrub {
    overflow-x: clip;
  }
}

/* Ảnh "thở" phóng tới 1.12 lúc cuộn: cắt gọn trong khung bọc sát ảnh.
   Không đụng .wrap-img của hero — khung trang trí ở đó cố tình tràn ra ngoài.
   Lưới album không nằm trong danh sách này: ảnh ở đó không còn thở nữa. */
.tpl-scrub .couple-section .member-image,
.tpl-scrub .wrap-img-couple {
  overflow: hidden;
}

/* Dòng tiêu đề do SplitText tách ra trôi lên từ dưới -> phải cắt ở khung dòng. */
.tpl-scrub .section-title,
.tpl-scrub .section-sub-title {
  overflow-wrap: break-word;
}