/* ======================================================
   XO Arena – Liquid Glass UI (balanced Light/Dark)
   ====================================================== */

/* ---------- Theme tokens ---------- */
:root, html[data-theme="light"]{
  --bg-1: #f6f7fb;         /* พื้นหลังชั้นบน */
  --bg-2: #eef2ff;         /* พื้นหลังชั้นล่าง */
  --card-color: #ffffff;

  --primary-color: #1f6fff; /* โทน iOS blue */
  --primary-hover: #2c7aff;
  --secondary-color: #e8eaf3;

  --text-primary: rgba(7, 12, 22, 0.95);
  --text-secondary: rgba(7, 12, 22, 0.70);

  --border-color: #d7dbe7;
  --header-background: rgba(255,255,255,0.72);

  /* Liquid Glass */
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border-1: rgba(255,255,255,0.85);
  --glass-border-2: rgba(10,10,20,0.10);
  --glass-shadow: 0 22px 60px rgba(13,26,49,0.20), 0 1px 0 rgba(255,255,255,0.35) inset;
  --glass-radius: 22px;
  --glass-blur: 22px;
  --glass-sat: 145%;
  --glass-top-highlight: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0) 42%);

  /* Accents */
  --accent-pink: #ff6bd6;
  --accent-cyan: #46dbff;
}

html[data-theme="dark"]{
  --bg-1: #0b0f1a;
  --bg-2: #0a0d15;
  --card-color: #171927;

  --primary-color: #6a7cff;
  --primary-hover: #7c8aff;
  --secondary-color: #26283a;

  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(255,255,255,0.72);

  --border-color: #2a2d45;
  --header-background: rgba(16, 16, 26, 0.55);

  --glass-bg: rgba(255,255,255,0.08);
  --glass-border-1: rgba(255,255,255,0.45);
  --glass-border-2: rgba(255,255,255,0.06);
  --glass-shadow: 0 28px 70px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;
  --glass-radius: 22px;
  --glass-blur: 24px;
  --glass-sat: 175%;
  --glass-top-highlight: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 40%);

  --accent-pink: #ff77e1;
  --accent-cyan: #5ee7ff;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
  scroll-behavior: smooth;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;

  /* Glow background (เบาๆ ไม่แย่งซีน) */
  background:
    radial-gradient(1100px 1100px at 12% -10%, color-mix(in oklab, var(--accent-cyan) 22%, transparent), transparent 55%),
    radial-gradient(900px 900px at 88% 8%, color-mix(in oklab, var(--primary-color) 18%, transparent), transparent 55%),
    radial-gradient(700px 700px at 30% 95%, color-mix(in oklab, var(--accent-pink) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.noscroll { overflow: hidden; }

/* Progress bar on scroll (เพิ่ม element <div id="scroll-progress"></div> ใน HTML ได้) */
#scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  z-index: 9999; transform: translateZ(0);
  background: linear-gradient(90deg, var(--primary-color), var(--accent-pink));
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}

/* Selection */
::selection { background: color-mix(in oklab, var(--primary-color) 35%, white 65%); color: #0c1020; }
html[data-theme="dark"] ::selection { background: color-mix(in oklab, var(--primary-color) 60%, black 40%); color: white; }

/* ---------- Layout ---------- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* Header (semi-glass) */
.main-header {
  background: var(--header-background);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-bottom: 1px solid color-mix(in oklab, var(--border-color) 80%, transparent);
  position: sticky; top: 0; z-index: 100;
}
nav { height: 64px; display: flex; justify-content: space-between; align-items: center; }
.logo-link { display: flex; align-items: center; text-decoration: none; color: var(--text-primary); }
.logo-image { height: 32px; margin-right: 12px; border-radius: 8px; }
.logo-text { font-size: 1.6rem; font-weight: 800; letter-spacing: -.2px; }
.nav-links { display: flex; align-items: center; gap: 10px; }
.nav-links a{
  color: var(--text-secondary); text-decoration: none; padding: 8px 14px;
  font-weight: 600; border-radius: 12px; transition: .25s ease;
}
.nav-links a:hover{ color: var(--text-primary); background: color-mix(in oklab, var(--glass-bg) 65%, transparent); }
.nav-right{ display: flex; align-items: center; gap: 12px; }

#lang-switcher{
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--card-color); cursor: pointer; font-size: .95rem;
  padding: 8px 10px; color: var(--text-secondary);
}
#lang-switcher option{ background: var(--card-color); color: var(--text-primary); }

.theme-button{
  background: none; border: 0; cursor: pointer; padding: 6px;
  display: flex; align-items: center; color: var(--text-secondary);
}
.theme-button svg{ width: 22px; height: 22px; }
.moon{ display: none; }
html[data-theme="dark"] .sun{ display: none; }
html[data-theme="dark"] .moon{ display: block; }

.hamburger-menu{ display: none; background: none; border: 0; padding: 0; cursor: pointer; z-index: 1001; color: var(--text-primary); }
.hamburger-menu .icon-close{ display: none; }
.hamburger-menu.active .icon-open{ display: none; }
.hamburger-menu.active .icon-close{ display: block; }
.hamburger-menu svg{ width: 28px; height: 28px; }

/* ---------- Hero ---------- */
.hero-section{
  padding: 110px 0 90px; text-align: center; background: transparent;
}
.hero-content{ max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-section h1{
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  font-weight: 900; margin: 0 0 14px; letter-spacing: -0.02em; line-height: 1.08;
  color: var(--text-primary); text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.hero-section p{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-secondary); margin-bottom: 36px; max-width: 620px;
}

/* Buttons */
.cta-buttons{ display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.btn{
  display: inline-block; padding: 14px 30px; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: 1rem; letter-spacing: .2px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary{ background: var(--primary-color); color: #fff; box-shadow: 0 8px 24px color-mix(in oklab, var(--primary-color) 45%, black 55%); }
.btn-primary:hover{ background: var(--primary-hover); transform: translateY(-3px) scale(1.01); }
.btn-secondary{ background: color-mix(in oklab, var(--secondary-color) 80%, white 20%); color: var(--text-primary); }
.btn-secondary:hover{ background: color-mix(in oklab, var(--secondary-color) 60%, var(--border-color) 40%); transform: translateY(-3px); }

/* ---------- Slideshow ---------- */
.slideshow-container{ margin-top: 36px; width: 100%; max-width: 540px; position: relative; }
.slides{
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--border-color);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
html[data-theme="dark"] .slides{ box-shadow: 0 24px 60px rgba(0,0,0,0.30); }
.slide{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease-in-out;
}
.slide.active{ opacity: 1; }
.slide-dots{ display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .25s ease, background-color .25s ease;
}
.dot.active{ background: rgba(255,255,255,.95); transform: scale(1.2); }

/* ---------- Sections & Cards ---------- */
.content-section{ padding: 96px 0; }
.section-title{
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; margin: 0 0 54px; text-align: center;
  color: var(--text-primary); text-shadow: 0 1px 2px rgba(0,0,0,.20);
}
.features-grid, .commands-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }

.feature-card, .command-card{
  background: var(--card-color); padding: 28px; border-radius: 18px; border: 1px solid var(--border-color);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover, .command-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.10); }
html[data-theme="dark"] .feature-card:hover, html[data-theme="dark"] .command-card:hover{ box-shadow: 0 16px 40px rgba(0,0,0,0.25); }
.feature-card h3{ font-size: 1.3rem; margin: 0 0 10px; color: var(--text-primary); }
.feature-card p, .command-card p{ color: var(--text-secondary); margin: 0; }
.command-card h3{ margin: 0 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "SF Mono", monospace; font-size: 1.1rem; }
.command-card h3 span{ color: var(--text-secondary); }

/* ---------- Footer ---------- */
.footer{ background: var(--card-color); border-top: 1px solid var(--border-color); color: var(--text-secondary); padding: 36px 0; text-align: center; }
.footer .container{ display: flex; flex-direction: column; gap: 18px; }
.footer p{ margin: 0; font-size: .95rem; }
.footer-links{ display: flex; justify-content: center; gap: 16px; }
.footer-links a{ color: var(--text-secondary); text-decoration: none; }
.footer-links a:hover{ color: var(--text-primary); }
.footer-links span{ display: none; }
.social-links{ margin-top: 6px; }
.social-links p{ margin-bottom: 10px; font-size: 1rem; color: var(--text-primary); }
.social-icons{ display: flex; justify-content: center; align-items: center; gap: 22px; }
.social-icons a{ line-height: 0; opacity: .8; transition: opacity .25s ease, transform .25s ease; }
.social-icons a:hover{ opacity: 1; transform: translateY(-3px); }
.social-icons img{ width: 26px; height: 26px; }
html[data-theme="dark"] .social-icons img{ filter: brightness(0) invert(1); }

/* ---------- Liquid Glass utility ---------- */
.glass{
  position: relative;
  background: var(--glass-bg);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--glass-bg), var(--glass-bg)),
    linear-gradient(145deg, var(--glass-border-1), var(--glass-border-2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: var(--glass-top-highlight); pointer-events:none; mix-blend-mode: screen;
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; opacity:.16;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAPElEQVQYV2NkwA7+z0AEwDiQkJBRjAwM/2cYGBgYv2Gg0QwG4jCwYBgsBqJgQmGJ8rQm0g4iM4I9h8QJkAAO5a+1m0x8gNAAAAAElFTkSuQmCC');
  background-size: 8px 8px;
}
/* ให้ header/footer glass อ่านง่ายขึ้น */
.main-header .container.glass, .footer .container.glass{
  background: color-mix(in oklab, var(--glass-bg) 86%, transparent);
}
/* มุมสไลด์ให้เข้ากับกระจก */
.slides{ border-radius: calc(var(--glass-radius) - 6px); }

/* ---------- Reveal modern ---------- */
.reveal{ opacity: 0; transform: translateY(36px) scale(.995); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible{ opacity: 1; transform: translateY(0) scale(1); }

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  .nav-links{ display: none; }
  .nav-links.active{
    display: flex; position: fixed; inset: 0; width: 100vw; height: 100vh;
    background: color-mix(in oklab, var(--bg-1) 70%, var(--bg-2) 30%);
    flex-direction: column; justify-content: center; align-items: center; gap: 1.8rem; z-index: 1000;
    backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  }
  .nav-links.active a{ font-size: 1.4rem; }
  .hamburger-menu{ display: block; }
  .hero-section h1{ font-size: clamp(2rem, 7vw, 3rem); }
  .hero-section p{ font-size: 1.05rem; }
  .section-title{ font-size: clamp(1.6rem, 5.6vw, 2.2rem); }
}

/* ---------- Accessibility & Fallbacks ---------- */
@media (prefers-reduced-transparency: reduce){
  .glass{ background: color-mix(in oklab, var(--card-color) 92%, black 8%); }
  .glass::before, .glass::after{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .reveal, .btn, .feature-card, .command-card{ transition: none !important; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{ background: color-mix(in srgb, var(--card-color) 90%, black 10%); }
  .glass::before, .glass::after{ display:none; }
}
/* ======================================================
   Smooth Scrolling + Motion Utilities (append)
   ====================================================== */

/* 1) Motion tokens (เวลา/อีซิ่งเดียวกันทั้งเว็บ) */
:root{
  --dur-1: .35s;
  --dur-2: .55s;
  --dur-3: .85s;
  --ease-fluid: cubic-bezier(.22, .61, .36, 1);     /* smooth-out */
  --ease-spring: cubic-bezier(.16, 1, .3, 1);       /* springy but stable */
  --header-height: 64px;                            /* ใช้กับ anchor scroll */
}

/* 2) ทำ anchor jump ให้นุ่ม + ไม่โดน header ทับ */
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

/* 3) เพิ่ม momentum บน iOS & ลดการกระตุกขณะเลื่อน overlay menu */
body, .nav-links.active{
  -webkit-overflow-scrolling: touch;
}

/* 4) ปรับ reveal ให้ใช้ easing/token เดียวกัน + ขอ GPU ช่วยเรนเดอร์ */
.reveal{
  will-change: transform, opacity;
  transition: opacity var(--dur-2) var(--ease-fluid),
              transform var(--dur-2) var(--ease-fluid);
}
.reveal.visible{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* 5) การ์ด/สไลด์: ขอ GPU เรนเดอร์ล่วงหน้า + hover นุ่ม */
.slide, .feature-card, .command-card{
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}
.feature-card:hover, .command-card:hover{
  transition: transform var(--dur-1) var(--ease-spring),
              box-shadow var(--dur-1) var(--ease-fluid);
}

/* 6) Parallax utility (ใช้ร่วมกับ JS ใส่ .parallax + data-parallax-speed="0.12") */
.parallax{
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform var(--dur-3) linear; /* กันกระตุกตอนเปลี่ยนโซน */
}

/* 7) Utility: hover-lift (ใช้กับลิงก์/ปุ่มที่อยากให้ลอยนิดๆ) */
@media (hover:hover){
  .hover-lift{
    transition: transform var(--dur-1) var(--ease-spring),
                box-shadow var(--dur-1) var(--ease-fluid);
  }
  .hover-lift:hover{ transform: translateY(-3px); }
}

/* 8) Scrollbar (เบาๆ ไม่เด่นเกิน) */
*{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--primary-color) 55%, #7a7a7a) transparent;
}
*::-webkit-scrollbar{ height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary-color), var(--accent-pink));
}
*::-webkit-scrollbar-track{ background: transparent; }

/* 9) ปรับสภาพพื้นโปร่งให้ลื่นขึ้นเวลาสกรอลล์ (ลด repaint) */
.main-header,
.footer .container,
.glass{
  will-change: backdrop-filter, transform;
  transform: translateZ(0); /* promote to its own layer */
}

/* 10) Accessibility: เคารพผู้ใช้ที่ปิด motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .parallax, .reveal, .hover-lift,
  .feature-card, .command-card{ transition: none !important; }
}