@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}
 
/* ── status dot pulse ───────────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 6px var(--accent); }
  50%       { box-shadow: 0 0 14px var(--accent), 0 0 4px var(--accent); }
}
 
/* ── apply ──────────────────────────────────────────────── */
.avatar   { animation: scaleIn .45s cubic-bezier(.34, 1.56, .64, 1) both; }
h1        { animation: fadeUp .5s ease-out .08s both; }
.bio      { animation: fadeUp .5s ease-out .14s both; }
.location { animation: fadeUp .5s ease-out .18s both; }
.status   { animation: fadeUp .5s ease-out .22s both; }
.links    { animation: fadeUp .5s ease-out .28s both; }
.views    { animation: fadeUp .5s ease-out .32s both; }
.player   { animation: fadeUp .55s ease-out .36s both; }
 
.bar__fill {
  animation: progress 160s linear forwards;
}