/* =====================================================================
   animations.css — ภาพเคลื่อนไหวทั้งหมดของเว็บ (ทำงานคู่กับ animations.js)
   ปรับความเร็ว/ระยะได้ที่ตัวแปรด้านล่าง
   ===================================================================== */
:root {
  --anim-dur: 1.1s;           /* ความยาวการลอยขึ้น */
  --anim-rise: 48px;          /* ระยะที่ลอยขึ้น */
  --anim-blur: 8px;           /* ความเบลอตอนเริ่ม */
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- หัวหน้าเพจตอนเปิด ---------- */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-in { animation: hero-in 1.2s var(--anim-ease) both; }

/* หัวหน้าเพจจางและย่อลงเล็กน้อยตอนเลื่อนผ่าน (--exit มาจาก animations.js 0 → 1) */
.anim .hero .wrap, .anim [data-hero] {
  transform: translateY(calc(var(--exit, 0) * 70px)) scale(calc(1 - var(--exit, 0) * 0.06));
  opacity: calc(1 - var(--exit, 0) * 0.75);
  will-change: transform, opacity;
}

/* ---------- ลอยขึ้นเมื่อเลื่อนมาถึง ---------- */
.anim .reveal-wait {
  opacity: 0;
  transform: translateY(var(--anim-rise));
  filter: blur(var(--anim-blur));
  transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease), filter var(--anim-dur) var(--anim-ease);
}
.anim .reveal-wait[data-reveal="zoom"]  { transform: scale(0.92); }
.anim .reveal-wait[data-reveal="left"]  { transform: translateX(calc(var(--anim-rise) * -1.4)); }
.anim .reveal-wait[data-reveal="right"] { transform: translateX(calc(var(--anim-rise) * 1.4)); }
.anim .reveal-wait.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- ภาพขยายตามการเลื่อน (--zoom 0 → 1) ---------- */
[data-zoom] {
  transform: scale(calc(0.86 + var(--zoom, 1) * 0.14));
  border-radius: calc(44px - var(--zoom, 1) * 16px);
  transform-origin: 50% 0;
  will-change: transform;
}

/* ---------- ข้อความสว่างทีละคำ ---------- */
[data-scrub] .w { transition: opacity 0.25s linear; }

/* ---------- ข้อความไล่สี ---------- */
.text-grad {
  background: var(--site-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 200% 100%; animation: grad-shift 8s ease-in-out infinite alternate;
}
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- ผู้ใช้ที่ขอลดการเคลื่อนไหว / ตอนพิมพ์ ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-in, .text-grad { animation: none !important; }
  [data-zoom] { transform: none; }
  .anim .hero .wrap, .anim [data-hero] { transform: none; opacity: 1; }
}
@media print {
  .anim .reveal-wait { opacity: 1 !important; transform: none !important; filter: none !important; }
  .gnav, .gprogress, .gpager { display: none; }
}