/* ==========================================
   Bang Play Studio
   animation.css
========================================== */

/* ===============================
   Fade In
================================ */

.fade-in {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

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

.fade-up {
    animation: fadeUp .9s ease forwards;
}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ===============================
   Fade Left
================================ */

.fade-left {
    animation: fadeLeft .9s ease forwards;
}

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(-60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* ===============================
   Fade Right
================================ */

.fade-right {
    animation: fadeRight .9s ease forwards;
}

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* ===============================
   Zoom In
================================ */

.zoom-in {

    animation: zoomIn .8s ease forwards;

}

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.7);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

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

.float {

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

}

@keyframes floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ===============================
   Pulse Glow
================================ */

.glow {

    animation: glow 2.5s ease-in-out infinite;

}

@keyframes glow {

    0% {

        box-shadow:
            0 0 0 rgba(99, 198, 221, .2);

    }

    50% {

        box-shadow:
            0 0 35px rgba(99, 198, 221, .8);

    }

    100% {

        box-shadow:
            0 0 0 rgba(99, 198, 221, .2);

    }

}

/* ===============================
   Rotate
================================ */

.rotate {

    animation: rotate 10s linear infinite;

}

@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* ===============================
   Gradient Text
================================ */

.gradient-text {

    background: linear-gradient(90deg,
            #63c6dd,
            #ffffff,
            #63c6dd);

    background-size: 300%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: gradientMove 5s linear infinite;

}

@keyframes gradientMove {

    from {

        background-position: 0%;

    }

    to {

        background-position: 300%;

    }

}

/* ===============================
   Shine Effect
================================ */

.shine {

    position: relative;

    overflow: hidden;

}

.shine::before {

    content: "";

    position: absolute;

    top: 0;

    left: -150%;

    width: 70%;

    height: 100%;

    transform: skewX(-25deg);

    background: linear-gradient(90deg,

            transparent,

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

            transparent);

}

.shine:hover::before {

    animation: shineMove .8s;

}

@keyframes shineMove {

    to {

        left: 180%;

    }

}

/* ===============================
   Border Glow
================================ */

.border-glow {

    border: 1px solid rgba(99, 198, 221, .3);

    transition: .4s;

}

.border-glow:hover {

    border-color: #63c6dd;

    box-shadow:
        0 0 25px rgba(99, 198, 221, .6);

}

/* ===============================
   Hover Lift
================================ */

.hover-lift {

    transition: .35s;

}

.hover-lift:hover {

    transform:
        translateY(-10px) scale(1.02);

}

/* ===============================
   Hover Rotate
================================ */

.hover-rotate {

    transition: .35s;

}

.hover-rotate:hover {

    transform:
        rotate(5deg) scale(1.05);

}

/* ===============================
   Hero Background
================================ */

.hero {

    position: relative;

    overflow: hidden;

}

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 20% 30%,

            rgba(99, 198, 221, .12),

            transparent 40%),

        radial-gradient(circle at 80% 70%,

            rgba(255, 255, 255, .08),

            transparent 35%);

    animation: heroLight 12s linear infinite;

    pointer-events: none;

}

@keyframes heroLight {

    0% {

        transform: translate(0, 0);

    }

    50% {

        transform: translate(-30px, -20px);

    }

    100% {

        transform: translate(0, 0);

    }

}

/* ===============================
   Blob Animation
================================ */

.blob {

    animation: blob 8s ease-in-out infinite;

}

@keyframes blob {

    0% {

        border-radius: 35% 65% 60% 40%;

    }

    25% {

        border-radius: 60% 40% 45% 55%;

    }

    50% {

        border-radius: 45% 55% 35% 65%;

    }

    75% {

        border-radius: 55% 45% 65% 35%;

    }

    100% {

        border-radius: 35% 65% 60% 40%;

    }

}

/* ===============================
   Bounce
================================ */

.bounce {

    animation: bounce 2s infinite;

}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-18px);

    }

    60% {

        transform: translateY(-8px);

    }

}

/* ===============================
   Smooth Transition
================================ */

* {

    transition:
        background-color .3s,
        color .3s,
        border-color .3s,
        box-shadow .3s,
        transform .3s;

}