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

/* =========================
   Intro Screen
========================= */

#intro {

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg,
            #231068,
            #63c6dd,
            #182947,
            #231068);

    background-size: 400% 400%;

    animation: introBackground 8s ease infinite;

    z-index: 99999;

    opacity: 1;

    transition: opacity .9s ease,
        visibility .9s ease;

}

/* ========================= */

#intro.fade-out {

    opacity: 0;

    visibility: hidden;

}

/* ========================= */

.intro-content {

    text-align: center;

    transform: scale(.6);

    opacity: 0;

    transition: 1s;

}

/* Khi intro.js thêm class show */

#intro.show .intro-content {

    transform: scale(1);

    opacity: 1;

}

/* ========================= */

.intro-logo {

    width: 180px;

    height: 180px;

    object-fit: cover;

    border-radius: 36px;

    margin-bottom: 25px;

    animation:
        logoFloat 3s ease-in-out infinite,
        logoGlow 2.5s ease-in-out infinite;

}

/* ========================= */

.intro-content h1 {

    font-size: 54px;

    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 18px;

    text-shadow:
        0 0 20px rgba(255, 255, 255, .5);

}

/* ========================= */

.intro-content p {

    font-size: 20px;

    opacity: .9;

    letter-spacing: 4px;

    animation: textFade 2s infinite;

}

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

@keyframes logoFloat {

    0% {

        transform:
            translateY(0px);

    }

    50% {

        transform:
            translateY(-15px);

    }

    100% {

        transform:
            translateY(0px);

    }

}

/* =========================
   Logo Glow
========================= */

@keyframes logoGlow {

    0% {

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

    }

    50% {

        box-shadow:
            0 0 30px rgba(255, 255, 255, .6),
            0 0 60px rgba(99, 198, 221, .7);

    }

    100% {

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

    }

}

/* =========================
   Background Animation
========================= */

@keyframes introBackground {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

/* =========================
   Text Fade
========================= */

@keyframes textFade {

    0% {

        opacity: .4;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: .4;

    }

}

/* =========================
   Responsive
========================= */

@media(max-width:768px) {

    .intro-logo {

        width: 120px;

        height: 120px;

        border-radius: 26px;

    }

    .intro-content h1 {

        font-size: 34px;

    }

    .intro-content p {

        font-size: 16px;

        letter-spacing: 2px;

    }

}