/* ============================================================
   capkatsu motion kit v1 — mascot & UI animation
   ------------------------------------------------------------
   ใช้คู่กับ tokens.css (สี/ฟอนต์) — ไฟล์นี้คุมเฉพาะ "การขยับ"
   โครงสร้าง markup ที่คาดหวัง:

     <span class="ck-mascot is-idle">
       <img src="brand/pose/pose-idle.png" alt="...">
     </span>

   คลาส is-* ให้ map ตาม pose เดียวกับ mascot.js:
     idle → is-idle, working → is-working, done → is-done,
     error → is-error, hello → is-hello, ok → is-ok
   ============================================================ */

:root {
  /* motion tokens — ห้ามตั้งเลขเอง ให้อ้างตัวแปรพวกนี้เสมอ */
  --ck-dur-fast:   150ms;  /* hover, focus, กดปุ่ม */
  --ck-dur-base:   250ms;  /* เปิด/ปิด element, state change */
  --ck-dur-slow:   400ms;  /* entrance ของ card / section */
  --ck-dur-loop:   2.8s;   /* ลูปหายใจ / ลูป idle ของ mascot */
  --ck-ease-out:    cubic-bezier(.22, .61, .36, 1);   /* ของเข้าฉาก */
  --ck-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);  /* ป๊อป เด้ง — ลายเซ็นแบรนด์ */
  --ck-ease-soft:   ease-in-out;                      /* ลูปช้า ๆ */
}

/* ── โครง mascot ─────────────────────────────────────────── */
.ck-mascot {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.ck-mascot img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 88%; /* หมุนจากฐาน เหมือนตัวยืนอยู่จริง */
  will-change: transform;
}
/* เงาใต้ตัว — หด/ขยายตามจังหวะเด้ง ให้ดูมีน้ำหนัก */
.ck-mascot::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: -4%;
  height: 7%;
  background: radial-gradient(ellipse at center, rgba(62,41,20,.22), transparent 70%);
  border-radius: 50%;
  transform-origin: center;
  pointer-events: none;
}

/* ── idle: หายใจเบา ๆ ─────────────────────────────────────── */
@keyframes ck-breathe {
  0%, 100% { transform: translateY(0)      scale(1); }
  50%      { transform: translateY(-3.5%)  scale(1.012); }
}
@keyframes ck-shadow-breathe {
  0%, 100% { transform: scaleX(1);    opacity: 1; }
  50%      { transform: scaleX(.94);  opacity: .8; }
}
.ck-mascot.is-idle img    { animation: ck-breathe var(--ck-dur-loop) var(--ck-ease-soft) infinite; }
.ck-mascot.is-idle::after { animation: ck-shadow-breathe var(--ck-dur-loop) var(--ck-ease-soft) infinite; }

/* ── hello: โยกทัก 2 ที แล้วพักหายใจ ──────────────────────── */
@keyframes ck-wave {
  0%       { transform: rotate(0deg); }
  6%       { transform: rotate(-5deg); }
  16%      { transform: rotate(5deg); }
  26%      { transform: rotate(-4deg); }
  36%      { transform: rotate(3deg); }
  46%, 100%{ transform: rotate(0deg); } /* ที่เหลือของลูปคือช่วงพัก */
}
.ck-mascot.is-hello img { animation: ck-wave 3.2s var(--ck-ease-soft) infinite; }

/* ── working (ทอดอยู่): สั่นซู่ ๆ + ควันลอย ───────────────── */
@keyframes ck-sizzle {
  0%, 100% { transform: translate(0, 0)        rotate(0); }
  20%      { transform: translate(-1.2%, .6%)  rotate(-.8deg); }
  40%      { transform: translate(1.2%, -.5%)  rotate(.8deg); }
  60%      { transform: translate(-.9%, .4%)   rotate(-.5deg); }
  80%      { transform: translate(1%, -.6%)    rotate(.6deg); }
}
@keyframes ck-steam {
  0%   { transform: translateY(0)     scale(.6); opacity: 0; }
  25%  { opacity: .55; }
  100% { transform: translateY(-160%) scale(1.15); opacity: 0; }
}
.ck-mascot.is-working img { animation: ck-sizzle .5s linear infinite; }
.ck-mascot.is-working::before,
.ck-mascot.is-working .ck-steam {
  content: "";
  position: absolute;
  top: 4%; left: 30%;
  width: 12%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,246,232,.95), rgba(255,246,232,0) 70%);
  border-radius: 50%;
  animation: ck-steam 1.6s ease-out infinite;
  pointer-events: none;
}
.ck-mascot.is-working .ck-steam { left: 58%; top: 2%; width: 9%; animation-delay: .7s; }

/* ── done: ป๊อปดีใจทีเดียว แล้วนิ่ง ───────────────────────── */
@keyframes ck-pop {
  0%   { transform: scale(.88); }
  55%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.ck-mascot.is-done img { animation: ck-pop var(--ck-dur-slow) var(--ck-ease-bounce) 1 both; }

/* ── error: สะบัดหัวสั้น ๆ ครั้งเดียว (ไม่ลูป — ไม่ตอกย้ำ) ── */
@keyframes ck-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3%); }
  40%      { transform: translateX(3%); }
  60%      { transform: translateX(-2%); }
  80%      { transform: translateX(2%); }
}
.ck-mascot.is-error img { animation: ck-shake var(--ck-dur-slow) ease-in-out 1 both; }

/* ── ok: เด้งรับทีเดียว ──────────────────────────────────── */
@keyframes ck-hop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-7%); }
  70%  { transform: translateY(0); }
  85%  { transform: translateY(-2%); }
  100% { transform: translateY(0); }
}
.ck-mascot.is-ok img { animation: ck-hop .55s var(--ck-ease-bounce) 1 both; }

/* ── entrance ทั่วไป (card, badge, mascot เข้าฉาก) ────────── */
@keyframes ck-enter-pop {
  0%   { transform: scale(.92) translateY(6px); opacity: 0; }
  100% { transform: scale(1)   translateY(0);   opacity: 1; }
}
.ck-enter { animation: ck-enter-pop var(--ck-dur-slow) var(--ck-ease-bounce) 1 both; }

/* ── ปุ่ม / interactive (ใช้กับ .btn ของเว็บได้เลย) ───────── */
.ck-pressable { transition: transform var(--ck-dur-fast) var(--ck-ease-out); }
.ck-pressable:hover  { transform: translateY(-1px); }
.ck-pressable:active { transform: translateY(0) scale(.97); }

/* ── กติกาสำคัญ: เคารพผู้ใช้ที่ปิด motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ck-mascot img,
  .ck-mascot::before,
  .ck-mascot::after,
  .ck-mascot .ck-steam,
  .ck-enter,
  .ck-pressable {
    animation: none !important;
    transition: none !important;
  }
  .ck-enter { opacity: 1; transform: none; }
}