/* ============================================================
   PEGASUS UNION — starfield.css
   ชั้นวางของ canvas ท้องฟ้าดาว (js/starfield.js)

   *** ห้ามเขียน hex ตรงๆ ในไฟล์นี้ — สีดาวทั้งหมดอ่านจาก tokens.css ผ่าน JS ***

   แนวคิดการวางชั้น (สำคัญ):
   section ในเว็บนี้มีพื้นหลังทึบของตัวเอง (--grad-pink / --grad-blue / --pink-blush)
   ถ้าวาง canvas ไว้ "หลังทุกอย่าง" จริงๆ ดาวจะถูกพื้น section ทับจนมองไม่เห็นเลย
   จึงวาง canvas ให้อยู่ "ระหว่าง" พื้นหลัง section กับเนื้อหา section แทน:

     [พื้นหลัง body/section]  →  [canvas ดาว z-index:2]  →  [เนื้อหาใน .wrap z-index:3]

   ผลลัพธ์: ดาวลอยอยู่บนท้องฟ้าของแต่ละโซนจริงๆ แต่ไม่เคยทับข้อความ/การ์ด
   (ไม่ต้องแก้ไฟล์ section เลย — ใช้แค่ลำดับ z-index)
   ============================================================ */

.peg-starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ---- ยกเนื้อหาทุก section ขึ้นเหนือ canvas ----
   CLAUDE.md ข้อ 5: ทุก section ครอบเนื้อหาด้วย .wrap → ยกจุดเดียวครอบคลุมทั้งเว็บ
   .wrap ที่มี z-index จะกลายเป็น stacking context ด้วย จึงพา z-index ภายใน
   (การ์ด VJ / รูป / ป้าย) ขึ้นมาเหนือดาวทั้งก้อน ไม่มีอะไรหลุดไปอยู่ใต้ดาว */
.section > .wrap,
.pegfoot > .wrap {
  position: relative;
  z-index: 3;
}

/* ---- HERO ----
   .hero ใช้ isolation:isolate ซึ่งจะ "ขัง" ทั้ง hero ไว้ใต้ canvas รวมถึงตัวหนังสือ
   ปลด isolation เพื่อให้ canvas แทรกได้ — ฉากหลัง hero ทั้งชุด (ท้องฟ้า/ออโรร่า/
   ดาว 9 ดวง/ปราสาท/เมฆ) อยู่ใน .hero__sky ที่ z-index:-1 ซึ่งเป็น stacking context
   อยู่แล้ว จึงยังคงอยู่ใต้ canvas ตามเดิม และยังถูก overflow:hidden ของ .hero ตัดขอบปกติ */
.hero {
  isolation: auto;
}

/* ปุ่มเลื่อนลงของ hero อยู่นอก .wrap — ยกขึ้นเหนือ canvas ด้วย */
.hero > .hero__scroll {
  z-index: 3;
}

/* ---- prefers-reduced-motion ----
   starfield.js จะวาดดาวนิ่งครั้งเดียว (ไม่อนิเมต ไม่มีเส้น ไม่มีดาวตก)
   หรี่ลงอีกนิดเพื่อให้เป็นแค่พื้นหลังเงียบๆ */
@media (prefers-reduced-motion: reduce) {
  .peg-starfield { opacity: .75; }
}