/* =============================================
   bounce-animations.css
   อนิเมชัน "เด้งดึ๋ง" สำหรับ Landing Page
   ============================================= */

/* ─── 1. BOUNCE เด้งลงมาจากด้านบน (hero image entrance) ─── */
@keyframes dropBounce {
  0%   { transform: translateY(-80px) scale(0.9); opacity: 0; }
  55%  { transform: translateY(12px)  scale(1.03); opacity: 1; }
  72%  { transform: translateY(-8px)  scale(0.98); }
  85%  { transform: translateY(5px)   scale(1.01); }
  93%  { transform: translateY(-3px)  scale(1.00); }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

.img-drop-bounce {
  animation: dropBounce 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── 2. FLOAT เด้งลอยขึ้นลงซ้ำ ๆ (ambient idle) ─── */
@keyframes floatBounce {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

.img-float {
  animation: floatBounce 3s ease-in-out infinite;
}

/* ─── 3. ELASTIC POP สเกลโผล่มาแบบยืดหยุ่น ─── */
@keyframes elasticPop {
  0%   { transform: scale(0);    opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(0.93); }
  100% { transform: scale(1);    opacity: 1; }
}

.img-elastic-pop {
  animation: elasticPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ─── 4. JELLY สั่นไหวเป็นวุ้น ─── */
@keyframes jelly {
  0%   { transform: scale(1,   1   ); }
  30%  { transform: scale(1.1, 0.9 ); }
  45%  { transform: scale(0.9, 1.1 ); }
  60%  { transform: scale(1.05,0.95); }
  75%  { transform: scale(0.97,1.03); }
  90%  { transform: scale(1.01,0.99); }
  100% { transform: scale(1,   1   ); }
}

.img-jelly {
  animation: jelly 0.8s ease both;
  transform-origin: center bottom;
}

/* ─── 5. RUBBER BAND กระตุกซ้ายขวา ─── */
@keyframes rubberBand {
  0%   { transform: scaleX(1);    }
  30%  { transform: scaleX(1.2) scaleY(0.85); }
  45%  { transform: scaleX(0.88) scaleY(1.05); }
  60%  { transform: scaleX(1.08) scaleY(0.95); }
  75%  { transform: scaleX(0.96) scaleY(1.02); }
  100% { transform: scaleX(1);    }
}

.img-rubber-band {
  animation: rubberBand 0.9s ease both;
}

/* ─── 6. HEARTBEAT เต้นๆ เหมือนหัวใจ ─── */
@keyframes heartbeat {
  0%, 100% { transform: scale(1);    }
  14%       { transform: scale(1.08); }
  28%       { transform: scale(1);    }
  42%       { transform: scale(1.05); }
  70%       { transform: scale(1);    }
}

.img-heartbeat {
  animation: heartbeat 1.4s ease-in-out infinite;
}

/* ─── 7. SPIN-DROP หมุนลงมา ─── */
@keyframes spinDrop {
  0%   { transform: rotate(-180deg) scale(0.5); opacity: 0; }
  70%  { transform: rotate(15deg)   scale(1.05); opacity: 1; }
  85%  { transform: rotate(-8deg)   scale(0.97); }
  100% { transform: rotate(0deg)    scale(1);    opacity: 1; }
}

.img-spin-drop {
  animation: spinDrop 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* ─── 8. HOVER BOUNCE (hover เมาส์แล้วเด้ง) ─── */
.img-hover-bounce {
  transition: transform 0.15s ease;
}

.img-hover-bounce:hover {
  animation: dropBounce 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  cursor: pointer;
}

/* ─────────────────────────────────────────────
   ANIMATION DELAY HELPERS (ใช้กับหลาย element)
   ───────────────────────────────────────────── */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000{ animation-delay: 1.0s; }

/* ─────────────────────────────────────────────
   ACCESSIBILITY: ปิดอนิเมชันถ้า user ตั้งค่าลด motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .img-drop-bounce,
  .img-float,
  .img-elastic-pop,
  .img-jelly,
  .img-rubber-band,
  .img-heartbeat,
  .img-spin-drop,
  .img-hover-bounce {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}