/* Mobile polish layered over the existing layout. */
html {
    background: #02091d;
}

body {
    overflow-x: hidden;
}

.head,
.banner,
.notice,
.product .title {
    opacity: 0;
    transform: translateY(10px);
}

body.is-ready .head,
body.is-ready .banner,
body.is-ready .notice,
body.is-ready .product .title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

body.is-ready .banner {
    transition-delay: .08s;
}

body.is-ready .notice {
    transition-delay: .16s;
}

body.is-ready .product .title {
    transition-delay: .24s;
}

.banner {
    overflow: hidden;
}

.banner img {
    display: block;
    transform: scale(1.015);
    animation: bannerSettle 5s cubic-bezier(.22, 1, .36, 1) forwards;
}

.notice {
    overflow: hidden;
}

.notice .ico img {
    animation: noticePulse 2.2s ease-in-out infinite;
}

.notice .txt {
    overflow: hidden;
    white-space: nowrap;
}

.notice-track {
    display: inline-flex;
    width: max-content;
    min-width: 100%;
    will-change: transform;
    animation: noticeScroll 20s linear infinite;
}

.notice-track span {
    flex: none;
    padding-right: 2rem;
}

.product .title img {
    animation: titleGlow 2.8s ease-in-out infinite;
}

.product .list ul li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.product .list ul li.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.product .list ul li .cont {
    position: relative;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.product .list ul li .cont::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 18%, rgba(119, 200, 183, .09) 45%, transparent 72%);
    transform: translateX(-120%);
    animation: cardSheen 4.5s ease-in-out infinite;
}

.product .list ul li .hot-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: .04rem;
    min-width: .8rem;
    margin-left: .1rem;
    padding: .05rem .08rem;
    color: #fff8ce;
    font-size: .21rem;
    font-weight: 800;
    letter-spacing: .02rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(92, 0, 0, .75);
    background: linear-gradient(135deg, #ffb000 0%, #ff4a28 38%, #e90035 76%, #b80028 100%);
    background-size: 180% 100%;
    border: 1px solid #ffe581;
    border-radius: .08rem;
    box-shadow: 0 .03rem .1rem rgba(255, 37, 62, .58), 0 0 .08rem rgba(255, 195, 54, .3);
    transform-origin: center;
    vertical-align: middle;
    animation: hotBadge 1.8s ease-in-out infinite;
}

.product .list ul li .hot-badge::before {
    content: "";
    flex: none;
    width: .08rem;
    height: .08rem;
    background: #fffbd0;
    border-radius: 50%;
    box-shadow: 0 0 .1rem #fff, 0 0 .18rem #ffd53d;
    animation: hotDot .75s ease-in-out infinite;
}

.product .list ul li a:active .cont {
    transform: scale(.992);
    box-shadow: 0 0 .24rem rgba(119, 200, 183, .24);
}

.product .list ul li .card-link:active .cont {
    transform: scale(.992);
    box-shadow: 0 0 .24rem rgba(119, 200, 183, .24);
}

.product .list ul li .cont .text .btns .cta {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    width: 100%;
    height: .6rem;
    margin-top: 15px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #77c8b7 0%, #a8eadc 48%, #77c8b7 100%);
    background-size: 180% 100%;
    color: #333;
    border-radius: .06rem;
    letter-spacing: .04rem;
    font-size: .26rem;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
    white-space: nowrap;
    box-shadow: 0 .05rem .16rem rgba(119, 200, 183, .24);
    animation: ctaPulse 2s ease-in-out infinite;
}

.product .list ul li .cont .text .btns .cta::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -45%;
    width: 28%;
    height: 180%;
    background: rgba(255, 255, 255, .6);
    filter: blur(2px);
    transform: rotate(18deg);
    animation: ctaShine 2.4s ease-in-out infinite;
}

.footer {
    clear: both;
    position: relative;
}

@keyframes bannerSettle {
    to { transform: scale(1); }
}

@keyframes noticePulse {
    0%, 100% { opacity: .7; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes noticeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes titleGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(119, 200, 183, 0)); }
    50% { filter: drop-shadow(0 0 .12rem rgba(119, 200, 183, .34)); }
}

@keyframes cardSheen {
    0%, 55% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(120%); }
}

@keyframes ctaPulse {
    0%, 100% {
        background-position: 0 50%;
        box-shadow: 0 .05rem .16rem rgba(119, 200, 183, .24), 0 0 0 0 rgba(119, 200, 183, .34);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 .06rem .2rem rgba(119, 200, 183, .38), 0 0 0 .1rem rgba(119, 200, 183, 0);
    }
}

@keyframes ctaShine {
    0%, 45% { left: -45%; opacity: 0; }
    55% { opacity: .9; }
    78%, 100% { left: 125%; opacity: 0; }
}

@keyframes hotBadge {
    0%, 100% {
        background-position: 0 50%;
        box-shadow: 0 .03rem .1rem rgba(255, 37, 62, .5), 0 0 .08rem rgba(255, 195, 54, .28);
        transform: scale(1);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 .04rem .14rem rgba(255, 37, 62, .72), 0 0 .13rem rgba(255, 195, 54, .48);
        transform: scale(1.06);
    }
}

@keyframes hotDot {
    0%, 100% { opacity: .5; transform: scale(.75); }
    50% { opacity: 1; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .head,
    .banner,
    .notice,
    .product .title,
    .product .list ul li {
        opacity: 1;
        transform: none;
    }
}