/* ================================================================
   LinkedIn Audit Tool — Animations
   ================================================================ */

/* ── Page Intro ───────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideLeft  { from { opacity: 0; transform: translateX(20px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(.92); }       to { opacity: 1; transform: scale(1); } }
@keyframes bounceIn   {
  0%   { transform: scale(.3);  opacity: 0; }
  50%  { transform: scale(1.05); opacity: 1; }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(10,102,194,.2); }
  50%       { box-shadow: 0 0 40px rgba(10,102,194,.5); }
}
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes scoreFlash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes cardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(10,102,194,.25); }
  70%  { box-shadow: 0 0 0 8px rgba(10,102,194,0); }
  100% { box-shadow: 0 0 0 0 rgba(10,102,194,0); }
}
@keyframes checkDraw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
@keyframes confetti {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh)  rotate(720deg); opacity: 0; }
}

/* ── Entry Animations ─────────────────────────────────────────── */
.animate-intro {
  opacity: 0;
  animation: fadeUp .6s ease forwards;
}
.animate-intro:nth-child(1) { animation-delay: .05s; }
.animate-intro:nth-child(2) { animation-delay: .10s; }
.animate-intro:nth-child(3) { animation-delay: .15s; }
.animate-intro:nth-child(4) { animation-delay: .20s; }
.animate-intro:nth-child(5) { animation-delay: .25s; }
.animate-intro:nth-child(6) { animation-delay: .30s; }
.animate-intro:nth-child(7) { animation-delay: .35s; }
.animate-intro:nth-child(8) { animation-delay: .40s; }
.animate-intro:nth-child(9) { animation-delay: .45s; }

/* ── Sidebar entry ────────────────────────────────────────────── */
.sidebar { animation: slideRight .5s ease; }
.main-content { animation: slideLeft .5s ease; }

/* ── Card hover lift ──────────────────────────────────────────── */
.criterion-card,
.stat-card,
.rec-card,
.chart-card {
  will-change: transform;
}
.criterion-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.35); }

/* ── Score badge flash on change ──────────────────────────────── */
.score-flash { animation: scoreFlash .4s ease; }

/* ── Card pulse when score hits 10 ───────────────────────────── */
.score-perfect { animation: cardPulse .7s ease; }

/* ── Score slider track fill (CSS trick) ─────────────────────── */
.score-slider {
  background: linear-gradient(to left,
    var(--primary) var(--pct, 0%),
    var(--bg4) var(--pct, 0%)
  );
}

/* ── Shimmer skeleton ─────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg,
    var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ── Button ripple ────────────────────────────────────────────── */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn .ripple-effect {
  position: absolute; border-radius: 50%;
  width: 10px; height: 10px;
  background: rgba(255,255,255,.3);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ── Floating label ───────────────────────────────────────────── */
.score-ring-card { animation: float 4s ease-in-out infinite; }
.score-ring-card:hover { animation-play-state: paused; }

/* ── Progress ring gradient glow ─────────────────────────────── */
.ring-fill.excellent { animation: pulseGlow 2.5s ease-in-out infinite; border-radius: 50%; }

/* ── Report generate success ──────────────────────────────────── */
.report-ready { animation: bounceIn .5s ease; }

/* ── Table row expand ─────────────────────────────────────────── */
.table-row-enter {
  animation: fadeUp .3s ease forwards;
}

/* ── Confetti particle ────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  width: 10px; height: 10px;
  top: -10px;
  animation: confetti 3s ease-in forwards;
  border-radius: 2px;
  z-index: 99999;
  pointer-events: none;
}

/* ── Light/Dark transition ────────────────────────────────────── */
body { transition: background .4s ease, color .3s ease; }
.criterion-card,
.stat-card,
.chart-card,
.sidebar { transition: background .4s ease, border-color .3s ease; }

/* ── Score color transitions ──────────────────────────────────── */
.criterion-card::before { transition: background .35s ease; }
.crit-score-badge       { transition: color .3s ease; }
.score-progress-fill    { transition: width .45s cubic-bezier(.4,0,.2,1), background .35s ease; }