/* ======================================================
   ANIMATIONS
   Gaurav Portfolio
====================================================== */


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

@keyframes fadeUp {
    from{
        opacity:0;
        transform:translateY(60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes fadeRight{

    from{
        opacity:0;
        transform:translateX(60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes float{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 rgba(255,45,85,0);
    }

    50%{
        box-shadow:0 0 30px rgba(255,45,85,.5);
    }

    100%{
        box-shadow:0 0 0 rgba(255,45,85,0);
    }

}

@keyframes rotateBorder{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes shine{

    from{
        left:-120%;
    }

    to{
        left:120%;
    }

}

@keyframes blink{

    50%{
        opacity:0;
    }

}


/* ======================================================
   REVEAL
====================================================== */

/* ==========================================
   REVEAL ANIMATIONS
========================================== */

.reveal{

    opacity:0;

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal-up{

    transform:translateY(70px);

}

.reveal-left{

    transform:translateX(-70px);

}

.reveal-right{

    transform:translateX(70px);

}

.reveal-scale{

    transform:scale(.85);

}

.reveal.active{

    opacity:1;

    transform:translate(0,0) scale(1);

}


/* ======================================================
   FADE
====================================================== */

.fade-up.active{

    animation:fadeUp .8s ease forwards;

}

.fade-down.active{

    animation:fadeDown .8s ease forwards;

}

.fade-left.active{

    animation:fadeLeft .8s ease forwards;

}

.fade-right.active{

    animation:fadeRight .8s ease forwards;

}

.zoom-in.active{

    animation:zoomIn .8s ease forwards;

}


/* ======================================================
   FLOAT
====================================================== */

.float{

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

}


/* ======================================================
   GLOW
====================================================== */

.glow{

    animation:pulse 3s infinite;

}


/* ======================================================
   SHINE BUTTON
====================================================== */

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60px;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        transparent,

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

        transparent

    );

}

.shine:hover::before{

    animation:shine .8s;

}


/* ======================================================
   HOVER LIFT
====================================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}


/* ======================================================
   SCALE
====================================================== */

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.05);

}


/* ======================================================
   ROTATE
====================================================== */

.hover-rotate{

    transition:.35s;

}

.hover-rotate:hover{

    transform:rotate(6deg);

}


/* ======================================================
   CURSOR POINTER
====================================================== */

.pointer{

    cursor:pointer;

}


/* ======================================================
   TYPING CURSOR
====================================================== */

.typing-cursor{

    border-right:3px solid var(--clr-primary);

    animation:blink .8s infinite;

}