/* Chat mockups below the hero: messages float up in conversation (timestamp) order when the mockup
   scrolls into view (Shane feedback). js/chat-anim.js adds .chat-anim to <html> and .is-playing per mockup.
   Without JS, or with reduced motion, everything is simply shown. */
@keyframes chat-float-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes chat-pop {
  0%   { opacity: 0; transform: scale(.4); }
  70%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.chat-anim [data-chat] [data-seq] { opacity: 0; }
.chat-anim [data-chat].is-playing [data-seq] {
  animation: chat-float-up .8s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(.3s + var(--i, 0) * .6s); /* ~50% slower so it's seen (Shane, 2026-10-14); js/team.js dwell matches */
}
.chat-anim [data-chat].is-playing [data-pop] { animation-name: chat-pop; animation-duration: .65s; }
@media (prefers-reduced-motion: reduce) {
  .chat-anim [data-chat] [data-seq] { opacity: 1; animation: none !important; }
}