/**
 * SEO Growth Chart Animation Styles
 * Smooth, looping line chart animation for steady growth visualization
 */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .growth-chart .growth-line,
    .growth-chart .month-dot,
    .chart-growth-text {
        animation: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
    }
}

/* Growth Line Animation - Draws from left to right over 5 seconds, then pauses 1 second before looping */
.growth-chart .growth-line {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawGrowthLine 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Month Dot Animations - Fade in gently as line reaches each point */
.growth-chart .month-dot[data-month="0"] {
    animation: fadeInDot 0.4s ease-out 0.9s both infinite;
}

.growth-chart .month-dot[data-month="1"] {
    animation: fadeInDot 0.4s ease-out 1.7s both infinite;
}

.growth-chart .month-dot[data-month="2"] {
    animation: fadeInDot 0.4s ease-out 2.5s both infinite;
}

.growth-chart .month-dot[data-month="3"] {
    animation: fadeInDot 0.4s ease-out 3.3s both infinite;
}

.growth-chart .month-dot[data-month="4"] {
    animation: fadeInDot 0.4s ease-out 4.1s both infinite;
}

.growth-chart .month-dot[data-month="5"] {
    animation: fadeInDot 0.4s ease-out 4.9s both infinite;
}

/* Growth Text Animation - Appears after line completes, fades out before restart */
.chart-growth-text {
    animation: fadeInOutText 6s ease-in-out infinite;
    animation-delay: 5.2s;
}

/* Keyframe Animations */
@keyframes drawGrowthLine {
    0% {
        stroke-dashoffset: 500;
    }
    83.33% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInDot {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInOutText {
    0%, 13.33% {
        opacity: 0;
    }
    16.67%, 83.33% {
        opacity: 1;
    }
    86.67%, 100% {
        opacity: 0;
    }
}