/* ============================================================
   ISKRA ANIMATIONS
   ============================================================ */

/* ── Page Transitions ────────────────────────────────────── */
.page-enter {
  animation: pageIn var(--duration-slow) var(--ease-out) forwards;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Message Appear ──────────────────────────────────────── */
.msg-appear {
  animation: msgAppear var(--duration-base) var(--ease-spring) forwards;
}

@keyframes msgAppear {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Pulse ───────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse { animation: pulse 2s ease-in-out infinite; }

/* ── Bounce In ───────────────────────────────────────────── */
@keyframes bounceIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* ── Slide Up ────────────────────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Slide In Right ──────────────────────────────────────── */
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Fade Up ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Ripple ──────────────────────────────────────────────── */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.15);
  animation: ripple var(--duration-slow) linear;
  pointer-events: none;
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ── Heartbeat ───────────────────────────────────────────── */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%  { transform: scale(1.15); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.1); }
  70%  { transform: scale(1); }
}

.heartbeat { animation: heartbeat 1.5s ease-in-out; }

/* ── Chat load skeleton sequence ─────────────────────────── */
.skeleton-msg-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.skeleton-msg-row.right {
  flex-direction: row-reverse;
}

.skeleton-bubble {
  height: 44px;
  border-radius: var(--radius-xl);
}

/* ── Icon Micro-Interaction ──────────────────────────────── */
.icon-pop {
  animation: iconPop var(--duration-base) var(--ease-spring);
}

@keyframes iconPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ── New Message Flash ───────────────────────────────────── */
.msg-flash {
  animation: msgFlash 0.6s ease;
}

@keyframes msgFlash {
  0%, 100% { background: inherit; }
  50% { background: var(--accent-muted); }
}

/* ── Notification Ping ───────────────────────────────────── */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.ping-dot {
  position: relative;
}

.ping-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--status-online);
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}