body {
    background-color: var(--deep-green);
    --roadMain_dashArray: 2100;
    --roadMain_dashOffset_Begin: 2100;
    --roadMain_dashOffset_End: 0;
    --roadMain_dashOffset_Begin_Reverse: 4200;
    --roadMain_dashOffset_End_Reverse: 2100;

    --roadCenter_dashArray: 2100;
    --roadCenter_dashOffset_Begin: 2100;
    --roadCenter_dashOffset_End: 0;
    --roadCenter_dashOffset_Begin_Reverse: 2100;
    --roadCenter_dashOffset_End_Reverse: 4200;

    --roadDash_dashArray_Begin: 0 2100 8 52 40 90;
    --roadDash_dashArray_End: 8 52 40 90;
    --roadDash_dashOffset_Begin: 0;
    --roadDash_dashOffset_End: -2100;

    --animationSpeed: 2.9s;
}

/* =======================
   ESTADO BASE (SIN ANIMACIÓN)
======================= */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    -webkit-transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    -moz-transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    -ms-transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    -o-transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-slow {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2.5s ease-out, transform 2.5s ease-out;
    transition-delay: 2s;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    -webkit-transition: opacity 2.5s ease-out, transform 2.5s ease-out;
    -moz-transition: opacity 2.5s ease-out, transform 2.5s ease-out;
    -ms-transition: opacity 2.5s ease-out, transform 2.5s ease-out;
    -o-transition: opacity 2.5s ease-out, transform 2.5s ease-out;
}

/* Road main */
.road-main {
    stroke-dasharray: var(--roadMain_dashArray);
    stroke-dashoffset: var(--roadMain_dashOffset_Begin);
}

/* Road center */
.road-center {
    stroke-dasharray: var(--roadCenter_dashArray);
    stroke-dashoffset: var(--roadCenter_dashOffset_Begin);
}

/* Road dash */
.road-dash {
    stroke-dasharray: var(--roadDash_dashArray_Begin);
    stroke-dashoffset: var(--roadDash_dashOffset_Begin);
}

/* Loading base */
#BackX,
#TopX,
#LeftMiddle,
#RightMiddle {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}

/* =======================
   ESTADO ANIMADO (AL ENTRAR EN PANTALLA)
======================= */
.fade-in.active,
.fade-in-slow.active {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
}



/* ROAD MAIN */
.foward-animate .road-main,
.mixed-animate .road-main,
.continuous-animate .road-main {
    -webkit-animation: draw-roadMain var(--animationSpeed) ease-in-out forwards;
            animation: draw-roadMain var(--animationSpeed) ease-in-out forwards;
}

.reverse-animate .road-main {
    -webkit-animation: draw-roadMain-reverse var(--animationSpeed) ease-in-out forwards;
            animation: draw-roadMain-reverse var(--animationSpeed) ease-in-out forwards;
}

/* ROAD CENTER */
.foward-animate .road-center,
.mixed-animate .road-center,
.continuous-animate .road-center {
    -webkit-animation: draw-roadCenter var(--animationSpeed) ease-in-out forwards;
            animation: draw-roadCenter var(--animationSpeed) ease-in-out forwards;
}

.reverse-animate .road-center {
    -webkit-animation: draw-roadCenter-reverse var(--animationSpeed) ease-in-out forwards;
            animation: draw-roadCenter-reverse var(--animationSpeed) ease-in-out forwards;
}

/* ROAD DASH */
.foward-animate .road-dash {
    -webkit-animation: draw-roadDash var(--animationSpeed) ease-in-out forwards;
            animation: draw-roadDash var(--animationSpeed) ease-in-out forwards;
}

.mixed-animate .road-dash,
.reverse-animate .road-dash {
    -webkit-animation: draw-roadDash-reverse var(--animationSpeed) ease-in-out forwards;
            animation: draw-roadDash-reverse var(--animationSpeed) ease-in-out forwards;
}

.continuous-animate .road-dash {
    -webkit-animation: draw-roadDash var(--animationSpeed) ease-in-out forwards, continuous-roadDash 20s linear infinite calc(var(--animationSpeed) - 0.1s);
            animation: draw-roadDash var(--animationSpeed) ease-in-out forwards, continuous-roadDash 20s linear infinite calc(var(--animationSpeed) - 0.1s);
}

.continuous-reverse-animate .road-dash {
    -webkit-animation: draw-roadDash-reverse var(--animationSpeed) ease-in-out forwards, continuous-reverse-roadDash 20s linear infinite calc(var(--animationSpeed) - 0.1s);
            animation: draw-roadDash-reverse var(--animationSpeed) ease-in-out forwards, continuous-reverse-roadDash 20s linear infinite calc(var(--animationSpeed) - 0.1s);
}

/* LOADING TYPE 1 */
.loading-animate #BackX {
    stroke-dasharray: 195;
    stroke-dashoffset: 195;
    -webkit-animation: draw-backX-type-1 3s ease-in-out infinite;
            animation: draw-backX-type-1 3s ease-in-out infinite;
}

.loading-animate #TopX {
    stroke-dasharray: 195;
    stroke-dashoffset: 585;
    -webkit-animation: draw-topX-type-1 3s ease-in-out infinite;
            animation: draw-topX-type-1 3s ease-in-out infinite;
}

.loading-animate #LeftMiddle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    -webkit-animation: draw-leftMiddle-type-1 3s ease-in-out infinite;
            animation: draw-leftMiddle-type-1 3s ease-in-out infinite;
}

.loading-animate #RightMiddle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    -webkit-animation: draw-rightMiddle-type-1 3s ease-in-out infinite;
            animation: draw-rightMiddle-type-1 3s ease-in-out infinite;
}

/* LOADING TYPE 2 */
.loading2-animate #BackX {
    stroke-dasharray: 195;
    stroke-dashoffset: 195;
    -webkit-animation: draw-backX-type-2 3s ease-in-out infinite;
            animation: draw-backX-type-2 3s ease-in-out infinite;
}

.loading2-animate #TopX {
    stroke-dasharray: 195;
    stroke-dashoffset: 585;
    -webkit-animation: draw-topX-type-2 3s ease-in-out infinite;
            animation: draw-topX-type-2 3s ease-in-out infinite;
}

.loading2-animate #LeftMiddle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    -webkit-animation: draw-leftMiddle-type-2 3s ease-in-out infinite;
            animation: draw-leftMiddle-type-2 3s ease-in-out infinite;
}

.loading2-animate #RightMiddle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    -webkit-animation: draw-rightMiddle-type-2 3s ease-in-out infinite;
            animation: draw-rightMiddle-type-2 3s ease-in-out infinite;
}

/* LOADING TYPE 3 */
.loading3-animate #BackX {
    stroke-dasharray: 195;
    stroke-dashoffset: 195;
    -webkit-animation: draw-backX-type-3 3s ease-in-out infinite;
            animation: draw-backX-type-3 3s ease-in-out infinite;
}

.loading3-animate #TopX {
    stroke-dasharray: 195;
    stroke-dashoffset: 585;
    -webkit-animation: draw-topX-type-3 3s ease-in-out infinite;
            animation: draw-topX-type-3 3s ease-in-out infinite;
}

.loading3-animate #LeftMiddle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    -webkit-animation: draw-leftMiddle-type-3 3s ease-in-out infinite;
            animation: draw-leftMiddle-type-3 3s ease-in-out infinite;
}

.loading3-animate #RightMiddle {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    -webkit-animation: draw-rightMiddle-type-3 3s ease-in-out infinite;
            animation: draw-rightMiddle-type-3 3s ease-in-out infinite;
}

/* =======================
   KEYFRAMES 
======================= */

@-webkit-keyframes continuous-roadDash {
    from {
        stroke-dasharray: var(--roadDash_dashArray_End);
        stroke-dashoffset: var(--roadMain_dashOffset_Begin);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }
}

@keyframes continuous-roadDash {
    from {
        stroke-dasharray: var(--roadDash_dashArray_End);
        stroke-dashoffset: var(--roadMain_dashOffset_Begin);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }
}

@-webkit-keyframes continuous-reverse-roadDash {
    from {
        stroke-dasharray: var(--roadDash_dashArray_Begin);
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }
}

@keyframes continuous-reverse-roadDash {
    from {
        stroke-dasharray: var(--roadDash_dashArray_Begin);
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }
}

@-webkit-keyframes draw-roadMain {
    from {
        stroke-dashoffset: var(--roadMain_dashOffset_Begin);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }
}

@keyframes draw-roadMain {
    from {
        stroke-dashoffset: var(--roadMain_dashOffset_Begin);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End);
    }
}

@-webkit-keyframes draw-roadMain-reverse {
    from {
        stroke-dashoffset: var(--roadMain_dashOffset_Begin_Reverse);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End_Reverse);
    }
}

@keyframes draw-roadMain-reverse {
    from {
        stroke-dashoffset: var(--roadMain_dashOffset_Begin_Reverse);
    }

    to {
        stroke-dashoffset: var(--roadMain_dashOffset_End_Reverse);
    }
}

@-webkit-keyframes draw-roadCenter {
    from {
        stroke-dashoffset: var(--roadCenter_dashOffset_Begin);
    }

    to {
        stroke-dashoffset: var(--roadCenter_dashOffset_End);
    }
}

@keyframes draw-roadCenter {
    from {
        stroke-dashoffset: var(--roadCenter_dashOffset_Begin);
    }

    to {
        stroke-dashoffset: var(--roadCenter_dashOffset_End);
    }
}

@-webkit-keyframes draw-roadCenter-reverse {
    from {
        stroke-dashoffset: var(--roadCenter_dashOffset_Begin_Reverse);
    }

    to {
        stroke-dashoffset: var(--roadCenter_dashOffset_End_Reverse);
    }
}

@keyframes draw-roadCenter-reverse {
    from {
        stroke-dashoffset: var(--roadCenter_dashOffset_Begin_Reverse);
    }

    to {
        stroke-dashoffset: var(--roadCenter_dashOffset_End_Reverse);
    }
}

@-webkit-keyframes draw-roadDash {
    from {
        stroke-dasharray: var(--roadDash_dashArray_Begin);
        stroke-dashoffset: var(--roadDash_dashOffset_Begin);
    }

    to {
        stroke-dasharray: var(--roadDash_dashArray_End);
        stroke-dashoffset: var(--roadDash_dashOffset_End);
    }
}

@keyframes draw-roadDash {
    from {
        stroke-dasharray: var(--roadDash_dashArray_Begin);
        stroke-dashoffset: var(--roadDash_dashOffset_Begin);
    }

    to {
        stroke-dasharray: var(--roadDash_dashArray_End);
        stroke-dashoffset: var(--roadDash_dashOffset_End);
    }
}

@-webkit-keyframes draw-roadDash-reverse {
    from {
        stroke-dasharray: var(--roadDash_dashArray_Begin);
        stroke-dashoffset: var(--roadDash_dashOffset_End);
    }

    to {
        stroke-dasharray: var(--roadDash_dashArray_End);
        stroke-dashoffset: var(--roadDash_dashOffset_Begin);
    }
}

@keyframes draw-roadDash-reverse {
    from {
        stroke-dasharray: var(--roadDash_dashArray_Begin);
        stroke-dashoffset: var(--roadDash_dashOffset_End);
    }

    to {
        stroke-dasharray: var(--roadDash_dashArray_End);
        stroke-dashoffset: var(--roadDash_dashOffset_Begin);
    }
}