/* ============================================================
   CitationGuard AI — Animations (animations.css)
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInUp   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-16px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideInLeft  { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn   { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
@keyframes pulse     { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
@keyframes ping      { 75%,100% { transform:scale(2); opacity:0; } }
@keyframes bounce    { 0%,100% { transform:translateY(-10%); animation-timing-function:cubic-bezier(.8,0,1,1); } 50% { transform:translateY(0); animation-timing-function:cubic-bezier(0,0,.2,1); } }
@keyframes float     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes glow      { 0%,100% { box-shadow:0 0 8px rgba(37,99,235,.3); } 50% { box-shadow:0 0 24px rgba(37,99,235,.6); } }
@keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes ripple    { 0% { transform:scale(0); opacity:0.6; } 100% { transform:scale(4); opacity:0; } }
@keyframes typewriter { from { width:0; } to { width:100%; } }
@keyframes blink     { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes shimmer   { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes rotateGrad{ 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@keyframes progressFill { from { width:0%; } to { width:var(--target-w,100%); } }

/* ── Animation Utilities ─────────────────────────────────────── */
.animate-fade-in      { animation: fadeIn       0.3s ease forwards; }
.animate-fade-in-up   { animation: fadeInUp     0.4s ease forwards; }
.animate-fade-in-down { animation: fadeInDown   0.4s ease forwards; }
.animate-slide-left   { animation: slideInLeft  0.35s ease forwards; }
.animate-slide-right  { animation: slideInRight 0.35s ease forwards; }
.animate-scale-in     { animation: scaleIn      0.3s cubic-bezier(.34,1.56,.64,1) forwards; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-pulse        { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-glow         { animation: glow  2s ease-in-out infinite; }

/* Delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* ── Hero Gradient Text ──────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--purple-600) 50%, var(--primary-400) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

/* ── Animated Border Button ──────────────────────────────────── */
.btn-animated {
  position: relative; overflow: hidden;
}
.btn-animated::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(90deg, var(--primary-500), var(--purple-500), var(--primary-500));
  background-size: 200% 100%;
  border-radius: inherit;
  animation: shimmer 2s linear infinite;
  opacity: 0; transition: opacity var(--transition-base); z-index: -1;
}
.btn-animated:hover::before { opacity: 1; }

/* ── Ripple Effect ───────────────────────────────────────────── */
.ripple-container { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.3);
  width: 20px; height: 20px;
  pointer-events: none;
  animation: ripple 0.6s linear forwards;
}

/* ── Risk Pulse Indicator ────────────────────────────────────── */
.risk-pulse { position: relative; display: inline-block; }
.risk-pulse::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; border-radius: 50%;
  background: currentColor; opacity: 0.4;
  animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}

/* ── Live Analysis Indicator ─────────────────────────────────── */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success-500); display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}
.live-dot.analyzing { background: var(--warning-500); }
.live-dot.error     { background: var(--danger-500); animation: none; }

/* ── Citation Highlight Fade ─────────────────────────────────── */
@keyframes citationFlash {
  0%   { background: rgba(37,99,235,0.25); }
  100% { background: transparent; }
}
.citation-inserted { animation: citationFlash 1.5s ease-out forwards; }

/* ── AI Thinking Dots ────────────────────────────────────────── */
.thinking-dots { display: inline-flex; gap: 4px; align-items: center; }
.thinking-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-400); animation: bounce 1.4s ease-in-out infinite; }
.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Section Entry Animations ────────────────────────────────── */
.stagger-children > * {
  opacity: 0; animation: fadeInUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.30s; }

/* ── Hover Lift ──────────────────────────────────────────────── */
.hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ── Gradient Background Animation ──────────────────────────── */
.hero-bg {
  background: linear-gradient(-45deg, #EFF6FF, #EDE9FE, #ECFDF5, #F0F9FF);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* ── Page Transition ─────────────────────────────────────────── */
.page-enter { animation: fadeInUp 0.4s ease-out forwards; }

/* ── Score Ring Animation ────────────────────────────────────── */
@keyframes drawCircle {
  from { stroke-dashoffset: var(--dash-total, 283); }
  to   { stroke-dashoffset: var(--dash-offset, 0);  }
}
.score-ring-arc { animation: drawCircle 1.2s cubic-bezier(.4,0,.2,1) forwards; }

/* ── Typewriter Effect ───────────────────────────────────────── */
.typewriter {
  overflow: hidden; white-space: nowrap; border-right: 2px solid var(--primary-600);
  animation: typewriter 3s steps(40) forwards, blink 0.75s step-end infinite;
}

/* ── Notification Shake ──────────────────────────────────────── */
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20%,60% { transform:translateX(-4px); }
  40%,80% { transform:translateX(4px); }
}
.shake { animation: shake 0.5s ease; }