/* การเคลื่อนไหวของท้ายหน้า B (ชั้นบน footer.css) จากต้นแบบ footer-b-m3
   ทำไม: ใช้แค่ transform/opacity ตามกฎโปรเจกต์ ลื่นบนมือถือ ไม่บังคับวาดหน้าใหม่
   ไม่มี JS = ท้ายหน้านิ่ง (ซ่อน/เผยต่อเมื่อ JS ติด .fx-armed) ลูปเดินเฉพาะตอน .fx-run
   เบอร์โทรนิ่ง ไม่มีตัวเลขหมุน (ไม่ใช้ fx-roll) */

/* ===== ค่ากลาง ===== */
footer.fx-mo { --fx-ease: cubic-bezier(.2, .7, .2, 1); }

/* ===== เผยตอนเลื่อนถึง (ครั้งเดียว) ===== */
/* ต้นแบบใช้ clip-path กับแถบม่วง เปลี่ยนเป็น opacity + translateY ตามกฎ transform/opacity */
footer.fx-mo.fx-armed .foot-band {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .9s var(--fx-ease);
}

footer.fx-mo.fx-armed .fx-rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .7s var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 70ms + 120ms);
}

footer.fx-mo.fx-in .foot-band,
footer.fx-mo.fx-in .fx-rv {
  opacity: 1;
  transform: none;
}

/* ===== เส้นใต้ลิงก์ยืดออก ===== */
footer.fx-mo .foot-grid a,
footer.fx-mo .foot-copy a,
footer.fx-mo .foot-num {
  position: relative;
  text-decoration: none;
}

footer.fx-mo .foot-grid a::after,
footer.fx-mo .foot-copy a::after,
footer.fx-mo .foot-num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--fx-ease);
}

footer.fx-mo .foot-grid a:hover,
footer.fx-mo .foot-copy a:hover,
footer.fx-mo .foot-num:hover { text-decoration: none; }

footer.fx-mo .foot-grid a:hover::after,
footer.fx-mo .foot-copy a:hover::after,
footer.fx-mo .foot-num:hover::after,
footer.fx-mo .foot-grid a:focus-visible::after,
footer.fx-mo .foot-copy a:focus-visible::after {
  transform: scaleX(1);
}

/* ===== ปุ่มจองยกขึ้น ===== */
/* ต้นแบบค่อยๆ เปลี่ยนสีพื้นด้วย transition ตัดออก เปลี่ยนสีทันที เคลื่อนแค่ transform */
footer.fx-mo .foot-cta { transition: transform .3s var(--fx-ease); }

footer.fx-mo .foot-cta:hover { transform: translateY(-4px); background: #f4edf5; }

footer.fx-mo .foot-cta img, footer.fx-mo .foot-cta svg.ic { transition: transform .4s var(--fx-ease); }

footer.fx-mo .foot-cta:hover img, footer.fx-mo .foot-cta:hover svg.ic { transform: rotate(-14deg) scale(1.12); }

/* ===== ลูกศรกลับด้านบนขยับ ===== */
footer.fx-mo .fx-up {
  display: inline-block;
  animation: fx-bob 1.8s ease-in-out infinite;
  animation-play-state: paused;
}

footer.fx-mo.fx-run .fx-up { animation-play-state: running; }

@keyframes fx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ===== ชั้นธรรมชาติในแถบม่วง: สัตว์ ต้นศรีตรัง ไดโนเสาร์ ===== */
footer.fx-m2 .foot-band { position: relative; overflow: hidden; }

footer.fx-m2 .foot-band-in { position: relative; z-index: 1; }

footer.fx-m2 .fx-nat {
  position: absolute;
  inset: auto 0 0 0;
  height: 84px;
  z-index: 0;
  pointer-events: none;
  color: #8f4f96;
}

footer.fx-m2 .fx-row {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  width: max-content;
  animation: fx-drift 140s linear infinite;
}

footer.fx-m2 .fx-row svg { display: block; flex: none; height: 84px; width: auto; }

footer.fx-m2 .fx-sway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: fx-sway 7s ease-in-out infinite alternate;
}

footer.fx-m2 .fx-sway.s2 { animation-duration: 9s; animation-delay: -3s; }

footer.fx-m2 .fx-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: fx-spin 60s linear infinite;
}

footer.fx-m2 .fx-dino {
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 120px;
  height: 72px;
  color: #88468f;
  animation: fx-walk 75s linear infinite;
}

footer.fx-m2 .fx-dino svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: fx-step-bob .9s ease-in-out infinite;
}

footer.fx-m2 .fx-dino .lg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: fx-leg .9s ease-in-out infinite alternate;
}

footer.fx-m2 .fx-dino .lg.b { animation-delay: -.45s; }

footer.fx-m2 .fx-dino .nk {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: fx-neck 6s ease-in-out infinite alternate;
}

@keyframes fx-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fx-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-walk {
  from { transform: translateX(-140px); }
  to { transform: translateX(calc(100vw + 20px)); }
}
@keyframes fx-step-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes fx-leg { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes fx-neck { 0%, 60% { transform: rotate(0); } 100% { transform: rotate(-6deg); } }

/* ===== M3: สัตว์ที่นักวิจัยศึกษา + ต้นศรีตรัง (แถวสูง 120px) ===== */
footer.fx-m3 .fx-nat { height: 120px; }

footer.fx-m3 .fx-row3 svg { height: 120px; }

/* แผ่นกว้าง 2300px ความเร็วลอยเท่า M2 */
footer.fx-m3 .fx-row3 { animation-duration: 200s; }

footer.fx-m3 .fx-row3 .w {
  transform-box: fill-box;
  animation: fx-flap .5s ease-in-out infinite alternate;
}

footer.fx-m3 .fx-row3 .wl { transform-origin: 100% 50%; }

footer.fx-m3 .fx-row3 .wr { transform-origin: 0% 50%; }

footer.fx-m3 .fx-row3 .fx-batfly .w { animation-duration: .32s; }

footer.fx-m3 .fx-row3 .fx-fly { animation: fx-float 4s ease-in-out infinite alternate; }

footer.fx-m3 .fx-row3 .fx-batfly { animation: fx-float 3s ease-in-out infinite alternate; }

footer.fx-m3 .fx-row3 .fx-float {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: fx-float 5s ease-in-out infinite alternate;
}

footer.fx-m3 .fx-row3 .fx-crab { animation: fx-crawl 3.2s ease-in-out infinite alternate; }

footer.fx-m3 .fx-row3 .fx-hang { animation: fx-hang 6s ease-in-out infinite alternate; }

footer.fx-m3 .fx-petal {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: fx-petal 9s linear infinite;
}

footer.fx-m3 .fx-petal.p1 { animation-delay: -3s; animation-duration: 11s; }

footer.fx-m3 .fx-petal.p2 { animation-delay: -6.5s; animation-duration: 10s; }

@keyframes fx-flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
@keyframes fx-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes fx-crawl { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes fx-hang { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
@keyframes fx-petal {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  10% { opacity: 1; }
  50% { transform: translate(9px, 26px) rotate(160deg); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-4px, 52px) rotate(320deg); }
}

/* ===== หยุดลูปเมื่อไม่มี .fx-run (พ้นจอ แท็บถูกซ่อน หรือไม่มี JS) =====
   ต้องอยู่หลังกฎ animation ทุกตัว และใช้ :not() ให้ความเจาะจงสูงกว่า
   เพราะ shorthand "animation:" ของ M3 คืนค่า play-state เป็น running */
footer.fx-mo:not(.fx-run) .fx-nat,
footer.fx-mo:not(.fx-run) .fx-nat * { animation-play-state: paused; }

/* ===== มือถือ ===== */
@media (max-width: 600px) {
  footer.fx-m2 .fx-nat { height: 64px; }
  footer.fx-m2 .fx-row svg { height: 64px; }
  footer.fx-m2 .fx-dino { width: 92px; height: 56px; animation-duration: 45s; }
  footer.fx-m3 .fx-nat { height: 88px; }
  footer.fx-m3 .fx-row3 svg { height: 88px; }
}

/* ===== ลดการเคลื่อนไหว: ภาพนิ่ง เห็นครบ ===== */
@media (prefers-reduced-motion: reduce) {
  footer.fx-mo.fx-armed .foot-band,
  footer.fx-mo.fx-armed .fx-rv { opacity: 1; transform: none; transition: none; }
  footer.fx-mo *,
  footer.fx-mo *::after { animation: none !important; transition: none !important; }
  footer.fx-m2 .fx-dino { transform: translateX(62vw); }
}