/* v7 — colour polish and motion.
   Memory aid for motion — "Arrive, Answer, Assure":
   things ARRIVE softly (pages, lists), controls ANSWER your touch (press, like burst),
   and status ASSURES you (loading bar, check shine). All of it switches off with Reduce motion. */

:root {
  --grad-brand: linear-gradient(110deg, var(--cobalt) 0%, var(--overlap) 55%, var(--marigold) 100%);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── colour polish ─────────────────────────────────────── */
::selection { background: var(--cobalt-soft); color: var(--ink); }
html { scrollbar-color: var(--line) transparent; }
.btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 1px 2px rgb(19 32 30 / 0.12); }
.btn-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 18px -6px color-mix(in srgb, var(--cobalt) 60%, transparent); }
.tab-btn.is-active::after { background: var(--grad-brand); }
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color 380ms var(--ease), color 380ms var(--ease), border-color 380ms var(--ease), fill 380ms var(--ease), stroke 380ms var(--ease) !important;
}

/* ── logo: the pillar rises, then both arches draw over it ─ */
.logo path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html:not(.logo-seen) .brand .logo-s { animation: lg-draw 420ms var(--ease) both; }
html:not(.logo-seen) .brand .logo-a { animation: lg-draw 620ms 180ms var(--ease) both; }
html:not(.logo-seen) .brand .logo-b { animation: lg-draw 620ms 300ms var(--ease) both; }
@keyframes lg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.brand .logo { transition: transform 300ms var(--ease-spring); }
.brand:hover .logo { transform: translateY(-1.5px); }
.brand:hover .logo-s { animation: lg-pulse 600ms var(--ease) both; }
@keyframes lg-pulse { 50% { stroke-width: 5.2; } }

/* ── page loading bar (only shows if a page takes >150ms) ─ */
#app[aria-busy="true"]::before {
  content: ""; position: fixed; z-index: 120; inset: 0 0 auto; height: 3px;
  background: var(--grad-brand); background-size: 200% 100%; transform-origin: left;
  animation: load-bar 1.4s 150ms var(--ease) infinite both;
}
@keyframes load-bar { 0% { transform: scaleX(0); opacity: 1; background-position: 0 0; } 70% { transform: scaleX(0.85); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; background-position: 100% 0; } }

/* ── lists arrive in a soft cascade (first paint only) ─── */
.is-entering :is(.post-list > *, .people-grid > *, .comm-grid > *, .room-list > *, .thread-list > *, .tier-grid > *, .settings-list > *) {
  animation: arrive 460ms var(--ease) both;
}
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.is-entering :is(.post-list, .people-grid, .comm-grid, .room-list, .thread-list, .tier-grid, .settings-list) > :nth-child(2) { animation-delay: 50ms; }
.is-entering :is(.post-list, .people-grid, .comm-grid, .room-list, .thread-list, .tier-grid, .settings-list) > :nth-child(3) { animation-delay: 100ms; }
.is-entering :is(.post-list, .people-grid, .comm-grid, .room-list, .thread-list, .tier-grid, .settings-list) > :nth-child(4) { animation-delay: 150ms; }
.is-entering :is(.post-list, .people-grid, .comm-grid, .room-list, .thread-list, .tier-grid, .settings-list) > :nth-child(5) { animation-delay: 200ms; }
.is-entering :is(.post-list, .people-grid, .comm-grid, .room-list, .thread-list, .tier-grid, .settings-list) > :nth-child(n+6) { animation-delay: 240ms; }

/* ── controls answer your touch ────────────────────────── */
.btn, .act, .icon-btn, .chip-btn, .tab-btn { transition: transform 140ms var(--ease), background var(--dur), color var(--dur), box-shadow var(--dur), border-color var(--dur); }
.btn:active:not(:disabled), .icon-btn:active, .act:active { transform: scale(0.96); }
.card.person, .comm-card, .room-card { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color var(--dur); }
@media (hover: hover) {
  .card.person:hover, .comm-card:hover, .room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
}

/* like: heart pops and a ring of sparks bursts out */
.act-like { position: relative; }
.act-like.pop.is-on::before, .act-like.pop.is-on::after {
  content: ""; position: absolute; left: 19px; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
}
.act-like.pop.is-on::before { border: 2px solid var(--heart); animation: like-ring 480ms var(--ease) both; }
.act-like.pop.is-on::after {
  width: 4px; height: 4px; margin: -2px 0 0 -2px; background: transparent;
  box-shadow: 0 -15px 0 var(--heart), 13px -8px 0 var(--marigold), 13px 8px 0 var(--heart), 0 15px 0 var(--marigold), -13px 8px 0 var(--heart), -13px -8px 0 var(--overlap);
  animation: like-sparks 560ms var(--ease) both;
}
@keyframes like-ring { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.35); opacity: 0; border-width: 0; } }
@keyframes like-sparks { 0% { transform: scale(0.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* follow: the check draws itself in */
.view:not(.is-entering) .is-following svg { animation: pop 380ms var(--ease-spring); }

/* ── checks assure: a light sweep across tier marks on hover ─ */
.mark { transition: transform 300ms var(--ease-spring); }
.name-mark:hover .mark, .mark:hover { transform: scale(1.15) rotate(-8deg); }
.mark-founder { transform-origin: center; }
.profile-hero .mark-founder, .tier-chip .mark-founder { animation: founder-spin 1.2s 300ms var(--ease) both; }
@keyframes founder-spin { from { transform: rotate(-120deg) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* toasts settle with a little spring */
.toast { transition-timing-function: var(--ease), var(--ease-spring); }

/* the active tab underline grows in */
.tab-btn.is-active::after { animation: tab-line 280ms var(--ease) both; transform-origin: center; }
@keyframes tab-line { from { transform: scaleX(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* unread badges bump when they appear */
.nav-badge { animation: pop 420ms var(--ease-spring) both; }