/* ==========================================
   GESTIONALE SMART 2.0 - SVG ILLUSTRATIONS
   Line-draw, pulse, glow, scroll-driven
   ========================================== */

/* ==========================================
   SVG BASE STYLES
   ========================================== */
.illustration {
    width: 100%;
    height: auto;
    overflow: visible;
}

.illustration path,
.illustration line,
.illustration polyline,
.illustration circle,
.illustration rect {
    vector-effect: non-scaling-stroke;
}

/* ==========================================
   LINE DRAW ANIMATION
   ========================================== */
.line-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s var(--ease-out-expo);
}

.line-draw.animate {
    stroke-dashoffset: 0;
}

/* Staggered line draws */
.line-draw-1 { transition-delay: 0s; }
.line-draw-2 { transition-delay: 0.2s; }
.line-draw-3 { transition-delay: 0.4s; }
.line-draw-4 { transition-delay: 0.6s; }
.line-draw-5 { transition-delay: 0.8s; }

/* ==========================================
   NODE PULSE
   ========================================== */
.node-pulse {
    animation: nodePulse 2s ease-in-out infinite;
}

.node-pulse-delayed {
    animation: nodePulse 2s ease-in-out infinite 0.5s;
}

@keyframes nodePulse {
    0%, 100% {
        r: 6;
        opacity: 1;
    }
    50% {
        r: 9;
        opacity: 0.7;
    }
}

/* ==========================================
   GLOW EFFECT
   ========================================== */
.svg-glow {
    filter: drop-shadow(0 0 8px rgba(46, 9, 156, 0.3));
}

.svg-glow-animated {
    animation: svgGlow 2s ease-in-out infinite;
}

@keyframes svgGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(46, 9, 156, 0.2)); }
    50% { filter: drop-shadow(0 0 16px rgba(46, 9, 156, 0.5)); }
}

/* ==========================================
   FLOW ANIMATION (for pipelines, arrows)
   ========================================== */
.flow-particle {
    animation: flowMove 3s linear infinite;
}

@keyframes flowMove {
    0% { offset-distance: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

/* Dashed flowing line */
.flow-dash {
    stroke-dasharray: 8 4;
    animation: dashFlow 1s linear infinite;
}

@keyframes dashFlow {
    to { stroke-dashoffset: -12; }
}

/* ==========================================
   CARD SLIDE (for pipeline / kanban SVGs)
   ========================================== */
.svg-card-slide {
    animation: cardSlide 4s ease-in-out infinite;
}

@keyframes cardSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

/* ==========================================
   CHART GROW (for bar/line charts)
   ========================================== */
.bar-grow {
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 1s var(--ease-out-expo);
}

.bar-grow.animate {
    transform: scaleY(1);
}

.bar-grow-1 { transition-delay: 0s; }
.bar-grow-2 { transition-delay: 0.15s; }
.bar-grow-3 { transition-delay: 0.3s; }
.bar-grow-4 { transition-delay: 0.45s; }
.bar-grow-5 { transition-delay: 0.6s; }

/* Line chart path draw */
.chart-line-draw {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 2s var(--ease-out-expo);
}

.chart-line-draw.animate {
    stroke-dashoffset: 0;
}

/* ==========================================
   SYNC ARROWS (bidirectional)
   ========================================== */
.sync-arrow {
    animation: syncPulse 2s ease-in-out infinite;
}

.sync-arrow-reverse {
    animation: syncPulse 2s ease-in-out infinite 1s;
}

@keyframes syncPulse {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
}

@keyframes syncPulseReverse {
    0%, 100% { opacity: 0.3; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(-4px); }
}

/* ==========================================
   INTERACTIVE SVG STATES
   ========================================== */
.svg-interactive-node {
    cursor: pointer;
    transition: all 0.3s ease;
}

.svg-interactive-node:hover {
    filter: drop-shadow(0 0 12px rgba(46, 9, 156, 0.4));
    transform: scale(1.05);
}

.svg-interactive-node.active {
    filter: drop-shadow(0 0 16px rgba(46, 9, 156, 0.6));
}

/* Tooltip for interactive SVG */
.svg-tooltip {
    position: absolute;
    background: var(--white);
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    color: var(--text-primary);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.25s ease;
    z-index: 100;
    max-width: 220px;
}

.svg-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   WHY-US COMPARE SVG
   ========================================== */
.why-us-svg {
    position: relative;
}

.chaos-side .chaos-icon {
    opacity: 0.5;
    animation: chaosFloat 3s ease-in-out infinite;
}

.chaos-side .chaos-icon:nth-child(odd) {
    animation-delay: 0.5s;
    animation-direction: reverse;
}

@keyframes chaosFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(3px, -5px) rotate(5deg); }
    75% { transform: translate(-3px, 3px) rotate(-3deg); }
}

.order-side .order-node {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s var(--ease-out-back);
}

.order-side.animate .order-node {
    opacity: 1;
    transform: scale(1);
}

.order-side .order-node:nth-child(1) { transition-delay: 0s; }
.order-side .order-node:nth-child(2) { transition-delay: 0.1s; }
.order-side .order-node:nth-child(3) { transition-delay: 0.2s; }
.order-side .order-node:nth-child(4) { transition-delay: 0.3s; }
.order-side .order-node:nth-child(5) { transition-delay: 0.4s; }

.order-side .order-connection {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.8s var(--ease-out-expo) 0.5s;
}

.order-side.animate .order-connection {
    stroke-dashoffset: 0;
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .line-draw,
    .bar-grow,
    .chart-line-draw {
        stroke-dashoffset: 0;
        transform: none;
        transition: none;
    }

    .node-pulse,
    .node-pulse-delayed,
    .svg-glow-animated,
    .flow-particle,
    .flow-dash,
    .svg-card-slide,
    .sync-arrow,
    .sync-arrow-reverse,
    .chaos-side .chaos-icon {
        animation: none;
    }
}