/* ==========================================================
   LUCKY ROLL
   ANIMATIONS
========================================================== */

/* ===========================
   Phone Floating
=========================== */

.phone-left{

    animation:
        phoneFloatLeft 7s ease-in-out infinite;
}

.phone-center{

    animation:
        phoneFloatCenter 6s ease-in-out infinite;
}

.phone-right{

    animation:
        phoneFloatRight 8s ease-in-out infinite;
}

/* ===========================
   Scroll Mouse
=========================== */

.scroll-mouse span{

    animation:
        mouseScroll 2s infinite;
}

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

.hero-badge{

    animation:
        badgeGlow 4s ease-in-out infinite;
}

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

.reveal{

    opacity:0;

    transform:
        translateY(45px);

    transition:

        opacity .8s ease,

        transform .8s ease;
}

.reveal.active{

    opacity:1;

    transform:none;
}

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

.btn{

    position:relative;

    overflow:hidden;
}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.28),

            transparent

        );

    transform:skewX(-25deg);

    transition:.75s;
}

.btn:hover::before{

    left:150%;
}

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

.glass{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;
}

.glass:hover{

    transform:

        translateY(-8px);

    border-color:

        rgba(255,255,255,.18);

    box-shadow:

        0 20px 45px rgba(0,0,0,.25);
}

/* ===========================
   Link Underline
=========================== */

.nav-menu a{

    transition:

        color .25s ease;
}

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

@keyframes phoneFloatLeft{

    0%{

        transform:
            rotate(-13deg)
            translateY(45px);
    }

    50%{

        transform:
            rotate(-11deg)
            translateY(28px);
    }

    100%{

        transform:
            rotate(-13deg)
            translateY(45px);
    }

}

@keyframes phoneFloatCenter{

    0%{

        transform:
            translateY(0);
    }

    50%{

        transform:
            translateY(-16px);
    }

    100%{

        transform:
            translateY(0);
    }

}

@keyframes phoneFloatRight{

    0%{

        transform:
            rotate(13deg)
            translateY(45px);
    }

    50%{

        transform:
            rotate(11deg)
            translateY(28px);
    }

    100%{

        transform:
            rotate(13deg)
            translateY(45px);
    }

}

@keyframes mouseScroll{

    0%{

        opacity:1;

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

    60%{

        opacity:0;

        transform:
            translate(-50%,14px);
    }

    100%{

        opacity:1;

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

}

@keyframes badgeGlow{

    0%{

        box-shadow:

            0 0 0 rgba(255,87,34,0);
    }

    50%{

        box-shadow:

            0 0 25px rgba(255,87,34,.15);
    }

    100%{

        box-shadow:

            0 0 0 rgba(255,87,34,0);
    }

}