/* ============================================
   Module SVG Animations
   8 use-case hero illustrations
   ============================================ */

/* --- Container --- */
.module-illustration {
  --module-brand-strong: #1d4ed8;
  --module-brand: #2563eb;
  --module-brand-accent: #3b82f6;
  --module-brand-soft: #60a5fa;
  --module-brand-pale: #93c5fd;
  --module-brand-wash: #bfdbfe;
  --module-brand-surface: #dbeafe;
  --module-brand-paper: #eff6ff;
  --module-brand-paper-alt: #f8fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  margin-bottom: var(--spacing-sm);
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(96, 165, 250, 0.12) 100%);
}

.module-illustration svg {
  width: 100%;
  max-width: 280px;
  height: 140px;
}

.module-illustration [fill="#4f46e5"] { fill: var(--module-brand-strong); }
.module-illustration [stroke="#4f46e5"] { stroke: var(--module-brand-strong); }
.module-illustration [fill="#818cf8"] { fill: var(--module-brand-accent); }
.module-illustration [stroke="#818cf8"] { stroke: var(--module-brand-accent); }
.module-illustration [fill="#a5b4fc"] { fill: var(--module-brand-soft); }
.module-illustration [stroke="#a5b4fc"] { stroke: var(--module-brand-soft); }
.module-illustration [fill="#c7d2fe"] { fill: var(--module-brand-wash); }
.module-illustration [stroke="#c7d2fe"] { stroke: var(--module-brand-wash); }
.module-illustration [fill="#e0e7ff"] { fill: var(--module-brand-surface); }
.module-illustration [stroke="#e0e7ff"] { stroke: var(--module-brand-surface); }
.module-illustration [fill="#eef2ff"],
.module-illustration [fill="#f0eeff"],
.module-illustration [fill="#f0fdf4"] { fill: var(--module-brand-paper); }
.module-illustration [stroke="#eef2ff"],
.module-illustration [stroke="#f0eeff"],
.module-illustration [stroke="#f0fdf4"] { stroke: var(--module-brand-paper); }
.module-illustration [fill="#10b981"] { fill: var(--module-brand); }
.module-illustration [stroke="#10b981"] { stroke: var(--module-brand); }

.module-illustration .rag-highlight-bar {
  fill: rgba(37, 99, 235, 0.12);
}

/* ============================================
   1. AI Tax Assistant (RAG) — Document + Magnifier
   ============================================ */
@keyframes rag-scan {
  0%, 100% { transform: translateX(-10px) translateY(5px); opacity: 0.7; }
  50% { transform: translateX(10px) translateY(-5px); opacity: 1; }
}
@keyframes rag-lines-appear {
  0% { opacity: 0; transform: translateX(-15px); }
  40% { opacity: 0; transform: translateX(-15px); }
  60% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes rag-highlight {
  0%, 40% { fill: rgba(37, 99, 235, 0.12); }
  50% { fill: rgba(59, 130, 246, 0.28); }
  100% { fill: rgba(37, 99, 235, 0.12); }
}
.rag-magnifier { animation: rag-scan 4s ease-in-out infinite; }
.rag-line-1 { animation: rag-lines-appear 3s ease-out infinite; }
.rag-line-2 { animation: rag-lines-appear 3s ease-out 0.3s infinite; }
.rag-line-3 { animation: rag-lines-appear 3s ease-out 0.6s infinite; }
.rag-highlight-bar { animation: rag-highlight 4s ease-in-out infinite; }

/* ============================================
   2. Client Onboarding (KYC) — ID card scan
   ============================================ */
@keyframes kyc-card-slide {
  0% { transform: translateX(-30px); opacity: 0; }
  30% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes kyc-scan-line {
  0%, 30% { transform: translateY(-20px); opacity: 0; }
  40% { transform: translateY(-20px); opacity: 1; }
  70% { transform: translateY(40px); opacity: 1; }
  80% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(40px); opacity: 0; }
}
@keyframes kyc-check-appear {
  0%, 75% { transform: scale(0); opacity: 0; }
  85% { transform: scale(1.2); opacity: 1; }
  95% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.kyc-card { animation: kyc-card-slide 4s ease-out infinite; }
.kyc-scan { animation: kyc-scan-line 4s ease-in-out infinite; }
.kyc-check { animation: kyc-check-appear 4s ease-out infinite; transform-origin: center; }

/* ============================================
   3. Document Recognition (OCR) — Docs to JSON
   ============================================ */
@keyframes ocr-doc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes ocr-arrow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes ocr-json-type {
  0% { stroke-dashoffset: 60; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
.ocr-doc { animation: ocr-doc-float 3s ease-in-out infinite; }
.ocr-doc-2 { animation: ocr-doc-float 3s ease-in-out 0.5s infinite; }
.ocr-arrow { animation: ocr-arrow-pulse 2.5s ease-in-out infinite; }
.ocr-json { animation: ocr-json-type 3s ease-out infinite; stroke-dasharray: 60; }

/* ============================================
   4. VAT Reconciliation — Matching lines
   ============================================ */
@keyframes vat-match-draw {
  0% { stroke-dashoffset: 80; opacity: 0; }
  30% { stroke-dashoffset: 80; opacity: 0.5; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes vat-check-pop {
  0%, 65% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.vat-match-1 { animation: vat-match-draw 3.5s ease-out infinite; stroke-dasharray: 80; }
.vat-match-2 { animation: vat-match-draw 3.5s ease-out 0.3s infinite; stroke-dasharray: 80; }
.vat-match-3 { animation: vat-match-draw 3.5s ease-out 0.6s infinite; stroke-dasharray: 80; }
.vat-check { animation: vat-check-pop 3.5s ease-out infinite; transform-origin: center; }

/* ============================================
   5. Meeting Transcription (ASR) — Wave to text
   ============================================ */
@keyframes asr-wave {
  0%, 100% { d: path("M30,70 Q55,50 80,70 Q105,90 130,70"); }
  50% { d: path("M30,70 Q55,90 80,70 Q105,50 130,70"); }
}
@keyframes asr-text-slide {
  0% { opacity: 0; transform: translateX(-10px); }
  30% { opacity: 0; transform: translateX(-10px); }
  50% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
.asr-wave-path { animation: asr-wave 2s ease-in-out infinite; }
.asr-text-1 { animation: asr-text-slide 3s ease-out infinite; }
.asr-text-2 { animation: asr-text-slide 3s ease-out 0.4s infinite; }
.asr-text-3 { animation: asr-text-slide 3s ease-out 0.8s infinite; }

/* ============================================
   6. Phone AI Assistant (Voice AI) — Phone + rings
   ============================================ */
@keyframes voice-ring {
  0% { r: 18; opacity: 0.8; }
  100% { r: 40; opacity: 0; }
}
@keyframes voice-bubble {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.05); }
}
@keyframes voice-phone-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.voice-ring-1 { animation: voice-ring 2s ease-out infinite; }
.voice-ring-2 { animation: voice-ring 2s ease-out 0.6s infinite; }
.voice-ring-3 { animation: voice-ring 2s ease-out 1.2s infinite; }
.voice-bubble-1 { animation: voice-bubble 3s ease-in-out infinite; }
.voice-bubble-2 { animation: voice-bubble 3s ease-in-out 0.5s infinite; }
.voice-phone { animation: voice-phone-pulse 2s ease-in-out infinite; transform-origin: center; }

/* ============================================
   7. Automated Reporting — Chart to report
   ============================================ */
@keyframes report-bar-grow {
  0% { transform: scaleY(0); }
  40% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes report-doc-slide {
  0%, 50% { transform: translateX(20px); opacity: 0; }
  70% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes report-arrow-fade {
  0%, 30% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
.report-bar-1 { animation: report-bar-grow 3.5s ease-out infinite; transform-origin: bottom; }
.report-bar-2 { animation: report-bar-grow 3.5s ease-out 0.2s infinite; transform-origin: bottom; }
.report-bar-3 { animation: report-bar-grow 3.5s ease-out 0.4s infinite; transform-origin: bottom; }
.report-bar-4 { animation: report-bar-grow 3.5s ease-out 0.6s infinite; transform-origin: bottom; }
.report-doc { animation: report-doc-slide 3.5s ease-out infinite; }
.report-arrow { animation: report-arrow-fade 3.5s ease-out infinite; }

/* ============================================
   8. Big Data Analysis (ML) — Neural network
   ============================================ */
@keyframes ml-node-pulse {
  0%, 100% { r: 5; opacity: 0.7; }
  50% { r: 7; opacity: 1; }
}
@keyframes ml-edge-flow {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
@keyframes ml-center-glow {
  0%, 100% { r: 8; fill: #1d4ed8; }
  50% { r: 10; fill: #3b82f6; }
}
.ml-node { animation: ml-node-pulse 2.5s ease-in-out infinite; }
.ml-node-d1 { animation-delay: 0.3s; }
.ml-node-d2 { animation-delay: 0.6s; }
.ml-node-d3 { animation-delay: 0.9s; }
.ml-node-d4 { animation-delay: 1.2s; }
.ml-node-d5 { animation-delay: 1.5s; }
.ml-edge { stroke-dasharray: 6 4; animation: ml-edge-flow 2s linear infinite; }
.ml-center { animation: ml-center-glow 3s ease-in-out infinite; }

/* ============================================
   Accessibility: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .module-illustration * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .module-illustration {
    height: 110px;
  }
  .module-illustration svg {
    max-width: 220px;
    height: 110px;
  }
}