.jl .wow {
    visibility: hidden;
    animation-name: none;
}

.jl .jl-r {
    opacity: 0;
}

.jl .jl-stagger > * {
    opacity: 0;
}

.jl .jl-draw {
    scale: 0 1;
    transform-origin: left center;
}

.jl .news-title-img,
.jl .scroll-container,
.jl .activity-title-img,
.jl .version-top,
.jl .version-main,
.jl .art-header,
.jl .art-divider,
.jl .activity-cards > *,
.jl .version-tabs > *,
.jl .art-card-list > * {
    opacity: 0;
}

.jl .art-divider {
    scale: 0 1;
    transform-origin: left center;
}

.jl .jl-rise.jl-in {
    animation: jlRise .72s cubic-bezier(.22, .68, .3, 1) both;
}

.jl .jl-draw.jl-in {
    opacity: 1;
    animation: jlDraw .8s cubic-bezier(.22, .68, .3, 1) .1s both;
}

.jl .jl-stagger.jl-in > * {
    animation: jlRise .62s cubic-bezier(.22, .68, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes jlRise {
    from {
        opacity: 0;
        translate: 0 26px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes jlDraw {
    from {
        scale: 0 1;
    }

    to {
        scale: 1 1;
    }
}

.news-title-img,
.activity-title-img,
.art-title-img-new {
    filter: drop-shadow(0 0 .06rem rgba(255, 221, 119, .38));
}

.version-main-title {
    text-shadow: 0 0 .12rem rgba(255, 221, 119, .35);
}

.art-card,
.treasure-item {
    cursor: pointer;
}

.art-card {
    transition: transform .4s cubic-bezier(.22, .68, .3, 1), box-shadow .4s ease;
}

    .art-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border: .02rem solid transparent;
        border-radius: .04rem;
        box-shadow: inset 0 0 0 rgba(255, 221, 119, 0);
        transition: border-color .4s ease, box-shadow .4s ease;
        pointer-events: none;
        z-index: 2;
    }

    .art-card img {
        transition: transform .6s cubic-bezier(.22, .68, .3, 1), filter .4s ease;
    }

.art-card-name {
    transition: color .35s ease, background .35s ease;
}

.activity-card img {
    transition: transform .6s cubic-bezier(.22, .68, .3, 1), filter .4s ease;
}

.activity-card {
    transition: transform .35s cubic-bezier(.22, .68, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

.news-item {
    position: relative;
    transition: background .3s ease;
}

    .news-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        background: #a53121;
        transition: width .3s ease;
    }

.news-tag {
    transition: transform .3s cubic-bezier(.22, .68, .3, 1), box-shadow .3s ease, background .3s ease;
}

.news-link {
    transition: color .3s ease;
}

.version-tab-item {
    position: relative;
    overflow: hidden;
    transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, .68, .3, 1), box-shadow .3s ease;
}

    .version-tab-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 34%, rgba(255, 221, 119, .3) 50%, transparent 66%);
        translate: -110% 0;
        pointer-events: none;
    }

    .version-tab-item.on {
        box-shadow: 0 0 .16rem rgba(255, 221, 119, .45);
    }

.version-img-box {
    transition: border-color .4s ease, box-shadow .4s ease;
}

    .version-img-box img.jl-swap {
        animation: jlSwap .45s ease both;
    }

@keyframes jlSwap {
    from {
        opacity: 0;
        scale: 1.03;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

.art-more-btn {
    transition: background .3s ease, transform .25s cubic-bezier(.22, .68, .3, 1), box-shadow .3s ease;
}

.treasure-platform {
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, .68, .3, 1);
}

.treasure-model {
    transition: transform .45s cubic-bezier(.22, .68, .3, 1);
}

.treasure-name {
    transition: color .35s ease, text-shadow .35s ease;
}

.treasure-arrow {
    transition: transform .25s cubic-bezier(.22, .68, .3, 1), filter .25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .art-card:hover {
        transform: translateY(-.06rem);
        box-shadow: 0 .12rem .28rem rgba(0, 0, 0, .55);
    }

        .art-card:hover::after {
            border-color: rgba(255, 221, 119, .8);
            box-shadow: inset 0 0 .2rem rgba(255, 221, 119, .3);
        }

        .art-card:hover img {
            transform: scale(1.08);
            filter: brightness(1.1) saturate(1.08);
        }

        .art-card:hover .art-card-name {
            color: #ffe9a8;
            background: linear-gradient(transparent, rgba(88, 20, 15, .88));
        }

    .activity-card:hover {
        transform: translateY(-.05rem) scale(1.02);
        border-color: #d1b572;
        box-shadow: 0 .1rem .24rem rgba(0, 0, 0, .5);
    }

        .activity-card:hover img {
            transform: scale(1.06);
            filter: brightness(1.08);
        }

    .news-item:hover {
        background: rgba(165, 49, 33, .09);
    }

        .news-item:hover::before {
            width: .03rem;
        }

        .news-item:hover .news-tag {
            transform: translateX(.02rem);
            box-shadow: 0 0 .1rem rgba(122, 39, 39, .55);
        }

    .news-item.notice:hover {
        background: #ad3733;
    }

        .news-item.notice:hover .news-link {
            color: #fff3cf;
        }

    .version-tab-item:hover {
        color: #ffdd77;
        border-color: #ffdd77;
        transform: translateY(-.03rem);
        box-shadow: 0 .06rem .16rem rgba(0, 0, 0, .45);
    }

        .version-tab-item:hover::before {
            animation: jlSweep .6s ease-out;
        }

    .version-tab-item.on:hover {
        color: #2b2112;
        box-shadow: 0 0 .2rem rgba(255, 221, 119, .6);
    }

    .version-img-box:hover {
        border-color: #ffdd77;
        box-shadow: 0 0 .3rem rgba(255, 221, 119, .3);
    }

    .art-more-btn:hover {
        background: #d1a45f;
        transform: translateY(-.02rem);
        box-shadow: 0 .06rem .16rem rgba(0, 0, 0, .45);
    }

    .art-more-btn:active {
        transform: translateY(0);
    }

    .treasure-item:hover {
        opacity: .8;
    }

        .treasure-item:hover .treasure-platform {
            border-color: #ffdd77;
            box-shadow: 0 0 .18rem rgba(255, 221, 119, .4), inset 0 0 .2rem rgba(255, 221, 119, .15);
            transform: translateY(-.04rem);
        }

        .treasure-item:hover .treasure-model {
            transform: scale(1.12);
        }

        .treasure-item:hover .treasure-name {
            color: #8a1c10;
            text-shadow: 0 0 .1rem rgba(255, 221, 119, .55);
        }

    .treasure-arrow:hover {
        filter: brightness(1.25) drop-shadow(0 0 .06rem rgba(255, 221, 119, .8));
    }

    .treasure-prev:hover {
        transform: translateY(-50%) translateX(-.04rem);
    }

    .treasure-next:hover {
        transform: translateY(-50%) translateX(.04rem);
    }
}

@keyframes jlSweep {
    from {
        translate: -110% 0;
    }

    to {
        translate: 110% 0;
    }
}

@media (hover: none) {
    .art-card:active,
    .activity-card:active {
        transform: scale(.97);
    }

    .version-tab-item:active {
        transform: scale(.96);
    }

    .news-item:active {
        background: rgba(165, 49, 33, .14);
    }

    .treasure-item:active .treasure-platform {
        border-color: #ffdd77;
        box-shadow: 0 0 .16rem rgba(255, 221, 119, .4);
    }

    .treasure-arrow:active {
        filter: brightness(1.3);
    }
}

.treasure-platform::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 84%;
    aspect-ratio: 1;
    border: .02rem solid rgba(255, 221, 119, .22);
    border-top-color: rgba(255, 221, 119, .7);
    border-radius: 50%;
    translate: -50% -50%;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.treasure-item.active-pair .treasure-platform::after {
    opacity: 1;
    animation: jlRing 9s linear infinite;
}

.treasure-item.active-pair .treasure-model {
    animation: jlFloat 3.4s ease-in-out infinite;
}

.treasure-item.active-pair .treasure-glow {
    animation: jlGlowPulse 2.8s ease-in-out infinite;
}

@keyframes jlRing {
    to {
        rotate: 360deg;
    }
}

@keyframes jlFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -.06rem;
    }
}

@keyframes jlGlowPulse {
    0%, 100% {
        opacity: .7;
        scale: 1 1;
    }

    50% {
        opacity: 1;
        scale: 1.08 1.15;
    }
}

.page3_5.jl-idle .treasure-item.active-pair .treasure-platform::after,
.page3_5.jl-idle .treasure-item.active-pair .treasure-model,
.page3_5.jl-idle .treasure-item.active-pair .treasure-glow {
    animation-play-state: paused;
}

@media (max-width: 768px) {
    .jl .jl-stagger.jl-in > * {
        animation-delay: calc(var(--i, 0) * 50ms);
    }

    @keyframes jlRise {
        from {
            opacity: 0;
            translate: 0 16px;
        }

        to {
            opacity: 1;
            translate: 0 0;
        }
    }

    .treasure-item.active-pair .treasure-platform::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jl .jl-r,
    .jl .jl-stagger > *,
    .jl .wow {
        opacity: 1 !important;
        visibility: visible !important;
        scale: none !important;
        translate: none !important;
        animation: none !important;
    }

    .treasure-item.active-pair .treasure-platform::after,
    .treasure-item.active-pair .treasure-model,
    .treasure-item.active-pair .treasure-glow,
    .version-img-box img.jl-swap {
        animation: none !important;
    }
}