/* Hiệu ứng CSS. Mỗi hiệu ứng là một class .anim-*.
   Khi giảm chuyển động (html[data-motion="reduced"]): hiệu ứng dịch chuyển/xoay/phóng bị tắt,
   .anim-pop-in và .anim-screen-in chỉ còn mờ dần, các hiệu ứng lặp tắt hẳn. */

@keyframes pp-pop-in {
  0%   { opacity: 0; transform: scale(.55); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-screen-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-hop {                       /* nhân vật nhảy mừng */
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30%      { transform: translateY(-22%) scale(.96, 1.06); }
  55%      { transform: translateY(0) scale(1.08, .92); }
  75%      { transform: translateY(-6%) scale(1, 1); }
}
@keyframes pp-float {                     /* trôi nhẹ, lặp chậm */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5%); }
}
@keyframes pp-nudge {                     /* trả lời sai: lắc ngang nhẹ, không gắt */
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}
@keyframes pp-wiggle {                    /* gợi ý: nghiêng qua lại */
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-5deg); }
  75%      { transform: rotate(5deg); }
}
@keyframes pp-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.82); }
}
@keyframes pp-burst {                     /* ngôi sao bắn ra; đặt --dx --dy --rot cho từng hạt */
  0%   { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -80px)) scale(1) rotate(var(--rot, 180deg)); }
}
@keyframes pp-confetti {                  /* rơi từ trên; đặt --x --rot --delay */
  0%   { opacity: 1; transform: translate(var(--x, 0), -10vh) rotate(0); }
  100% { opacity: 0; transform: translate(calc(var(--x, 0) * 1.4), 105vh) rotate(var(--rot, 540deg)); }
}
@keyframes pp-ping {                      /* vòng sáng lan ra để chỉ chỗ cần chạm */
  0%   { opacity: .7; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-drift {                     /* mây trôi ngang chậm; đặt --drift và --drift-time */
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(var(--drift, 4vw)); }
}

.anim-pop-in    { animation: pp-pop-in var(--dur-3) var(--ease-out) both; }
.anim-fade-in   { animation: pp-fade-in var(--dur-2) linear both; }
.anim-screen-in { animation: pp-screen-in var(--dur-3) var(--ease-out) both; }
.anim-hop       { animation: pp-hop var(--dur-4) var(--ease-out) both; transform-origin: 50% 100%; }
.anim-float     { animation: pp-float 4.5s var(--ease-in-out) infinite; }
.anim-nudge     { animation: pp-nudge var(--dur-3) var(--ease-in-out) both; }
.anim-wiggle    { animation: pp-wiggle 700ms var(--ease-in-out) 2 both; }
.anim-twinkle   { animation: pp-twinkle 2.2s var(--ease-in-out) infinite; }
.anim-burst     { animation: pp-burst var(--dur-4) var(--ease-out) both; }
.anim-confetti  { animation: pp-confetti 2.4s linear var(--delay, 0s) both; }
.anim-ping      { animation: pp-ping 1.4s var(--ease-out) infinite; }
.anim-spin      { animation: pp-spin 1.1s linear infinite; }
.anim-drift     { animation: pp-drift var(--drift-time, 30s) var(--ease-in-out) infinite; }

/* Chậm/trễ so le: thêm style="--delay: 120ms" vào phần tử. */
[class*="anim-"] { animation-delay: var(--delay, 0s); }

/* ---- Giảm chuyển động ---- */
:root[data-motion="reduced"] .anim-hop,
:root[data-motion="reduced"] .anim-float,
:root[data-motion="reduced"] .anim-nudge,
:root[data-motion="reduced"] .anim-wiggle,
:root[data-motion="reduced"] .anim-twinkle,
:root[data-motion="reduced"] .anim-burst,
:root[data-motion="reduced"] .anim-confetti,
:root[data-motion="reduced"] .anim-ping,
:root[data-motion="reduced"] .anim-drift,
:root[data-motion="reduced"] .anim-spin {
  animation: none;
}
:root[data-motion="reduced"] .anim-pop-in,
:root[data-motion="reduced"] .anim-screen-in {
  animation: pp-fade-in 200ms linear both;
}