/* Shared animations for the MathSheets games (see public/js/game-kit.js). */

[x-cloak] { display: none !important; }

.gk-confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.gk-confetti { position: absolute; top: -14px; width: 10px; height: 14px; border-radius: 2px; animation-name: gk-fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes gk-fall { to { transform: translate(var(--gk-drift), 105vh) rotate(760deg); } }

.gk-float { position: fixed; z-index: 70; pointer-events: none; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.5rem; white-space: nowrap; transform: translate(-50%, -50%); text-shadow: 0 2px 0 #fff, 0 -2px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; animation: gk-float 0.95s ease-out forwards; }
@keyframes gk-float { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -170%) scale(1.15); } }

.gk-shake { animation: gk-shake 0.4s; }
@keyframes gk-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }

.gk-bounce-in { animation: gk-bounce-in 0.5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes gk-bounce-in { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.gk-pop { animation: gk-pop 0.28s ease-out forwards; pointer-events: none; }
@keyframes gk-pop { to { transform: scale(1.7); opacity: 0; } }

.gk-wiggle { animation: gk-wiggle 0.5s; }
@keyframes gk-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

.gk-float-idle { animation: gk-idle 2.4s ease-in-out infinite; }
@keyframes gk-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.gk-pulse { animation: gk-pulse 1s ease-in-out infinite; }
@keyframes gk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.gk-hop { animation: gk-hop 0.45s ease-out; }
@keyframes gk-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-38px); } }

/* Memory cards */
.gk-card { perspective: 900px; }
.gk-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.45s; transform-style: preserve-3d; }
.gk-card.gk-flipped .gk-card-inner { transform: rotateY(180deg); }
.gk-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1rem; display: flex; align-items: center; justify-content: center; }
.gk-card-front { transform: rotateY(180deg); }

/* Timer bar */
.gk-timer { height: 10px; border-radius: 999px; background: #EDE9FE; overflow: hidden; }
.gk-timer > div { height: 100%; border-radius: 999px; transition: width 0.1s linear, background-color 0.3s; }

@media (prefers-reduced-motion: reduce) {
    .gk-confetti, .gk-float, .gk-shake, .gk-bounce-in, .gk-pop, .gk-wiggle, .gk-float-idle, .gk-pulse, .gk-hop { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .gk-card-inner { transition: none; }
}