/* ============================================================
   intro.css — Màn "mở màn" khi vào website
   Cặp với assets/js/intro.js · markup .tl-intro nằm trong từng file .html

   File RIÊNG chứ không nhét vào common.css: BUILD.md §2.1 đóng băng
   common.css, và luật ở đó là "cần component dùng chung mà common.css
   chưa có thì viết vào file của riêng bạn". Tiền lệ: catalog.css.
   Nhờ tách file mà việc bật intro cho cả 23 trang chỉ là thêm 1 thẻ <link>
   + 1 thẻ <script> vào mỗi trang, không phải bóc code ra khỏi home.css.

   Thứ tự nạp: SAU common.css (dùng token --c-primary của nó).
   ============================================================ */

/* ===== 1 · MẶC ĐỊNH LÀ TẮT =====
   Ngược đời có chủ đích. Cách "tự nhiên" là để màn intro hiện sẵn trong CSS
   rồi JS gỡ đi, nhưng nó sai ở CẢ HAI đầu:

   · Người quay lại (đã xem intro trong phiên này) sẽ thấy màn phủ LOÉ lên một
     nhịp rồi mới bị JS gỡ — vì mọi thẻ <script> hợp lệ theo BUILD.md §4.3 đều
     nằm cuối <body>, tức là chạy SAU khi trang đã vẽ.
   · intro.js không tải được (404, mạng chặn) là màn xanh phủ vĩnh viễn.

   Để tắt làm mặc định thì hỏng JS = không có intro, chấm hết. Không có đường
   nào dẫn tới "trang trắng vĩnh viễn" — đúng luật đã ghi ở common.css §14d. */
.tl-intro { display: none; }

/* ===== 2 · MÀN PHỦ =====
   .tl-intro-on do intro.js gắn lên <html> TRƯỚC khi thân trang được vẽ. */
.tl-intro-on .tl-intro {
  /* Ba mốc thời gian của cả màn intro, khai ở một chỗ để chỉnh được bằng mắt:
     0s ──── logo hiện dần (--intro-in) ──── 0.86s bắt đầu tan ──── 1.20s hết.
     Tổng 1.2s: đủ để ĐỌC RA là một nhịp mở màn có chủ ý, chưa tới ngưỡng
     người dùng bắt đầu nghĩ "trang bị treo" (~1.5s). */
  --intro-in:   .62s;
  --intro-hold: .86s;   /* = thời điểm bắt đầu tan */
  --intro-out:  .34s;

  /* Curve riêng cho cả ba nhịp của màn intro (hiện · tan · trôi lên — nhịp trôi
     đi kèm nhịp tan nên phải cùng curve, lệch curve là hai thứ rời nhau ra),
     KHÔNG dùng lại --ease / --reveal-ease của common.css.
     Hai curve kia đều là dạng "phóng nhanh rồi hạ cánh"
     (cubic-bezier(.16,1,.3,1) và (.22,1,.36,1)) — hợp với transform trượt/phóng
     vì nó cho cảm giác phản hồi tức thì, nhưng áp lên opacity thì đo được:
     · nhịp TAN dùng --ease: opacity còn 0.02 ở mốc 1040ms trên tổng 340ms,
       tức là màn phủ bị CẮT chứ không phải được kéo đi;
     · nhịp HIỆN dùng --reveal-ease: opacity đã 0.96 ở mốc 300ms trên tổng 620ms,
       tức là logo BẬT ra rồi đứng chờ, không phải "hiện dần".
     Curve đối xứng chữa cả hai: đúng nửa thời gian thì đúng nửa độ mờ. */
  --intro-ease-fade: cubic-bezier(.4, 0, .6, 1);

  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  /* Nền xanh thương hiệu, không phải trắng. Lợi thế phụ đáng kể: logo vẫn là một
     file 41KB nên trên mạng yếu nó có thể tới muộn, mà một màn XANH ĐẶC trống
     vẫn đọc ra là "đang mở màn có chủ ý" — màn TRẮNG trống thì đọc ra "trang lỗi".
     Trùng luôn với <meta name="theme-color" content="#006540"> nên trên mobile
     thanh trạng thái và màn intro liền một khối. */
  background: var(--c-primary);

  /* KHÔNG chặn chuột, kể cả trong lúc đang phủ. Người dùng sốt ruột bấm ngay
     thì cú bấm rơi xuống UI thật thay vì bị nuốt. Cũng có nghĩa là màn intro
     không bao giờ "giam" được ai — sự cố tệ nhất chỉ là một lớp xanh mờ dần. */
  pointer-events: none;

  /* Tự tan bằng CSS, KHÔNG chờ JS gọi. `forwards` giữ trạng thái cuối
     (opacity 0 + visibility hidden) nên hết animation là nó biến mất thật,
     không cần ai dọn. intro.js có gỡ node đi nữa cũng chỉ là dọn rác. */
  animation: tl-intro-out var(--intro-out) var(--intro-ease-fade) var(--intro-hold) forwards;
}
@keyframes tl-intro-out {
  /* Gộp `visibility` vào cùng animation chứ không để riêng: chỉ opacity:0 thì
     phần tử vẫn còn trong cây accessibility và vẫn là một lớp phủ, tuy trong
     suốt. `visibility` đổi rời rạc ở cuối animation nên nó lật đúng lúc. */
  to { opacity: 0; visibility: hidden; }
}

/* ===== 3 · CỤM LOGO ===== */
.tl-intro__brand {
  display: grid; justify-items: center;
  /* min() chứ không % hay vw đơn thuần: chặn trên 400px để logo không phình to
     quá cỡ trên màn rộng, chặn dưới theo 66vw để nó không tràn mép trên mobile. */
  width: min(400px, 66vw);
}

/* Cụm logo trôi lên trong lúc màn phủ tan — cùng CHIỀU với `tl-banner-in`
   (common.css §17) đưa chữ banner lên, nên hai chuyển động nối được vào nhau
   thành một nhịp thay vì hai nhịp rời. */
.tl-intro-on .tl-intro__brand {
  animation: tl-intro-lift var(--intro-out) var(--intro-ease-fade) var(--intro-hold) both;
}
@keyframes tl-intro-lift { to { transform: translateY(-14px); } }

/* ---- Logo ----
   Dùng `header-logo-ondark-01.png`, KHÔNG phải `header-logo-01.png` của header.
   Tên "ondark" = bản dành cho nền TỐI/MÀU; dự án trước đó không có bản nào như vậy.

   Ba nhóm pixel, xử lý ba kiểu khác nhau — không phải tô trắng tất:

   1. **Vành vàng → giữ nguyên màu.** Tô trắng cả vành thì nó tan vào đĩa trắng và
      con dấu mất hẳn đường viền (đúng lỗi client báo ở bản trước). Nhận vành bằng
      KÊNH XANH DƯƠNG thấp rõ rệt — `b < min(r,g) - 20` — chứ không bằng độ sáng:
      pixel răng cưa pha giữa trắng và xanh lá cũng rơi vào đúng dải sáng của vàng
      (0.55–0.85) nên lọc bằng độ sáng sẽ vẽ vệt vàng quanh bụng chữ A/O. Đo lại
      sau khi sinh file: 0 pixel không-trắng lọt vào hai vùng đó.
   2. **Chữ + đĩa (xanh đậm) → trắng.**
   3. **Nền trắng còn sót → alpha 0**, hạ mềm theo `1 - smoothstep(.85, .95, lum)`
      để không tạo mép răng cưa. Xem 22.2b của BUILD.md: file logo gốc mang 3 201
      pixel trắng ĐẶC sót lại từ lúc tách nền, nằm trong bụng chữ **A**
      (x 590–620) và **O** (x 1050–1100). Trên nền trắng chúng vô hình nên lỗi ngủ
      yên trong file từ đầu dự án.

   `header-logo-01.png` KHÔNG bị sửa — nó vẫn phục vụ header/footer trên nền trắng.

   Không có `filter` nào ở đây: màu đã đúng sẵn trong file. Nghĩa là môi trường
   không hỗ trợ filter cũng hiện đúng, và không tốn một lượt xử lý ảnh mỗi frame.
   Kèm lợi ích phụ: 84.5KB → 41KB cho thứ được vẽ ĐẦU TIÊN của mọi trang.

   KHÔNG dùng `footer-logo-01.png`: file đó chỉ có con dấu, không có chữ
   "THANH LONG". */
.tl-intro__logo {
  width: 100%; height: auto;
  /* Hiện dần, không lộ dần. Chỉ opacity — cụm logo đã có nhịp trôi lên ở lúc
     TAN, thêm dịch chuyển ở lúc HIỆN nữa là hai chuyển động ngược chiều trong
     1.2 giây, đọc ra là bồn chồn chứ không phải điềm đạm. */
  animation: tl-intro-fade var(--intro-in) var(--intro-ease-fade) both;
}
@keyframes tl-intro-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== 4 · TẮT HIỆU ỨNG =====
   Người dùng tắt hiệu ứng thì bỏ HẲN màn intro, không phải "vẫn phủ nhưng đứng
   im" — một tấm xanh bất động 1.2s không truyền tải gì cả, nó chỉ là độ trễ.
   intro.js cũng tự kiểm cùng điều kiện này; khai ở cả hai nơi để CSS không phụ
   thuộc việc JS có chạy hay không (cùng lối viết với §14e của common.css). */
@media (prefers-reduced-motion: reduce) {
  .tl-intro-on .tl-intro { display: none; }
}
