/* หน้าแรก: เพิ่มมิติ 16 ต.ค. 2026 — โหลดต่อจาก ux-fixes.css, มีผลเฉพาะ body.page-home
   ถอยกลับ = ลบ <link home-depth.css> ใน inc/header.php (+ เอา class pr-play-section และ <script> ท้าย index.php ออกถ้าอยากคืนครบ)
   ใช้แต่สีและภาพที่เว็บมีอยู่แล้ว ไม่เพิ่มสี/ฟอนต์ใหม่ */

/* 1) พื้นครีมมีผิวกระดาษจาง ๆ ไม่ให้เป็นสีเรียบ */
.page-home{
  background-color:var(--bg,#f4f1e9);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .22 0 0 0 0 .29 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* 2) Hero: ฉากหลังเลื่อนช้ากว่าตัวหน้า (JS ตั้ง --pz) + เงาแตะพื้นใต้ปาร์ตี้ */
.page-home .pr-hero{padding-bottom:62px}
.page-home .pr-world-scene{inset:-70px 0 -20px;transform:translate3d(0,var(--pz,0px),0);will-change:transform}
.page-home .pr-hero-art::after{
  content:'';position:absolute;left:14%;right:14%;bottom:-4px;height:30px;
  border-radius:50%;background:#051c2a;filter:blur(18px);opacity:.5;z-index:0
}

/* 3) แถบทางลัด 4 ช่อง ลอยคร่อมรอยต่อ Hero กับพื้นครีม */
.page-home .pr-journey{position:relative;z-index:4;margin-top:-34px}
.page-home .pr-journey>a{
  border-color:#e1e7e3;
  box-shadow:0 1px 0 #fff inset,0 2px 3px #20374a14,0 18px 28px -14px #102c3d55;
  transition:transform .2s,box-shadow .2s,border-color .18s
}
.page-home .pr-journey>a:hover{box-shadow:0 1px 0 #fff inset,0 3px 5px #20374a16,0 26px 34px -14px #102c3d70}

/* 4) ข่าว: ใบหลักลอยสูงกว่าใบรอง */
.page-home .pr-news-card{box-shadow:0 1px 2px #20374a10,0 12px 22px -14px #20374a3a;transition:transform .2s,box-shadow .2s,border-color .18s}
.page-home .pr-news-lead{box-shadow:0 2px 3px #20374a16,0 22px 34px -16px #20374a58}
.page-home .pr-news-card:hover{box-shadow:0 2px 4px #20374a16,0 24px 34px -14px #20374a50}

/* 5) แถบกรมท่าเต็มจอ: "คลาสสิกที่มีอะไรให้ทำต่อ" — จังหวะมืดคั่นระหว่างพื้นครีม */
.page-home .pr-play-section{position:relative;isolation:isolate;margin-top:40px;padding-top:72px;padding-bottom:88px}
.page-home .pr-play-section::before{
  content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:
    linear-gradient(180deg,#102c3df0 0%,#183447ec 100%),
    url('logo3-citadel.webp') center 40%/cover no-repeat;
  box-shadow:inset 0 16px 22px -16px #051c2a,inset 0 -16px 22px -16px #051c2a
}
.page-home .pr-play-section .eyebrow{color:#edd296}
.page-home .pr-play-section h2{color:#fcfaf4}
.page-home .pr-play-section .link-more{color:#edcb82}
.page-home .pr-play-section .link-more:hover{color:#f6d994}
/* การ์ดสว่างบนพื้นมืด: ใบกลางสูงกว่า ใบข้างต่ำกว่า */
.page-home .pr-play-card{
  box-shadow:0 2px 4px #051c2a33,0 28px 42px -18px #051c2a;
  transition:transform .25s,box-shadow .25s
}
.page-home .pr-play-card:hover{transform:translateY(-6px);box-shadow:0 3px 6px #051c2a38,0 36px 50px -18px #051c2a}
@media (min-width:901px){
  .page-home .pr-play-card:nth-child(2){transform:translateY(-16px)}
  .page-home .pr-play-card:nth-child(2):hover{transform:translateY(-22px)}
}
.page-home .pr-card-art{box-shadow:inset 0 -18px 22px -18px #20374a45}

/* 6) แถบ 3 ขั้นตอน "จมลง" (เงาด้านในบนล่าง) ตรงข้ามกับแถบมืดที่ยกขึ้น */
.page-home .pr-start{box-shadow:inset 0 16px 20px -16px #20374a42,inset 0 -16px 20px -16px #20374a42}
.page-home .pr-start-poring{filter:drop-shadow(0 12px 14px #20374a40)}

/* 7) ตารางข้อมูล + กล่องชุมชน: ยกจากพื้นเล็กน้อย */
.page-home .info-tiles .tile{
  box-shadow:0 1px 0 #fff inset,0 2px 3px #20374a10,0 14px 22px -14px #20374a42;
  transition:transform .2s,box-shadow .2s
}
.page-home .info-tiles .tile:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 3px 5px #20374a14,0 22px 30px -14px #20374a55}
.page-home .pr-community{box-shadow:0 2px 4px #20374a12,0 24px 40px -20px #20374a52}

/* มือถือ: ไม่ยกใบกลาง, แถบมืดบางลง */
@media (max-width:900px){
  .page-home .pr-play-section{padding-top:56px;padding-bottom:64px;margin-top:28px}
  .page-home .pr-journey{margin-top:-26px}
}

/* ผู้ใช้ปิด/ลดการเคลื่อนไหว: ไม่ลอยไม่เลื่อน */
@media (prefers-reduced-motion:reduce){
  .page-home .pr-world-scene{transform:none}
  .page-home .pr-journey>a,.page-home .pr-news-card,.page-home .pr-play-card,.page-home .info-tiles .tile{transition:none}
  .page-home .pr-play-card:hover,.page-home .pr-journey>a:hover,.page-home .pr-news-card:hover,.page-home .info-tiles .tile:hover{transform:none}
  .page-home .pr-play-card:nth-child(2),.page-home .pr-play-card:nth-child(2):hover{transform:none}
}
html[data-motion="off"] .page-home .pr-world-scene{transform:none}
html[data-motion="off"] .page-home .pr-journey>a,
html[data-motion="off"] .page-home .pr-news-card,
html[data-motion="off"] .page-home .pr-play-card,
html[data-motion="off"] .page-home .info-tiles .tile{transition:none}
html[data-motion="off"] .page-home .pr-play-card:hover,
html[data-motion="off"] .page-home .pr-journey>a:hover,
html[data-motion="off"] .page-home .pr-news-card:hover,
html[data-motion="off"] .page-home .info-tiles .tile:hover{transform:none}
html[data-motion="off"] .page-home .pr-play-card:nth-child(2),
html[data-motion="off"] .page-home .pr-play-card:nth-child(2):hover{transform:none}

/* 8) ดาวฝุ่นเวทย์ WebGL (assets/hero-dust.js) — อยู่หลังตัวอักษรและตัวละคร เหนือภาพฉากหลัง */
.page-home .pr-dust{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease-out
}
.page-home .pr-dust.on{opacity:1}
@media (prefers-reduced-motion:reduce){.page-home .pr-dust{display:none}}
html[data-motion="off"] .page-home .pr-dust{display:none}