/* ── ANIMATIONS ── */

/* Keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes rotateBg {
  to { transform: rotate(360deg); }
}
@keyframes nodeFloat {
  from { transform: translate(0, 0) scale(1); opacity: 0.3; }
  to { transform: translate(var(--tx, 4px), var(--ty, -4px)) scale(1.6); opacity: 0.9; }
}
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-7px); opacity: 1; }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  to { background-position: -200% 0; }
}
@keyframes blobPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.05); }
}

/* ── APPLIED ANIMATIONS ── */

/* Hero entrance */
.hero { animation: fadeUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) both; }
.chat-box { animation: fadeUp 0.7s 0.1s cubic-bezier(0.23, 1, 0.32, 1) both; }
.quick-tabs { animation: fadeUp 0.7s 0.2s cubic-bezier(0.23, 1, 0.32, 1) both; }

/* Status dot pulse */
.status-dot { animation: pulse 2.5s ease-in-out infinite; }

/* Avatar rings */
.avatar-ring { animation: spin 14s linear infinite; }
.avatar-ring-2 { animation: spin 22s linear infinite reverse; }

/* Avatar brain glow */
.avatar-brain::before {
  content: '';
  position: absolute; inset: 0;
  background: conic-gradient(from 0deg, #a8edea, #fed6e3, #d4fc79, #ffecd2, #c2e9fb, #a8edea);
  opacity: 0.12;
  animation: rotateBg 7s linear infinite;
}

/* Node particles */
.node {
  animation: nodeFloat var(--dur, 3s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

/* Typing dots */
.typing-dot {
  animation: typingBounce 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

/* Message entrance */
.msg { animation: msgIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) both; }
.typing-wrap { animation: msgIn 0.25s cubic-bezier(0.23, 1, 0.32, 1) both; }

/* Card entrance with stagger */
.chat-card { animation: fadeUp 0.35s cubic-bezier(0.23, 1, 0.32, 1) both; }
.chat-card:nth-child(1) { animation-delay: 0.00s; }
.chat-card:nth-child(2) { animation-delay: 0.05s; }
.chat-card:nth-child(3) { animation-delay: 0.10s; }
.chat-card:nth-child(4) { animation-delay: 0.15s; }
.chat-card:nth-child(5) { animation-delay: 0.20s; }
.chat-card:nth-child(6) { animation-delay: 0.25s; }
.chat-card:nth-child(7) { animation-delay: 0.30s; }
.chat-card:nth-child(8) { animation-delay: 0.35s; }
.chat-card:nth-child(9) { animation-delay: 0.40s; }
.chat-card:nth-child(10) { animation-delay: 0.45s; }
.chat-card:nth-child(11) { animation-delay: 0.50s; }
.chat-card:nth-child(12) { animation-delay: 0.55s; }

/* Cert entrance */
.chat-cert { animation: fadeUp 0.3s cubic-bezier(0.23, 1, 0.32, 1) both; }
.chat-cert:nth-child(1) { animation-delay: 0.00s; }
.chat-cert:nth-child(2) { animation-delay: 0.06s; }
.chat-cert:nth-child(3) { animation-delay: 0.12s; }
.chat-cert:nth-child(4) { animation-delay: 0.18s; }
.chat-cert:nth-child(5) { animation-delay: 0.24s; }

/* Contact links */
.chat-contact-link { animation: fadeUp 0.3s cubic-bezier(0.23, 1, 0.32, 1) both; }
.chat-contact-link:nth-child(1) { animation-delay: 0.00s; }
.chat-contact-link:nth-child(2) { animation-delay: 0.06s; }
.chat-contact-link:nth-child(3) { animation-delay: 0.12s; }
.chat-contact-link:nth-child(4) { animation-delay: 0.18s; }
.chat-contact-link:nth-child(5) { animation-delay: 0.24s; }

/* Tab button hover */
.tab-btn { transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); }

/* Blobs */
.blob { animation: blobPulse 8s ease-in-out infinite; }
.blob:nth-child(2) { animation-delay: 1.5s; }
.blob:nth-child(3) { animation-delay: 3s; }
.blob:nth-child(4) { animation-delay: 4.5s; }
.blob:nth-child(5) { animation-delay: 6s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}