html { background: #FAFAFA; overflow-x: clip; } /* ตัดส่วนเกินแนวนอน (เช่น gradient blob) โดยไม่ทำให้หน้าเลื่อนข้างได้ */
body {
  background: #FAFAFA;
  color: #1A1A1A;
  /* สร้าง stacking context ให้ body เพื่อให้ .bg-grid-overlay (z-index: -1)
     อยู่เหนือพื้นหลังของ body แต่ต่ำกว่าเนื้อหาทุกชิ้น */
  isolation: isolate;
}
::selection { background: rgba(14, 165, 233, 0.2); color: #000; }

/* ---------- Thai typography ---------- */
body { font-feature-settings: "liga" 1, "kern" 1; }
h1, h2, h3, h4 { line-height: 1.25; }
h1 { line-height: 1.15; }
.footer-text { line-height: 1.1; }

/* ---------- Grid overlay (เส้นกริดพื้นหลัง อยู่ใต้เนื้อหาทั้งหมด) ---------- */
.bg-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.045) 1px, transparent 1px);
  background-size: 6rem 6rem;
}

/* ---------- Stripe gradient blobs ---------- */
.stripe-gradient {
  background: linear-gradient(120deg, #38BDF8, #0EA5E9, #1D4ED8, #3A86FF);
  background-size: 300% 300%;
  animation: stripeMove 8s ease infinite;
}
@keyframes stripeMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Marquee ---------- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-outline {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #1A1A1A;
}
.cursor-outline {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(26,26,26,0.4);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
}
.cursor-outline.cursor-hover {
  width: 64px; height: 64px;
  background: rgba(26,26,26,0.05);
}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button {
  cursor: none;
}

/* ---------- Reveal text ---------- */
.reveal-text {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal-text.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Bento tilt ---------- */
.bento-perspective { perspective: 1000px; }
.bento-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.bento-inner {
  transform: translateZ(30px);
  transition: transform 0.1s ease-out;
}

/* ---------- Magnetic buttons ---------- */
.magnetic { transition: transform 0.2s ease-out; }

/* ---------- Nav ---------- */
#nav { transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; }
#nav.nav-scrolled { background: rgba(250,250,250,0.7); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); }

/* ---------- Footer giant text ---------- */
.footer-text {
  color: transparent;
  -webkit-text-stroke: 2px #1A1A1A;
  opacity: 0.05;
}

/* ---------- Work filter tabs & cards ---------- */
.work-tab {
  border-color: rgba(0, 0, 0, 0.12);
  color: #6B7280;
}
.work-tab:hover {
  border-color: rgba(0, 0, 0, 0.28);
  color: #1A1A1A;
}
.work-tab.is-active {
  background: #1A1A1A;
  border-color: #1A1A1A;
  color: #FFFFFF;
}
.work-card {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card.is-hidden { display: none; }
.work-card.is-entering {
  opacity: 0;
  transform: translateY(0.75rem);
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  z-index: 45; /* เหนือ nav (40) แต่ต่ำกว่า custom cursor */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #1A1A1A;
  color: #FFFFFF;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s, background-color 0.2s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #000000; }
.back-to-top:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 3px; }
@media (min-width: 1024px) {
  .back-to-top { right: 2rem; bottom: 2rem; width: 3.5rem; height: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* ---------- Article body (บทความจากหลังบ้าน) ---------- */
.article-body { font-size: 1.0625rem; line-height: 1.9; color: #374151; }
.article-body > * + * { margin-top: 1.25rem; }
.article-body h2 { margin-top: 3rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; color: #1A1A1A; }
.article-body h3 { margin-top: 2.25rem; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; color: #1A1A1A; }
.article-body strong { color: #1A1A1A; font-weight: 600; }
.article-body a { color: #1A1A1A; text-decoration: underline; text-underline-offset: 3px; }
.article-body ul { list-style: disc; padding-left: 1.5rem; }
.article-body ol { list-style: decimal; padding-left: 1.5rem; }
.article-body li + li { margin-top: 0.4rem; }
.article-body blockquote { border-left: 3px solid #1A1A1A; padding-left: 1.25rem; font-size: 1.125rem; color: #1A1A1A; }
.article-body code { font-family: "JetBrains Mono", monospace; font-size: 0.85em; background: rgba(0,0,0,0.05); border-radius: 0.375rem; padding: 0.15rem 0.4rem; }
.article-body pre { overflow-x: auto; border-radius: 1.25rem; background: #1A1A1A; color: #F5F5F5; padding: 1.25rem 1.5rem; font-size: 0.875rem; line-height: 1.7; }
.article-body pre code { background: none; padding: 0; font-size: inherit; }

/* ---------- Cover slider (Swiper) — work.php ---------- */
.cover-swiper-pagination { --swiper-theme-color: #000; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.15; }
.cover-swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; transition: width 0.3s ease, opacity 0.3s ease; }
.cover-swiper-pagination .swiper-pagination-bullet-active { width: 28px; border-radius: 9999px; }

/* ---------- FAQ (details/summary) ---------- */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid #0EA5E9; outline-offset: 4px; border-radius: 0.5rem; }

/* ---------- ไอคอน inline SVG จาก icon() — ขนาด/ตำแหน่งเท่ากับ <iconify-icon> เดิม ---------- */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: 0; }

/* ---------- Hero (ส่วนบนสุดของหน้า) ----------
   ใช้ CSS animation ล้วน เริ่มเล่นตั้งแต่ paint แรก ไม่ต้องรอ JS (IntersectionObserver)
   ทำให้ LCP (หัวข้อ / ภาพปก hero) แสดงได้ทันที — ส่วนที่ต่ำกว่าจอแรกยังใช้ .reveal-text ตามเดิม */
.hero-in { animation: heroIn 0.8s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-in { animation: none; }
}

/* ---------- Preloader ----------
   ม่านเต็มจอพร้อมโลโก้ ARK. — เลื่อนขึ้นเปิดหน้าเว็บเมื่อโหลดเสร็จ (สูงสุด 2 วินาที)
   เนื้อหาด้านล่าง render ไปพร้อมกัน จึงไม่ทำให้ LCP ช้าลง */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9000; /* เหนือทุกอย่าง ยกเว้น custom cursor (9999) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: #FAFAFA;
  transition: transform 0.9s cubic-bezier(0.76,0,0.24,1);
  /* กันค้าง: ถ้า JS ไม่ทำงาน ซ่อนเองหลัง 3 วินาที */
  animation: preloaderFailsafe 0.4s ease 3s forwards;
}
html.no-preloader .preloader { display: none; }
.preloader.is-done { transform: translateY(-100%); pointer-events: none; }
.preloader-logo {
  font-family: "Noto Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #1A1A1A;
  animation: preloaderLogo 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
.preloader-dot { color: #0EA5E9; display: inline-block; animation: preloaderDot 1s ease-in-out 0.5s infinite; }
.preloader-bar {
  position: relative;
  width: 7.5rem;
  height: 2px;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(0,0,0,0.08);
}
.preloader-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38BDF8, #0EA5E9, #1D4ED8);
  animation: preloaderBar 1.1s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes preloaderLogo { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes preloaderDot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.35rem); } }
@keyframes preloaderBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes preloaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .preloader { transition: opacity 0.3s ease; }
  .preloader.is-done { transform: none; opacity: 0; }
  .preloader-logo, .preloader-dot, .preloader-bar::after { animation: none; }
}

/* หัวข้อในบทความ: เว้นที่ให้ nav (fixed) ตอนกดลิงก์จากสารบัญ */
.article-body h2[id] { scroll-margin-top: 7rem; }