/**
 * Animated Line Component - Compiled CSS
 * Réutilisable pour différents blocs et pages
 */

:root {
    --animated-line-color: #007cba;
    --animated-line-width: 3px;
    --animated-line-duration: 3s;
    --animated-line-delay: 1s;
    --animated-line-opacity: 1;
}

.yh-animated-line-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.yh-animated-line-container .yh-animated-line-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-path {
    stroke: var(--animated-line-color);
    stroke-width: var(--animated-line-width);
    fill: none;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    opacity: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-path.animate {
    animation: yh-drawLine var(--animated-line-duration) ease-in-out var(--animated-line-delay) forwards;
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-path.dashed {
    stroke-dasharray: 10, 5;
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-path.dotted {
    stroke-dasharray: 2, 8;
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-path.secondary {
    opacity: 0.6;
    stroke-width: calc(var(--animated-line-width) * 0.7);
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-point {
    fill: var(--animated-line-color);
    opacity: 0;
    transform-origin: center;
}

.yh-animated-line-container .yh-animated-line-svg .yh-animated-point.animate {
    animation: yh-fadeInScale 0.5s ease-out forwards;
}

.yh-animated-line-container.curved .yh-animated-path {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.yh-animated-line-container.glowing .yh-animated-path {
    filter: drop-shadow(0 0 8px var(--animated-line-color));
}

.yh-animated-line-container.multiple-paths .yh-animated-path:nth-child(2) {
    animation-delay: calc(var(--animated-line-delay) + 0.5s);
}

.yh-animated-line-container.multiple-paths .yh-animated-path:nth-child(3) {
    animation-delay: calc(var(--animated-line-delay) + 1s);
}

.yh-animated-line-container.multiple-paths .yh-animated-path:nth-child(4) {
    animation-delay: calc(var(--animated-line-delay) + 1.5s);
}

@keyframes yh-drawLine {
    0% {
        stroke-dashoffset: 2000;
        opacity: 0;
    }
    10% {
        opacity: var(--animated-line-opacity);
    }
    100% {
        stroke-dashoffset: 0;
        opacity: var(--animated-line-opacity);
    }
}

@keyframes yh-fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes yh-drawLineReverse {
    0% {
        stroke-dashoffset: 0;
        opacity: var(--animated-line-opacity);
    }
    90% {
        opacity: var(--animated-line-opacity);
    }
    100% {
        stroke-dashoffset: 2000;
        opacity: 0;
    }
}

@keyframes yh-pulseLine {
    0%, 100% {
        opacity: var(--animated-line-opacity);
        stroke-width: var(--animated-line-width);
    }
    50% {
        opacity: 0.5;
        stroke-width: calc(var(--animated-line-width) * 1.5);
    }
}

.yh-animated-line-container.reverse-animation .yh-animated-path.animate {
    animation-name: yh-drawLineReverse;
}

.yh-animated-line-container.pulse-animation .yh-animated-path.animate {
    animation-name: yh-pulseLine;
    animation-iteration-count: infinite;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: var(--animated-line-opacity);
}

.yh-animated-line-container.loop-animation .yh-animated-path.animate {
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Responsive */
@media (max-width: 767px) {
    .yh-animated-line-container.hide-on-mobile {
        display: none;
    }
    
    .yh-animated-line-container .yh-animated-path {
        stroke-width: calc(var(--animated-line-width) * 0.8);
    }
    
    .yh-animated-line-container .yh-animated-path.secondary {
        display: none;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .yh-animated-line-container .yh-animated-path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
        opacity: 0.3 !important;
    }
    
    .yh-animated-line-container .yh-animated-point {
        animation: none !important;
        opacity: 0.5 !important;
        transform: scale(1) !important;
    }
}

/* Color presets */
.yh-animated-line-container.color-primary {
    --animated-line-color: var(--wp--preset--color--primary, #007cba);
}

.yh-animated-line-container.color-secondary {
    --animated-line-color: var(--wp--preset--color--secondary, #666);
}

.yh-animated-line-container.color-accent {
    --animated-line-color: var(--wp--preset--color--accent, #ff6b35);
}

.yh-animated-line-container.color-white {
    --animated-line-color: #ffffff;
}

.yh-animated-line-container.color-black {
    --animated-line-color: #000000;
}

/* Speed presets */
.yh-animated-line-container.speed-slow {
    --animated-line-duration: 5s;
}

.yh-animated-line-container.speed-normal {
    --animated-line-duration: 3s;
}

.yh-animated-line-container.speed-fast {
    --animated-line-duration: 1.5s;
}

.yh-animated-line-container.speed-instant {
    --animated-line-duration: 0.5s;
}