/* ==================================================
   GLOBAL.CSS — Font Loading, Reset, Base Typography, Layout Grid
   Thai Flour Industry | Master Design System
   ================================================== */

/* ---------- Font Face (Local Files + font-display: swap) ---------- */
@font-face {
  font-family: 'Anuphan';
  src: url('../font/Anuphan/Anuphan-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anuphan';
  src: url('../font/Anuphan/Anuphan-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anuphan';
  src: url('../font/Anuphan/Anuphan-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anuphan';
  src: url('../font/Anuphan/Anuphan-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anuphan';
  src: url('../font/Anuphan/Anuphan-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto/Roboto-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + var(--space-24));
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-corporate);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-white);
  padding-top: var(--navbar-height);
  overflow-x: hidden;
}

/* ---------- Typography Scale ---------- */
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}

h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

h6, .h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

p.lead,
.lead {
  font-size: var(--fs-lead);
  line-height: 1.75;
}

small,
.small {
  font-size: var(--fs-small);
}

span.caption,
.caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  letter-spacing: 0.04em;
}

a {
  color: var(--color-deep-red);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-deep-red-dark);
  text-decoration: underline;
}

strong {
  font-weight: var(--fw-semibold);
}

/* ---------- Focus Visible (WCAG 2.1 AA) ---------- */
:focus-visible {
  outline: 2px solid var(--color-deep-red);
  outline-offset: 2px;
  border-radius: var(--space-4);
}

/* ---------- Scroll Motion (Reveal + Parallax) ----------
   has-scroll-motion ถูกใส่โดย scroll-motion.js เท่านั้น
   ถ้า JS ไม่ทำงานหรือผู้ใช้ปิดแอนิเมชัน เนื้อหาจะแสดงตามปกติทันที */
/* จังหวะกลางของงานเคลื่อนไหวทั้งหมด — คลายตัวช่วงท้ายเล็กน้อยให้รู้สึกมีชีวิต */
:root {
  --ease-reveal: cubic-bezier(0.22, 0.9, 0.3, 1);
  --reveal-step: 90ms;
  /* จังหวะแบบ "ออกตัวไว แล้วค่อย ๆ คลายยาว ๆ" (expo-out) — ใช้กับการ์ดที่อยากให้ดูหรูและนิ่ง */
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);
  /* เลยเป้าไปนิดหนึ่งแล้วเด้งกลับ (back-out) — ใช้กับชิ้นเล็กที่อยากให้ "ป๊อป" ขึ้นมา
     เช่นเลขลำดับขั้นตอนและลูกศรเชื่อมของส่วน How we work
     ห้ามใช้กับกล่องใหญ่หรือข้อความยาว การเด้งจะกลายเป็นความรู้สึกไม่มั่นคง */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ตัว section ใช้แค่จางเข้า ไม่ขยับ — การขยับปล่อยให้เป็นหน้าที่ของชิ้นข้างใน
   จะได้ไม่เกิดอาการ "ขยับซ้อนขยับ" จนดูมัว */
.has-scroll-motion [data-reveal] {
  opacity: 0;
  transition: opacity 0.6s var(--ease-reveal);
  will-change: opacity;
}

.has-scroll-motion [data-reveal].is-revealed {
  opacity: 1;
  will-change: auto;
}

/* ชิ้นในกลุ่ม (การ์ด ใบรับรอง รายการ) ทยอยเลื่อนขึ้นทีละชิ้น
   --reveal-i ถูกตั้งโดย scroll-motion.js ตามลำดับของชิ้นนั้นในแถว */
.has-scroll-motion [data-reveal-item] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.55s var(--ease-reveal),
    transform 0.55s var(--ease-reveal);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
  will-change: opacity, transform;
}

.has-scroll-motion [data-reveal-item].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* section ที่รอให้เลื่อนก่อน (data-reveal-after-scroll) — ตอนเปิดหน้าต้องเป็นพื้นขาวล้วน
   ชิ้นลูกซ่อนด้วยกฎ data-reveal-item ข้างบนแล้ว แต่เส้นขอบของตัวรายการเอง (เช่นเส้นบนของไทม์ไลน์ ESG)
   ไม่ได้ซ่อนไปด้วย จึงทำให้โปร่งใสไว้ก่อน แล้วจางเข้าพร้อมเนื้อหาเมื่อ scroll-motion.js ติด is-released */
.has-scroll-motion [data-reveal-after-scroll] [data-reveal-each] {
  transition: border-color 0.55s var(--ease-reveal);
}

.has-scroll-motion [data-reveal-after-scroll]:not(.is-released) [data-reveal-each] {
  border-color: transparent;
}

/* บล็อกที่ขยับขึ้น-ลงพร้อมจางไปตามระยะสกรอลล์ (ใส่ data-parallax + data-parallax-fade)
   ทั้งสองค่าถูกป้อนโดย scroll-motion.js ทีละเฟรม
   ค่าสำรองในวงเล็บทำให้ข้อความอยู่ตำแหน่งปกติและทึบเต็มที่ ถ้า JS ยังไม่ทำงาน */
.has-scroll-motion [data-parallax-fade] {
  transform: translate3d(0, var(--parallax-shift, 0px), 0);
  opacity: var(--parallax-fade, 1);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .has-scroll-motion [data-parallax-fade] {
    transform: none;
    opacity: 1;
  }
}

/* บล็อกที่อยากให้เลื่อนเข้ามาจากด้านข้าง — ใส่ data-reveal-from ใน HTML
   จำกัดไว้ที่จอ 1024px ขึ้นไป เพราะจอแคบไม่มีระยะขอบพอ อาจดันจนเกิดแถบเลื่อนแนวนอน */
@media (min-width: 1024px) {
  .has-scroll-motion [data-reveal-from] {
    transition:
      opacity 0.7s var(--ease-reveal),
      transform 0.7s var(--ease-reveal);
  }

  .has-scroll-motion [data-reveal-from='left'] {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }

  .has-scroll-motion [data-reveal-from='right'] {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }

  .has-scroll-motion [data-reveal-from].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* ภาพในกรอบสื่อเริ่มจากซูมนิดหนึ่งแล้วคลายออกพร้อมกับที่การ์ดโผล่
   ส่งผ่านตัวแปร --card-zoom ตัวเดียวกับที่ hover ใช้ จะได้ไม่แย่ง transform กันเอง
   (กฎ transform ของภาพอยู่ใน components.css / home.css) */
.has-scroll-motion [data-reveal-item] {
  --card-zoom: 1.06;
}

.has-scroll-motion [data-reveal-item].is-revealed {
  --card-zoom: 1;
}

@media (prefers-reduced-motion: reduce) {
  .has-scroll-motion [data-reveal],
  .has-scroll-motion [data-reveal-item],
  .has-scroll-motion [data-reveal-from] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .has-scroll-motion [data-reveal-item] {
    --card-zoom: 1;
  }
}

/* ---------- Layout Grid ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.section {
  padding-block: var(--space-48);
}

@media (min-width: 640px) {
  .section { padding-block: var(--space-64); }
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-80); }
}

.section--surface {
  background-color: var(--color-surface);
}

.grid {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
}

/* ---------- Section Head ---------- */
.section-head {
  max-width: 720px;
  margin-bottom: var(--space-32);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-8);
  color: var(--color-deep-red);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-head p {
  margin-top: var(--space-12);
  color: var(--color-text-muted);
}

/* ---------- Utilities ---------- */
/* ตัดคำไทยให้ตรงคำ — ภาษาไทยไม่มีเว้นวรรคระหว่างคำ เบราว์เซอร์จึงตัดขึ้นบรรทัดใหม่
   ตรงไหนก็ได้ และตัดกลางคำอยู่บ่อย ๆ (เช่น "ล็อ|ตการผลิต")
   วิธีแก้: ห่อทีละคำใน <span> แล้วห้ามตัดข้างในแต่ละก้อน
   จุดขึ้นบรรทัดใหม่ที่เหลือจึงมีแค่รอยต่อระหว่างคำเท่านั้น
   ทำงานได้ทุกเบราว์เซอร์ ไม่ต้องรอ word-break: auto-phrase ที่ยังรองรับไม่ทั่ว */
.thai-wrap > span {
  white-space: nowrap;
}

.text-center { text-align: center; }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }

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

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  z-index: 999;
  padding: var(--space-8) var(--space-16);
  background-color: var(--color-deep-red);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--color-white);
  text-decoration: none;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}