/* =====================================================================
   ADS Leads Direct — SVG/CSS animation library (anim.css)
   Lightweight, library-free motion graphics. Loaded only on pages that
   use them. All respect prefers-reduced-motion via theme.css global rule.
   Colors come from theme.css custom properties (--accent, etc.).
   ===================================================================== */

.anim { position: relative; width: 100%; display: grid; place-items: center; }

/* ---------------------------------------------------------------------
   1) Incoming-call rings  (.anim-rings) — Inbound Calls
   --------------------------------------------------------------------- */
.anim-rings { min-height: 280px; }
.anim-rings .hub {
  position: relative; z-index: 2; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; color: #06120a; font-size: 1.7rem;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 12px 30px -8px var(--accent-glow);
  animation: hubPulse 2.4s ease-in-out infinite;
}
.anim-rings .ring {
  position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border: 2px solid var(--accent); border-radius: 50%; opacity: 0;
  animation: ringOut 2.4s cubic-bezier(0.22,1,0.36,1) infinite;
}
.anim-rings .ring:nth-child(2) { animation-delay: 0.8s; }
.anim-rings .ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes ringOut { 0% { transform: scale(0.4); opacity: 0.85; } 80% { opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes hubPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------------------------------------------------------------------
   2) Voice waveform  (.anim-wave) — AI Phone Agents
   --------------------------------------------------------------------- */
.anim-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 120px; }
.anim-wave span {
  display: block; width: 6px; height: 64px; border-radius: 6px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  transform: scaleY(0.18); transform-origin: center;
  animation: wave 1.15s ease-in-out infinite;
}
@keyframes wave { 0%,100% { transform: scaleY(0.18); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.anim-wave span:nth-child(8n+1) { animation-delay: -.95s; }
.anim-wave span:nth-child(8n+2) { animation-delay: -.30s; }
.anim-wave span:nth-child(8n+3) { animation-delay: -.70s; }
.anim-wave span:nth-child(8n+4) { animation-delay: -.10s; }
.anim-wave span:nth-child(8n+5) { animation-delay: -.85s; }
.anim-wave span:nth-child(8n+6) { animation-delay: -.45s; }
.anim-wave span:nth-child(8n+7) { animation-delay: -.60s; }
.anim-wave span:nth-child(8n+8) { animation-delay: -.20s; }

/* ---------------------------------------------------------------------
   3) Lead-flow pipeline  (.anim-pipe) — Homepage "How It Works"
   --------------------------------------------------------------------- */
.anim-pipe { margin: 0 auto clamp(28px,5vw,52px); max-width: 980px; }
.anim-pipe svg { width: 100%; height: 46px; overflow: visible; }
.anim-pipe .pipe-track { stroke: var(--hairline); stroke-width: 2; }
.anim-pipe .pipe-flow {
  stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 14 18; animation: pipeFlow 1.4s linear infinite;
}
@keyframes pipeFlow { to { stroke-dashoffset: -64; } }
.anim-pipe .pipe-packet { fill: var(--accent-bright); animation: pipeMove 3.6s cubic-bezier(0.45,0,0.55,1) infinite; }
.anim-pipe .pipe-packet.p2 { animation-delay: -1.2s; }
.anim-pipe .pipe-packet.p3 { animation-delay: -2.4s; }
@keyframes pipeMove {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(880px); opacity: 0; }
}

/* ---------------------------------------------------------------------
   4) Analytics dashboard  (.anim-dash) — Tracking & Analytics
   --------------------------------------------------------------------- */
.anim-dash svg { width: 100%; max-width: 360px; height: auto; margin: 0 auto; display: block; }
.anim-dash .dash-track { fill: none; stroke: var(--hairline); stroke-width: 12; }
.anim-dash .dash-ring {
  fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264; transform: rotate(-90deg); transform-origin: 70px 78px;
  animation: dashRing 4s ease-in-out infinite;
}
@keyframes dashRing { 0% { stroke-dashoffset: 264; } 35%,75% { stroke-dashoffset: 70; } 100% { stroke-dashoffset: 264; } }
.anim-dash .dbar { fill: var(--accent); transform-box: fill-box; transform-origin: center bottom; animation: dbarGrow 4s ease-in-out infinite; }
.anim-dash .dbar.b2 { animation-delay: .15s; fill: var(--accent-bright); }
.anim-dash .dbar.b3 { animation-delay: .3s; }
.anim-dash .dbar.b4 { animation-delay: .45s; fill: var(--accent-bright); }
@keyframes dbarGrow { 0% { transform: scaleY(0); } 30% { transform: scaleY(1); } 80% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.anim-dash .dline {
  fill: none; stroke: var(--accent-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 360; stroke-dashoffset: 360; animation: dlineDraw 4s ease-in-out infinite;
}
@keyframes dlineDraw { 0% { stroke-dashoffset: 360; } 45%,82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 360; } }
.anim-dash .ddot { fill: var(--accent-bright); opacity: 0; animation: ddot 4s ease-in-out infinite; }
@keyframes ddot { 0%,40% { opacity: 0; } 50%,82% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------------
   5) Warm hand-off  (.anim-handoff) — Live Transfer
   --------------------------------------------------------------------- */
.anim-handoff { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 200px; width: 100%; }
.anim-handoff .hnode {
  position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 1.3rem; color: var(--accent);
  background: rgba(43,210,79,.12); border: 1px solid var(--hairline);
}
.anim-handoff .hnode.right { color: #06120a; background: linear-gradient(135deg,var(--accent-bright),var(--accent-deep)); border: none; animation: arrive 3s ease-in-out infinite; }
@keyframes arrive { 0%,55% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow); } 70% { transform: scale(1.12); box-shadow: 0 0 0 10px transparent; } 100% { transform: scale(1); } }
.anim-handoff .htrack { position: relative; flex: 1 1 auto; max-width: 200px; height: 2px; background: var(--hairline); margin: 0 -8px; }
.anim-handoff .htrack::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 60% 100%; background-repeat: no-repeat; animation: trackShimmer 3s linear infinite;
}
@keyframes trackShimmer { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }
.anim-handoff .hpacket {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--accent-bright); box-shadow: 0 0 14px var(--accent-glow); animation: handoffMove 3s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes handoffMove { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 60% { left: 100%; opacity: 1; } 70%,100% { left: 100%; opacity: 0; } }

/* ---------------------------------------------------------------------
   6) Form auto-fill + send  (.anim-form) — Form Fills
   --------------------------------------------------------------------- */
.anim-form { width: 100%; max-width: 340px; margin: 0 auto; display: grid; gap: 16px; position: relative; }
.anim-form .ff-row { display: flex; align-items: center; gap: 12px; }
.anim-form .ff-field {
  flex: 1; height: 38px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline); position: relative; overflow: hidden;
}
.anim-form .ff-field::after {
  content: ""; position: absolute; left: 12px; top: 50%; height: 6px; width: 0; margin-top: -3px;
  border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  animation: ffFill 5s ease-in-out infinite;
}
.anim-form .ff-row:nth-child(2) .ff-field::after { animation-delay: .5s; }
.anim-form .ff-row:nth-child(3) .ff-field::after { animation-delay: 1s; }
@keyframes ffFill { 0% { width: 0; } 14% { width: 72%; } 86% { width: 72%; } 100% { width: 0; } }
.anim-form .ff-check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; color: #06120a; font-size: .8rem;
  transform: scale(0); animation: ffCheck 5s ease-in-out infinite;
}
.anim-form .ff-row:nth-child(2) .ff-check { animation-delay: .5s; }
.anim-form .ff-row:nth-child(3) .ff-check { animation-delay: 1s; }
@keyframes ffCheck { 0%,14% { transform: scale(0); } 22% { transform: scale(1.25); } 30%,86% { transform: scale(1); } 94% { transform: scale(0); } }
.anim-form .ff-submit {
  margin-top: 4px; height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; color: #06120a;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent-deep)); position: relative; overflow: hidden;
  animation: ffSubmit 5s ease-in-out infinite;
}
@keyframes ffSubmit { 0%,40% { filter: brightness(.85); } 52% { filter: brightness(1.15); transform: translateY(-2px); } 60%,100% { filter: brightness(1); transform: none; } }
.anim-form .ff-plane {
  position: absolute; right: 24px; bottom: 6px; color: var(--accent-bright); font-size: 1.1rem; opacity: 0;
  animation: ffPlane 5s ease-in-out infinite;
}
@keyframes ffPlane { 0%,52% { opacity: 0; transform: translate(0,0) rotate(0); } 60% { opacity: 1; } 86% { opacity: 0; transform: translate(60px,-70px) rotate(8deg); } 100% { opacity: 0; } }
.anim-form .ff-chip {
  position: absolute; right: 0; top: -14px; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); background: rgba(43,210,79,.14); border: 1px solid rgba(43,210,79,.3);
  padding: 5px 11px; border-radius: var(--radius-pill); opacity: 0; transform: translateY(6px) scale(.9);
  animation: ffChip 5s ease-in-out infinite;
}
@keyframes ffChip { 0%,64% { opacity: 0; transform: translateY(6px) scale(.9); } 72% { opacity: 1; transform: translateY(0) scale(1); } 90% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------------
   7) Send confirmation  (.anim-send) — Contact
   --------------------------------------------------------------------- */
.anim-send { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(43,210,79,.12); border: 1px solid var(--hairline); color: var(--accent); font-size: 1.2rem; overflow: hidden; }
.anim-send i { animation: sendFly 2.6s ease-in-out infinite; }
@keyframes sendFly {
  0% { transform: translate(-22px,16px) rotate(-6deg); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translate(22px,-16px) rotate(6deg); opacity: 1; }
  72% { opacity: 0; }
  100% { transform: translate(-22px,16px) rotate(-6deg); opacity: 0; }
}