/* ============================================================
   LARPER — Animations & Keyframes
   ============================================================ */

@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes pulse      { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInUp    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn       { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer      { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes popIn        { 0% { opacity: 0; transform: scale(.85); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes glow-red     { 0%,100% { box-shadow: 0 0 8px rgba(229,57,79,.3); } 50% { box-shadow: 0 0 24px rgba(229,57,79,.6); } }
@keyframes splashOut    { to { opacity: 0; transform: scale(1.03); } }

/* Message entrance */
.msg-group { animation: slideInUp .15s ease; }

/* Toast */
.toast { animation: slideInRight .3s ease; }

/* Modal */
.modal-box { animation: popIn .2s ease; }

/* Notification badge pulse */
.badge-pulse { animation: glow-red 1.5s ease-in-out infinite; }

/* Presence pulse for online indicator */
.presence-dot.online { animation: none; }

/* Typing dots */
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text3);
  animation: typingBounce .9s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,80%,100% { transform: scale(1); } 40% { transform: scale(1.4); } }

/* Channel item hover */
.channel-item { transition: background .1s, color .1s; }

/* Server icon hover */
.server-icon { transition: border-radius .2s, transform .15s, border-color .15s; }

/* Smooth appearance for new messages */
@keyframes msgAppear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.msg-new { animation: msgAppear .2s ease; }

/* Loading skeleton */
@keyframes skeletonWave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeletonWave 1.4s infinite;
}

/* PWA install button pulse hint */
.install-hint { animation: glow-red 2s ease-in-out 3; }

/* Reaction button bounce */
.reaction-pop { animation: popIn .2s ease; }

/* Voice dot */
@keyframes voicePulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .7; } }
.voice-connected-dot { animation: voicePulse 1.5s ease-in-out infinite; }