/* ============================================================
   動畫（支援 prefers-reduced-motion）
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.85); opacity: .4; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bg-swap { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 0 rgba(255, 209, 102, .9); } 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 10px rgba(255, 209, 102, 0); } }
@keyframes confetti-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx, 0), 105vh) rotate(var(--rot, 360deg)); opacity: .9; } }
@keyframes star-in { 0% { transform: scale(0) rotate(-120deg); opacity: 0; } 70% { transform: scale(1.3) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes pulse-key { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes danger { 0%, 100% { filter: none; } 50% { filter: brightness(1.25); } }
@keyframes cheat-in { 0% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: none; } }

.is-enter { animation: enter-up .35s ease-out; }
.is-pop { animation: pop .35s ease-out; }
.is-shake { animation: shake .45s ease-in-out; }
.is-flip { animation: flip .5s ease-in-out; }
.is-swap { animation: bg-swap .8s ease-out; }
.cheat-overlay.is-show .cheat-overlay__card { animation: cheat-in .4s ease-out; }

/* 教具重點標示（visuals.js 會在重點元素加 data-key） */
.visual.is-highlight [data-key] { animation: pulse-key .9s ease-in-out 4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .confetti { display: none; }
}