/* ==========================================================
   backdrop.css — พื้นหลังของ "ทั้งหน้า" ชั้นเดียว

   ทำไมต้องมีไฟล์นี้
   เดิมแต่ละ section ทาสีพื้นของตัวเอง (pk-vjs / pk-about ใช้ --grad-pink,
   pk-recruit ใช้สีทึบ, blue-sec ใช้ radial+grad-blue ซ้ำทุกอัน)
   gradient จึง "เริ่มใหม่" ที่ขอบบนของทุก section ผลคือเลื่อนหน้าแล้วเห็น
   เป็นแผ่นๆ ตัดกัน โดยเฉพาะรอยต่อ pk-vjs -> pk-recruit ที่ไล่ไปถึงม่วง
   ลาเวนเดอร์แล้วตัดกลับเป็นชมพูอ่อนทึบทันที

   วิธีแก้: ยกพื้นหลังออกมาไว้ที่ body ชั้นเดียว ไล่ยาวตลอดความสูงเอกสาร
   แล้วทำให้ section ทุกอันโปร่งใส (ดู pink.css / blue.css)

   ⚠ สีทุกค่าต้องมาจากตัวแปรใน tokens.css เท่านั้น ห้าม hex ตรงๆ
   ⚠ ไฟล์นี้ต้องโหลด "หลัง" base.css เพราะทับ background ของ body
     (ลำดับ <link> อยู่ใน build.sh ไม่ใช่ index.html — index.html ถูก generate)
   ========================================================== */

/* --grad-page = เส้นทางสีของทั้งหน้า จากบนลงล่าง
   เดินทางเดียวกับ --grad-pink/--grad-blue เดิม แต่เป็นแนวตั้งและยาวทั้งหน้า
   จึงไม่มีจุดไหนที่สีกระโดด

   นิยามไว้ที่นี่ไม่ใช่ tokens.css เพราะ tokens.css เป็นของ PM
   ถ้า PM อยากย้ายเข้า tokens.css ย้ายได้เลย ไม่มีอะไรผูกกับไฟล์นี้ */
:root {
  --grad-page: linear-gradient(
    180deg,
    var(--pink-blush) 0%,
    var(--pink-soft) 46%,
    var(--pink-lavender) 100%
  );
  /* แสงนวลบนสุดของหน้า — ย้ายมาจาก radial ที่เคยซ้ำอยู่ทุก blue-sec
     โซนชมพูไม่ต้องมี (hero มีออโรร่าของตัวเองอยู่แล้ว) */
  --glow-page: none;
}


/* ==========================================================
   โทน "พื้นดิน" ของก้นหน้า — ปลายทางของการเดินทางจากฟ้าลงสู่ดิน

   ★ ทำไม token พวกนี้อยู่ที่นี่ ไม่ใช่ tokens.css
   tokens.css เป็นของ PM ห้ามแก้ และ "ไม่มี token สีเขียว/ดินเลยสักตัว"
   (เช็คแล้ว — มีแต่ชมพู/น้ำเงิน/ทอง) ที่นี่มี precedent อยู่แล้วคือ --grad-page
   ซึ่งก็นิยามในไฟล์นี้ด้วยเหตุผลเดียวกัน ถ้า PM อยากย้ายทั้งบล็อกนี้เข้า
   tokens.css ย้ายได้เลย ไม่มีอะไรในไฟล์นี้ผูกกับตำแหน่งของมัน

   ★ --ground-moss คือ hex ดิบตัวเดียวที่ไฟล์นี้มี และเป็นข้อยกเว้นที่จำเป็น
   กฎข้อ 1 ของโปรเจกต์ห้าม hex ในไฟล์ section — แต่ "เมล็ดสี" ตัวนี้ไม่มีอยู่ใน
   tokens.css ให้หยิบมาใช้ จะสร้างเขียวจาก token ที่มี (ชมพู/น้ำเงิน/ทอง) ไม่ได้เลย
   เพราะ color-mix ผสมได้แค่สีที่มีอยู่ ไม่ได้สร้าง hue ใหม่
   เลือกเฉดนี้เพราะเป็นเขียวมอสส์ที่หมองและคล้ำอยู่แล้ว (saturation ต่ำ)
   เอาไปผสมกับสีโซนทีละน้อยก็ยังไม่ "เขียวโดด" ถ้าใช้เขียวสดจะพังทันที

   ★ สัดส่วนเขียว 28% ถือเป็นเพดาน ไม่ใช่ค่าตั้งต้นให้ไล่เพิ่ม
   ผลที่ต้องการคือ "ชมพูอมเขียวมอสส์จางๆ" / "น้ำเงินอมเขียวเข้มจางๆ"
   ถ้าใครรู้สึกว่าเขียวเกิน ให้ลดเลขนี้ลง ห้ามเพิ่ม
   ========================================================== */
:root {
  --ground-moss: #6E7A4B;

  /* ชมพู 3 ชั้น (color-mix ผสมได้ทีละ 2 สี จึงต้องซ้อน)
       1. ลาเวนเดอร์ (สีก้นหน้าเดิม) + ชมพูกลาง  → ยังอ่านว่าเป็นโซนชมพู
       2. + ink-soft                            → "ลงต่ำ" ต้องมืดลง ไม่ใช่แค่เปลี่ยนสี
          ขั้นนี้สำคัญกว่าที่คิด: ลองใส่แต่มอสส์อย่างเดียวแล้วค่าความสว่าง
          ใกล้ลาเวนเดอร์เกินไป ตาอ่านว่า "ลาเวนเดอร์ซีดๆ" ไม่ใช่ "พื้นดิน"
       3. + มอสส์ 26%                           → กลิ่นเขียวบางๆ
     ผลลัพธ์ ≈ #A1819F (กุหลาบแห้งอมเทาเขียว) */
  --ground-pink: color-mix(in srgb, var(--ground-moss) 26%,
                   color-mix(in srgb,
                     color-mix(in srgb, var(--pink-lavender) 70%, var(--pink-mid))
                     70%, var(--peg-ink-soft)));

  /* น้ำเงิน: ต้องเข้มลงด้วย ไม่ใช่แค่เขียวขึ้น — "ดิน" ที่สว่างกว่าท้องฟ้า
     จะอ่านเป็นแสงไม่ใช่พื้น จึงดึง royal เข้าหา navy-deep ก่อนผสมมอสส์
     ≈ #2B406A */
  --ground-blue: color-mix(in srgb, var(--ground-moss) 28%,
                   color-mix(in srgb, var(--blue-royal) 55%, var(--blue-navy-deep)));

  /* semantic ตัวเดียวที่สลับตามโซน — ของที่เหลือ (รวมถึง scroll-fx.css)
     อ้างแต่ตัวนี้ เพิ่มโซนใหม่วันหลังก็แก้ที่เดียว */
  --ground-tint: var(--ground-pink);
}

[data-zone="blue"] { --ground-tint: var(--ground-blue); }

/* แผ่นดินของก้นหน้า: โปร่งใสสนิทที่ขอบบน แล้วทึบขึ้นจนเต็มที่ขอบล่างของเอกสาร
   ครึ่งบนของแถบแทบไม่มีอะไร (ถึง 40% ยังแค่ 24%) ตั้งใจ เพื่อไม่ให้เกิด
   เส้นตัดใหม่ตรงที่แถบนี้เริ่ม — ของที่เราเพิ่งไล่แก้ไปทั้งหน้า

   ⚠ สต็อป 88% เป็นค่าที่วัดจากหน้าจริง ไม่ใช่ค่าสวยๆ
   .pegfoot เริ่มที่ 95% ของความสูงเอกสาร และมีแผ่นรอง --surface (ขาว 72%)
   ทับพื้นหลังของตัวเองอยู่ ⇒ อะไรที่ไปทึบเอาข้างใน footer จะถูกฟอกจนไม่เห็น
   สีดินจึงต้องขึ้นมาเกือบเต็มที่ "ก่อน" ถึง footer ไม่งั้นงานทั้งก้อนหายไปเฉยๆ
   (เจอตอนทดสอบจริง: ตอนแรกวางสต็อปหนาไว้ใน footer แล้วแทบไม่เห็นอะไรเลย) */
:root {
  --grad-ground: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--ground-tint) 24%, transparent) 40%,
    color-mix(in srgb, var(--ground-tint) 62%, transparent) 72%,
    color-mix(in srgb, var(--ground-tint) 92%, transparent) 88%,
    var(--ground-tint) 100%
  );
}

[data-zone="blue"] {
  --grad-page: linear-gradient(
    180deg,
    var(--blue-navy-deep) 0%,
    var(--blue-navy) 42%,
    var(--blue-royal) 100%
  );
  /* เดิม blue.css วาด radial นี้ซ้ำในทุก section ทำให้แสงกลับมาเป็นจุดๆ
     ย้ายมาไว้ที่หน้าชั้นเดียว แสงจึงมาจากด้านบนของหน้าครั้งเดียว */
  --glow-page: radial-gradient(
    120% 38% at 50% 0%,
    color-mix(in srgb, var(--blue-royal) 42%, transparent) 0%,
    transparent 70%
  );
}

/* html ต้องมีสีพื้นของตัวเอง เพื่อ "หยุด" การ propagate background ของ body
   ขึ้นไปที่ canvas ของเบราว์เซอร์
   ถ้าไม่ตั้ง เบราว์เซอร์จะเอา background ของ body ไปวาดเต็ม canvas แทน
   แล้วขนาดของ gradient จะไม่ตรงกับกล่องของ body (ไล่สีเพี้ยนเวลาหน้ายาว)
   ค่านี้ยังกันขอบขาวตอนดึงหน้าเกินสุด (overscroll) บนมือถือด้วย */
html {
  background-color: var(--bg);
}

/* gradient กางเต็มกล่องของ body = เต็มความสูงเอกสารพอดี
   background-size: 100% 100% + no-repeat คือหัวใจ — ถ้าปล่อยค่า default
   gradient จะสูงเท่า viewport แล้วปูซ้ำ กลายเป็นลายเป็นแถบทันที */
/* ⚠ ทำไม "แผ่นดิน" เป็น background layer แยก ไม่ใช่สต็อปที่ 4 ของ --grad-page
   บรีฟขอให้ "ยืดปลายของ --grad-page" แต่ขอไว้ด้วยว่าสีช่วงกลางหน้าต้องไม่เพี้ยน
   สองข้อนี้ขัดกันเอง: --grad-page กางเต็มกล่อง body ถ้าเพิ่มสีดินที่ 100%
   ก็ต้องเลื่อนสต็อป --pink-lavender ขึ้นมา (เช่น 86%) ซึ่งทำให้ทุกจุดระหว่าง
   46%–86% เดินทางเข้าหาลาเวนเดอร์เร็วกว่าเดิม (ที่ 70% ของหน้า ลาเวนเดอร์
   จาก 44% กระโดดเป็น 60%) = ช่วงกลาง-ล่างเพี้ยนจริง วัดได้
   ชั้นแยกที่ยึดกับ "ขอบล่างของเอกสาร" ให้ผลตาที่ต้องการเหมือนกันทุกประการ
   แต่ --grad-page ไม่ถูกแตะเลยแม้แต่สต็อปเดียว ⇒ ตั้งแต่บนจนถึง ~85% ของหน้า
   สีเหมือนก่อนแก้ 100%
   ของแถม: ความสูงของแถบดินคุมเป็น vh ได้ตรงๆ จึงไม่ผูกกับความสูงเอกสาร
   (ซึ่งเปลี่ยนตามภาษา/โซน/จำนวน VJ) — ถ้าเป็น % ของ gradient จะเปลี่ยนตามไปด้วย

   ลำดับใน list = ตัวแรกอยู่ชั้นบนสุด
   glow (แสงบนหัวหน้า) → ground (ดินก้นหน้า) → grad-page (ไล่สีพื้นฐาน) */
body {
  min-height: 100svh;
  background-image: var(--glow-page), var(--grad-ground), var(--grad-page);
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* 220vh = ความสูงของแถบดิน, `0 100%` = ยึดก้นเอกสาร ไม่ใช่ก้นจอ
     จึงเห็นดินเฉพาะตอนเลื่อนใกล้สุดหน้า ไม่ใช่ตามจอมาตลอด
     220vh ≈ 2.7 จอ บนมือถือ = เริ่มเห็นดินราว 78% ของหน้า ซึ่งคือช่วง
     section สุดท้าย (#about / #perks) กำลังขึ้นจอพอดี — เป็นระยะที่พอให้
     ตารู้สึกว่า "กำลังร่อนลง" ถ้าสั้นกว่านี้จะกลายเป็นแผ่นสีโผล่มาทีเดียว */
  background-size: 100% 100vh, 100% 220vh, 100% 100%;
  background-position: 0 0, 0 100%, 0 0;
  background-attachment: scroll, scroll, scroll;
}

/* ==========================================================
   🐛 ทับ transition ของ body ที่ css/base.css บรรทัด 8

   base.css ตั้ง `transition: background .6s, color .6s` ไว้ที่ body
   ทั้ง background และ color รับค่ามาจากตัวแปรที่สลับตามโซน (--bg / --fg)
   เมื่อตัวแปรเปลี่ยน เบราว์เซอร์ "ล็อก" ค่าไว้ที่ค่าแรกที่เคยวาด แล้วไม่อัปเดตอีกเลย

   วัดจากหน้าจริง (รอ 2.2 วินาที ซึ่งเกินระยะ transition .6s ไปมาก):
     โหลดมาเป็นชมพู แล้วกดไปน้ำเงิน
       --fg เปลี่ยนเป็น #EAF4FF ถูกต้อง
       แต่ computed color ของ body ยังเป็น rgb(26,16,48) = สีเข้มของโซนชมพู
     โหลดมาเป็นน้ำเงิน แล้วกดไปชมพู
       --fg เปลี่ยนเป็น #1A1030 ถูกต้อง
       แต่ computed color ยังเป็น rgb(234,244,255) = สีอ่อนของโซนน้ำเงิน
   พิสูจน์ว่า transition เป็นตัวการ: ปิด transition แล้ววัดซ้ำ -> ค่ากลับมาถูกทันที

   ผลกระทบจริง: ข้อความที่ "สืบทอดสี" จาก body (เช่น .pegfoot__copy ท้ายเว็บ)
   จะค้างเป็นสีของโซนก่อนหน้า พอสลับมาโซนชมพูจะกลายเป็นตัวหนังสือสีอ่อน
   บนพื้นชมพูอ่อน = แทบมองไม่เห็น

   ทำไมถึงไม่ค่อยมีใครเจอ: ข้อความส่วนใหญ่ตั้ง color ของตัวเอง เลยไม่สืบทอด
   และ background-color ที่ค้างก็ถูก --grad-page ทับอยู่แล้ว

   ทำไมแก้ที่นี่ไม่ใช่ base.css: base.css เป็นของ PM ห้ามแก้
   ไฟล์นี้โหลดหลัง base.css จึงทับได้ตรงๆ

   ผลข้างเคียงที่ยอมรับ: สลับโซนแล้วสีข้อความเปลี่ยนทันทีไม่ค่อยๆ ไล่
   ซึ่งไม่เป็นไรเพราะ css/zone-fx.css มีม่านเปลี่ยนผ่านคลุมจังหวะนี้อยู่แล้ว
   และพื้นหลังหน้า (--grad-page) ก็เปลี่ยนทันทีอยู่แล้วเพราะ background-image
   transition ไม่ได้ตั้งแต่ต้น
   ========================================================== */
body {
  transition: none;
}