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

.hidden{

    opacity:0;

    transform:translateY(70px);

    transition:

    .9s cubic-bezier(.22,1,.36,1);

}

.show{

    opacity:1;

    transform:none;

}

/*==============================
    RIPPLE
==============================*/

.btn,
.product-btn{

    position:relative;

    overflow:hidden;

}

.ripple{

    position:absolute;

    width:20px;

    height:20px;

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

    border-radius:50%;

    transform:translate(-50%,-50%);

    animation:ripple .6s linear;

}

@keyframes ripple{

    from{

        width:0;

        height:0;

        opacity:.8;

    }

    to{

        width:420px;

        height:420px;

        opacity:0;

    }

}

/*==============================
    FLOATING
==============================*/

.hero-visual{

    animation:

    floating 5s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.hero-glow{

    animation:

    glow 4s ease-in-out infinite;

}

@keyframes glow{

    0%,100%{

        opacity:.45;

        transform:scale(1);

    }

    50%{

        opacity:.9;

        transform:scale(1.08);

    }

}


/*==============================
    SCROLL BAR
==============================*/

#scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:3px;

    z-index:99999;

}

.progress-bar{

    width:0;

    height:100%;

    background:

    linear-gradient(

        90deg,

        #80d8ff,

        #b8f4f2

    );

}

/*==============================
    CONTACT HIGHLIGHT
==============================*/

.highlight-contact{

    animation:

    pulseContact 1.8s ease;

}

@keyframes pulseContact{

    0%{

        transform:scale(1);

    }

    20%{

        transform:scale(1.08);

        box-shadow:

        0 0 0 12px rgba(37,211,102,.25);

    }

    40%{

        transform:scale(1);

    }

    60%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

        box-shadow:none;

    }

}