/*==================================================
    ARC SOLUCIONES ELÉCTRICAS S.A.S.
    animations.css v3.0
==================================================*/


/*==================================
APARICIÓN GENERAL
==================================*/

.card{

    animation:fadeUp 1s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================
LOGO DE FONDO
==================================*/

.watermark img{

    animation:logoFloat 10s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}


/*==================================
TÍTULO
==================================*/

h1{

    animation:titleGlow 4s ease-in-out infinite alternate;

}

@keyframes titleGlow{

    from{

        text-shadow:

        0 0 8px rgba(0,190,255,.25);

    }

    to{

        text-shadow:

        0 0 18px rgba(0,190,255,.45),

        0 0 35px rgba(0,190,255,.20);

    }

}


/*==================================
BARRA
IMPORTANTE:
YA NO SE ANIMA EL ANCHO
SOLO EL BRILLO
==================================*/

.progress-bar{

    animation:

        gradientMove 3s linear infinite,

        glowBar 2s ease-in-out infinite;

}

@keyframes gradientMove{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}

@keyframes glowBar{

    0%{

        box-shadow:

        0 0 5px rgba(0,210,255,.3);

    }

    50%{

        box-shadow:

        0 0 15px rgba(0,210,255,.7),

        0 0 30px rgba(0,210,255,.25);

    }

    100%{

        box-shadow:

        0 0 5px rgba(0,210,255,.3);

    }

}


/*==================================
PUNTO
==================================*/

.dot{

    animation:pulseDot 1.4s infinite;

}

@keyframes pulseDot{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.5);

        opacity:.5;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*==================================
TARJETAS
==================================*/

.item{

    transition:.35s;

}

.item:hover{

    transform:translateY(-6px);

    background:rgba(255,255,255,.08);

    box-shadow:

    0 15px 35px rgba(0,190,255,.15);

}

.item:hover .icon{

    transform:scale(1.15);

}

.icon{

    transition:.35s;

}


/*==================================
FOOTER
==================================*/

.line{

    animation:lineGlow 4s infinite;

}

@keyframes lineGlow{

    0%{

        box-shadow:0 0 5px #00D7FF;

    }

    50%{

        box-shadow:

        0 0 18px #00D7FF,

        0 0 35px rgba(0,215,255,.4);

    }

    100%{

        box-shadow:0 0 5px #00D7FF;

    }

}


/*==================================
FONDO
==================================*/

.background{

    animation:backgroundShift 20s ease-in-out infinite alternate;

}

@keyframes backgroundShift{

    from{

        filter:hue-rotate(0deg);

    }

    to{

        filter:hue-rotate(8deg);

    }

}


/*==================================
BORDE GLASS
==================================*/

.card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:30px;

    pointer-events:none;

    border:1px solid rgba(255,255,255,.06);

    animation:borderPulse 5s infinite;

}

@keyframes borderPulse{

    0%{

        opacity:.15;

    }

    50%{

        opacity:.65;

    }

    100%{

        opacity:.15;

    }

}