/* ===== BizPilotHR — Motion System: BLACK × YELLOW ===== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glowYellow {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,200,0,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(245,200,0,0); }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseYellow {
  0%,100% { opacity: 1; box-shadow: 0 0 6px rgba(245,200,0,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 12px rgba(245,200,0,0.2); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes duckWiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}
@keyframes progressBar {
  from { width: 0; }
}
@keyframes typeIn {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ── Page transitions ─────────────────────────────────────────────────────── */
.page-enter { animation: fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.panel-enter { animation: scaleIn 0.28s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Stagger ──────────────────────────────────────────────────────────────── */
.stagger-grid > * { opacity: 0; animation: fadeUp 0.4s cubic-bezier(0.22,1,0.36,1) forwards; }
.stagger-grid > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-grid > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-grid > *:nth-child(3) { animation-delay: 0.12s; }
.stagger-grid > *:nth-child(4) { animation-delay: 0.16s; }
.stagger-grid > *:nth-child(5) { animation-delay: 0.20s; }
.stagger-grid > *:nth-child(6) { animation-delay: 0.24s; }

/* ── Activity new ─────────────────────────────────────────────────────────── */
.act-new { animation: slideRight 0.28s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.logo-mark { animation: float 3.5s ease-in-out infinite; }
.logo-mark:hover { animation: pulseYellow 1s ease infinite; }

/* ── Duck ─────────────────────────────────────────────────────────────────── */
.duck-emoji { animation: float 4s ease-in-out infinite; display: inline-block; }
.duck-mascot:hover .duck-emoji { animation: duckWiggle 0.5s ease; }

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary { transition: all 0.15s cubic-bezier(0.22,1,0.36,1); }
.btn-primary:active { transform: scale(0.96) !important; }
.btn-ghost { transition: all 0.14s; }
.btn-ghost:active { transform: scale(0.97) !important; }

/* ── Metric cards ─────────────────────────────────────────────────────────── */
.metric-card { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.2s, box-shadow 0.2s; }
.metric-card.yellow:hover { animation: glowYellow 2s ease infinite; }

/* ── Kanban cards ─────────────────────────────────────────────────────────── */
.cand-card { transition: all 0.16s cubic-bezier(0.22,1,0.36,1); }
.cand-card.hot { animation: glowYellow 3s ease-in-out infinite; }

/* ── Score/progress bars ──────────────────────────────────────────────────── */
.score-fill, .metric-bar-fill, .sent-fill, .funnel-fill {
  transition: width 1s cubic-bezier(0.22,1,0.36,1);
}

/* ── Count up ─────────────────────────────────────────────────────────────── */
.count-anim { animation: countUp 0.6s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.tos-spinner { animation: spin 0.65s linear infinite; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay.open .modal { animation: scaleIn 0.22s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast { animation: slideUpFade 0.22s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Nav items ────────────────────────────────────────────────────────────── */
.nav-item { transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { transform: translateX(2px); }

/* ── Notif panel ──────────────────────────────────────────────────────────── */
.notif-panel.open { animation: slideUpFade 0.16s ease both; }

/* ── Pulse dot ────────────────────────────────────────────────────────────── */
.pulse-dot { animation: pulseYellow 2.5s ease infinite; }

/* ── Channel item ─────────────────────────────────────────────────────────── */
.channel-item { transition: all 0.16s cubic-bezier(0.22,1,0.36,1); }

/* ── Table rows ───────────────────────────────────────────────────────────── */
tbody tr { transition: background 0.1s; }

/* ── Yellow scanning line (decorative) ───────────────────────────────────── */
.scan-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,200,0,0.3), transparent);
  animation: scanline 4s linear infinite;
  pointer-events: none;
}

/* ── Topbar yellow accent pulse ───────────────────────────────────────────── */
.topbar::after {
  animation: pulseYellow 4s ease infinite;
}

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