/* ==============================================================
   MONZONE — GLOBAL
   reset · typography · กฎภาษาไทย · layout · scroll reveal · เอฟเฟกต์เข้าหน้า
   ============================================================== */

/* ==============================================================
   BASE — reset · typography · Thai rules · layout
   ============================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd{ margin:0; padding:0 }
ul[class],ol[class]{ list-style:none }
img,svg,video{ display:block; max-width:100%; height:auto }
input,button,textarea,select{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
[hidden]{ display:none !important }

body{
  background:var(--bg);
  color:var(--ink-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- กฎภาษาไทย (บังคับ) ---------- */
:lang(th){
  letter-spacing:0 !important;
  word-break:break-word;
  line-break:loose;
}
:lang(th) .hero-h1{ text-transform:none }

/* ละติน: บีบเล็กน้อยที่ขนาดใหญ่ */
.hero-h1:lang(en), h2:lang(en){ letter-spacing:-.015em }

/* ---------- Headings ---------- */
h1,.h1{ font-family:var(--font-display); font-size:var(--fs-hero); line-height:var(--lh-hero); font-weight:700; color:var(--ink) }
h2,.h2{ font-family:var(--font-display); font-size:var(--fs-h2);   line-height:var(--lh-h2);   font-weight:700; color:var(--ink) }
h3,.h3{ font-family:var(--font-display); font-size:var(--fs-h3);   line-height:var(--lh-h3);   font-weight:600; color:var(--ink) }

.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); font-weight:400; color:var(--ink-body) }
.sm  { font-size:var(--fs-sm);   line-height:var(--lh-sm) }

.text-muted  { color:var(--ink-muted); font-weight:300 }
.on-dark     { color:var(--ink-on-dark) }
.on-dark-dim { color:var(--ink-on-dark-muted) }

/* ---------- ชั้นเทคนิค: mono ---------- */
.mono{
  font-family:var(--font-mono); font-size:var(--fs-mono-xs); line-height:var(--lh-mono-xs);
  font-weight:500; letter-spacing:.06em; color:var(--ink-label);
}
.mono-stat{
  font-family:var(--font-mono); font-size:var(--fs-stat); line-height:var(--lh-stat);
  font-weight:500; letter-spacing:.02em;
}

/* ---------- Label (อังกฤษเท่านั้น) ---------- */
.label{
  font-family:var(--font-body); font-size:var(--fs-label); line-height:var(--lh-label);
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-label);
}

/* ---------- Focus ---------- */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:var(--r) }

.skip-link{
  position:absolute; inset-inline-start:var(--s4); inset-block-start:-100px; z-index:999;
  padding:var(--s3) var(--s4); background:var(--accent); color:var(--ink-on-dark);
  font-weight:600; border-radius:var(--r);
  transition:inset-block-start var(--dur) var(--ease);
}
.skip-link:focus{ inset-block-start:var(--s4) }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==============================================================
   LAYOUT — container · sections
   ============================================================== */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }

/* ---------- Scroll reveal (เล่นครั้งเดียว) ---------- */
.js .reveal{ opacity:0; transform:translateY(16px);
  /* translate/scale อยู่ในลิสต์ด้วย เพราะ hover ของการ์ดใช้ property เดี่ยวสองตัวนี้
     ถ้าไม่ใส่ กฎนี้จะทับ transition ของ .card จนการขยายตอน hover เด้งทันทีไม่ลื่น */
  transition:opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease),
             translate var(--dur) var(--ease), scale var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  /* หน่วงเป็นขั้นบันได (JS ใส่ --d ให้ทีละชิ้น) เฉพาะสองตัวแรกซึ่งเป็น "จังหวะเข้า"
     ส่วน translate/scale/shadow คือ hover ต้องตอบสนองทันที ห้ามหน่วง
     ⚠️ ต้องอยู่ "หลัง" shorthand เสมอ ไม่งั้นโดน transition: รีเซ็ตเป็น 0 */
  transition-delay:var(--d,0ms), var(--d,0ms), 0ms, 0ms, 0ms;
}
.js .reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition:none !important }
  .js .reveal{ opacity:1; transform:none }
  .card:hover, .card:focus-within, .voice__track > .quote:hover,
  .svc:hover, .svc:focus-within{ translate:none; scale:none }
  .lr__line{ transform:none !important }
}

/* ────────────── components ────────────── */

/* ==========================================================
   LINE MASK REVEAL — หัวเรื่องไหลขึ้นจากหลังหน้ากากทีละบรรทัด
   JS แตกหัวเรื่องตาม <br> แล้วห่อแต่ละบรรทัดด้วย .lr__mask (overflow:hidden)
   บรรทัดจริง .lr__line เริ่มที่ translateY(120%) แล้วเลื่อนขึ้นเป็น 0

   padding 0.3em + margin ติดลบ = เผื่อที่ให้สระบน วรรณยุกต์ และสระล่างของไทย
   ไม่ให้โดนขอบหน้ากากตัด — ถ้าไม่เผื่อ "ตู้" กับ "ที่" จะหัวขาด
   ========================================================== */
.js [data-line-reveal]:not(.is-split){ visibility:hidden }
.lr{ display:flex; flex-direction:column }
.lr__mask{ display:block; overflow:hidden; padding:.3em; margin:-.3em -.3em 0 }
.lr__mask + .lr__mask{ margin-block-start:-.6em }
.lr__line{ display:block; will-change:transform; transform:translateY(120%) }

.lr.is-in .lr__line{
  transform:translateY(0);
  transition:transform 480ms var(--ease);
}
.lr.is-in .lr__mask:nth-child(2) .lr__line{ transition-delay:100ms }
.lr.is-in .lr__mask:nth-child(3) .lr__line{ transition-delay:200ms }
.lr.is-in .lr__mask:nth-child(4) .lr__line{ transition-delay:300ms }

/* ==========================================================
   ENTER ZOOM — ภาพพื้นหลังซูมเข้าเบา ๆ ครั้งเดียวตอนเลื่อนถึง
   ไม่ใช่ parallax ตามเมาส์ — เล่นจบแล้วนิ่งสนิท ฉากหลังจึงยังมั่นคง
   ========================================================== */
@media (prefers-reduced-motion:no-preference){
  [data-zoom] :is(img, video){ scale:1.06; transition:scale 480ms var(--ease); will-change:scale }
  [data-zoom].is-in :is(img, video){ scale:1 }
}