/* Motion: page entrance, wheel, confetti, chat bubbles, modal pop. */
@keyframes pointerTick { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(6deg); } }
.needle-ticking { animation: pointerTick 0.12s ease-in-out infinite; transform-origin: top center; }
@keyframes confettiFall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(420px) rotate(480deg); opacity: 0; } }
.confetti-piece { position: absolute; animation: confettiFall 2.4s ease-out infinite; }
@keyframes modalSpring { 0% { opacity: 0; transform: scale(0.82) translateY(24px); } 60% { opacity: 1; transform: scale(1.03) translateY(-4px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
/* Page and list motion. Only transform/opacity are animated so it stays smooth on low-end phones. */
@keyframes viewIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.view-in { animation: viewIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes itemIn { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.stagger > * { animation: itemIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; } .stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; } .stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; } .stagger > *:nth-child(6) { animation-delay: 0.4s; }
.stagger > *:nth-child(n+7) { animation-delay: 0.45s; }
@keyframes wheelIn { from { opacity: 0; transform: scale(0.88) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } }
.wheel-in { animation: wheelIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes ringPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.32); opacity: 0; } }
#spinBtn:not(:disabled)::before { content: ''; position: absolute; inset: -4px; border-radius: 9999px; border: 3px solid rgba(37, 99, 235, 0.55); pointer-events: none; animation: ringPulse 1.9s ease-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
#prizeList img, .floaty { animation: floaty 3.6s ease-in-out infinite; }
#prizeList > *:nth-child(even) img { animation-delay: -1.2s; } #prizeList > *:nth-child(3n) img { animation-delay: -2.2s; }
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 38%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent); transform: skewX(-20deg); pointer-events: none; animation: shine 3.4s ease-in-out infinite; }
@keyframes navPop { 0% { transform: scale(1); } 40% { transform: scale(1.35) translateY(-3px); } 100% { transform: scale(1); } }
.nav-pop { animation: navPop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes titleIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.title-in { animation: titleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
#prizeList > *, #winnerList > *, #activityList > * { transition: transform 0.15s ease; }
#prizeList > *:active, #winnerList > *:active, #activityList > *:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bubble-in { animation: bubbleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.tdot { width: 6px; height: 6px; border-radius: 9999px; background: #8696a0; animation: tdot 1.1s infinite; }
.tdot:nth-child(2) { animation-delay: 0.15s; } .tdot:nth-child(3) { animation-delay: 0.3s; }
.animate-modal-pop { animation: modalSpring 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }