/* ═══════════════════════════════════════════════════════════════════════════
   CAREER INTELLIGENCE — ADVANCED ANIMATIONS
   v7.0.0 — Keyframes, stagger utilities, entrance & interaction animations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Stagger Entrance Utilities ─────────────────────────────────────────── */
.ci-stagger-1  { animation-delay: 60ms;  }
.ci-stagger-2  { animation-delay: 120ms; }
.ci-stagger-3  { animation-delay: 180ms; }
.ci-stagger-4  { animation-delay: 240ms; }
.ci-stagger-5  { animation-delay: 300ms; }
.ci-stagger-6  { animation-delay: 360ms; }
.ci-stagger-7  { animation-delay: 420ms; }
.ci-stagger-8  { animation-delay: 480ms; }
.ci-stagger-9  { animation-delay: 540ms; }
.ci-stagger-10 { animation-delay: 600ms; }
.ci-stagger-11 { animation-delay: 660ms; }
.ci-stagger-12 { animation-delay: 720ms; }
.ci-stagger-13 { animation-delay: 780ms; }
.ci-stagger-14 { animation-delay: 840ms; }
.ci-stagger-15 { animation-delay: 900ms; }
.ci-stagger-16 { animation-delay: 960ms; }

/* ─── Entrance Animations ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  @keyframes ciFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

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

  @keyframes ciFadeInDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

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

  @keyframes ciFadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes ciScaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes ciSlideInUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }

  @keyframes ciPopIn {
    0%   { opacity: 0; transform: scale(0.5); }
    70%  { opacity: 1; transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  /* ─── Score & Gauge Animations ───────────────────────────────────────── */

  @keyframes ciScoreCountUp {
    from { opacity: 0; transform: scale(0.6) translateY(20px); }
    50%  { opacity: 1; }
    to   { transform: scale(1) translateY(0); }
  }

  @keyframes ciPulseRing {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
  }

  @keyframes ciGaugeNeedleSweep {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(var(--needle-angle, 0deg)); }
  }

  @keyframes ciGaugeArcDraw {
    from { stroke-dashoffset: var(--arc-length, 283); }
    to   { stroke-dashoffset: var(--arc-target, 0); }
  }

  /* ─── Radar Chart Draw-On ────────────────────────────────────────────── */

  @keyframes ciDrawRadar {
    from { stroke-dashoffset: var(--radar-perimeter, 1000); opacity: 0.3; }
    to   { stroke-dashoffset: 0; opacity: 1; }
  }

  @keyframes ciRadarFill {
    from { opacity: 0; }
    to   { opacity: 0.15; }
  }

  @keyframes ciRadarPointPop {
    0%   { r: 0; opacity: 0; }
    60%  { r: 6; opacity: 1; }
    100% { r: 4; }
  }

  /* ─── Achievement Unlock ─────────────────────────────────────────────── */

  @keyframes ciAchievementUnlock {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    50%  { transform: scale(1.15) rotate(3deg); opacity: 1; }
    70%  { transform: scale(0.95) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  @keyframes ciGoldBurst {
    0%   { transform: scale(0); opacity: 0.8; }
    50%  { opacity: 0.4; }
    100% { transform: scale(3); opacity: 0; }
  }

  @keyframes ciTrophyShine {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }

  @keyframes ciConfettiPop {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateY(-120px) rotate(360deg) scale(0); opacity: 0; }
  }

  /* ─── Timeline Nodes ─────────────────────────────────────────────────── */

  @keyframes ciNodeAppear {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes ciNodePulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--node-color, rgba(99, 102, 241, 0.4)); }
    50%      { box-shadow: 0 0 0 8px transparent; }
  }

  @keyframes ciTimelineSlide {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes ciMilestoneAppear {
    0%   { transform: translateY(10px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }

  /* ─── Momentum & Streaks ─────────────────────────────────────────────── */

  @keyframes ciMomentumPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
  }

  @keyframes ciHotStreak {
    0%, 100% { text-shadow: 0 0 8px rgba(239, 68, 68, 0.3); }
    50%      { text-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.3); }
  }

  @keyframes ciColdStreak {
    0%, 100% { text-shadow: 0 0 8px rgba(59, 130, 246, 0.3); }
    50%      { text-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3); }
  }

  /* ─── AI / Typewriter ────────────────────────────────────────────────── */

  @keyframes ciTypeWriter {
    from { width: 0; }
    to   { width: 100%; }
  }

  @keyframes ciBlinkCaret {
    0%, 100% { border-color: transparent; }
    50%      { border-color: var(--color-accent, #6366f1); }
  }

  @keyframes ciAiPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.12); opacity: 1; }
  }

  @keyframes ciThinking {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
  }

  @keyframes ciDotBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
  }

  /* ─── Field / Position Diagram ───────────────────────────────────────── */

  @keyframes ciFieldLines {
    from { stroke-dashoffset: 20; }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes ciPositionHighlight {
    0%, 100% { r: 12; opacity: 0.6; }
    50%      { r: 18; opacity: 1; }
  }

  @keyframes ciPositionPing {
    0%   { r: 12; opacity: 0.8; stroke-width: 2; }
    100% { r: 40; opacity: 0; stroke-width: 0.5; }
  }

  /* ─── Comparison Stat Bars ───────────────────────────────────────────── */

  @keyframes ciComparisonSlide {
    from { width: 0; }
    to   { width: var(--bar-width, 0%); }
  }

  @keyframes ciComparisonGhost {
    from { width: 0; opacity: 0; }
    to   { width: var(--ghost-width, 0%); opacity: 0.25; }
  }

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

  /* ─── Physical Development Charts ────────────────────────────────────── */

  @keyframes ciLineChartDraw {
    from { stroke-dashoffset: var(--line-length, 2000); }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes ciAreaChartFill {
    from { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
    to   { opacity: 0.2; transform: scaleY(1); }
  }

  @keyframes ciDataPointPop {
    0%   { r: 0; opacity: 0; }
    70%  { r: 5; opacity: 1; }
    100% { r: 3.5; }
  }

  /* ─── Ambient & Decorative ───────────────────────────────────────────── */

  @keyframes ciOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, -20px) scale(1.1); }
    50%      { transform: translate(-10px, -40px) scale(0.95); }
    75%      { transform: translate(-30px, -10px) scale(1.05); }
  }

  @keyframes ciShimmerSweep {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }

  @keyframes ciGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes ciStarTwinkle {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.8; }
  }

  @keyframes ciRippleExpand {
    from { transform: scale(0); opacity: 0.5; }
    to   { transform: scale(4); opacity: 0; }
  }

  @keyframes ciBorderRotate {
    from { --ci-border-angle: 0deg; }
    to   { --ci-border-angle: 360deg; }
  }

  @keyframes ciGlowPulse {
    0%, 100% { box-shadow: 0 0 20px var(--glow-color, rgba(99, 102, 241, 0.2)); }
    50%      { box-shadow: 0 0 40px var(--glow-color, rgba(99, 102, 241, 0.4)); }
  }

  /* ─── Skeleton Loading ───────────────────────────────────────────────── */

  @keyframes ciSkeletonPulse {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  /* ─── Scroll Indicator ───────────────────────────────────────────────── */

  @keyframes ciScrollHint {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50%      { transform: translateX(8px); opacity: 1; }
  }

  /* ─── Mental Gauge ───────────────────────────────────────────────────── */

  @keyframes ciGaugeGlow {
    0%, 100% { filter: drop-shadow(0 0 4px var(--gauge-color, #6366f1)); }
    50%      { filter: drop-shadow(0 0 12px var(--gauge-color, #6366f1)); }
  }

  @keyframes ciNeedleBounce {
    0%   { transform: rotate(var(--needle-start, -90deg)); }
    70%  { transform: rotate(calc(var(--needle-angle, 0deg) + 5deg)); }
    85%  { transform: rotate(calc(var(--needle-angle, 0deg) - 2deg)); }
    100% { transform: rotate(var(--needle-angle, 0deg)); }
  }

} /* end prefers-reduced-motion: no-preference */


/* ─── Utility Animation Classes ──────────────────────────────────────────── */

.ci-anim-fade-in {
  animation: ciFadeIn 0.4s ease both;
}
.ci-anim-fade-in-up {
  animation: ciFadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ci-anim-fade-in-down {
  animation: ciFadeInDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ci-anim-fade-in-left {
  animation: ciFadeInLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ci-anim-fade-in-right {
  animation: ciFadeInRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ci-anim-scale-in {
  animation: ciScaleIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ci-anim-pop-in {
  animation: ciPopIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ci-anim-slide-in-up {
  animation: ciSlideInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Skeleton Base Class ────────────────────────────────────────────────── */

.ci-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 400% 100%;
  animation: ciSkeletonPulse 1.8s ease-in-out infinite;
  border-radius: 8px;
}

.ci-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  width: 80%;
}
.ci-skeleton-text.short { width: 40%; }
.ci-skeleton-text.medium { width: 60%; }

.ci-skeleton-circle {
  border-radius: 50%;
}

.ci-skeleton-card {
  height: 180px;
  border-radius: 16px;
}

/* ─── Scroll Indicators ──────────────────────────────────────────────────── */

.ci-scroll-indicator {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: rgba(15, 15, 20, 0.7);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  pointer-events: none;
  z-index: 2;
}

.ci-scroll-indicator svg {
  animation: ciScrollHint 1.5s ease-in-out infinite;
}

/* ─── Momentum Indicators ────────────────────────────────────────────────── */

.ci-momentum-hot {
  animation: ciHotStreak 2s ease-in-out infinite;
}
.ci-momentum-cold {
  animation: ciColdStreak 2s ease-in-out infinite;
}
.ci-momentum-neutral {
  opacity: 0.7;
}

/* ─── Achievement Card Animation Hooks ───────────────────────────────────── */

.ci-achievement-unlocking {
  animation: ciAchievementUnlock 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-achievement-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4), transparent 70%);
  animation: ciGoldBurst 0.8s ease-out both;
  pointer-events: none;
}

.ci-trophy-shine {
  position: relative;
  overflow: hidden;
}
.ci-trophy-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: ciTrophyShine 3s ease-in-out infinite;
  pointer-events: none;
}

/* ─── AI Typing Indicators ───────────────────────────────────────────────── */

.ci-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
}

.ci-ai-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #6366f1);
  animation: ciDotBounce 1.4s ease-in-out infinite;
}
.ci-ai-typing-dot:nth-child(2) { animation-delay: 0.16s; }
.ci-ai-typing-dot:nth-child(3) { animation-delay: 0.32s; }

/* ─── Gauge Container ────────────────────────────────────────────────────── */

.ci-gauge-needle {
  transform-origin: 50% 100%;
  animation: ciNeedleBounce 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.3s;
}

.ci-gauge-arc {
  animation: ciGaugeArcDraw 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}

.ci-gauge-glow {
  animation: ciGaugeGlow 3s ease-in-out infinite;
}

/* ─── Chart Draw Animations ──────────────────────────────────────────────── */

.ci-radar-polygon {
  stroke-dasharray: var(--radar-perimeter, 1000);
  stroke-dashoffset: var(--radar-perimeter, 1000);
  animation: ciDrawRadar 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}

.ci-radar-fill {
  animation: ciRadarFill 0.6s ease both;
  animation-delay: 0.8s;
}

.ci-radar-point {
  animation: ciRadarPointPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-line-chart-path {
  stroke-dasharray: var(--line-length, 2000);
  stroke-dashoffset: var(--line-length, 2000);
  animation: ciLineChartDraw 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-area-chart-fill {
  animation: ciAreaChartFill 0.8s ease both;
  animation-delay: 0.5s;
  transform-origin: bottom;
}

.ci-data-point {
  animation: ciDataPointPop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Comparison Bars ────────────────────────────────────────────────────── */

.ci-comparison-bar-fill {
  width: 0;
  animation: ciComparisonSlide 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--bar-delay, 0ms);
}

.ci-comparison-bar-ghost {
  width: 0;
  animation: ciComparisonGhost 0.6s ease both;
  animation-delay: calc(var(--bar-delay, 0ms) + 200ms);
}

.ci-comparison-delta {
  animation: ciDeltaFadeIn 0.4s ease both;
  animation-delay: calc(var(--bar-delay, 0ms) + 600ms);
}

/* ─── Timeline Nodes ─────────────────────────────────────────────────────── */

.ci-timeline-node {
  animation: ciNodeAppear 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--node-delay, 0ms);
}

.ci-timeline-node.active {
  animation: ciNodePulse 2s ease-in-out infinite;
}

.ci-timeline-line {
  transform-origin: left;
  animation: ciTimelineSlide 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ci-milestone-marker {
  animation: ciMilestoneAppear 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Position Diagram ───────────────────────────────────────────────────── */

.ci-position-dot {
  animation: ciPositionHighlight 2s ease-in-out infinite;
}

.ci-position-ping {
  animation: ciPositionPing 1.5s ease-out infinite;
}

/* ─── Score Ring Pulse ───────────────────────────────────────────────────── */

.ci-score-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--ring-color, rgba(99, 102, 241, 0.3));
  transform: translate(-50%, -50%) scale(1);
  animation: ciPulseRing 2s ease-out infinite;
  pointer-events: none;
}

/* ─── Ambient Orbs ───────────────────────────────────────────────────────── */

.ci-ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.ci-ambient-orb-1 {
  animation: ciOrbFloat 12s ease-in-out infinite;
}
.ci-ambient-orb-2 {
  animation: ciOrbFloat 15s ease-in-out infinite reverse;
  animation-delay: -3s;
}
.ci-ambient-orb-3 {
  animation: ciOrbFloat 18s ease-in-out infinite;
  animation-delay: -7s;
}
.ci-ambient-orb-4 {
  animation: ciOrbFloat 14s ease-in-out infinite reverse;
  animation-delay: -5s;
}

/* ─── Shimmer Text Utility ───────────────────────────────────────────────── */

.ci-shimmer-text {
  background: linear-gradient(90deg, #ffffff 0%, #fcd34d 40%, #ffffff 60%, #fcd34d 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ciShimmerSweep 3s ease-in-out infinite;
}

/* ─── Gradient Shift Background ──────────────────────────────────────────── */

.ci-gradient-bg {
  background-size: 200% 200%;
  animation: ciGradientShift 6s ease infinite;
}

/* ─── Reduced Motion Overrides ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ci-stagger-1, .ci-stagger-2, .ci-stagger-3, .ci-stagger-4,
  .ci-stagger-5, .ci-stagger-6, .ci-stagger-7, .ci-stagger-8,
  .ci-stagger-9, .ci-stagger-10, .ci-stagger-11, .ci-stagger-12,
  .ci-stagger-13, .ci-stagger-14, .ci-stagger-15, .ci-stagger-16 {
    animation-delay: 0ms !important;
  }

  .ci-anim-fade-in,
  .ci-anim-fade-in-up,
  .ci-anim-fade-in-down,
  .ci-anim-fade-in-left,
  .ci-anim-fade-in-right,
  .ci-anim-scale-in,
  .ci-anim-pop-in,
  .ci-anim-slide-in-up,
  .ci-achievement-unlocking,
  .ci-trophy-shine::after,
  .ci-radar-polygon,
  .ci-radar-fill,
  .ci-radar-point,
  .ci-line-chart-path,
  .ci-area-chart-fill,
  .ci-data-point,
  .ci-comparison-bar-fill,
  .ci-comparison-bar-ghost,
  .ci-comparison-delta,
  .ci-timeline-node,
  .ci-timeline-line,
  .ci-milestone-marker,
  .ci-gauge-needle,
  .ci-gauge-arc,
  .ci-ambient-orb,
  .ci-ambient-orb-1,
  .ci-ambient-orb-2,
  .ci-ambient-orb-3,
  .ci-ambient-orb-4,
  .ci-score-pulse-ring,
  .ci-momentum-hot,
  .ci-momentum-cold,
  .ci-position-dot,
  .ci-position-ping {
    animation: none !important;
  }

  .ci-comparison-bar-fill,
  .ci-comparison-bar-ghost {
    width: var(--bar-width, 0%) !important;
  }

  .ci-radar-polygon {
    stroke-dashoffset: 0 !important;
  }

  .ci-gauge-needle {
    transform: rotate(var(--needle-angle, 0deg)) !important;
  }

  .ci-shimmer-text {
    animation: none !important;
    -webkit-text-fill-color: #fcd34d;
  }
}