/* Naruto landing page extension: roadmap + reward + 8-section navigation */

.wrapper {
    background-image:
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg001.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg002.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg003.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg004.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg005.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg006.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg007.jpg),
        url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/desktop/bg008.jpg);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position:
        0 0,
        0 calc((1008 / 1920 * 100vw) - 1px),
        0 calc((1956 / 1920 * 100vw) - 2px),
        0 calc((3072 / 1920 * 100vw) - 3px),
        0 calc((4116 / 1920 * 100vw) - 4px),
        0 calc((5195 / 1920 * 100vw) - 5px),
        0 calc((6191 / 1920 * 100vw) - 6px),
        0 calc((7271 / 1920 * 100vw) - 7px);
    background-size:
        100% calc((1008 / 1920 * 100vw) + 1px),
        100% calc((948 / 1920 * 100vw) + 1px),
        100% calc((1116 / 1920 * 100vw) + 1px),
        100% calc((1044 / 1920 * 100vw) + 1px),
        100% calc((1079 / 1920 * 100vw) + 1px),
        100% calc((996 / 1920 * 100vw) + 1px),
        100% calc((1080 / 1920 * 100vw) + 1px),
        100% calc((1224 / 1920 * 100vw) + 1px);
}

.wrapper::after {
    height: calc(8495 / 1920 * 100vw);
}

.s_roadmap {
    height: calc(1188 / 1920 * 100vw);
    position: relative;
}

.s_reward {
    height: calc(1044 / 1920 * 100vw);
    position: relative;
    padding-top: calc(100 / 1920 * 100vw);
}

/* .side a[data-id="6"] {
    top: calc(548 / 1920 * 100vw);
    background-position-y: calc(-325 / 1920 * 100vw);
}

.side a[data-id="7"] {
    top: calc(604 / 1920 * 100vw);
    background-position-y: calc(-385 / 1920 * 100vw);
}

.side a[data-id="6"].act {
    background-position-y: calc(-327 / 1920 * 100vw);
}

.side a[data-id="7"].act {
    background-position-y: calc(-387 / 1920 * 100vw);
} */

 .s_roadmap .s1_title_img {
    display: block;
    width: calc(718.2 / 1920 * 100vw);
    height: calc(213.3 / 1920 * 100vw);
    background: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/roadmap/main_text_page1.png) center 0 / 100% 100% no-repeat;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(30 / 1920 * 100vw);
    z-index: 15;
    opacity: 0;
} 

.s_roadmap.animate-s1 .s1_title_img {
    animation: titleFadeIn 0.8s ease-out forwards;
}

.s_roadmap .s1_board {
    display: block;
    width: calc(1200 / 1920 * 100vw);
    height: calc(748 / 1920 * 100vw);
    background: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/roadmap/background_map.png) center 0 / 100% 100% no-repeat;
    position: absolute;
    left: 49%;
    transform: translateX(-50%);
    top: calc(358 / 1920 * 100vw);
}

.s_roadmap .timhieubtn2 {
    display: block;
    position: absolute;
    top: calc(980 / 1920 * 100vw + 10px);
    left: 49%;
    width: calc(500 / 1920 * 100vw);
    transform: translateX(-50%);
    z-index: 15;
}

.s_roadmap .timhieubtn2 img {
    display: block;
    width: 100%;
    height: auto;
}

.map-node {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 5;
    opacity: 0;
}

.s_roadmap.animate-s1 .map-node {
    animation-name: mapNodeFadeIn;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

.map-node img {
    width: 100%;
    height: auto;
    display: block;
}

.map-node:hover {
    transform: scale(1.05);
    z-index: 10;
}

.map-node.node-1 { width: 20%; left: 18%; top: 7%; animation-delay: 0.8s; }
.map-node.node-2 { width: 20%; left: 5%; top: 33%; animation-delay: 1.1s; }
.map-node.node-3 { width: 20%; left: 26%; top: 42%; animation-delay: 1.4s; }
.map-node.node-4 { width: 20%; left: 39%; top: 56%; animation-delay: 1.7s; }
.map-node.node-5 { width: 20%; left: 54%; top: 38%; animation-delay: 2.0s; }
.map-node.node-6 { width: 20%; left: 66%; top: 60%; animation-delay: 2.6s; }
.map-node.node-7 { width: 20%; left: 76%; top: 30%; animation-delay: 3.2s; }
.map-node.node-8 { width: 20%; left: 78%; top: 7%; animation-delay: 3.5s; }

.s_reward .s2_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: calc(0/1920*100vw) auto 0;
    opacity: 0;
    transform: translateY(24px) scale(0.8);
    transform-origin: center top;
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

.s_reward.animate-s2 .s2_header {
    opacity: 1;
    transform: translateY(0) scale(0.8);
}

.s_reward .s2_title {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    margin: 5px 0;
}

.s_reward .s2_title_1 { width: calc(986/1920*100vw); height: calc(70/1920*100vw); background-image: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/reward/main_text_page2_01.png); }
.s_reward .s2_title_2 { width: calc(930/1920*100vw); height: calc(104/1920*100vw); background-image: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/reward/main_text_page2_02.png); }
.s_reward .s2_title_3 { width: calc(866/1920*100vw); height: calc(61/1920*100vw); background-image: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/reward/main_text_page2_03.png); }
.s_reward .s2_title_4 { width: calc(901/1920*100vw); height: calc(148/1920*100vw); background-image: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/reward/main_text_page2_04.png); }

.s_reward .s2_cards_container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(101/1920*100vw);
    width: 100%;
    margin-top: calc(-90/1920*100vw);
    transform: scale(0.8);
    transform-origin: center top;
}

.s_reward .s2_card {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
    opacity: 0;
    transform: translateY(36px) scale(0.98);
    transition-property: transform, filter, opacity;
    transition-duration: 0.3s, 0.3s, 0.7s;
    transition-timing-function: ease, ease, ease;
    will-change: transform, filter, opacity;
}

.s_reward.animate-s2 .s2_card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.s_reward .s2_card:hover {
    transform: translateY(-8px);
    filter: drop-shadow(0 0 15px rgba(255, 120, 0, 0.4));
}

.s_reward .s2_card.card-1 { width: calc(772/1920*100vw); height: calc(423/1920*100vw); background-image: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/reward/box1.png); }
.s_reward .s2_card.card-2 { width: calc(772/1920*100vw); height: calc(462/1920*100vw); background-image: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/reward/box2.png); }
.s_reward.animate-s2 .s2_card.card-1 { transition-delay: 0.12s; }
.s_reward.animate-s2 .s2_card.card-2 { transition-delay: 0.24s; }

.s_reward .s2_btn_cta {
    position: absolute;
    bottom: calc(11/1920*100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(271/1920*100vw);
    height: calc(77/1920*100vw);
    display: block;
    overflow: hidden;
    border-radius: 4px;
    transition: transform 0.2s ease;
    z-index: 7;
}

.s_reward .s2_card_hover_popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border-radius: calc(40/1920*100vw);
}

.s_reward .s2_btn_cta:hover + .s2_card_hover_popup,
.s_reward .s2_card_hover_popup.active {
    opacity: 1;
}

.s_reward .s2_btn_cta img {
    width: 100%;
    height: 100%;
    display: block;
}

.s_reward .s2_btn_cta:hover {
    transform: translateX(-50%) scale(1.05);
}

.s_reward .s2_card.card-1 .s2_btn_cta {
    left: calc(218.5 / 1920 * 100vw);
    transform: scale(1);
    width: calc(301 / 1920 * 100vw);
    height: calc(85 / 1920 * 100vw);
    bottom: calc(-37 / 1920 * 100vw);
}

.s_reward .s2_card.card-1 .s2_btn_cta:hover {
    transform: scale(1.05);
}

.s_reward .s2_btn_cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
}

.s_reward .s2_btn_cta:hover::after {
    animation: ctaShimmer 1s ease-in-out;
}

.s_reward .newdownload-wrap {
    top: calc(950 / 1920 * 100vw) !important;
}

.map-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.map-popup-overlay.active {
    display: flex;
    opacity: 1;
}

.map-popup-overlay.hover-mode {
    pointer-events: none;
}

.map-popup-overlay.hover-mode .map-popup-content {
    pointer-events: auto;
}

.map-popup-content {
    position: relative;
    width: calc(845/1920*100vw);
    height: calc(458/1920*100vw);
    transform: scale(0.4);
    opacity: 0;
    transform-origin: center center;
    transition: opacity 0.2s ease;
    will-change: transform, opacity;
}

.map-popup-overlay.active .map-popup-content {
    opacity: 1;
    animation: popupZoomOut 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popupZoomOut {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.map-popup-content img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#mapPopupImg {
    z-index: 1;
    object-fit: contain;
    pointer-events: none;
}

.map-popup-close {
    position: absolute;
    top: calc(-15/1920*100vw);
    right: calc(-15/1920*100vw);
    width: calc(44/1920*100vw);
    height: calc(44/1920*100vw);
    background: url(../../imgs/pop_close.png) no-repeat center/100%;
    z-index: 10;
    cursor: pointer;
    display: none;
}

.map-popup-overlay.click-mode .map-popup-close {
    display: block;
}

@keyframes ctaShimmer {
    100% { left: 150%; }
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes mapNodeFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@media (min-width: 600px) and (max-width: 900px) {
         .kv {
    height: calc(1095 / 1920 * 100vw);
} 
    .title_page1_2 {
        top: calc(225 / 1920 * 100vw - 5px);
        width: calc(478 / 1024 * 100vw);
    }
}

@media only screen and (max-width: 500px) {
    .wrapper {
        height: calc(10111 / 750 * 100vw);
        /* Split the large mobile background into 3 stacked assets for lighter loading */
        background:
            url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/mobile/bg_mb_all_01.jpg) 0 0 / 100% auto no-repeat,
            url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/mobile/bg_mb_all_02.jpg) 0 calc(2410 / 750 * 100vw) / 100% auto no-repeat,
            url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/bg/mobile/bg_mb_all_03.jpg) 0 calc(6151 / 750 * 100vw) / 100% auto no-repeat;
    }

    .wrapper::after {
        height: calc(10111 / 750 * 100vw);
    }

    .s_roadmap {
        height: calc(1665 / 750 * 100vw);
    }

    .s_reward {
        height: calc(1262 / 750 * 100vw);
    }

    .side {
        width: calc(750 / 750 * 100vw);
        height: calc(109 / 750 * 100vw);
        background: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/m/side.png) 0 0 / 100% 100% no-repeat;
        bottom: 0;
        top: initial;
        left: 50%;
        margin-top: 0;
        margin-left: calc(-375 / 750 * 100vw);
    }

    .side.on {
        position: absolute;
    }

    .side a {
        width: calc(69 / 750 * 100vw);
        height: calc(76 / 750 * 100vw);
        position: absolute;
        display: block;
        background-image: url("../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/m/side1.png");
        background-repeat: no-repeat;
        background-size: calc(750 / 750 * 100vw) calc(109 / 750 * 100vw);
        background-position-y: center;
        top: calc(28 / 750 * 100vw);
    }


    .btn_top {
        display: none;
        width: calc(113 / 750 * 100vw);
        height: calc(112 / 750 * 100vw);
        bottom: calc(18 / 750 * 100vw);
        right: 0;
    }

    .s_reward .s2_header {
        margin-top: calc(0 / 750 * 100vw);
        margin-bottom: calc(20 / 750 * 100vw);
        transform: translateY(18px) scale(1.1);
    }

    .s_reward.animate-s2 .s2_header {
        transform: translateY(0) scale(1.1);
    }

    .s_reward .s2_title {
        margin: calc(10 / 750 * 100vw) auto !important;
    }

    .s_reward .s2_title_1 { width: calc(477.224 / 750 * 100vw); height: calc(33.88 / 750 * 100vw); }
    .s_reward .s2_title_2 { width: calc(450.12 / 750 * 100vw); height: calc(50.336 / 750 * 100vw); }
    .s_reward .s2_title_3 { width: calc(419.144 / 750 * 100vw); height: calc(29.524 / 750 * 100vw); }
    .s_reward .s2_title_4 { width: calc(436.084 / 750 * 100vw); height: calc(71.632 / 750 * 100vw); }

    .s_reward .s2_cards_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(30 / 750 * 100vw);
        width: 100%;
        margin-top: calc(20 / 750 * 100vw);
        transform: scale(1.1);
        transform-origin: center top;
    }

    .s_reward .s2_card {
        width: calc(580 / 750 * 100vw) !important;
        opacity: 0;
        transform: translateY(24px) scale(0.99);
        transition: transform 0.3s ease, filter 0.3s ease, opacity 0.7s ease;
        will-change: transform, filter, opacity;
    }

    .s_reward.animate-s2 .s2_card {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .s_reward .s2_card.card-1 {
        height: calc(580 * 469 / 856 / 750 * 100vw) !important;
    }

    .s_reward .s2_card.card-2 {
        height: calc(580 * 512 / 856 / 750 * 100vw) !important;
    }

    .s_reward .s2_btn_cta {
        bottom: calc(15 / 750 * 100vw);
        width: calc(280 / 750 * 100vw) !important;
        height: calc(280 * 98 / 347 / 750 * 100vw) !important;
    }

    .s_reward .s2_card.card-1 .s2_btn_cta {
        left: calc(143 / 750 * 100vw);
        width: calc(226 / 750 * 100vw);
        height: calc(64 / 750 * 100vw);
        bottom: calc(-10 / 750 * 100vw);
    }

    .s_reward .s2_card_hover_popup {
        border-radius: calc(30 / 750 * 100vw);
    }

    .s_roadmap .s1_title_img {
        width: calc(400 / 750 * 100vw);
        height: calc(121 / 750 * 100vw);
        background: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/roadmap/main_text_page1_mobi.png) center 0 / 100% 100% no-repeat;
        top: calc(16 / 750 * 100vw);
        left: 51%;
    }

    .s_roadmap .s1_board {
        position: relative;
        width: calc(670 / 750 * 100vw);
        height: calc(870 / 750 * 100vw * 946 / 565);
        background: url(../../images/event/PUBG-MOBILE-NARUTO-SHIPPUDEN/roadmap/background_map_mobi.png) center 0 / 100% 100% no-repeat;
        margin: calc(100 / 750 * 100vw) auto 0;
        padding: 0;
        border-radius: 8px;
        left: auto;
        transform: none;
        top: auto;
    }

    .s_roadmap .timhieubtn2 {
        position: absolute;
        top: calc(1250 / 750 * 100vw);
        width: calc(400 / 750 * 100vw);
        margin: 0;
        transform: translateX(-50%);
    }

    .map-node {
        position: absolute;
        margin: 0;
        animation: none;
    }

    .s_roadmap.animate-s1 .map-node {
        animation-name: mapNodeFadeIn;
        animation-duration: 1s;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        animation-fill-mode: forwards;
    }

    .map-node.node-1 { left: 34% !important; top: 9% !important; width: 37% !important; height: 11% !important; animation-delay: 0.8s !important; }
    .map-node.node-2 { left: 54% !important; top: 20% !important; width: 36% !important; height: 10% !important; animation-delay: 1.1s !important; }
    .map-node.node-3 { left: 7% !important; top: 23% !important; width: 36% !important; height: 10% !important; animation-delay: 1.4s !important; }
    .map-node.node-4 { left: 56% !important; top: 35% !important; width: 36% !important; height: 10% !important; animation-delay: 1.7s !important; }
    .map-node.node-5 { left: 10% !important; top: 37% !important; width: 37% !important; height: 12% !important; animation-delay: 2.0s !important; }
    .map-node.node-6 { left: 11% !important; top: 51% !important; width: 36% !important; height: 10% !important; animation-delay: 2.3s !important; }
    .map-node.node-7 { left: 58% !important; top: 50% !important; width: 36% !important; height: 11% !important; animation-delay: 2.6s !important; }
    .map-node.node-8 { left: 33% !important; top: 63% !important; width: 36% !important; height: 10% !important; animation-delay: 2.9s !important; }

    .map-popup-content {
        width: calc(650 / 750 * 100vw);
        height: calc(352 / 750 * 100vw);
        transform: scale(0.4);
    }

    .map-popup-close {
        top: calc(-20 / 750 * 100vw);
        right: calc(-20 / 750 * 100vw);
        width: calc(60 / 750 * 100vw);
        height: calc(60 / 750 * 100vw);
    }

    .s_reward .newdownload-wrap {
        top: calc(1112 / 750 * 100vw) !important;
    }
}