html {
    width: 100%;
}

body {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #000;
}

#root {
    position: relative;
    width: 100%;
    background: url(../imgs/background.jpg) no-repeat;
    background-size: 100%;
    height: 945px;
    max-width: 1920px;
    margin: auto;
}

.logo-warning {
    position: absolute;
    top: 4px;
    left: 4px;
    height: 70px;
    z-index: 2;
}

.logo {
    position: absolute;
    right: 270px;
    top: 37px;
    z-index: 4;
}

.logo img {
    width: 288px;
}

.luffy {
    background: url(../imgs/luffy.png);
    width: 1107px;
    height: 904px;
    position: absolute;
    left: 110px;
    z-index: 3;
    animation: pulseScaleFast 0.4s ease-in-out infinite;
}

.background-luffy {
    background: url(../imgs/luffy-bg.png);
    position: absolute;
    width: 918px;
    height: 835px;
    z-index: 2;
    top: 115px;
    animation: pulseScaleSlow 0.5s ease-in-out infinite;
}

@keyframes pulseScaleFast {

    0%,
    100% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1.01);
    }
}

@keyframes pulseScaleSlow {

    0%,
    100% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(1.015);
    }
}

.title-luffy {
    background: url(../imgs/luffy-title.png);
    position: absolute;
    width: 339px;
    height: 241px;
    top: 225px;
    left: 88px;
    z-index: 4;
}

.btn-login {
    display: block;
    background: url(../imgs/btn-login.png);
    width: 502px;
    height: 287px;
    position: absolute;
    right: 169px;
    top: 247px;
    z-index: 6;
    animation: shakeSequence 1s ease-in-out infinite;
}

@keyframes shakeSequence {

    /* Rung nhẹ (reng điện thoại) */
    0%,
    15% {
        transform: translate(0, 0);
    }

    5%,
    10% {
        transform: translate(2px, 0);
    }

    7.5% {
        transform: translate(-2px, 0);
    }

    /* Giữ yên 1 chút */
    20%,
    30% {
        transform: translate(0, 0);
    }

    /* Lắc qua lại */
    35% {
        transform: rotate(2deg);
    }

    45% {
        transform: rotate(-2deg);
    }

    55% {
        transform: rotate(2deg);
    }

    65% {
        transform: rotate(-2deg);
    }

    75% {
        transform: rotate(2deg);
    }

    85% {
        transform: rotate(-2deg);
    }

    95%,
    100% {
        transform: rotate(0deg);
    }
}

.champs-box {
    width: 1100px;
    height: 385px;
    position: absolute;
    bottom: 45px;
    right: 42px;
    display: flex;
    z-index: 5;
    gap: 5px;
}

.champ-item {
    width: calc(100% / 6);
    animation: bounceOneByOne 2.4s ease-in-out infinite;
}

.zoro {
    background: url(../imgs/zoro.png) no-repeat;
}

.sanji {
    background: url(../imgs/sanji.png) no-repeat;
}

.boa {
    background: url(../imgs/boa.png) no-repeat;
}

.chopper {
    background: url(../imgs/chopper.png) no-repeat;
}

.usopp {
    background: url(../imgs/usopp.png) no-repeat;
}

.franky {
    background: url(../imgs/franky.png) no-repeat;
}

.champ-item:nth-child(1) {
    animation-delay: 0s;
}

.champ-item:nth-child(2) {
    animation-delay: 0.4s;
}

.champ-item:nth-child(3) {
    animation-delay: 0.8s;
}

.champ-item:nth-child(4) {
    animation-delay: 1.2s;
}

.champ-item:nth-child(5) {
    animation-delay: 1.6s;
}

.champ-item:nth-child(6) {
    animation-delay: 2.0s;
}

@keyframes bounceOneByOne {

    0%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-12px);
    }

    20% {
        transform: translateY(0);
    }
}

.shine-effect {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 999;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-image: url(../imgs/background.jpg);
    mask-image: url(../imgs/background.jpg);
    z-index: 1;
}

.shine-effect:before {
    content: "";
    z-index: 1;
    position: absolute;
    height: 200%;
    width: 200%;
    top: 100%;
    left: -120%;
    ;
    background: linear-gradient(transparent 0%,
            rgba(255, 255, 255, 0.1) 45%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.1) 55%,
            transparent 100%);
    transition: all 2s;
    transform: rotate(45deg);
    animation: shine 4s infinite forwards;
}

@keyframes shine {
    0% {
        top: 0%;
        left: -120%;
    }

    100% {
        top: -100%;
        left: 100%;
    }

}