/* PEGASUS UNION — reset + primitives ที่ทุก section ใช้ร่วมกัน */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--fg);background:var(--bg);line-height:1.65;
  overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);line-height:1.2;margin:0 0 var(--sp-4);font-weight:600}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--sp-4)}

/* layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3rem,10vw,6rem);position:relative}
.stack>*+*{margin-top:var(--sp-4)}

/* หมายเหตุ (ทดลองแล้ว-ไม่ใช้): ใส่ content-visibility:auto ที่ .section ไม่ได้
   เพราะ content-visibility บังคับ contain:layout|paint ซึ่งทำให้ section กลายเป็น
   stacking context ของตัวเอง → .wrap{z-index:3} ที่ css/starfield.css ใช้ยกเนื้อหา
   ให้อยู่เหนือ canvas ดาว จะถูกขังไว้ในนั้น ผลคือ "ดาวลอยทับหน้าการ์ด VJ"
   (ยืนยันด้วยภาพแล้ว) — จึงย้ายไปใส่ที่ .hero__sky ใน hero.css แทน
   ซึ่งเป็นชั้นที่มีอนิเมชันหนักจริง และเป็น stacking context อยู่แล้ว (z-index:-1) */

/* primitives */
/* พื้นการ์ด: เดิมใช้ backdrop-filter:blur(12px) ซึ่งต้องเบลอ "ทุกอย่างที่อยู่ข้างหลัง"
   ใหม่ทุกครั้งที่ฉากหลังขยับ — และฉากหลังของเว็บนี้คือ canvas ดาวที่วาดใหม่ตลอด
   ⇒ การ์ด VJ ทุกใบถูกเบลอใหม่ทุกเฟรม = ต้นเหตุหลักของอาการแลคตอนเลื่อนหน้า
   แทนที่ด้วยพื้นกึ่งทึบ: ซ้อน --surface สองชั้น (ใช้ token เดิม ไม่เพิ่มสีใหม่)
   ชมพู .72 → ~.92 ทึบ / น้ำเงิน .45 → ~.70 ทึบ ให้ความรู้สึก frosted เหมือนเดิม */
.card{
  background:linear-gradient(var(--surface),var(--surface)),var(--surface);
  border:1px solid var(--surface-brd);
  border-radius:var(--r-lg);padding:var(--sp-6);
  box-shadow:var(--shadow-sm);
}
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:.85em 1.6em;border-radius:var(--r-pill);font-weight:600;
  background:var(--accent);color:var(--peg-white);
  box-shadow:var(--shadow-md);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;
}
.btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08)}
.btn--gold{background:var(--grad-gold);color:var(--peg-ink);box-shadow:var(--shadow-gold)}
.btn--ghost{background:transparent;border:1.5px solid var(--accent);color:var(--accent);box-shadow:none}

.eyebrow{
  font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:var(--sp-2)
}
.gold-text{background:var(--grad-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* scroll reveal — main.js เติม .is-in ให้เมื่อเลื่อนถึง */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* a11y */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--peg-gold);outline-offset:3px;border-radius:6px}
/* ★★ animation-iteration-count:1 ขาดไม่ได้เด็ดขาด ★★
   บั๊กจริงจากการทดสอบบน iPhone (2026-10-05): เดิมมีแต่ animation-duration:.01ms
   ซึ่ง "ไม่ได้หยุด" animation ที่ตั้งเป็น infinite — มันแค่บีบให้ 1 รอบจบใน 0.01 ms
   แล้ววนรอบใหม่ทันที ⇒ ปราสาท/ออโรร่า/เมฆ/ดาว กระพริบรัวเป็นร้อยรอบต่อวินาที
   (ถ่ายเฟรมติดกันจากวิดีโอแล้ว สีท้องฟ้าเปลี่ยนทุกเฟรม)
   ⚠ แย่กว่าไม่รองรับ Reduce Motion เลย เพราะคนที่เปิดโหมดนี้มักเปิดเพราะไมเกรน
     หรือเวียนหัวจากการเคลื่อนไหว แล้วเราดันยิงภาพกระพริบใส่
   ⚠ นี่คือบั๊กของสูตรสำเร็จที่คัดลอกกันทั่วอินเทอร์เน็ต — ใครมาแก้บล็อกนี้
     อย่าลบบรรทัด iteration-count ทิ้งเด็ดขาด */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ตัวอักษรทองบนพื้นสว่าง: บังคับใช้เฉดเข้มเพื่อให้ contrast ผ่าน (ดู --grad-gold-text) */
.pk-creed__motto{background:var(--grad-gold-text)}