/* ฉากเปลี่ยนหน้า Beta — Art Production 14 ก.ย. (Head ขอ · เจ้าของ: "ไม่ต้องกลมกลืน แต่ transition ไปหากันได้")
   ใช้กับ cross-document view transition ของ Chrome · สเปก + โค้ดตั้งชนิด (type) อยู่ README.md
   ชนิด:  pit-enter = B หน้า PAPER → ห้องแข่ง        · สมุดปิด แล้วหลุม dither ขึ้นมาจากความมืด
          pit-exit  = A Title → PAPER · C ห้องแข่ง → PAPER · ความมืด dither หาย แล้วสมุดกางออก
          paper     = PAPER → PAPER                  · ตัดทันที หน้าใหม่เลื่อนขึ้น 12 px ใน 6 เฟรม
   จังหวะฝั่งมืด = โน้ตแปดของ 97 BPM (309.3 ms) — Head ตอบ 14 ก.ย.: ในหลุมล็อกโน้ตแปดไม่ขอยกเว้น · ยกเพดานเฉพาะ pit-enter/pit-exit
   ฉากเข้า/ออกหลุม 1113 ms (สมุด 186 + dither 3 ขั้น × 309) · paper 100 ms · dither = mask-image กระเบื้อง Bayer (ฝังเป็น data: ในไฟล์นี้ · ต้นทาง masks/) · ไม่มี opacity · ฝั่งมืดไม่มี scale
   ไม่รองรับ view transition = เปลี่ยนหน้าปกติ (ไฟล์นี้ไม่มีผลอะไร) */

/* หน้ากาก dither ฝังเป็น data: URI — ไฟล์แยกโหลดไม่ทันเฟรมแรกของหน้าใหม่ (ตรวจหักล้าง 14 ก.ย. · README) */
/* BEGIN masks (make_masks.py เขียน · ห้ามแก้มือ) */
:root {
  --tt-dither-00: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAD0lEQVR42mNgGAUMDAwMAAEIAAEoUqMqAAAAAElFTkSuQmCC");
  --tt-dither-25: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGUlEQVR42mNgYGD4D8UwgMJnYqALGGg3AAC+Jwf9Va6fWgAAAABJRU5ErkJggg==");
  --tt-dither-50: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIklEQVR42mNgYGD4D8UwgMJnYiAAGNF0Iov9J8oEhkHgBgB/+QwBhSssJAAAAABJRU5ErkJggg==");
  --tt-dither-75: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIElEQVR42mNkYGD4z4AHMDEQAIxI7P9oYv+JNmGg3QAASYUGCW3NoCoAAAAASUVORK5CYII=");
}
/* END masks */

@view-transition { navigation: auto; }

/* พื้นหลังช่วงเปลี่ยน = ดำ px-0 — ทางเข้า/ออกหลุมผ่านความมืดเสมอ */
html:active-view-transition-type(pit-enter)::view-transition,
html:active-view-transition-type(pit-exit)::view-transition { background: #000000; }

html:active-view-transition-type(pit-enter)::view-transition-old(root),
html:active-view-transition-type(pit-enter)::view-transition-new(root),
html:active-view-transition-type(pit-exit)::view-transition-old(root),
html:active-view-transition-type(pit-exit)::view-transition-new(root) {
  animation-duration: 1113ms;
  animation-fill-mode: both;
  mix-blend-mode: normal;
  -webkit-mask-size: 8px 8px; mask-size: 8px 8px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
}

/* ---- B · pit-enter ---- */
/* หน้า PAPER ปิดเข้าหาสันกลาง 0–186 ms (ฝั่ง PAPER โค้งนุ่มได้ · 11 เฟรม · ไม่ล็อกจังหวะ) */
html:active-view-transition-type(pit-enter)::view-transition-old(root) { animation-name: tt-book-close; }
/* ห้องแข่ง dither ขึ้น 25 → 50 → 75 → เต็ม ทีละโน้ตแปด (186 · 495 · 804 · 1113 ms) */
html:active-view-transition-type(pit-enter)::view-transition-new(root) { animation-name: tt-dither-in; animation-timing-function: linear; }

/* ---- A / C · pit-exit ---- */
/* หน้ามืด dither หาย 75 → 50 → 25 → 0 ทีละโน้ตแปด (0 · 309 · 618 · 927 ms) */
html:active-view-transition-type(pit-exit)::view-transition-old(root) { animation-name: tt-dither-out; animation-timing-function: linear; }
/* หน้า PAPER กางออกจากสันกลาง 927–1113 ms */
html:active-view-transition-type(pit-exit)::view-transition-new(root) { animation-name: tt-book-open; }

/* ---- paper · PAPER → PAPER (≤ 9 เฟรม) ---- */
html:active-view-transition-type(paper)::view-transition-old(root) { animation: none; display: none; }
html:active-view-transition-type(paper)::view-transition-new(root) { animation: tt-paper-in 100ms cubic-bezier(.22, 1, .36, 1) both; }

/* ลดการเคลื่อนไหว = ตัดทันทีทุกชนิด */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ===== keyframes ===== */
/* สมุด: รูปหกจุด ขอบนอกบน · สันบน · ขอบนอกบน · ขอบนอกล่าง · สันล่าง · ขอบนอกล่าง
   ขอบนอกเตี้ยลงนิดตอนใกล้สัน = ปกหน้าหันเข้าหาคนดู (มุมมอง) โดยไม่ต้อง scale/3D */
@keyframes tt-book-close {
  0%     { clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); animation-timing-function: cubic-bezier(.64, 0, .78, 0); }
  16.7%  { clip-path: polygon(50% 6%, 50% 0%, 50% 6%, 50% 94%, 50% 100%, 50% 94%); }
  100%   { clip-path: polygon(50% 6%, 50% 0%, 50% 6%, 50% 94%, 50% 100%, 50% 94%); }
}
@keyframes tt-book-open {
  0%     { clip-path: polygon(50% 6%, 50% 0%, 50% 6%, 50% 94%, 50% 100%, 50% 94%); }
  83.3%  { clip-path: polygon(50% 6%, 50% 0%, 50% 6%, 50% 94%, 50% 100%, 50% 94%); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  100%   { clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
}
/* mask-image สลับค่าไม่ต่อเนื่อง — คู่ keyframe ที่ห่างกัน 0.1% ทำให้เปลี่ยนตรงขอบขั้นพอดี (ไม่ใช่กลางช่วง) */
@keyframes tt-dither-in {
  0%, 16.6%     { -webkit-mask-image: var(--tt-dither-00); mask-image: var(--tt-dither-00); }
  16.7%, 44.4%  { -webkit-mask-image: var(--tt-dither-25); mask-image: var(--tt-dither-25); }
  44.5%, 72.1%  { -webkit-mask-image: var(--tt-dither-50); mask-image: var(--tt-dither-50); }
  72.2%, 99.9%  { -webkit-mask-image: var(--tt-dither-75); mask-image: var(--tt-dither-75); }
  100%          { -webkit-mask-image: none; mask-image: none; }
}
@keyframes tt-dither-out {
  0%, 27.7%     { -webkit-mask-image: var(--tt-dither-75); mask-image: var(--tt-dither-75); }
  27.8%, 55.4%  { -webkit-mask-image: var(--tt-dither-50); mask-image: var(--tt-dither-50); }
  55.5%, 83.2%  { -webkit-mask-image: var(--tt-dither-25); mask-image: var(--tt-dither-25); }
  83.3%, 100%   { -webkit-mask-image: var(--tt-dither-00); mask-image: var(--tt-dither-00); }
}
@keyframes tt-paper-in {
  from { transform: translateY(12px); }
  to   { transform: none; }
}