/**
 * LOTC Animations — Shared CSS animations for TSI app
 * Referenced by 76+ HTML files across adventure, achievement, and admin pages
 */

/* ═══ Core Transitions ═══ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tsiFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tsi-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tsiSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes warning { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes transition-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes narrative-fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes response-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ═══ Pulse & Glow ═══ */
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }
@keyframes tsiPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes glow { 0%,100% { box-shadow: 0 0 5px rgba(255,102,0,0.3); } 50% { box-shadow: 0 0 20px rgba(255,102,0,0.6); } }
@keyframes glow-pulse { 0%,100% { box-shadow: 0 0 5px currentColor; } 50% { box-shadow: 0 0 15px currentColor; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 5px rgba(0,255,0,0.3); } 50% { box-shadow: 0 0 20px rgba(0,255,0,0.6); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 5px rgba(255,102,0,0.3); } 50% { box-shadow: 0 0 15px rgba(255,102,0,0.5); } }
@keyframes pulse-expand { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2); opacity: 0; } }
@keyframes pulse-large { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes pulse-urgent { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes pulse-warning { 0%,100% { opacity: 1; box-shadow: 0 0 5px rgba(255,165,0,0.3); } 50% { opacity: 0.8; box-shadow: 0 0 15px rgba(255,165,0,0.6); } }
@keyframes pulse-ai { 0%,100% { box-shadow: 0 0 5px rgba(0,200,255,0.3); } 50% { box-shadow: 0 0 20px rgba(0,200,255,0.6); } }
@keyframes gold-glow { 0%,100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); } 50% { box-shadow: 0 0 20px rgba(255,215,0,0.6); } }
@keyframes xp-glow { 0%,100% { text-shadow: 0 0 5px rgba(0,255,0,0.3); } 50% { text-shadow: 0 0 15px rgba(0,255,0,0.6); } }
@keyframes xp-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes rank-glow { 0%,100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); } 50% { box-shadow: 0 0 25px rgba(255,215,0,0.6); } }
@keyframes skill-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes star-pulse { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes availablePulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes bannerPulse { 0%,100% { opacity: 0.9; } 50% { opacity: 1; } }
@keyframes committed-pulse { 0%,100% { box-shadow: 0 0 5px rgba(0,200,0,0.3); } 50% { box-shadow: 0 0 15px rgba(0,200,0,0.5); } }
@keyframes compassPulse { 0%,100% { box-shadow: 0 0 10px rgba(255,165,0,0.3); } 50% { box-shadow: 0 0 25px rgba(255,165,0,0.6); } }
@keyframes danger-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes state-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes versus-pulse { 0%,100% { text-shadow: 0 0 10px rgba(255,0,0,0.5); } 50% { text-shadow: 0 0 20px rgba(255,0,0,0.8); } }
@keyframes legendary-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes prompt-pulse { 0%,100% { border-color: rgba(255,102,0,0.3); } 50% { border-color: rgba(255,102,0,0.8); } }

/* ═══ Mic & Recording ═══ */
@keyframes micPulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,0,0,0); } 50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,0,0,0.4); } }
@keyframes mic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes mic-recording { 0%,100% { box-shadow: 0 0 0 0 rgba(255,0,0,0.4); } 70% { box-shadow: 0 0 0 10px rgba(255,0,0,0); } }
@keyframes recording-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes call-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes detectPulse { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 0; } }

/* ═══ Game & UI ═══ */
@keyframes celebration-burst { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes celebration-in { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes celebration-pop { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes combo-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes combo-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes feedback-pop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes icon-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mascot-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes gesture-bounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.05); } }
@keyframes levelUpPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes sticker-pop { 0% { transform: scale(0) rotate(-15deg); } 80% { transform: scale(1.1) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes stampIn { 0% { transform: scale(3) rotate(-30deg); opacity: 0; } 100% { transform: scale(1) rotate(-5deg); opacity: 1; } }
@keyframes powerup-flash { 0%,100% { opacity: 1; } 50% { opacity: 0; filter: brightness(2); } }
@keyframes crown-bounce { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-5px) rotate(5deg); } }

/* ═══ Environment ═══ */
@keyframes fog-drift { 0% { transform: translateX(-5%); opacity: 0.3; } 50% { opacity: 0.5; } 100% { transform: translateX(5%); opacity: 0.3; } }
@keyframes rain-fall { from { transform: translateY(-100vh); } to { transform: translateY(100vh); } }
@keyframes snow-fall { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } }
@keyframes wind-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes fire-flicker { 0%,100% { opacity: 1; transform: scaleY(1); } 50% { opacity: 0.8; transform: scaleY(0.95); } }
@keyframes flame-flicker { 0%,100% { opacity: 1; } 25% { opacity: 0.8; } 75% { opacity: 0.9; } }
@keyframes fire-text { 0%,100% { text-shadow: 0 0 5px #ff6600, 0 0 10px #ff4400; } 50% { text-shadow: 0 0 10px #ff6600, 0 0 20px #ff4400, 0 0 30px #ff2200; } }
@keyframes emberFloat { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-50px) scale(0); opacity: 0; } }
@keyframes emberFloatSlow { 0% { transform: translateY(0); opacity: 0.6; } 100% { transform: translateY(-80px); opacity: 0; } }

/* ═══ Loading & Skeleton ═══ */
@keyframes skeleton-loading { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes skeletonShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes lazy-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes liquidShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes loaderBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes demoBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes progressBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
@keyframes radarScan { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes progress-shrink { from { width: 100%; } to { width: 0%; } }

/* ═══ Utility Classes ═══ */
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-rotate { animation: spin 1s linear infinite; }
.tsi-fade-in { animation: tsiFadeIn 0.4s ease-out forwards; }
.tsi-slide-up { animation: tsiSlideUp 0.5s ease-out forwards; }
.tsi-pulse { animation: tsiPulse 2s ease-in-out infinite; }
.tsi-glow { animation: glow 2s ease-in-out infinite; }
.loading-spinner { animation: spin 1s linear infinite; }
.skeleton { animation: skeleton-loading 1.5s ease-in-out infinite; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; }
.skeleton-text { animation: skeletonShimmer 1.5s ease-in-out infinite; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; border-radius: 4px; }
.skeleton-btn { animation: skeletonShimmer 1.5s ease-in-out infinite; background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; border-radius: 8px; }

/* ═══ Reduced Motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}