/* Hover animations for XamiHub icons.
   Each icon's wrapper gets class "ic ic--<animName>".
   Child <path> elements are indexed via class "p-0", "p-1", etc.
   All animations pause by default and run only on hover (or while focused). */

@keyframes x-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes x-spin  { to { transform: rotate(360deg); } }
@keyframes x-spinr { to { transform: rotate(-360deg); } }
@keyframes x-bounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes x-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-1.2px); } 75% { transform: translateX(1.2px); } }
@keyframes x-draw { from { stroke-dashoffset: var(--dl,60); } to { stroke-dashoffset: 0; } }
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-pop  { 0% { transform: scale(0.6); opacity:.2 } 70%{transform:scale(1.08)} 100% { transform: scale(1); opacity:1 } }
@keyframes x-slideX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes x-slideY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes x-wiggle { 0%,100% { transform: rotate(0); } 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }
@keyframes x-ring { 0%,100% { transform: rotate(0); } 15%{transform:rotate(-14deg)} 30%{transform:rotate(10deg)} 45%{transform:rotate(-6deg)} 60%{transform:rotate(4deg)} }

/* Base — each path gets its own transform-origin at the icon center.
   svg is 24x24, so 12 12 is the center. */
.ic svg { overflow: visible; }
.ic svg path { transform-box: fill-box; transform-origin: 12px 12px; transition: stroke 200ms ease; }

/* Dashed path so "draw" animations work: we apply dasharray/dashoffset only
   when the animation is active. */

/* ------------ CORE / NAV ------------ */

/* hub — rays (p1..p8) pulse; core (p9) spins */
.ic--pulse-rays:hover .p-0,
.ic--pulse-rays:hover .p-1,
.ic--pulse-rays:hover .p-2,
.ic--pulse-rays:hover .p-3,
.ic--pulse-rays:hover .p-4,
.ic--pulse-rays:hover .p-5,
.ic--pulse-rays:hover .p-6,
.ic--pulse-rays:hover .p-7 { animation: x-pulse 900ms ease-in-out infinite; }
.ic--pulse-rays:hover .p-8 { animation: x-spin 2.4s linear infinite; }

/* dashboard — 4 tiles pop in sequence */
.ic--tiles-pop:hover .p-0 { animation: x-pop 500ms ease-out both; }
.ic--tiles-pop:hover .p-1 { animation: x-pop 500ms 80ms ease-out both; }
.ic--tiles-pop:hover .p-2 { animation: x-pop 500ms 160ms ease-out both; }
.ic--tiles-pop:hover .p-3 { animation: x-pop 500ms 240ms ease-out both; }

/* search — lens sweeps */
.ic--search-sweep:hover .p-0 { animation: x-slideX 900ms ease-in-out infinite; }
.ic--search-sweep:hover .p-1 { animation: x-slideX 900ms ease-in-out infinite; }

.ic--filter-drip:hover { animation: x-bounceY 900ms ease-in-out infinite; }

.ic--gear-spin:hover .p-0 { animation: x-spin 2.4s linear infinite; }
.ic--gear-spin:hover > svg { animation: x-spin 4s linear infinite; }

.ic--bell-ring:hover .p-0 { animation: x-ring 900ms ease-in-out infinite; transform-origin: 12px 3px; }
.ic--bell-ring:hover .p-1 { animation: x-bounceY 900ms ease-in-out infinite; }

/* ------------ CRM ------------ */

.ic--contact-check:hover { animation: x-bounceY 900ms ease-in-out infinite; }
.ic--team-orbit:hover .p-1 { animation: x-pop 700ms ease-out both; }
.ic--team-orbit:hover .p-3 { animation: x-pop 700ms 120ms ease-out both; }

.ic--company-rise:hover .p-2,
.ic--company-rise:hover .p-3,
.ic--company-rise:hover .p-4 { animation: x-fade 1200ms ease-in-out infinite alternate; }

/* pipeline — 3 bars rise one after another */
.ic--pipeline-fill:hover .p-0 { animation: x-pop 500ms ease-out both; }
.ic--pipeline-fill:hover .p-1 { animation: x-pop 500ms 120ms ease-out both; }
.ic--pipeline-fill:hover .p-2 { animation: x-pop 500ms 240ms ease-out both; }

.ic--deal-open:hover .p-1 { animation: x-bounceY 900ms ease-in-out infinite; transform-origin: 12px 4px; }

.ic--task-check:hover path { stroke-dasharray: 40; --dl: 40; animation: x-draw 700ms ease-out both; }
.ic--task-check:hover .p-1 { animation-delay: 100ms; }
.ic--task-check:hover .p-2,
.ic--task-check:hover .p-3 { animation: none; }

.ic--tag-flip:hover .p-0 { animation: x-wiggle 900ms ease-in-out infinite; }
.ic--timeline-scan:hover .p-3,
.ic--timeline-scan:hover .p-4,
.ic--timeline-scan:hover .p-5 { animation: x-pulse 900ms ease-in-out infinite; }
.ic--timeline-scan:hover .p-4 { animation-delay: 150ms; }
.ic--timeline-scan:hover .p-5 { animation-delay: 300ms; }

/* ------------ BOT BUILDER ------------ */

.ic--bot-blink:hover .p-2,
.ic--bot-blink:hover .p-3 { animation: x-pulse 700ms ease-in-out infinite; }
.ic--bot-blink:hover .p-1 { animation: x-wiggle 900ms ease-in-out infinite; transform-origin: 12px 6px; }

.ic--flow-travel:hover .p-4,
.ic--flow-travel:hover .p-5 { stroke-dasharray: 30; --dl: 30; animation: x-draw 900ms ease-in-out infinite; }

.ic--node-pulse:hover .p-4 { animation: x-pulse 900ms ease-in-out infinite; }

.ic--split-branch:hover .p-1 { stroke-dasharray: 30; --dl: 30; animation: x-draw 700ms ease-out both; }

.ic--condition-tilt:hover .p-0 { animation: x-wiggle 1000ms ease-in-out infinite; }

.ic--webhook-signal:hover { animation: x-pulse 1000ms ease-in-out infinite; }

/* ------------ AI / SAFETY ------------ */

.ic--spark-sparkle:hover > svg { animation: x-spin 4s linear infinite; }
.ic--spark-sparkle:hover { animation: x-pulse 1000ms ease-in-out infinite; }

.ic--brain-think:hover .p-0 { animation: x-fade 900ms ease-in-out infinite alternate; }
.ic--brain-think:hover .p-1 { animation: x-fade 900ms 450ms ease-in-out infinite alternate; }

.ic--shield-pulse:hover { animation: x-pulse 900ms ease-in-out infinite; }

.ic--shield-seal:hover .p-1 { stroke-dasharray: 20; --dl: 20; animation: x-draw 700ms ease-out both; }

.ic--key-turn:hover .p-0 { animation: x-spin 1.2s ease-in-out infinite; transform-origin: 14.5px 8.5px; }

.ic--bolt-flash:hover { animation: x-pulse 500ms ease-in-out infinite; }

.ic--book-flip:hover .p-0 { animation: x-wiggle 1.2s ease-in-out infinite; transform-origin: 4px 12px; }

/* ------------ INBOX / MESSAGING ------------ */

.ic--chat-dots:hover { animation: x-bounceY 700ms ease-in-out infinite; }

.ic--chats-stack:hover .p-0 { animation: x-slideY 1000ms ease-in-out infinite; }
.ic--chats-stack:hover .p-1 { animation: x-slideY 1000ms 200ms ease-in-out infinite; }

.ic--inbox-drop:hover .p-1 { animation: x-bounceY 900ms ease-in-out infinite; }

.ic--send-fly:hover { animation: x-slideX 800ms ease-in-out infinite; }

.ic--mic-wave:hover .p-1 { animation: x-pulse 900ms ease-in-out infinite; }

.ic--image-shimmer:hover .p-2 { animation: x-pulse 900ms ease-in-out infinite; }

.ic--reply-arrow:hover .p-1 { animation: x-slideX 700ms ease-in-out infinite; }

.ic--handoff-arrow:hover .p-0 { animation: x-slideX 700ms ease-in-out infinite; }

/* ------------ ADS / TRACKING ------------ */

.ic--target-lock:hover .p-0 { animation: x-pulse 900ms ease-in-out infinite; }
.ic--target-lock:hover .p-1 { animation: x-pulse 900ms 150ms ease-in-out infinite; }
.ic--target-lock:hover .p-2 { animation: x-pulse 900ms 300ms ease-in-out infinite; }

/* chart — bars grow sequentially (scaleY). transform-origin baseline (y=20) */
.ic--chart-grow:hover .p-0,
.ic--chart-grow:hover .p-1,
.ic--chart-grow:hover .p-2 { transform-origin: 12px 20px; animation: x-pop 700ms ease-out both; }
.ic--chart-grow:hover .p-1 { animation-delay: 120ms; }
.ic--chart-grow:hover .p-2 { animation-delay: 240ms; }

.ic--trend-climb:hover .p-0 { stroke-dasharray: 40; --dl: 40; animation: x-draw 900ms ease-out both; }

.ic--link-chain:hover .p-0 { animation: x-slideX 900ms ease-in-out infinite; transform-origin: 8px 16px; }
.ic--link-chain:hover .p-1 { animation: x-slideX 900ms ease-in-out infinite reverse; transform-origin: 16px 8px; }

.ic--pixel-scan:hover .p-4 { animation: x-pulse 700ms ease-in-out infinite; }

.ic--funnel-drip:hover { animation: x-bounceY 900ms ease-in-out infinite; }

/* ------------ AUTOMATION ------------ */

.ic--zap-flash:hover { animation: x-pulse 600ms ease-in-out infinite; }

.ic--repeat-spin:hover > svg { animation: x-spin 2s linear infinite; }

.ic--clock-tick:hover .p-1 { animation: x-spin 2s linear infinite; transform-origin: 12px 12px; }

.ic--route-travel:hover .p-0 { animation: x-pulse 900ms ease-in-out infinite; }
.ic--route-travel:hover .p-1 { animation: x-pulse 900ms 300ms ease-in-out infinite; }

/* ------------ FORMS ------------ */

.ic--form-fill:hover .p-1,
.ic--form-fill:hover .p-2,
.ic--form-fill:hover .p-3 { stroke-dasharray: 20; --dl: 20; animation: x-draw 800ms ease-out both; }
.ic--form-fill:hover .p-2 { animation-delay: 140ms; }
.ic--form-fill:hover .p-3 { animation-delay: 280ms; }

.ic--check-draw:hover .p-0 { stroke-dasharray: 28; --dl: 28; animation: x-draw 600ms ease-out both; }

.ic--checkbox-check:hover .p-1 { stroke-dasharray: 20; --dl: 20; animation: x-draw 600ms ease-out both; }

.ic--radio-fill:hover .p-1 { animation: x-pop 500ms ease-out both; }

/* ------------ STATE ------------ */

.ic--alert-shake:hover { animation: x-shake 400ms ease-in-out infinite; }

.ic--info-pulse:hover { animation: x-pulse 900ms ease-in-out infinite; }

.ic--error-cross:hover .p-1,
.ic--error-cross:hover .p-2 { animation: x-pulse 600ms ease-in-out infinite; }

.ic--success-check:hover .p-1 { stroke-dasharray: 20; --dl: 20; animation: x-draw 600ms ease-out both; }

.ic--loading-spin:hover > svg { animation: x-spin 1s linear infinite; }

/* ------------ DATA / INFRA ------------ */

.ic--db-flow:hover .p-1 { animation: x-fade 900ms ease-in-out infinite alternate; }
.ic--db-flow:hover .p-2 { animation: x-fade 900ms 400ms ease-in-out infinite alternate; }

.ic--sync-spin:hover > svg { animation: x-spin 1.6s linear infinite; }

.ic--upload-rise:hover .p-0 { animation: x-bounceY 800ms ease-in-out infinite reverse; }
.ic--upload-rise:hover .p-1 { animation: x-bounceY 800ms ease-in-out infinite reverse; }

.ic--download-drop:hover .p-0 { animation: x-bounceY 800ms ease-in-out infinite; }
.ic--download-drop:hover .p-1 { animation: x-bounceY 800ms ease-in-out infinite; }

.ic--export-slide:hover .p-1 { animation: x-slideX 800ms ease-in-out infinite; }

.ic--plug-spark:hover { animation: x-pulse 800ms ease-in-out infinite; }

/* ------------ ARROWS ------------ */

.ic--arrow-slide:hover > svg,
.ic--chevron-slide:hover > svg { animation: x-slideX 700ms ease-in-out infinite; }

.ic--expand-out:hover { animation: x-pulse 800ms ease-in-out infinite; }

.ic--close-spin:hover > svg { animation: x-spin 600ms ease-in-out; }

.ic--plus-rotate:hover > svg { animation: x-spin 600ms ease-in-out; }

.ic--minus-pulse:hover { animation: x-pulse 800ms ease-in-out infinite; }

/* Reduce motion respectfully */
@media (prefers-reduced-motion: reduce) {
  .ic *, .ic { animation: none !important; transition: none !important; }
}