/* ==========================================================
   Hero Floating Animation
   ========================================================== */

#hero-crystal {

    transform-style: preserve-3d;

    will-change: transform;

}

.hero-image {

    display: block;

    width: 100%;

    user-select: none;

    pointer-events: none;

    filter:
        drop-shadow(0 0 40px rgba(0, 230, 118, .25)) drop-shadow(0 0 90px rgba(0, 230, 118, .18));

}

@keyframes heroFloat {

    0% {
        transform:
            translateY(0) rotateZ(0deg);
    }

    25% {
        transform:
            translateY(-10px) rotateZ(-1deg);
    }

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

    75% {
        transform:
            translateY(-10px) rotateZ(1deg);
    }

    100% {
        transform:
            translateY(0) rotateZ(0deg);
    }

}

.hero-image {

    animation:

        heroFloat 7s ease-in-out infinite;

}

.hero-image {

    animation:
        heroFloat 8s ease-in-out infinite,
        heroGlow 4s ease-in-out infinite;

}

@keyframes heroGlow {

    0%,
    100% {

        filter:
            drop-shadow(0 0 25px rgba(0, 230, 118, .35)) drop-shadow(0 0 70px rgba(0, 230, 118, .20));

    }

    50% {

        filter:
            drop-shadow(0 0 45px rgba(0, 230, 118, .65)) drop-shadow(0 0 110px rgba(0, 230, 118, .40));

    }

}