/* ═══════════════════════════════════════════════════════════════════════
   TOKBET — Migration pages
   Design system: docs/DESIGN_SYSTEM.md · Tokens derived from docs/BRAND_AUDIT.md
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* primitive — navy ramp (800 และ 600 วัดได้จริงจาก tttokbet.com) */
  --navy-900: #0F1219;
  --navy-800: #161A26;
  --navy-700: #1D2231;
  --navy-600: #282F44;
  --navy-500: #333B54;

  /* primitive — gold ramp (500 = แกนแบรนด์ วัดได้จริง) */
  --gold-300: #FFDEA2;
  --gold-400: #F0CC8A;
  --gold-500: #E8BD70;
  --gold-600: #D4A455;

  /* primitive — support */
  --peri-300: #C3CCE8;
  --peri-400: #A3AFD4;   /* แก้ a11y: แทน #8493C1 ที่ตก WCAG AA บน surface */
  --peri-500: #8493C1;   /* เส้นขอบ/ตกแต่งเท่านั้น — ห้ามใช้กับข้อความ */
  --line-600: #48526E;
  --mint-400: #B9EFB7;

  /* semantic */
  --color-bg:             var(--navy-800);
  --color-bg-deep:        var(--navy-900);
  --color-surface:        var(--navy-600);
  --color-surface-raised: var(--navy-500);
  --color-border:         var(--line-600);
  --color-border-strong:  var(--peri-500);
  --color-text:           #FFFFFF;
  --color-text-muted:     var(--peri-400);
  --color-text-accent:    var(--gold-500);
  --color-cta-text:       var(--navy-800);
  --color-success:        var(--mint-400);

  /* type */
  --font-sans: 'Anuphan', 'Noto Sans Thai', 'Sarabun', system-ui,
               -apple-system, 'Segoe UI', sans-serif;
  --fs-xs:   clamp(.75rem,   .72rem  + .15vw, .8125rem);
  --fs-sm:   clamp(.875rem,  .84rem  + .18vw, .9375rem);
  --fs-base: clamp(1rem,     .96rem  + .2vw,  1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --fs-xl:   clamp(1.375rem, 1.2rem  + .8vw,  1.75rem);
  --fs-2xl:  clamp(1.75rem,  1.4rem  + 1.6vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.6rem  + 2.4vw, 3.25rem);
  --lh-tight: 1.3;    /* ไทยต้องมากกว่า Latin เพราะวรรณยุกต์ซ้อนบน */
  --lh-snug:  1.45;
  --lh-body:  1.75;   /* ต้นฉบับใช้ 1.5 — แน่นเกินไปสำหรับสระบน/ล่าง */

  /* space — 4px base */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem; --sp-9: 6rem;

  /* radius */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* elevation */
  --el-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.18);
  --el-2: 0 2px 4px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28);
  --el-3: 0 4px 8px rgba(0,0,0,.40), 0 16px 48px rgba(0,0,0,.36);
  --inner-light: inset 0 1px 0 rgba(255,255,255,.16);
  --glow-gold: 0 0 0 1px rgba(232,189,112,.28), 0 8px 32px rgba(232,189,112,.20);
  --glow-mint: 0 0 0 1px rgba(185,239,183,.28), 0 8px 32px rgba(185,239,183,.18);

  /* gradient — 3 ตัว หน้าที่ต่างกันชัดเจน ห้ามซ้อนกัน */
  --grad-gold: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 48%, var(--gold-600) 100%);
  --grad-surface: linear-gradient(160deg, rgba(40,47,68,.92), rgba(29,34,49,.72));
  --grad-ambient: radial-gradient(ellipse 78% 52% at 50% 0%, rgba(232,189,112,.10), transparent 68%);

  /* motion */
  --dur-fast: 160ms; --dur-mid: 280ms; --dur-slow: 560ms; --dur-ambient: 16s;
  --ease-out:      cubic-bezier(.22,.61,.36,1);
  /* ease-out-quint: เด็ดขาดแต่ไม่เด้ง — overshoot แบบ spring ให้ความรู้สึก
     ของเล่นซึ่งขัดกับ mature/premium ที่ PRD §C4 กำหนด */
  --ease-emphasis: cubic-bezier(.22,1,.36,1);

  /* layout */
  --container: 60rem;
}

/* ─── 2. RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;              /* ตาข่ายกันเหนียว — ไม่ใช่ข้ออ้างแทนการแก้ต้นเหตุ */
}

body {
  min-height: 100svh;            /* svh กัน address bar มือถือขยับ */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: 0;             /* ไทย: ห้ามขยายช่องไฟ ทำลายการประกอบสระ */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: var(--lh-tight); text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
ul { list-style: none; padding: 0; }

a { color: var(--color-text-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* focus — outline ไม่ใช่ box-shadow: ทำงานใน overflow:hidden และรองรับ
   Windows High Contrast Mode */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ─── 3. LAYOUT ──────────────────────────────────────────────────────── */
.ambient {
  position: fixed;
  inset: 0;
  background: var(--grad-ambient);
  pointer-events: none;
  z-index: 0;
}

.page {
  position: relative;
  z-index: 1;
  /* min-height ไม่ใช่ height → จอเตี้ยหรือ zoom 200% จะ scroll ไม่ตัดเนื้อหา */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  max-width: var(--container);
  margin-inline: auto;
  padding-block: max(var(--sp-5), env(safe-area-inset-top))
                 max(var(--sp-5), env(safe-area-inset-bottom));
  padding-inline: max(var(--sp-4), env(safe-area-inset-left))
                  max(var(--sp-4), env(safe-area-inset-right));
}

@media (min-width: 768px) {
  .page { gap: var(--sp-6); padding-inline: var(--sp-6); }
}

/* ─── 4. BRAND ───────────────────────────────────────────────────────── */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.brand__logo {
  /* logo.png เป็น 92×92 — แสดง 32px เพื่อให้คมบนจอ 2x */
  width: 32px;
  height: 32px;
}

.brand__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .04em;   /* Latin เท่านั้น — ขยายได้ */
  color: var(--color-text);
}


/* ─── 5. CARD ────────────────────────────────────────────────────────── */
.card {
  width: 100%;
  background: var(--grad-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--el-3);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
  /* backdrop-filter เบา — PRD ห้าม glassmorphism จนอ่านยาก
     พื้นจึงไม่โปร่งกว่า .72 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .card { padding: var(--sp-7) var(--sp-6); gap: var(--sp-6); }
}

/* โน้ตบุ๊กจอเตี้ย (เช่น 1366×768, 1440×900): บีบจังหวะตั้งให้แน่นขึ้น
   เพื่อให้เนื้อหาหลักอยู่ในหนึ่งหน้าจอตาม PRD §C5 — ยังคง scroll ได้ ไม่ตัดเนื้อหา */
@media (min-width: 768px) and (max-height: 920px) {
  .card { padding: var(--sp-5) var(--sp-6); gap: var(--sp-4); }
  .page { gap: var(--sp-4); padding-block: var(--sp-4); }
  .highlight { padding: var(--sp-3) var(--sp-5); }
}

@media (min-width: 1024px) and (max-height: 920px) {
  h1 { font-size: var(--fs-2xl); }
}

/* จอเตี้ยมาก (1366×768, 1024×768) — ครอปภาพเป็นแบนเนอร์แคบลงอีก
   เป้าหมายเจาะจง: ดันให้ "ปุ่ม CTA" ของหน้า 2 อยู่เหนือขอบล่างให้ได้
   เพราะปุ่มคือหัวใจของหน้านั้น (chips/footer ตกขอบล่างได้ ไม่เป็นไร) */
@media (min-width: 768px) and (max-height: 820px) {
  .card { gap: var(--sp-3); }
  .highlight { padding: var(--sp-3) var(--sp-4); }
}

/* ─── หมายเหตุการออกแบบ: เคยลองทำ 2 คอลัมน์สำหรับจอกว้างแต่เตี้ย แล้วถอดออก ───
   แนวคิดคือวางข้อความซ้าย/ภาพขวา เพื่อลดความสูงที่ 1366×768
   ผลที่ได้ลดความสูงจริง แต่**ขัดกับตัวข้อความ**: PRD §C3 บังคับประโยค
   "คลิกที่รูปภาพด้านล่างเพื่อไปยังเว็บไซต์ใหม่" — เมื่อภาพย้ายไปอยู่มุมขวาบน
   คำว่า "ด้านล่าง" จะผิดทันที และ layout ยังดูเสียสมดุลเพราะคอลัมน์ขวาว่างมาก
   จึงเลือกคอลัมน์เดียวและยอมให้ scroll ตาม PRD §C5 ที่อนุญาตไว้ชัดเจนว่า
   "ต้องยอมให้ Scroll แนวตั้งแทนการตัดเนื้อหา" — ดู docs/QA_REPORT.md */

/* ─── 6. BADGE ───────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  /* ไม่พึ่งสีอย่างเดียว: มีข้อความกำกับ + รูปทรงนำหน้าต่างกันสองหน้า */
}

.badge--progress {
  background: rgba(232,189,112,.10);
  border: 1px solid rgba(232,189,112,.30);
  color: var(--color-text-accent);
}

.badge--success {
  background: rgba(185,239,183,.10);
  border: 1px solid rgba(185,239,183,.30);
  color: var(--color-success);
}

.badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}

.badge__icon { width: 18px; height: 18px; flex: none; }

/* ─── 7. TYPE ────────────────────────────────────────────────────────── */
h1 {
  font-size: var(--fs-2xl);
  max-width: 22ch;
}

@media (min-width: 1024px) {
  h1 { font-size: var(--fs-3xl); }
}

.lead {
  font-size: var(--fs-lg);
  color: var(--color-text);
  max-width: 48ch;
}

.status-detail,
.cta-hint {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  max-width: 48ch;
}

.closing {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text-accent);
}

/* ─── 8. HIGHLIGHT — ข้อความสำคัญที่สุดของทั้งสองหน้า ────────────────── */
.highlight {
  position: relative;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-text);
  background: rgba(232,189,112,.08);
  border: 1px solid rgba(232,189,112,.28);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  max-width: 46ch;
  box-shadow: var(--inner-light);
}

/* ─── 9. HERO IMAGE ──────────────────────────────────────────────────── */
.hero {
  width: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-deep);
  box-shadow: var(--el-2);
}

.hero img {
  width: 100%;
  /* อัตราส่วนจริงของไฟล์ 960×543 — กัน CLS ก่อนภาพโหลด และกันภาพยืด
     object-fit: cover ทำให้ครอปแทนการบีบ ภาพจึงไม่ผิดสัดส่วน */
  aspect-ratio: 960 / 543;
  object-fit: cover;
  /* วัดค่าความสว่างรายแถบของภาพทั้งสองใบแล้ว: จุดศูนย์ถ่วงของภาพอยู่ที่ ~55%
     และ 10–15% บนสุดเป็นพื้นมืดเปล่า ๆ จึงเลื่อนกรอบครอปลงมาที่ 56%
     ทำให้ครอปแนวนอนแรง ๆ ได้โดยไม่ตัดหัวตู้เซฟ */
  object-position: center 56%;
}

/* ─── การครอปภาพตามความสูงจอ ───
   ตัวตู้อยู่แถบกลางภาพ ส่วนบน/ล่างเป็นพื้นมืดว่าง จึงครอปทิ้งได้โดยไม่เสียองค์ประกอบ
   จอยิ่งเตี้ย ยิ่งครอปแคบ เพื่อดันเนื้อหาสำคัญให้อยู่เหนือขอบล่าง
   NOTE: กฎทั้ง 3 ข้อนี้ specificity เท่ากัน (.hero img) — **ลำดับในไฟล์คือสิ่งที่ตัดสิน**
   ต้องเรียงจากกว้างสุดไปแคบสุด และห้ามแยกไปเขียนที่อื่นในไฟล์
   (เคยพลาดมาแล้ว: เขียนกฎ 3/1 ไว้ก่อนหน้า 2.4/1 ทำให้ 2.4/1 ชนะเสมอ) */
@media (min-width: 768px) {
  .hero img { aspect-ratio: 2.4 / 1; }
}
@media (min-width: 768px) and (max-height: 920px) {
  .hero img { aspect-ratio: 3 / 1; }
}
@media (min-width: 768px) and (max-height: 820px) {
  .hero img { aspect-ratio: 3.8 / 1; }
}


/* หน้า 2: ภาพเป็นลิงก์ */
.hero-link {
  display: block;
  width: 100%;
  border-radius: var(--r-md);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}

.hero-link .hero { box-shadow: var(--el-2); }

.hero-link:hover { transform: translateY(-4px); }
.hero-link:hover .hero { box-shadow: var(--el-3), var(--glow-mint); }
.hero-link:active { transform: translateY(-1px); }
.hero-link:focus-visible { outline-offset: 5px; }

/* shine sweep — เฉพาะตอน hover */
.hero-link .hero { position: relative; }
.hero-link .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%,
              rgba(255,255,255,.16) 48%, transparent 58%);
  transform: translateX(-120%);
  pointer-events: none;
}
.hero-link:hover .hero::after { animation: shine 700ms var(--ease-out); }

/* ─── 10. PROGRESS — indeterminate เท่านั้น ห้ามมี % ─────────────────── */
.progress {
  width: 100%;
  max-width: 32rem;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.progress__bar {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-gold);
  will-change: transform;   /* ใส่เฉพาะตัวที่วนตลอด */
}

/* ─── 11. BUTTON ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* min 48px > 44px ที่ PRD กำหนด · ต้นฉบับใช้ padding 6px บนตัวอักษร 17px */
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-cta-text);        /* navy บนทอง = 9.87:1 */
  background: var(--grad-gold);
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--el-2), var(--inner-light);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--el-3), var(--inner-light), var(--glow-gold);
  text-decoration: none;
}

.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--el-1), var(--inner-light); }

/* ─── 12. TRUST CHIPS ────────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
}

.chip img { width: 20px; height: 20px; flex: none; }

/* ─── 13. FOOTER ─────────────────────────────────────────────────────── */
.footer {
  margin-top: auto;      /* ดันลงล่างเมื่อจอสูง */
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  padding-top: var(--sp-4);
}

/* ─── 14. ANIMATION ──────────────────────────────────────────────────── */
@keyframes slide  { from { transform: translateX(-40%) } to { transform: translateX(140%) } }
@keyframes pulse  { 0%,100% { transform: scale(1); opacity: 1 }
                    50%     { transform: scale(1.35); opacity: .55 } }
@keyframes breathe{ 0%,100% { opacity: .55 } 50% { opacity: .9 } }
@keyframes reveal { from { opacity: 0; transform: translateY(12px) }
                    to   { opacity: 1; transform: none } }
@keyframes pop    { from { opacity: 0; transform: scale(.6) }
                    to   { opacity: 1; transform: scale(1) } }
@keyframes burst  { from { opacity: .6; transform: scale(.5) }
                    to   { opacity: 0;  transform: scale(2.4) } }
@keyframes shine  { from { transform: translateX(-120%) } to { transform: translateX(120%) } }

/* ค่าเริ่มต้น = "มองเห็นได้เสมอ"
   การซ่อนเพื่อทำ entrance เป็น progressive enhancement เท่านั้น
   → ถ้า animation ถูกปิดหรือ CSS พัง เนื้อหายังอยู่ครบ ไม่มีหน้าว่าง */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    animation: reveal var(--dur-slow) var(--ease-out) forwards;
  }
  .reveal:nth-child(1) { animation-delay: 0ms }
  .reveal:nth-child(2) { animation-delay: 70ms }
  .reveal:nth-child(3) { animation-delay: 140ms }
  .reveal:nth-child(4) { animation-delay: 210ms }
  .reveal:nth-child(5) { animation-delay: 280ms }
  .reveal:nth-child(6) { animation-delay: 350ms }
  .reveal:nth-child(7) { animation-delay: 420ms }
  .reveal:nth-child(8) { animation-delay: 490ms }

  /* NOTE: ห้ามใส่ animation ให้ element ที่มีคลาส .reveal อยู่แล้ว
     `animation` เป็น shorthand — กฎที่มาหลังจะ "แทนที่" ไม่ใช่ "เพิ่ม"
     ทำให้ element ค้างที่ opacity:0 ตลอดไป (เคยเกิดกับ hero มาแล้ว)
     ถ้าต้องการ animation ซ้อน ให้ใส่กับ element ลูกหรือ pseudo-element */
  .ambient        { animation: breathe var(--dur-ambient) ease-in-out infinite }
  .badge__dot     { animation: pulse 2s ease-in-out infinite }
  .progress__bar  { animation: slide 2.2s var(--ease-out) infinite }
  .badge--success .badge__icon { animation: pop var(--dur-slow) var(--ease-emphasis) both }

  .badge--success { position: relative }
  .badge--success::before {
    content: '';
    position: absolute;
    left: var(--sp-4); top: 50%;
    width: 18px; height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--mint-400);
    animation: burst 900ms var(--ease-out) 200ms both;
    pointer-events: none;
  }
}

/* กันพลาดซ้ำอีกชั้น — ถ้าเบราว์เซอร์รองรับ reduce ให้ตัดทุกอย่างทิ้ง */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}