/* ════════════════════════════════════════════════════════════════
   WINR v22 — Community page polish
   Notion Week 1: "Community page — channel list + member sidebar polish"

   Tony's _v18_community_view.css already does the heavy lifting (1818
   lines). This layer adds light delight touches:
   • Member row stagger fade-in (alive feel when sidebar populates)
   • Live online-dot pulse (currently static green; subtle breath)
   • Tab indicator slide (currently the underline just appears)
   • Member avatar micro-interaction on hover

   Scoped tight — only adds, never overrides Tony's structural CSS.
   ════════════════════════════════════════════════════════════════ */

/* ── Channel tabs — indicator slides instead of pops ─────────── */
.community-lobby .cv-tab::after{
  transition:background 240ms ease,
             left 320ms cubic-bezier(0.22, 1, 0.36, 1),
             right 320ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Slight visual lift — clearer "current channel" affordance */
  box-shadow:0 0 8px rgba(255,255,255,0)
}
.community-lobby .cv-tab.active::after{
  box-shadow:0 0 12px rgba(255,255,255,0.4)
}
/* Audit hotfix: tab hover translate removed — was making channel tab
   clicks feel unresponsive. Keep transitions clean, no transform. */
.community-lobby .cv-tab{
  transition:color 200ms ease
}

/* ── Member sidebar — stagger fade-in for live feel ──────────── */
.community-lobby .cv-member-list .cv-member-row{
  animation:cvMemberIn 340ms cubic-bezier(0.22, 1, 0.36, 1) both
}
.community-lobby .cv-member-list .cv-member-row:nth-child(1) { animation-delay:0ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(2) { animation-delay:40ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(3) { animation-delay:80ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(4) { animation-delay:120ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(5) { animation-delay:160ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(6) { animation-delay:200ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(7) { animation-delay:240ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(8) { animation-delay:280ms }
.community-lobby .cv-member-list .cv-member-row:nth-child(n+9) { animation-delay:320ms }

@keyframes cvMemberIn{
  from { opacity:0; transform:translateX(-6px) }
  to   { opacity:1; transform:translateX(0) }
}

/* Member row — micro lift on hover (Tony already adds bg, we add motion) */
.community-lobby .cv-member-row{
  transition:background 150ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1)
}
.community-lobby .cv-member-row:hover{
  transform:translateX(2px)
}
.community-lobby .cv-member-row:hover .cv-member-avatar{
  transform:scale(1.08)
}
.community-lobby .cv-member-avatar{
  transition:transform 240ms cubic-bezier(0.22, 1, 0.36, 1)
}

/* ── Online status dot — gentle breath instead of static ─────── */
.community-lobby .cv-member-dot.online{
  animation:cvOnlineBreath 2.8s ease-in-out infinite
}
@keyframes cvOnlineBreath{
  0%,100% { box-shadow:0 0 4px rgba(52,199,89,0.5) }
  50%     { box-shadow:0 0 10px rgba(52,199,89,0.85) }
}

/* ── Sidebar cards — subtle entrance ─────────────────────────── */
.community-lobby .cv-side .cv-side-card{
  animation:cvSideCardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both
}
.community-lobby .cv-side .cv-side-card:nth-child(1) { animation-delay:60ms }
.community-lobby .cv-side .cv-side-card:nth-child(2) { animation-delay:140ms }
.community-lobby .cv-side .cv-side-card:nth-child(3) { animation-delay:220ms }
.community-lobby .cv-side .cv-side-card:nth-child(n+4) { animation-delay:300ms }

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

/* ── See-all CTA — gentle right-shift on hover ───────────────── */
.community-lobby .cv-see-all{
  transition:color 200ms ease, transform 200ms ease
}
.community-lobby .cv-see-all:hover{
  transform:translateX(3px)
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .community-lobby .cv-member-list .cv-member-row,
  .community-lobby .cv-side .cv-side-card,
  .community-lobby .cv-member-dot.online{
    animation:none
  }
}