/* Scroll Presence Band
   แถบภาพเต็มความกว้างที่เลื่อนไปด้านข้างตามการเลื่อนหน้าลง จางที่ขอบทั้งสองด้าน

   ถอดมาจาก demo ที่ localhost:4199 (ต้นทางคือ "Our global presence" ของ iux.com/about)
   ไม่มี framework ไม่มี build step ทุกอย่างอยู่ใต้ .spb

   ── สิ่งที่เปลี่ยนจากต้นฉบับ ──────────────────────────────────────────────
   ค่าธีมชี้ไป token ของหน้าเราแทนค่าตายตัวของต้นฉบับ ซึ่งเป็นชุดพื้นเข้ม
   ส่วนเรขาคณิตและกลไกทั้งหมดคงไว้ตามเดิม เพราะนั่นคือส่วนที่วัดมาแล้ว

   --spb-grayscale ตั้ง 0 ไม่ใช่ 0.3 — รูปของเราคือรูปร้านอาหารจริง
   ทำให้ซีดลงคือการลดสิ่งที่รูปพวกนี้มีหน้าที่สื่อ (อาหารน่ากิน บรรยากาศร้าน)
   ต้นฉบับเป็นเว็บการเงินซึ่งรูปเป็นฉากหลัง ไม่ใช่ตัวสาระ */

.spb{
  --spb-ink:var(--ink);
  --spb-mute:var(--gray600);
  --spb-line:var(--line-strong);
  --spb-accent:var(--green);
  --spb-on-accent:var(--white);
  --spb-plate-ring:rgba(0,0,0,0.08);

  --spb-radius:var(--radius-xl);
  --spb-gap:var(--space-4);
  --spb-pad:var(--space-6);
  /* ── ทำไมความสูงเป็นตัวตั้ง ไม่ใช่ความกว้าง (1 ก.ย. 2569) ─────────────
     ตอนแถบถูกตรึงไว้กับจอ แผ่นที่สูงเกินจอแปลว่าคนถูกหยุดไว้หน้าภาพที่
     ขอบล่างโดนตัดทิ้ง ซึ่งแย่กว่าปล่อยให้ไหลผ่านไปเฉยๆ
     วัดที่ 1280x720 ซึ่งเป็นโน้ตบุ๊กที่เจอบ่อย — แผ่นสูง 610 ทำให้แถบ
     สูง 722 เกิน 696 ที่ตรึงได้ พอคุมด้วย 81vh เหลือ 583 แถบลงมาที่ 695

     ตัวเลขตัวแรกคือความสูงที่ได้จากความกว้างที่ตั้งใจไว้ ตามอัตราส่วน 3/4
       37vw x 4/3 = 49.3vw · 25vw -> 33.3vw · 22vw -> 29.3vw
     ค่าไหนน้อยกว่าชนะ · พอกลับมาเป็น 3/4 เพดาน 81vh แทบไม่ถูกใช้แล้ว
     (ที่ 1280x720 แผ่นสูง 375 ห่างจากเพดาน 583 อยู่มาก)
     แต่ยังเก็บไว้เป็นตัวกันจอเตี้ยผิดปกติ เช่นหน้าต่างสูง 400

     --spb-plate-max เดิมเป็น max-width 15rem ถอดออกแล้ว เพราะพอความกว้าง
     มาจากอัตราส่วน การไปคุม max-width จะทำให้อัตราส่วนเพี้ยน
     และค่าเดิมไม่เคยถูกใช้จริง — ที่ 375 แผ่นกว้าง 139 ไม่เคยแตะ 240 */
  /* ── มือถือ 4 ก.ย. 2569 · 37vw -> 84vw ─────────────────────────────
     เจ้าของบอกว่าบนมือถือรูปเล็กมาก อยากได้เกือบเต็มจอ
     วัดของเดิมที่ 375x812 ได้แผ่น 139x185 ซึ่งเล็กจริง

     84vw -> 88vw เจ้าของขอใหญ่กว่านั้นอีก (4 ก.ย. 2569 รอบสอง)
     ไม่ใช่ 100vw เพราะแถวมีระยะขอบ 24px อยู่แล้ว ที่ 88vw แผ่นแรกกิน
     24..354 เหลือให้แผ่นถัดไปโผล่แค่ 5px ที่ขอบขวา ซึ่งบางมาก
     ตัวที่โผล่นี้คือสิ่งเดียวที่บอกคนดูว่ายังมีรูปต่อไปทางขวา
     ถ้าจะขยายอีกควรลด --spb-pad ลงก่อน ไม่ใช่เพิ่ม vw ต่อ

     เพดานเป็น calc ไม่ใช่ 81vh เพราะตัวเลขจริงวัดได้แล้ว — ส่วนที่ไม่ใช่
     แผ่นในแถบสูง 104px พอดี (ระยะห่างบนล่างตอนตรึง 32x2 บวกระยะเหนือแถว 40)
     และ JS ยอมตรึงต่อเมื่อแถบเตี้ยกว่าจอ 24px ดังนั้นแผ่นต้องไม่เกิน
     ความสูงจอลบ 128 เผื่อไว้เป็น 136 กันเศษ

     ถ้าเกินเพดานนี้ JS จะเลิกตรึงแล้วถอยไปใช้การเลื่อนตามตำแหน่งบนจอ
     ซึ่งคือพฤติกรรมที่แก้ไปแล้วเมื่อ 1 ก.ย. เพราะรูปสุดท้ายมาถึงตอนแถบ
     แทบพ้นจอไปแล้ว — ที่ 375x667 (iPhone SE) แผ่น 420 ยังต่ำกว่าเพดาน 531

     svh ไม่ใช่ vh เพราะบนมือถือ vh คือความสูงตอนซ่อนแถบที่อยู่เบราว์เซอร์
     ซึ่งใหญ่กว่าที่เห็นจริงตอนแถบยังอยู่ จะทำให้คำนวณเกิน
     บรรทัด vh ข้างบนไว้ให้เบราว์เซอร์ที่ยังไม่รู้จัก svh */
  --spb-plate-h:min(117.3vw, calc(100vh - 136px));
  --spb-plate-h:min(117.3vw, calc(100svh - 136px));
  /* ประวัติของค่านี้ 1 ก.ย. 2569
     3/4 -> 9/19.5 ตามที่ขอให้ใกล้อัตราส่วนจอมือถือ (375x812 ของ iPhone X)
     -> กลับมา 3/4 เพราะเห็นของจริงแล้วสูงเกินไป
     ที่ 1280 แผ่นเคยสูง 611 ตอนนี้ 376 */
  --spb-ratio:3 / 4;
  --spb-grayscale:0;

  --spb-reveal-duration:var(--dur-reveal);
  --spb-reveal-stagger:0.1s;
  --spb-ease:var(--ease-lift);

  /* เต็มขอบจอโดยการวาง .spb ไว้นอก .wrap ในตัว HTML ไม่ใช่ด้วย 100vw
     100vw นับรวมแถบเลื่อนด้วย จะทำให้ทุกหน้าบนเดสก์ท็อปมีแถบเลื่อนแนวนอนโผล่มา
     ซึ่งเป็นกับดักที่ต้นฉบับเตือนไว้เอง

     overflow:hidden ยังจำเป็น เป็นตัวตัดแถวไม่ให้ดันหน้าให้กว้างขึ้น */
  overflow:hidden;
  padding:var(--space-16) 0;
}
@media (min-width:768px){
  /* 18vw -> 22vw พร้อมกับย้ายแถบออกมาเต็มขอบจอ (1 ก.ย. 2569)

     เต็มขอบจออย่างเดียวไม่พอ และจะทำให้เอฟเฟกต์หายไปเลย
     แผ่นภาพผูกความกว้างกับ vw พอกล่องกว้างขึ้น แผ่นไม่ได้กว้างตาม
     แต่ที่ว่างเพิ่ม ระยะที่เหลือให้เลื่อนจึงหด วัดที่ 18vw ได้

       จอ 1280 เลื่อนได้ 48px · 1440 ได้ 32px · 1920 ได้ -16px คือไม่เลื่อนเลย

     ที่ 22vw ระยะกลับมาราว 300px เท่าของเดิม และสม่ำเสมอทุกขนาดจอ
     ซึ่งดีกว่าเดิมที่จอ 1280 เลื่อน 148 แต่จอ 1920 เลื่อน 724
     คือคนละประสบการณ์กัน */
  .spb{ --spb-gap:var(--space-6); --spb-pad:var(--space-10);
        --spb-plate-h:min(29.3vw, 81vh); padding:var(--space-20) 0; }
}
@media (min-width:640px) and (max-width:767.98px){ .spb{ --spb-plate-h:min(33.3vw, 81vh); } }

/* ── ตรึงแถบไว้กับจอระหว่างที่ภาพเลื่อน (1 ก.ย. 2569) ────────────────────
   ก่อนหน้านี้แถบเลื่อนตามตำแหน่งของตัวเองบนจอ วัดที่ 1280x900 ได้ว่า
   มันเลื่อนแนวนอนได้ 264px โดยกระจายไปตลอด 1,200px ของการเลื่อนหน้า
   และไปจบตอนขอบบนของแถบพ้นขอบจอขึ้นไปแล้ว 500px คือเหลือให้เห็น
   110px จาก 610 — รูปสุดท้ายมาถึงตอนที่แถบแทบไม่อยู่บนจอแล้ว

   ทำไมแก้ด้วยการปรับตัวเลขเฉยๆ ไม่ได้ — ถ้าจะให้จบตอนแถบยังเห็นเต็ม
   ช่วงที่ใช้ได้คือตั้งแต่ขอบล่างแถบแตะก้นจอ จนขอบบนแตะยอดจอ
   ที่ 1280x900 ช่วงนั้นยาวแค่ 290px ซึ่งสั้นกว่าเดิมสี่เท่า คือยิ่งเร็วขึ้น
   จะได้ทั้งช้าลงและจบตอนยังเห็น ต้องหยุดหน้าไว้ ไม่มีทางอื่น

   ความสูงของ .spb-pin กับตำแหน่ง top ของ .spb-stick ตั้งจาก JS
   เพราะทั้งคู่ขึ้นกับความสูงจริงของแถบและของจอ ซึ่ง CSS วัดเองไม่ได้
   ถ้า JS ไม่ทำงาน สองคลาสนี้ไม่มีผลอะไรเลย แถบก็ไหลไปตามหน้าตามปกติ */
.spb-stick{ position:sticky; }

/* ตอนตรึง ระยะห่างบนล่างมาจากที่ว่างของจอแล้ว ไม่ต้องเผื่อซ้ำ
   ตอนแผ่นยังเป็นอัตราส่วนจอมือถือ บรรทัดนี้คือสิ่งที่ทำให้จอ 1920x1080
   ยังตรึงได้ (แถบ 1,123 เกิน 1,080 ลดแล้วเหลือ 1,027)
   พอกลับมาเป็น 3/4 แถบเตี้ยลงมากจนไม่ต้องพึ่งอีกแล้ว แต่ยังควรตัดอยู่ดี
   เพราะระยะห่างซ้อนกันสองชั้นทำให้แถบลอยกลางจอโดยไม่มีเหตุผล */
.spb-pin.is-pinned .spb{ padding:var(--space-8) 0; }

/* ── แถบ ─────────────────────────────────────────────────────────────────
   ต้นฉบับมี mask ไล่จางที่ขอบสองด้าน เจ้าของสั่งเอาออก 1 ก.ย. 2569
   overflow:hidden ยังต้องอยู่ เพราะเป็นตัวตัดแถวไม่ให้ดันหน้าให้กว้างขึ้น
   ไม่ใช่เรื่องความสวยงาม ถ้าถอดออกด้วยจะเกิดแถบเลื่อนแนวนอนทั้งหน้า */
.spb__mask{ margin-top:var(--space-10); overflow:hidden; }
@media (min-width:768px){ .spb__mask{ margin-top:var(--space-12); } }

.spb__track{
  display:flex; gap:var(--spb-gap); padding-inline:var(--spb-pad);
  margin:0; list-style:none; will-change:transform; backface-visibility:hidden;
}
.spb__item{ flex-shrink:0; }

/* .spb__plate เป็น <picture> แล้ว ไม่ใช่ <div> ที่มี background (2 ก.ย. 2569)
   ดูเหตุผลในคอมเมนต์เหนือแถบใน index.html
   <picture> เป็น inline โดยปริยาย ต้องสั่ง block เอง ไม่งั้นจะมีช่องว่าง
   ใต้รูปจากเส้นฐานของบรรทัด */
.spb__plate{
  aspect-ratio:var(--spb-ratio); height:var(--spb-plate-h); width:auto;
  border-radius:var(--spb-radius); display:block; position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--spb-plate-ring), var(--lift-1);
}
/* รูปเต็มกล่องเสมอ ไม่ว่าสัดส่วนไฟล์จริงจะเป็นเท่าไร — ไฟล์ชุดนี้มีทั้ง
   900x599 และ 900x675 ปนกัน object-fit:cover จึงเป็นตัวจัดให้ตรงกันหมด */
.spb__photo{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter:grayscale(var(--spb-grayscale));
}


/* ── reveal ───────────────────────────────────────────────────────────────
   ต้นฉบับซ่อนด้วย opacity:0 เป็นค่าตั้งต้น แล้วรอ JS มาเปิด
   หน้านี้ใช้กฎตรงข้ามมาตั้งแต่ต้น — เนื้อหาต้องเห็นได้เป็นค่าตั้งต้น
   สถานะซ่อนมีผลเฉพาะตอนที่ .js ติดอยู่บน <html> ซึ่งแปลว่า JS ยืนยันแล้วว่า
   มันจะมาเปิดให้เอง และมีตัวจับเวลา 2 วินาทีถอดคลาสออกถ้าไม่มีใครยืนยัน

   ถ้าไม่ทำแบบนี้ รูปทั้งห้าใบจะหายไปถาวรเมื่อ IntersectionObserver ไม่ยิง
   ด้วยเหตุใดก็ตาม ซึ่งเป็นบั๊กที่หน้านี้เคยมีมาแล้วกับ .reveal 32 บล็อก */
html.js .spb [data-spb-reveal]{
  opacity:0; transform:translateY(20px); filter:blur(8px);
  transition:opacity var(--spb-reveal-duration) var(--spb-ease),
             transform var(--spb-reveal-duration) var(--spb-ease),
             filter var(--spb-reveal-duration) var(--spb-ease);
}
html.js .spb [data-spb-reveal].is-shown{ opacity:1; transform:translateY(0); filter:blur(0); }

/* JS ก็ข้ามการเลื่อนอยู่แล้วเมื่อผู้ใช้ขอลดการเคลื่อนไหว ตรงนี้รับส่วน reveal */
@media (prefers-reduced-motion: reduce){
  html.js .spb [data-spb-reveal]{ opacity:1; transform:none; filter:none; transition:none; }
}