/* ============================================================
   CHIBI — chuyển động cho hai nhân vật (vẽ ở assets/js/chibi.js).
   Chỉ transform/opacity. Mọi animation chỉ chạy dưới `.is-live` — class
   này do JS bật khi khối chứa chibi đang trong màn hình (invitation.js),
   cuộn ra ngoài là gỡ → không tốn CPU/GPU vô ích.

   Trạng thái:
   - mặc định (.is-live): nhún nhẹ, chớp mắt, tóc/voan/hoa đung đưa
   - cảnh celebrate (RSVP "Có"): nhảy cẫng liên tục, tim bay
   - cảnh together (mặt sau thiệp): lắc nhẹ, vẫy tay, tim bay
   - cảnh sad: đung đưa chậm, nước mắt rơi
   ============================================================ */

.chibi-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* fill-box: transform-origin tính theo khung của CHÍNH bộ phận đó, không
   phải cả SVG — không có dòng này thì mọi thứ xoay quanh góc trên-trái. */
.chibi__body, .chibi__eyes, .chibi__arm, .chibi__ahoge, .chibi__veil,
.chibi__bouquet, .chibi__heart, .chibi__tear { transform-box: fill-box; }

.chibi__body { transform-origin: 50% 100%; }
.chibi__eyes { transform-origin: 50% 50%; }
.chibi__arm { transform-origin: 50% 0%; }        /* quanh vai */
.chibi__ahoge { transform-origin: 30% 100%; }    /* quanh gốc cọng tóc */
.chibi__veil { transform-origin: 50% 0%; }
.chibi__bouquet { transform-origin: 50% 100%; }
.chibi__heart { transform-origin: 50% 100%; opacity: 0; }
.chibi__tear { transform-origin: 50% 0%; }

/* Mặt thường ↔ mặt vui (^ ^, cười to) — cả hai vẽ sẵn, chỉ đổi opacity. */
.chibi__face--happy { opacity: 0; }
.chibi--happy .chibi__face--happy { opacity: 1; }
.chibi--happy .chibi__face--normal { opacity: 0; }

/* ---- Mặc định khi đang hiện ---- */
.is-live .chibi__body { animation: chibiBob 1.6s ease-in-out infinite; }
.is-live .chibi--b .chibi__body { animation-delay: -0.8s; }
.is-live .chibi__eyes { animation: chibiBlink 3.8s ease-in-out infinite; }
.is-live .chibi--b .chibi__eyes { animation-delay: -1.7s; }
.is-live .chibi__ahoge { animation: chibiAhoge 1.2s ease-in-out infinite; }
.is-live .chibi__veil { animation: chibiVeil 3s ease-in-out infinite; }
.is-live .chibi__bouquet { animation: chibiBouquet 1.6s ease-in-out infinite; }
.is-live .chibi__arm--wave { animation: chibiWave 0.9s ease-in-out infinite; }

/* ---- Vui mừng (RSVP "Có") — nhảy liên tục ---- */
.is-live .chibi-scene--celebrate .chibi__body {
  animation: chibiJump 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) infinite;
}
.is-live .chibi-scene--celebrate .chibi--b .chibi__body { animation-delay: -0.12s; }

/* ---- Cạnh nhau (mặt sau thiệp) — chỉ lắc nhẹ, tim bay ---- */
.is-live .chibi-scene--together .chibi__body { animation: chibiStroll 1.4s ease-in-out infinite; }
.is-live .chibi-scene--together .chibi--b .chibi__body { animation-delay: -0.7s; }

.is-live .chibi-scene--together .chibi__heart,
.is-live .chibi-scene--celebrate .chibi__heart {
  animation: chibiHeart 1.8s ease-out infinite;
  animation-delay: calc(var(--i, 0) * -0.6s);
}
.is-live .chibi-scene--celebrate .chibi__arm { animation: chibiWave 0.7s ease-in-out infinite; }

/* ---- Buồn (RSVP "Không") ---- */
.is-live .chibi-scene--sad .chibi__body { animation: chibiSway 2.6s ease-in-out infinite; }
.is-live .chibi-scene--sad .chibi__tear { animation: chibiTear 1.8s ease-in infinite; }

/* ---- Keyframes ---- */
@keyframes chibiBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes chibiStroll {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25% { transform: translateY(-3px) rotate(0deg); }
  50% { transform: translateY(0) rotate(2deg); }
  75% { transform: translateY(-3px) rotate(0deg); }
}
@keyframes chibiJump {
  0% { transform: translateY(0) scale(1, 1); }
  12% { transform: translateY(0) scale(1.08, 0.9); }
  40% { transform: translateY(-18px) scale(0.94, 1.07); }
  58% { transform: translateY(-20px) scale(1, 1); }
  82% { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes chibiBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.1); }
}
@keyframes chibiAhoge {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(14deg); }
}
@keyframes chibiVeil {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg) skewX(2deg); }
}
@keyframes chibiBouquet {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes chibiWave {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(16deg); }
}
@keyframes chibiHeart {
  0% { opacity: 0; transform: translateY(6px) scale(0.4); }
  20% { opacity: 1; transform: translateY(0) scale(1.1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(0.9); }
}
@keyframes chibiSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
@keyframes chibiTear {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* Giảm chuyển động: hình tĩnh hoàn toàn (mặt vẫn đổi theo trạng thái). */
@media (prefers-reduced-motion: reduce) {
  .chibi-svg * { animation: none !important; }
}