/*==========================================================
    VMENTORZ
    ANIMATIONS.CSS
==========================================================*/

/*==============================
Transitions
==============================*/

*{
    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/*==============================
Dashboard Floating
==============================*/

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-18px);
    }

    100%{
        transform:translateY(0px);
    }

}


/*==============================
Slow Floating
==============================*/

@keyframes floatSlow{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}


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

@keyframes glow{

    0%{

        box-shadow:
        0 0 0 rgba(0,181,146,0);

    }

    50%{

        box-shadow:
        0 0 40px rgba(0,181,146,.35);

    }

    100%{

        box-shadow:
        0 0 0 rgba(0,181,146,0);

    }

}


/*==============================
Fade Up
==============================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(60px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


/*==============================
Fade Left
==============================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
        translateX(-60px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}


/*==============================
Fade Right
==============================*/

@keyframes fadeRight{

    from{

        opacity:0;

        transform:
        translateX(60px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}


/*==============================
Scale
==============================*/

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

.hero h1{

    animation:
    fadeLeft .8s ease forwards;

}


.hero p{

    opacity:0;

    animation:
    fadeLeft .8s .2s forwards;

}


.hero-buttons{

    opacity:0;

    animation:
    fadeLeft .8s .35s forwards;

}


.hero-stats{

    opacity:0;

    animation:
    fadeLeft .8s .5s forwards;

}


.hero-image{

    opacity:0;

    animation:
    fadeRight 1s .2s forwards;

}


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

.card-one{

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

}

.card-two{

    animation:
    floatSlow 7s ease-in-out infinite;

}

.card-three{

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

}


/*==============================
Dashboard
==============================*/

.dashboard-wrapper{

    animation:
    float 8s ease-in-out infinite;

}


/*==============================
Buttons
==============================*/

.btn{

    position:relative;

    overflow:hidden;

}


.btn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.7s;

}


.btn:hover::before{

    left:100%;

}


.btn:hover{

    transform:

    translateY(-4px);

}


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

.nav-links a{

    position:relative;

}


.nav-links a::after{

    content:"";

    position:absolute;

    bottom:-6px;

    left:0;

    width:0;

    height:2px;

    border-radius:20px;

    background:var(--primary);

    transition:.35s;

}


.nav-links a:hover::after{

    width:100%;

}


/*==============================
Glass Cards
==============================*/

.floating-card{

    transition:.35s;

}


.floating-card:hover{

    transform:

    translateY(-8px)

    scale(1.03);

}


/*==============================
Dashboard Hover
==============================*/

.dashboard-wrapper:hover{

    transform:

    perspective(1200px)

    rotateY(-3deg)

    rotateX(2deg)

    scale(1.02);

}


/*==============================
Background Blobs
==============================*/

.blur-one{

    animation:

    blobOne 14s ease-in-out infinite;

}


.blur-two{

    animation:

    blobTwo 16s ease-in-out infinite;

}


@keyframes blobOne{

    0%{

        transform:

        translate(0,0)

        scale(1);

    }

    50%{

        transform:

        translate(80px,40px)

        scale(1.2);

    }

    100%{

        transform:

        translate(0,0)

        scale(1);

    }

}


@keyframes blobTwo{

    0%{

        transform:

        translate(0,0)

        scale(1);

    }

    50%{

        transform:

        translate(-70px,-30px)

        scale(.9);

    }

    100%{

        transform:

        translate(0,0)

        scale(1);

    }

}


/*==============================
Scroll Indicator
==============================*/

@keyframes scroll{

    0%{

        opacity:0;

        transform:

        translate(-50%,0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:

        translate(-50%,18px);

    }

}


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

.hero-tag{

    animation:

    scaleIn .7s ease;

}


/*==============================
Theme Toggle
==============================*/

.theme-toggle:hover{

    animation:

    glow 1s ease;

}


/*==============================
Reduced Motion Support
==============================*/

@media (prefers-reduced-motion: reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}