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

.fade-in{

    animation:
    fadeIn 0.7s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:
        translateY(20px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

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

.float{

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

}

@keyframes floating{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-10px);

    }

    100%{

        transform:
        translateY(0);

    }

}

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

.glow-hover{

    transition:
    all 0.3s ease;

}

.glow-hover:hover{

    box-shadow:
    0 0 25px rgba(56,182,255,0.35);

}

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

.scale-hover{

    transition:
    all 0.3s ease;

}

.scale-hover:hover{

    transform:
    scale(1.03);

}

/* =========================
   SHIMMER
========================= */

.shimmer{

    position:relative;

    overflow:hidden;

}

.shimmer::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.08),
        transparent
    );

    animation:
    shimmer 1.8s infinite;

}

@keyframes shimmer{

    100%{

        left:100%;

    }

}