/**
 * SVG Line Draw Component Styles
 * 
 * Uses @keyframes animation for reliable timing.
 * No transitions that could fire unexpectedly.
 * 
 * @package Applari
 * @version 2.0.0
 */

/* ===========================================
   CONTAINER
   =========================================== */
.svg-line-draw-container {
    position: relative;
    overflow: hidden;
}
.svg-line-draw-container > .gb-container{
    position: relative;
    z-index: 1;
}

/* ===========================================
   SVG ELEMENT
   =========================================== */
.svg-line-draw {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    max-width: 400px;
    pointer-events: none;
    z-index: 0;
    /* Allow path to extend beyond viewBox - container clips it */
    overflow: visible;
    /* Hidden until JS prepares it */
    opacity: 0;
}

/* Show SVG when JS has set initial state */
.svg-line-draw.is-ready {
    opacity: 1;
}

/* ===========================================
   PATH STYLES
   =========================================== */
.svg-line-draw-path {
    stroke: var(--svg-line-color, rgba(0, 114, 84, 0.3));
    opacity: var(--svg-line-opacity, 1);
    /* NO transition here - only @keyframes animation */
}

/* ===========================================
   DRAWING ANIMATION (keyframes)
   =========================================== */
@keyframes svgLineDraw {
    from {
        stroke-dashoffset: var(--path-length);
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Animation triggered by class */
.svg-line-draw.is-animating .svg-line-draw-path {
    animation: svgLineDraw var(--draw-duration, 2s) var(--draw-easing, ease-out) var(--draw-delay, 0.2s) forwards;
}

/* ===========================================
   COLOR VARIATIONS
   =========================================== */
.svg-line-terracotta { --svg-line-color: #B85C38; }
.svg-line-brown { --svg-line-color: #8B5A2B; }
.svg-line-green { --svg-line-color: #4A7C59; }
.svg-line-blue { --svg-line-color: #3D5A80; }
.svg-line-gold { --svg-line-color: #C9A227; }
.svg-line-burgundy { --svg-line-color: #722F37; }
.svg-line-gray { --svg-line-color: #708090; }
.svg-line-coral { --svg-line-color: #E07A5F; }
.svg-line-olive { --svg-line-color: #808000; }
.svg-line-navy { --svg-line-color: #1B3A57; }
.green-section .svg-line-draw { --svg-line-color: #C3D6CE; }
/* ===========================================
   OPACITY VARIATIONS
   =========================================== */
.svg-line-opacity-light { --svg-line-opacity: 0.3; }
.svg-line-opacity-medium { --svg-line-opacity: 0.5; }
.svg-line-opacity-heavy { --svg-line-opacity: 0.7; }
.green-section .svg-line-draw{--svg-line-opacity: 0.6;}

/* ===========================================
   HORIZONTAL POSITION
   =========================================== */
.svg-line-position-right .svg-line-draw {
    left: auto;
    right: 0;
}

.svg-line-position-left .svg-line-draw {
    left: 0;
    right: auto;
}

.svg-line-position-center .svg-line-draw {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Offset from edge */
.svg-line-offset-inside .svg-line-draw {
    right: 5%;
}

.svg-line-offset-outside .svg-line-draw {
    right: -10%;
}

/* ===========================================
   VERTICAL POSITION
   =========================================== */
.svg-line-top .svg-line-draw {
    top: -15%;
}

.svg-line-middle .svg-line-draw {
    top: 50%;
    transform: translateY(-50%);
}

.svg-line-bottom .svg-line-draw {
    top: auto;
    bottom: -15%;
}

/* Vertical offsets */
.svg-line-offset-up .svg-line-draw {
    top: -25%;
}

.svg-line-offset-down .svg-line-draw {
    top: 15%;
}

/* ===========================================
   SIZE VARIATIONS
   =========================================== */
.svg-line-size-small .svg-line-draw {
    width: 30%;
    max-width: 250px;
}

.svg-line-size-medium .svg-line-draw {
    width: 50%;
    max-width: 400px;
}

.svg-line-size-large .svg-line-draw {
    width: 70%;
    max-width: 550px;
}

.svg-line-size-full .svg-line-draw {
    width: 100%;
    max-width: none;
}

/* ===========================================
   Z-INDEX CONTROL
   =========================================== */
.svg-line-behind .svg-line-draw {
    z-index: -1;
}

.svg-line-front .svg-line-draw {
    z-index: 1;
}

/* ===========================================
   HORIZONTAL LINE STYLES (edge-to-edge)
   =========================================== */

/* Base horizontal layout - spans full width */
.svg-line-horizontal .svg-line-draw {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 80px;
    max-height: 150px;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
}

/* Horizontal vertical positions */
.svg-line-horizontal.svg-line-h-top .svg-line-draw {
    top: 0;
    bottom: auto;
}

.svg-line-horizontal.svg-line-h-center .svg-line-draw {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.svg-line-horizontal.svg-line-h-bottom .svg-line-draw {
    top: auto;
    bottom: 0;
}

/* Horizontal size variations */
.svg-line-h-thin .svg-line-draw {
    min-height: 50px;
    max-height: 80px;
}

.svg-line-h-medium .svg-line-draw {
    min-height: 80px;
    max-height: 150px;
}

.svg-line-h-thick .svg-line-draw {
    min-height: 120px;
    max-height: 200px;
}

/* Horizontal offset - extend beyond container edges */
.svg-line-horizontal.svg-line-h-overflow .svg-line-draw {
    width: calc(100% + 60px);
    left: -30px;
}

/* ===========================================
   RESPONSIVE - TABLET
   =========================================== */
@media (max-width: 1024px) {
    /* Horizontal lines - slightly smaller */
    .svg-line-horizontal .svg-line-draw {
        min-height: 60px;
        max-height: 120px;
    }
    
    .svg-line-horizontal.svg-line-h-thick .svg-line-draw {
        min-height: 80px;
        max-height: 150px;
    }
}

/* ===========================================
   RESPONSIVE - MOBILE
   =========================================== */
@media (max-width: 768px) {
    /* Horizontal lines - smaller on mobile */
    .svg-line-horizontal .svg-line-draw {
        min-height: 40px;
        max-height: 80px;
    }
    
    .svg-line-horizontal.svg-line-h-thin .svg-line-draw {
        min-height: 30px;
        max-height: 50px;
    }
    
    .svg-line-horizontal.svg-line-h-thick .svg-line-draw {
        min-height: 60px;
        max-height: 100px;
    }
    
    /* Reduce overflow on mobile */
    .svg-line-horizontal.svg-line-h-overflow .svg-line-draw {
        width: calc(100% + 30px);
        left: -15px;
    }
}

/* ===========================================
   RESPONSIVE - SMALL MOBILE
   =========================================== */
@media (max-width: 480px) {
    /* Horizontal lines - even smaller */
    .svg-line-horizontal .svg-line-draw {
        min-height: 30px;
        max-height: 60px;
    }
    
    .svg-line-horizontal.svg-line-h-thick .svg-line-draw {
        min-height: 40px;
        max-height: 80px;
    }
}

/* Optional: Hide on mobile */
.svg-line-hide-mobile .svg-line-draw {
    display: block;
}

@media (max-width: 768px) {
    .svg-line-hide-mobile .svg-line-draw {
        display: none;
    }
}

/* ===========================================
   REDUCED MOTION
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    .svg-line-draw.is-animating .svg-line-draw-path {
        animation: none;
        stroke-dashoffset: 0;
    }
}