/* ==========================================
   URDODO Maintenance Page
   animation.css
========================================== */

/* ========= Smooth Page ========= */

body{

    animation:pageFade 1s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ========= Navbar ========= */

.header{

    animation:slideDown .8s ease;

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ========= Hero ========= */

.hero-content{

    animation:fadeLeft 1s ease;

}

.hero-visual{

    animation:fadeRight 1s ease;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(70px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ========= Heading ========= */

.hero h1 span{

    background-size:400%;

    animation:gradientMove 8s linear infinite;

}

@keyframes gradientMove{

    0%{

        background-position:0%;

    }

    100%{

        background-position:400%;

    }

}

/* ========= Badge ========= */

.badge{

    animation:badgeGlow 4s infinite;

}

@keyframes badgeGlow{

    0%,100%{

        box-shadow:0 0 0 rgba(95,24,185,0);

    }

    50%{

        box-shadow:0 0 25px rgba(95,24,185,.2);

    }

}

/* ========= Button ========= */
/* 
.notify-form button{

    transition:.4s;

}

.notify-form button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(95,24,185,.35);

}

.notify-form button:active{

    transform:scale(.97);

} */

/* ========= Input ========= */

/* .notify-form input{

    transition:.3s;

}

.notify-form input:focus{

    border-color:#5F18B9;

    box-shadow:

    0 0 0 4px rgba(95,24,185,.1);

} */

/* ========= Notify Card ========= */

/* .notify-card{

    transition:.4s;

}

.notify-card:hover{

    transform:translateY(-6px);

}
 */
/* ========= Floating Laptop ========= */

.laptop{

    animation:laptopFloat 6s ease-in-out infinite;

}

@keyframes laptopFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/* ========= Gear ========= */

.gear{

    animation:gearRotate 20s linear infinite;

}

@keyframes gearRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ========= Wrench ========= */

.wrench{

    animation:wrenchFloat 5s ease-in-out infinite;

}

@keyframes wrenchFloat{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-12px) rotate(-6deg);

    }

}

/* ========= Cone ========= */

.cone{

    animation:coneMove 4s ease-in-out infinite;

}

@keyframes coneMove{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/* ========= Floating Cards ========= */

.floating-card{

    animation:floatCard 5s ease-in-out infinite;

}

.sync{

    animation-delay:0s;

}

.analytics{

    animation-delay:1s;

}

.check{

    animation-delay:2s;

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

/* ========= Progress ========= */

.progress-bar{

    background-size:300%;

    animation:

        loadingBar 8s linear infinite,

        gradientFlow 3s linear infinite;

}

@keyframes loadingBar{

    0%{

        width:0;

    }

    100%{

        width:100%;

    }

}

@keyframes gradientFlow{

    from{

        background-position:0;

    }

    to{

        background-position:300%;

    }

}

/* ========= Status Dot ========= */

.dot{

    animation:pulseDot 1.5s infinite;

}

@keyframes pulseDot{

    0%{

        transform:scale(1);

        opacity:1;

    }

    70%{

        transform:scale(1.8);

        opacity:0;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ========= Logo ========= */

.logo img{

    transition:.4s;

}

.logo:hover img{

    transform:scale(1.04);

}

/* ========= Navigation ========= */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#5F18B9;

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}

/* ========= Footer ========= */

.social a{

    transition:.4s;

}

.social a:hover{

    transform:translateY(-6px);

    background:#5F18B9;

    color:#fff;

}

/* ========= Glow ========= */

body::before{

    animation:bgMove 12s ease infinite;

}

@keyframes bgMove{

    0%{

        filter:hue-rotate(0deg);

    }

    50%{

        filter:hue-rotate(15deg);

    }

    100%{

        filter:hue-rotate(0deg);

    }

}

/* ========= Scroll Reveal ========= */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ========= Hero Image Glow ========= */

.hero-visual::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    background:

    radial-gradient(circle,

    rgba(95,24,185,.15),

    transparent);

    border-radius:50%;

    z-index:-1;

    animation:glowPulse 5s infinite;

}

@keyframes glowPulse{

    0%,100%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.2);

        opacity:1;

    }

}

/* ========= Smooth ========= */

*{

    transition:

    background .3s,

    color .3s,

    border .3s;

}