/* ============================================================
   PEGASUS UNION — Top bar / Hero / Footer
   สีทั้งหมดมาจาก css/tokens.css เท่านั้น (ห้าม hex ตรงๆ)
   Mobile-first: เริ่ม 360px → @media (min-width:768px)
   ============================================================ */

/* ---------------- TOP BAR ---------------- */
/* สีแถบบนแยกตามโซน ไม่ใช้ --surface ตรงๆ

   --surface ของโซนชมพูคือ rgba(255,255,255,.72) = ขาวเกือบทึบ
   พอเป็นแถบเต็มความกว้างพาดบนฉาก hero สีชมพู มันอ่านเป็น "แถบขาว" ที่ขัดกับ
   ฉากทั้งหมด (โซนน้ำเงินไม่มีปัญหานี้ เพราะ --surface ที่นั่นเป็นน้ำเงินโปร่ง)
   จึงให้โซนชมพูใช้สีชมพูอ่อนโปร่งแทน

   ห้ามไปแก้ --surface ที่ tokens.css เพราะการ์ด/ฟุตเตอร์ใช้ตัวเดียวกัน
   และการ์ดสีขาวคือสิ่งที่ต้องการ (การ์ดต้องเด่นจากพื้น แถบบนต้องกลืน)

   ค่า 62% ไม่ใช่ 74% เพราะแถบนี้ sticky เลื่อนทับพื้นที่ไล่สีไปถึงลาเวนเดอร์
   ถ้าทึบกว่านี้ ตอนเลื่อนลงล่างจะเห็นเป็นแถบชมพูลอยบนพื้นลาเวนเดอร์
   ที่ 62% + backdrop blur เดิม แถบจะดูดสีข้างหลังมาได้พอที่จะกลืนทั้งหน้า */
:root{
  --topbar-bg:  color-mix(in srgb,var(--pink-blush) 62%,transparent);
  --topbar-brd: color-mix(in srgb,var(--pink-soft) 55%,transparent);
}
[data-zone="blue"]{
  --topbar-bg:  var(--surface);
  --topbar-brd: var(--surface-brd);
}
.topbar{
  position:sticky;top:0;z-index:60;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--topbar-brd);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  /* ⛔ ห้ามใส่ transition ให้ background/border-color ของแถบนี้กลับมา

     เดิมมี transition:background .6s อยู่ ตอนที่ค่ามาจาก rgba() ล้วนมันทำงานได้
     แต่พอเปลี่ยนมาใช้ color-mix() ผ่านตัวแปร --topbar-bg สีจะ "ค้าง" ที่ค่าแรก
     ถาวร สลับโซนแล้วแถบบนไม่เปลี่ยนสีตาม (ทดสอบแล้ว รอ 3 วินาทีก็ไม่ขยับ
     และลองทำให้ปลายทางเป็น color-mix ทั้งคู่ก็ยังค้าง)
     ปิด transition แล้วสีถูกต้องทันทีทั้ง 2 โซน

     ผลข้างเคียงที่ยอมรับ: สลับโซนแล้วแถบบนเปลี่ยนสีทันทีไม่ค่อยๆ ไล่
     ซึ่งแทบไม่รู้สึก เพราะพื้นหลังหน้า (--grad-page) ก็เปลี่ยนทันทีเหมือนกัน
     (background-image ไม่เคย transition ได้อยู่แล้ว) */
}
/* 360px: แถวบน = โลโก้ + TH/EN, แถวล่าง = ปุ่มสลับโซนเต็มความกว้าง
   → เพิ่มปุ่มได้อีกโดยไม่ล้นจอ */
.topbar__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:var(--sp-2) var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--sp-2);
}

.brand{display:flex;align-items:center;gap:var(--sp-2);min-width:0;flex:1 1 auto}
.brand__mark{width:34px;height:34px;flex:none;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.brand__mark svg{width:100%;height:100%;display:block;overflow:visible}
.brand__mark--lg{width:56px;height:56px}
.brand__text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand__text strong{
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.08em;color:var(--fg);white-space:nowrap;
}
.brand__text small{
  font-size:.58rem;letter-spacing:.16em;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* กลุ่มปุ่มแบบ segmented (ใช้ร่วมโซน + ภาษา) */
.zoneswitch,.langswitch{
  display:flex;flex:none;gap:2px;padding:3px;
  border-radius:var(--r-pill);
  border:1px solid var(--surface-brd);
  background:var(--surface);
}
/* มือถือ: ปุ่มโซนลงแถวใหม่เต็มความกว้าง */
.zoneswitch{flex:1 0 100%;justify-content:center}

.zoneswitch__btn,.langswitch__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  padding:.42em .85em;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;color:var(--fg);
  white-space:nowrap;opacity:.62;
  transition:background .3s var(--ease),opacity .3s var(--ease),
             color .3s var(--ease),box-shadow .3s var(--ease);
}
.zoneswitch__btn{flex:1 1 0;min-width:0}

/* สลับภาษา — UI เปล่า รอ pass i18n */
.langswitch__btn{padding:.42em .7em;letter-spacing:.06em;min-width:2.6em}
.langswitch__btn[aria-pressed="true"]{
  opacity:1;background:var(--grad-gold);color:var(--peg-ink);
  box-shadow:var(--shadow-sm);
}
.langswitch__btn:hover{opacity:1}
.zoneswitch__btn[aria-pressed="true"]{
  opacity:1;background:var(--accent);color:var(--peg-white);
  box-shadow:var(--shadow-sm);
}
[data-zone="blue"] .zoneswitch__btn[aria-pressed="true"]{color:var(--blue-navy-deep)}
.zoneswitch__btn:hover{opacity:1}
.zoneswitch__dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  box-shadow:0 0 0 2px var(--surface);
}
.zoneswitch__dot--pink{background:var(--pink-primary)}
.zoneswitch__dot--blue{background:var(--blue-royal)}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,720px);
  min-height:min(88svh,720px);
  display:flex;align-items:flex-end;
  padding-block:clamp(3.5rem,14vw,7rem) clamp(2.5rem,9vw,5rem);
  text-align:center;
}

/* content-visibility:auto — เมื่อเลื่อนพ้น hero ไปแล้ว เบราว์เซอร์จะข้ามการวาด
   "ข้างใน" ชั้นฉากหลังทั้งหมด (ออโรร่า 2 วง, ดาว 9 ดวง, ปราสาท, เมฆ 4 ก้อน)
   → อนิเมชันที่วิ่งตลอดเวลาเหล่านี้หยุดกินแรงทันทีที่มองไม่เห็น
   ปลอดภัยเรื่องเลย์เอาต์: element นี้เป็น position:absolute;inset:0 ขนาดจึงมาจาก
   .hero ไม่ได้มาจากเนื้อหาข้างใน (ไม่ต้องใช้ contain-intrinsic-size, ไม่มี scroll กระโดด)
   และเป็น stacking context อยู่แล้ว (z-index:-1) จึงไม่กระทบชั้นของ canvas ดาว */
.hero__sky{
  position:absolute;inset:0;z-index:-1;background:var(--grad-pink);
  content-visibility:auto;
  /* ละลายขอบล่างของฉากท้องฟ้าให้กลืนเข้ากับพื้นหลังของทั้งหน้า (--grad-page)
     ทำไมต้อง mask ไม่ใช่จับสีให้ตรงกัน: gradient ของ .hero__sky เป็นแนวเฉียง
     135deg ตามกล่องของ hero ส่วนพื้นหน้าเป็นแนวตั้งตามความสูงเอกสาร
     สองอันนี้ไม่มีทางมีสีเท่ากันตลอดแนวขอบ การไล่ให้โปร่งใสจึงเป็นทางเดียว
     ที่ต่อสนิทโดยไม่ต้องผูกกับความสูงของ hero (ซึ่งเปลี่ยนตามจอและเนื้อหา)
     mask เป็นภาพนิ่ง วาดครั้งเดียว ไม่ใช่ filter ที่คิดใหม่ทุกเฟรม */
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
}
[data-zone="blue"] .hero__sky{background:var(--grad-blue)}
.hero__sky{transition:background .6s var(--ease)}

/* แสงออโรร่าฟุ้ง
   เดิมใช้ filter:blur(60px) บนวงกลมทึบขนาด ~520px สองวง "และวงนั้นขยับตลอดเวลา"
   → เบราว์เซอร์ต้องคำนวณ gaussian blur รัศมี 60px ใหม่ทุกเฟรม (แพงมากบน GPU มือถือ)
   ใหม่: ใช้ radial-gradient ที่ไล่จางออกจากจุดกึ่งกลางแทน — ได้ก้อนแสงฟุ้งหน้าตาเดียวกัน
   แต่แทบไม่มีค่าใช้จ่าย (เป็นแค่การเติมสี ไม่ใช่ post-process filter)
   ขยายกรอบขึ้นเล็กน้อยเพื่อชดเชยระยะที่ blur เคยฟุ้งเลยขอบวงออกไป */
.hero__aurora{
  position:absolute;border-radius:50%;opacity:.5;
  pointer-events:none;
}
.hero__aurora--a{
  width:82vw;height:82vw;max-width:610px;max-height:610px;
  top:-16%;left:-18%;
  /* ซ้อน 3 ชั้นเพื่อให้เส้นโค้งการจางใกล้เคียง gaussian — ชั้นเดียวจะเห็นขอบวงจางๆ */
  background:
    radial-gradient(closest-side circle, var(--accent) 0%, transparent 100%),
    radial-gradient(closest-side circle, var(--accent) 0%, transparent 84%),
    radial-gradient(closest-side circle, var(--accent) 0%, transparent 58%);
  animation:pegDrift 18s var(--ease) infinite alternate;
}
.hero__aurora--b{
  width:73vw;height:73vw;max-width:540px;max-height:540px;
  bottom:-14%;right:-16%;opacity:.32;
  background:
    radial-gradient(closest-side circle, var(--peg-gold) 0%, transparent 100%),
    radial-gradient(closest-side circle, var(--peg-gold) 0%, transparent 84%),
    radial-gradient(closest-side circle, var(--peg-gold) 0%, transparent 58%);
  animation:pegDrift 23s var(--ease) infinite alternate-reverse;
}
@keyframes pegDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(6%,4%,0) scale(1.14)}
}

/* ---- ดาว 9 ดวง ---- */
.hero__stars{position:absolute;inset:0;pointer-events:none;will-change:transform}
.pstar{
  position:absolute;display:block;
  width:var(--pstar-size,16px);aspect-ratio:1;
  background:var(--peg-gold-light);
  filter:drop-shadow(0 0 6px var(--peg-gold));
  clip-path:polygon(
    50% 0%, 60% 36%, 100% 50%, 60% 64%,
    50% 100%, 40% 64%, 0% 50%, 40% 36%);
  opacity:.9;
  animation:pegTwinkle var(--pstar-dur,4s) var(--ease) var(--pstar-delay,0s) infinite;
}
/* ตำแหน่ง + จังหวะกะพริบ/ลอยของแต่ละดวง (ไม่พร้อมกัน) */
.pstar[data-star="1"]{top: 9%;left: 8%;  --pstar-size:20px;--pstar-dur:3.4s;--pstar-delay:0s}
.pstar[data-star="2"]{top:16%;left:26%;  --pstar-size:12px;--pstar-dur:4.6s;--pstar-delay:.7s}
.pstar[data-star="3"]{top: 6%;left:47%;  --pstar-size:26px;--pstar-dur:5.2s;--pstar-delay:1.4s}
.pstar[data-star="4"]{top:20%;left:68%;  --pstar-size:14px;--pstar-dur:3.9s;--pstar-delay:.3s}
.pstar[data-star="5"]{top:11%;left:86%;  --pstar-size:18px;--pstar-dur:4.3s;--pstar-delay:2.1s}
.pstar[data-star="6"]{top:34%;left:15%;  --pstar-size:14px;--pstar-dur:5.8s;--pstar-delay:1.1s}
.pstar[data-star="7"]{top:30%;left:80%;  --pstar-size:22px;--pstar-dur:4.9s;--pstar-delay:2.6s}
.pstar[data-star="8"]{top:46%;left: 5%;  --pstar-size:11px;--pstar-dur:3.6s;--pstar-delay:1.9s}
.pstar[data-star="9"]{top:42%;left:93%;  --pstar-size:16px;--pstar-dur:6.2s;--pstar-delay:.5s}

@keyframes pegTwinkle{
  0%,100%{opacity:.35;transform:translate3d(0,0,0) scale(.72) rotate(0deg)}
  45%    {opacity:1;  transform:translate3d(0,-10px,0) scale(1.1) rotate(18deg)}
  70%    {opacity:.6; transform:translate3d(0,-4px,0)  scale(.92) rotate(6deg)}
}

/* ---- ปราสาทลอยฟ้า ---- */
.hero__castle{
  position:absolute;left:50%;bottom:16%;translate:-50% 0;
  width:min(128%,900px);pointer-events:none;will-change:transform;
  /* ลดความทึบลงจาก .55 -> .42 และไล่ให้ยอดปราสาทจางหายเข้าท้องฟ้า
     เหตุผล: ปราสาทเป็น "ฉากหลัง" แต่ของเดิมทึบพอที่จะไปแย่งสายตากับชื่อแบรนด์
     และยอดหอคอยตัดจบเป็นเส้นคมกลางฟ้า ทำให้ดูเหมือนสติกเกอร์แปะ
     mask ไล่จางทำให้ยอดละลายเข้าเมฆเหมือนปราสาทลอยอยู่ในหมอก */
  opacity:.42;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 100%);
}
/* ---- ปราสาทภาพวาด ----
   วางทับตำแหน่งเดียวกับปราสาท SVG แล้วซ่อน SVG ทิ้ง
   ทำไมเก็บ SVG ไว้ไม่ลบ: ถ้าไฟล์ภาพโหลดไม่ขึ้น (เน็ตพัง/path ผิดตอนย้ายโฮสต์)
   ฉากหลังจะว่างเปล่า เหลือ SVG ไว้เป็นตัวสำรองที่ไม่ต้องโหลดอะไรเพิ่ม */
.hero__castle-art{
  position:absolute;left:50%;bottom:8%;translate:-50% 0;
  width:min(118%,720px);aspect-ratio:1;pointer-events:none;
  will-change:transform;
  /* ภาพเป็นสี่เหลี่ยมมีฟ้าของตัวเอง ถ้าไม่ mask จะเห็นเป็นกรอบสี่เหลี่ยมชัดๆ
     ไล่จางทั้ง 4 ด้าน: บนจางมากเพื่อให้ยอดปราสาทละลายเข้าฟ้าจริงของหน้า
     ล่างจางเพื่อต่อกับพื้นหลังหน้า ข้างจางเพื่อซ่อนขอบซ้าย/ขวา
     ใช้ 2 mask ซ้อนกัน (แนวตั้ง x แนวนอน) แทน radial เดียว เพราะ radial
     จะกินยอดปราสาทตรงกลางบนหายไปด้วย */
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0%,#000 30%,#000 74%,transparent 98%),
    linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%);
          mask-image:
    linear-gradient(to bottom,transparent 0%,#000 30%,#000 74%,transparent 98%),
    linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  /* ลดความทึบลง เพราะข้อความ hero ทับอยู่ด้านบน — ปราสาทเป็นฉากหลัง
     ไม่ใช่ภาพประกอบหลัก ถ้าทึบเต็มชื่อแบรนด์สีทองจะอ่านยากบนยอดปราสาทสีทอง */
  /* ความทึบแยกตามโซน ไม่ใช่ค่าเดียว
     ภาพโซนน้ำเงินเป็นปราสาทสว่างบนฟ้าเข้ม คอนทราสต์ในตัวสูงอยู่แล้ว
     ถ้าทึบเต็มจะแย่งสายตาชื่อแบรนด์ จึงลดเหลือ .68
     ภาพโซนชมพูเป็นปราสาทขาวนวลบนเมฆพาสเทล คอนทราสต์ในตัวต่ำ
     ใช้ค่าเดียวกันแล้วจมหายไปกับพื้น จึงให้ทึบเต็ม
     (และอบค่าอิ่มสี/คอนทราสต์ลงในไฟล์ castle-pink แล้วด้วย
      ทำที่ไฟล์ถูกกว่าใส่ CSS filter ซึ่งต้องคำนวณตอนรัน) */
  opacity:var(--castle-opacity,1);
  animation:pegFloat 9s var(--ease) infinite alternate;
}
[data-zone="blue"]{--castle-opacity:.68}

/* แผ่นนวลหลังข้อความ hero
   ปราสาทเป็นภาพวาดรายละเอียดสูง ตัวหนังสือทับบนนั้นอ่านยาก โดยเฉพาะชื่อ
   แบรนด์ที่เป็นทอง ทับบนยอดปราสาทที่ก็เป็นทอง = ทองบนทอง
   ทางที่ลองแล้วไม่เวิร์ค: ลดความทึบปราสาท/ดันลงล่าง -> ปราสาทหายไปเลย
   ทางที่ใช้: คงปราสาทไว้ แล้วนวลเฉพาะวงรีหลังข้อความ
   ใช้ var(--bg) จึงสลับสีตามโซนเองอัตโนมัติ ไม่ต้องเขียนแยก 2 ชุด
   z-index:-1 อยู่ใต้ข้อความแต่ยังเหนือปราสาท เพราะ .hero__wrap เป็น
   stacking context (z-index:3) ของตัวเองอยู่แล้ว */
.hero__content{position:relative}
.hero__content::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:6%;translate:-50% 0;width:132%;height:96%;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    color-mix(in srgb,var(--bg) 46%,transparent) 0%,
    color-mix(in srgb,var(--bg) 24%,transparent) 52%,
    transparent 76%);
}
.hero__castle-art img{display:block;width:100%;height:auto}
/* สลับภาพตามโซน — คุมด้วย CSS ล้วน ไม่ต้องให้ JS ยุ่ง
   (i18n.js/main.js วาดใหม่ตอนสลับโซน ถ้าผูกกับ JS จะมีจังหวะกระพริบ) */
.hero__castle-art-blue{display:none}
[data-zone="blue"] .hero__castle-art-pink{display:none}
[data-zone="blue"] .hero__castle-art-blue{display:block}
/* มีภาพแล้วไม่ต้องใช้ปราสาท SVG — ซ่อนไว้เป็นตัวสำรองเฉยๆ */
.hero__castle{display:none}

/* ชั้นหลังจางกว่าชั้นหน้า = ความลึกของฉาก */
.hero__castle-back polygon{fill:url(#pegCastleRoofBack)}
.hero__castle-back rect{fill:url(#pegCastleBack)}
/* ย้ายอนิเมชัน "ลอยขึ้นลง" จาก <g> (ซึ่งมี drop-shadow) มาไว้ที่ <svg> ชั้นนอก
   เดิม: กลุ่มที่ถูก filter ขยับเอง → เบราว์เซอร์ต้องคำนวณ drop-shadow ของปราสาท
   กว้าง ~900px ใหม่ทุกเฟรม
   ใหม่: เนื้อในที่ถูก filter อยู่นิ่ง (คำนวณครั้งเดียว แคชไว้) แล้วเลื่อนทั้งชั้นแทน
   ผลทางสายตาเหมือนเดิมเป๊ะ เพราะ <g> คือเนื้อหาทั้งหมดของ <svg> อยู่แล้ว */
.hero__castle svg{
  width:100%;height:auto;display:block;overflow:visible;
  will-change:transform;
  animation:pegFloat 9s var(--ease) infinite alternate;
}
.hero__castle-g{
  filter:drop-shadow(0 0 26px var(--accent-soft));
  transform-origin:50% 100%;
}

/* ---- ตราสัญลักษณ์เหนือชื่อแบรนด์ ---- */
.hero__emblem{
  margin:0 auto var(--sp-3);
  width:clamp(96px,26vw,148px);aspect-ratio:1;
  display:grid;place-items:center;position:relative;
}
/* แผ่นกลมเข้ม + วงแหวนทองหนุนหลังตรา
   จำเป็นทั้ง 2 โซน ไม่ใช่แค่โซนชมพู — ตราเป็นภาพโทนขาว/ฟ้าสว่าง
   ถ้าไม่มีแผ่นรอง บนพื้นชมพูอ่อนจะจางจนแทบมองไม่เห็น
   ส่วนบนพื้นน้ำเงินถึงจะเห็นอยู่แล้ว แต่วงแหวนทองทำให้ดูเป็น "ตรา" ไม่ใช่ภาพลอย */
.hero__emblem::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,
    color-mix(in srgb,var(--peg-ink) 88%,transparent) 0%,
    color-mix(in srgb,var(--peg-ink) 72%,transparent) 62%,
    transparent 78%);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--peg-gold) 55%,transparent),
    0 0 22px color-mix(in srgb,var(--peg-gold) 28%,transparent);
}
[data-zone="blue"] .hero__emblem::before{
  background:radial-gradient(circle at 50% 42%,
    color-mix(in srgb,var(--blue-navy-deep) 92%,transparent) 0%,
    color-mix(in srgb,var(--blue-navy-deep) 70%,transparent) 62%,
    transparent 78%);
}
.hero__emblem picture,.hero__emblem img{
  display:block;width:100%;height:auto;position:relative;
}
/* ---- ตรา 2 โทน สลับตามโซน ----
   ★ ต้องมี .hero__emblem นำหน้าเพื่อให้ชนะกฎบรรทัดบน (.hero__emblem picture) ที่ตั้ง display:block
     ถ้าเขียนแค่ .hero__emblem-art จะแพงความเฉพาะเจาะจงแล้วโผล่พร้อมกันทั้งสองใบ
   ★ ใช้ display:none ไม่ใช่ opacity:0 — ใบที่จางด้วย opacity ยังถูก raster ทุกเฟรม
     ซึ่งเสียเปล่าเพราะ .hero__emblem ลอยขึ้นลงตลอดเวลา (pegFloat) */
.hero__emblem picture.hero__emblem-art{display:none}
[data-zone="pink"] .hero__emblem picture.hero__emblem-art--pink{display:block}
[data-zone="blue"] .hero__emblem picture.hero__emblem-art--blue{display:block}
@keyframes pegFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}

/* ---- เมฆฟุ้ง ---- */
.hero__clouds{position:absolute;inset:0;pointer-events:none;will-change:transform}
.hero__cloud{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(ellipse at 50% 55%,
              rgba(255,255,255,.92) 0%,
              rgba(255,255,255,.55) 45%,
              rgba(255,255,255,0) 72%);
  /* เอา filter:blur(6px) ออก — เมฆเป็น radial-gradient ที่จางหายอยู่แล้ว
     ขอบจึงนุ่มเท่าเดิม แต่ไม่ต้อง blur ก้อน ~509×206 ใหม่ทุกเฟรมตอนเมฆเลื่อน */
}
[data-zone="blue"] .hero__cloud{opacity:.5}
.hero__cloud--1{width:74vw;height:30vw;left:-18vw;bottom:12%;animation:pegCloud 42s linear infinite}
.hero__cloud--2{width:56vw;height:22vw;right:-14vw;bottom:26%;opacity:.8;animation:pegCloud 58s linear infinite reverse}
.hero__cloud--3{width:96vw;height:34vw;left:-8vw;bottom:-6%;}
.hero__cloud--4{width:44vw;height:18vw;left:22vw;bottom:36%;opacity:.55;animation:pegCloud 70s linear infinite}
@keyframes pegCloud{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(10%,0,0)}}

/* เดิมชั้นนี้ไล่ลงไปหา var(--bg) เพื่อให้ขอบล่าง hero ต่อกับพื้นสีทึบของ body
   ตอนนี้พื้นหน้าเป็น gradient ไล่ทั้งหน้าแล้ว การทาสี --bg ทับตรงนี้
   จะกลายเป็นแถบสีที่ไม่ตรงกับพื้นข้างล่าง = รอยตัดใหม่
   ขอบล่าง hero จัดการด้วย mask ที่ .hero__sky แทน (ดูด้านบน)
   เก็บ element ไว้เฉยๆ เพราะ sections/hero.html เป็นไฟล์ของ section นั้น */
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:none;
  pointer-events:none;
}

/* ---- เนื้อหา hero ---- */
.hero__wrap{position:relative;z-index:1}
.hero__content{max-width:34rem;margin-inline:auto}

.hero__eyebrow{
  display:inline-block;padding:.25em 1em;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--surface-brd);
  letter-spacing:.2em;
}
.hero__title{margin-bottom:var(--sp-2)}
/* ชื่อสังกัดใช้ Cinzel Decorative — ตัวอักษรโรมัน/กรีกจารึก เข้าธีมเทพนิยาย

   ⚠ ใช้ "เฉพาะที่นี่" ห้ามเอาไปตั้งเป็น --font-display
   ฟอนต์นี้มีแต่อักษรละติน ถ้าเอาไปใช้กับหัวข้อทั้งเว็บ ข้อความไทยจะตก
   ไปใช้ฟอนต์สำรองของระบบ หน้าตาหัวข้อไทยจะเพี้ยนทั้งเว็บ
   ชื่อแบรนด์เป็นอักษรละตินล้วนและไม่แปลภาษา จึงปลอดภัยจุดเดียว

   letter-spacing ลดจาก .02em เหลือ .01em เพราะ Cinzel Decorative
   กว้างกว่า Mitr อยู่แล้ว ถ้าคงค่าเดิมจะล้นที่ 375px */
.hero__title-line{
  display:inline-block;
  font-family:'Cinzel Decorative',var(--font-display);
  font-size:var(--fs-hero);letter-spacing:.01em;font-weight:900;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.22));
}
.hero__tagline{
  font-family:var(--font-display);
  font-size:var(--fs-h3);letter-spacing:.2em;
  color:var(--fg);margin-bottom:var(--sp-3);
}
.hero__motto{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-size:var(--fs-body);color:var(--fg);opacity:.92;margin-bottom:var(--sp-1);
}
.hero__motto-mark{color:var(--peg-gold);font-size:.9em}
.hero__slogan{
  font-size:var(--fs-sm);letter-spacing:.14em;
  color:var(--accent);margin-bottom:var(--sp-6);
}

.hero__cta{display:flex;flex-direction:column;gap:var(--sp-3);align-items:stretch}
.hero__cta-btn{justify-content:center;width:100%}
/* ปุ่มหลักสลับตามโซน — CSS ล้วน ด้วยเหตุผลเดียวกับ .hero__castle-art-blue ข้างบน
   ถ้าให้ JS สลับ href/ข้อความตอน pegasus:zonechange จะเห็นปุ่มกระพริบ
   (และ js/main.js เป็นของ PM ห้ามแก้)
   ใช้ display:none ไม่ใช่ visibility/opacity ตั้งใจ — ปุ่มที่ไม่ได้แสดงต้องหลุด
   จากลำดับ Tab และจาก accessibility tree ด้วย ไม่งั้นคนใช้คีย์บอร์ด/screen reader
   จะเจอปุ่มที่พาไป section ซึ่งถูก hidden อยู่ = บั๊กเดิมในอีกรูปแบบหนึ่ง
   ค่ากลับคือ inline-flex (ค่าของ .btn) ไม่ใช่ block ไม่งั้นไอคอน/ข้อความไม่จัดกลาง */
.hero__cta-btn--blue{display:none}
[data-zone="blue"] .hero__cta-btn--pink{display:none}
[data-zone="blue"] .hero__cta-btn--blue{display:inline-flex}
[data-zone="blue"] .btn--ghost{color:var(--accent);border-color:var(--accent)}
.hero__cta-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--live-dot);
  box-shadow:0 0 0 0 var(--live-dot);
  animation:pegPulse 1.8s ease-out infinite;
}
@keyframes pegPulse{
  0%  {box-shadow:0 0 0 0 var(--live-dot);opacity:1}
  70% {box-shadow:0 0 0 9px rgba(255,59,48,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(255,59,48,0);opacity:1}
}

/* ลูกศร/เมาส์ scroll */
.hero__scroll{
  position:absolute;left:50%;bottom:var(--sp-3);translate:-50% 0;z-index:2;
  display:none;
}
/* ไอคอน "เลื่อนลง"
   เดิมเป็นรูปเมาส์: กล่อง 24x38 ขอบชมพู border-radius:999px + จุดวิ่งข้างใน
   ปัญหา: ที่ขนาดเล็กมันอ่านเป็น "เลข 0" ไม่ใช่เมาส์ ลูกค้าทักมาเองว่า
   "ตัวเลขนี้คืออะไร ทำไมเป็น 0" ทั้งที่มันไม่ใช่ตัวเลขเลย
   และมันอยู่ใต้แถบนับคนไลฟ์พอดี ยิ่งชวนให้เข้าใจว่าเป็นตัวนับที่เสีย

   เปลี่ยนเป็นลูกศรชี้ลง (สองขอบของสี่เหลี่ยมหมุน 45 องศา) ซึ่งไม่มีทาง
   อ่านเป็นตัวเลขได้ และสื่อว่า "เลื่อนลง" ตรงตัวกว่ารูปเมาส์ด้วย
   (ผู้ใช้ 100% มาจากมือถือตามที่ CLAUDE.md ระบุ รูปเมาส์จึงสื่อผิดกลุ่มอยู่แล้ว
    ถึงไอคอนนี้จะโชว์เฉพาะเดสก์ท็อปก็ตาม) */
.hero__scroll-mouse{
  display:block;width:16px;height:16px;
  border-right:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);
  border-bottom-right-radius:3px;
  rotate:45deg;opacity:.85;
  animation:pegWheel 1.8s var(--ease) infinite;
}
@keyframes pegWheel{
  0%{transform:translate(-3px,-3px);opacity:0}
  40%{opacity:.9}
  100%{transform:translate(3px,3px);opacity:0}
}

/* ---------------- FOOTER ---------------- */
/* ท้ายเว็บ — ต้องไม่เป็น "แผ่น" ที่ตัดกับพื้นหลังของหน้า

   เดิม: border-top 1 เส้น + ทา --surface ทับเต็มเป็นสีเดียว
   ผลคือเห็นเส้นตัดตรงๆ พาดขวางจอ ตรงที่พื้นลาเวนเดอร์เปลี่ยนเป็นขาวนวลทันที

   ทำไมไม่ถอดพื้นทิ้งไปเลย: ข้อความใน footer หลายตัวตั้ง opacity .6-.8
   (.pegfoot__copy .6, .pegfoot__platforms .7, .pegfoot__slogan .75)
   ถ้าวางบนลาเวนเดอร์เข้มตรงๆ คอนทราสต์จะตกต่ำกว่าเกณฑ์อ่านง่าย
   จึงต้องมีแผ่นรองอยู่ แต่ให้มัน "จางเข้ามา" แทนที่จะเริ่มทันที

   ⚠ กติกาที่ห้ามพัง: ระยะไล่จางต้องจบ "ก่อน" ข้อความตัวแรกที่ตั้ง opacity < 1
   วัดจากหน้าจริง (เท่ากันทั้งไทย/อังกฤษ เพราะ padding บนเป็นค่าคงที่):
     .pegfoot__brand (โลโก้)  y=48   <- อยู่ในช่วงไล่ ไม่เป็นไร เป็นรูปไม่ใช่ข้อความจาง
     .pegfoot__name           y=102  <- อยู่ในช่วงไล่ ไม่เป็นไร opacity เต็ม สีเข้ม
     .pegfoot__slogan         y=148  <- ตัวแรกที่ opacity .75 ต้องพ้นช่วงไล่แล้ว
   จึงตั้งไว้ 120px ไม่ใช่ 140px — 140 ห่างจาก 148 แค่ 8px ถ้ามีใครขยับ
   padding หรือขนาดฟอนต์นิดเดียว สโลแกนจะตกไปอยู่บนแผ่นที่ยังไม่ทึบแล้วอ่านยาก
   ถ้าจะเพิ่มตัวเลขนี้ ต้องไปวัด y ของ .pegfoot__slogan ใหม่ก่อน

   ใช้หน่วย px ไม่ใช่ % ตั้งใจ — % จะผูกกับความสูงของ footer ซึ่งเปลี่ยนตาม
   ภาษาและตามจอ ทำให้ระยะไล่ขยับตามไปด้วย แล้วกติกาข้างบนคุมไม่ได้ */
.pegfoot{
  position:relative;
  border-top:0;
  background:linear-gradient(to bottom,transparent 0,var(--surface) 120px);
  padding-block:var(--sp-12) var(--sp-8);
  text-align:center;
  transition:background .6s var(--ease);
}
.pegfoot__inner{display:grid;gap:var(--sp-6);justify-items:center}
.pegfoot__brand{display:grid;justify-items:center;gap:var(--sp-1)}
.pegfoot__name{
  font-family:var(--font-display);font-size:var(--fs-h3);
  letter-spacing:.1em;margin:var(--sp-2) 0 0;
}
.pegfoot__slogan{font-size:var(--fs-sm);color:var(--fg);opacity:.75;margin:0}
.pegfoot__tagline{
  font-size:var(--fs-sm);letter-spacing:.2em;color:var(--accent);
  margin:0;text-transform:uppercase;
}
.pegfoot__platforms{font-size:var(--fs-sm);opacity:.7;margin:0;letter-spacing:.08em}

.pegfoot__contact{display:grid;gap:var(--sp-2);justify-items:center}
.pegfoot__label{font-size:var(--fs-sm);opacity:.8;margin:0}
.pegfoot__line{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:.6em 1.3em;border-radius:var(--r-pill);
  background:var(--grad-gold);color:var(--peg-ink);
  font-weight:600;box-shadow:var(--shadow-gold);
  transition:transform .25s var(--ease);
}
.pegfoot__line:hover{transform:translateY(-2px)}
.pegfoot__line-tag{
  font-size:.65rem;letter-spacing:.12em;padding:.15em .5em;
  border-radius:var(--r-sm);background:var(--peg-ink);color:var(--peg-cream);
}
.pegfoot__copy{font-size:var(--fs-sm);opacity:.6;margin:0}

/* ---------------- DESKTOP ---------------- */
@media (min-width:768px){
  .topbar__inner{padding-block:var(--sp-3)}
  .brand__mark{width:42px;height:42px}
  .brand__text strong{font-size:1rem;letter-spacing:.12em}
  .brand__text small{font-size:.68rem}
  .topbar__inner{flex-wrap:nowrap;gap:var(--sp-3)}
  .brand{flex:0 1 auto}
  .zoneswitch{flex:none;order:0;margin-left:auto}
  .langswitch{order:1}
  .zoneswitch__btn{flex:none;padding:.5em 1.25em}

  .hero{min-height:min(92vh,860px);align-items:center}
  .hero{min-height:min(92svh,860px)}
  .hero__content{max-width:44rem}
  .hero__castle{width:min(88%,860px);bottom:8%;opacity:.7}
  .hero__cta{flex-direction:row;justify-content:center;gap:var(--sp-4)}
  .hero__cta-btn{width:auto}
  .hero__scroll{display:block}

  .pegfoot__inner{gap:var(--sp-8)}
}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion:reduce){
  .pstar,.hero__aurora,.hero__cloud,.hero__castle-g,.hero__castle svg,
  .hero__cta-dot,.hero__scroll-mouse::after{animation:none!important}
  .pstar{opacity:.85;transform:none}
  .hero__stars,.hero__clouds,.hero__castle{transform:none!important}
}