/* ============================================================
   หนังฟรีไม่จำกัด — design tokens
   ธีม: dark / neutral + สีรอง "ฟ้า"
   สไตล์: เรียบ มินิมอล แบบ Apple (hairline border, blur, ไม่มี gradient)
   ฟอนต์: Google Sans Flex + Google Sans Text (ละติน/ตัวเลข)
           Noto Sans Thai (ไทย — Google Sans ยังไม่มี glyph ไทย)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,300..700&family=Google+Sans+Text:wght@400..700&family=Noto+Sans+Thai:wght@300..700&display=swap');

:root, .dark {
  /* ---- พื้นผิว neutral (ทึบ ไม่มีสีเจือ) ---- */
  --background: 0.145 0 0;
  --foreground: 0.975 0 0;
  --card: 0.185 0 0;
  --card-foreground: 0.975 0 0;
  --popover: 0.205 0 0;
  --popover-foreground: 0.975 0 0;

  /* ---- primary = ฟ้า (สีรองของเว็บ) ---- */
  --primary: 0.645 0.191 254;
  --primary-foreground: 0.145 0 0;

  --secondary: 0.235 0 0;
  --secondary-foreground: 0.975 0 0;
  --muted: 0.225 0 0;
  --muted-foreground: 0.675 0 0;
  --accent: 0.265 0 0;
  --accent-foreground: 0.975 0 0;
  --destructive: 0.62 0.21 25;

  --border: 0.255 0 0;
  --input: 0.295 0 0;
  --ring: 0.645 0.191 254;

  /* Apple-ish: มุมโค้งใหญ่ ไล่ระดับชัดเจน */
  --radius: 1rem;

  /* เส้นคั่นบางระดับ hairline */
  --hairline: oklch(1 0 0 / 0.09);
}

html { color-scheme: dark; }

/* ---------- Typography ---------- */
* {
  font-family: "Google Sans Flex", "Google Sans Text", "Noto Sans Thai",
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-optical-sizing: auto;
}
html, body {
  font-family: "Google Sans Flex", "Google Sans Text", "Noto Sans Thai",
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

body {
  background: oklch(var(--background));
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}

/* หัวข้อแบบ Apple — ตัวหนาพอดี ตัวอักษรชิดขึ้นเล็กน้อย */
h1, h2, h3, h4 {
  letter-spacing: -0.021em;
  font-weight: 600;
}

/* ตัวเลข/ละติน: ความกว้างเท่ากัน อ่านง่ายในตาราง/แถบข้อมูล */
.font-num {
  font-family: "Google Sans Flex", "Google Sans Text", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- Utilities ---------- */

/* หัวเว็บโปร่งแสง + เบลอ (translucent nav) */
.glass {
  background: oklch(var(--background) / 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: oklch(var(--background)); }
}

/* เส้นคั่นบาง 1px แบบ hairline */
.hairline-b { border-bottom: 1px solid var(--hairline); }
.hairline-t { border-top: 1px solid var(--hairline); }
.hairline   { border: 1px solid var(--hairline); }

/* แถบไฮไลต์หัวข้อ — ฟ้าเรียบ ไม่มี gradient */
.accent-bar {
  width: 0.1875rem; border-radius: 9999px;
  background: oklch(var(--primary));
}

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Skeleton ระหว่างโหลดรูป — เรียบ ไม่วิบวับเกินไป */
.skeleton { position: relative; overflow: hidden; background: oklch(var(--muted)); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(var(--foreground) / 0.05), transparent);
  animation: skeleton-shimmer 1.6s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
img.is-loaded { background: transparent !important; }

/* scrollbar — บาง เรียบ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.24); }

/* โฟกัสแบบ Apple — วงแหวนฟ้าบาง */
:focus-visible {
  outline: 2px solid oklch(var(--primary) / 0.9);
  outline-offset: 2px;
}

/* การ์ด: ยกขึ้นนิดเดียวตอน hover (ไม่ over-animate) */
@media (hover: hover) {
  .card-rise { transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, background-color .2s ease; }
  .card-rise:hover { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card-rise:hover { transform: none; }
}

/* ============================================================
   MOTION — สมูท เนียน สไตล์ Apple
   ใช้ easing เดียวกันทั้งเว็บ, ระยะทางสั้น, ไม่เด้งเกินจริง
   ทุกอย่างทำงานเฉพาะเมื่อ <html class="motion"> (ตั้งจากสคริปต์ใน head)
   ============================================================ */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; }

/* ---- 1. เผยตัวเมื่อเลื่อนถึง (reveal on scroll) ---- */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- 2. ไล่ทีละชิ้นในกริด (stagger) ---- */
.motion [data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 11) * 45ms);
}
.motion [data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ---- 3. รูปค่อย ๆ ปรากฏหลังโหลดเสร็จ ---- */
.media-fade {
  transition: opacity .6s var(--ease-soft), transform .8s var(--ease-out);
}
.skeleton .media-fade {
  opacity: 0;
  transform: scale(1.04);
}

/* ---- 4. หัวเว็บ: เข้มขึ้นเล็กน้อยเมื่อเลื่อนลง ---- */
header.glass {
  transition: background-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
header.glass.is-scrolled {
  background: oklch(var(--background) / 0.82);
  box-shadow: 0 1px 24px oklch(0 0 0 / 0.45);
}

/* ---- 5. แผงค้นหา / เมนูมือถือ / ป๊อปอัป ---- */
@keyframes m-fade      { from { opacity: 0 } to { opacity: 1 } }
@keyframes m-pop       { from { opacity: 0; transform: translateY(-14px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes m-slide-l   { from { transform: translateX(-100%) } to { transform: none } }
@keyframes m-rise      { from { opacity: 0; transform: translateY(20px) scale(.98) } to { opacity: 1; transform: none } }

#search-overlay:not(.hidden) #search-backdrop,
#mobile-drawer:not(.hidden) #drawer-backdrop { animation: m-fade .28s var(--ease-soft) both; }

#search-overlay:not(.hidden) form   { animation: m-pop .42s var(--ease-out) both; }
#mobile-drawer:not(.hidden) aside   { animation: m-slide-l .42s var(--ease-out) both; }

#popup-overlay[style*="flex"] > div:not(#popup-backdrop) { animation: m-rise .45s var(--ease-out) both; }
#popup-overlay[style*="flex"] #popup-backdrop            { animation: m-fade .3s var(--ease-soft) both; }

/* เมนูย่อยในมือถือ: คลี่ลงนุ่ม ๆ */
#m-genres { transition: opacity .3s var(--ease-soft); }
#m-genres-chevron { transition: transform .3s var(--ease-out); }

/* ---- 6. ปุ่มกด: ยุบเล็กน้อยตอนคลิก ---- */
.press { transition: transform .18s var(--ease-out), opacity .2s var(--ease-soft), background-color .2s var(--ease-soft); }
.press:active { transform: scale(.96); }

/* ---- 7. การ์ดหนัง: ยกขึ้น + ภาพซูมช้า ๆ ---- */
@media (hover: hover) {
  .card-rise:hover .media-fade { transform: scale(1.05); }
}

/* ---- 8. ปุ่มกลับขึ้นบน: โผล่เมื่อเลื่อนลงไปไกลพอ ---- */
#back-to-top { transition: opacity .35s var(--ease-soft), transform .35s var(--ease-out); }

/* ---- ปิดทุก motion เมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion [data-reveal],
  .motion [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .skeleton .media-fade { opacity: 1; transform: none; }
}