/* Tangxin Theater motion layer — cinematic editorial, warm paper and coral noir. */
:root {
    --tx-motion-coral: #ff5b57;
    --tx-motion-coral-deep: #e94848;
    --tx-motion-ink: #211923;
    --tx-motion-paper: #fffaf3;
    --tx-motion-line: rgba(60, 42, 54, .11);
}

.tx-site-scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100000;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--tx-motion-coral), #ff9d78 58%, #ffc675);
    box-shadow: 0 2px 12px rgba(255, 91, 87, .34);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

html.tx-site-motion-ready .head_logo,
html.tx-site-motion-ready .head_menu_a,
html.tx-site-motion-ready .head_search,
html.tx-site-motion-ready .head_user {
    will-change: transform;
}

/* Shared interactive rhythm. JS only applies transforms on fine pointers. */
.tx-motion-card-target {
    position: relative;
    transform-origin: 50% 72%;
}

.tx-motion-card-target::after {
    position: absolute;
    inset: auto 12% -7px;
    z-index: -1;
    height: 16px;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    background: rgba(44, 29, 41, .15);
    filter: blur(12px);
    opacity: 0;
    transition: opacity .24s ease;
}

.tx-motion-card-target.tx-motion-card-hover::after {
    opacity: .62;
}

.tx-motion-action-target {
    transform-origin: 50% 50%;
}

/* Detail: the information stays immediately readable; atmosphere sits behind it. */
.detail-wrap .hot_banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 24%, rgba(255, 91, 87, .12), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(255, 197, 116, .11), transparent 28%),
        linear-gradient(180deg, #fff9f2 0%, #f8f5f2 100%);
}

.detail-wrap .hot_banner::before {
    position: absolute;
    top: -180px;
    left: 38%;
    z-index: -1;
    width: 520px;
    height: 520px;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 91, 87, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 74px rgba(255, 91, 87, .025), 0 0 0 148px rgba(255, 197, 116, .018);
}

.detail-wrap .vod-detail-hero-box {
    border: 1px solid rgba(68, 48, 59, .1);
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 26px 74px rgba(48, 34, 44, .105);
    backdrop-filter: blur(14px);
}

.detail-wrap .vod-detail-hero__thumb .vodlist_thumb {
    box-shadow: 0 18px 34px rgba(33, 25, 35, .22);
}

.detail-wrap .vod-detail-hero__top .title {
    letter-spacing: -.035em;
}

.detail-wrap .member-wrap > .container > .left_row > .pannel,
.detail-wrap .left_row > .pannel {
    border-color: var(--tx-motion-line);
    box-shadow: 0 16px 42px rgba(48, 34, 44, .055);
}

.detail-wrap .pannel_head > .title::before,
.search_box .pannel_head > .title::before {
    display: inline-block;
    width: 18px;
    height: 3px;
    margin: 0 9px 4px 0;
    content: "";
    border-radius: 999px;
    background: var(--tx-motion-coral);
}

/* Ranking gets a real editorial opening instead of starting abruptly at tabs. */
.tx-rank-intro {
    position: relative;
    box-sizing: border-box;
    min-height: 210px;
    margin: 18px 0 22px;
    padding: clamp(30px, 4vw, 58px) clamp(28px, 5vw, 72px);
    overflow: hidden;
    border: 1px solid rgba(82, 58, 70, .1);
    border-radius: 26px;
    color: var(--tx-motion-ink);
    background:
        radial-gradient(circle at 88% 24%, rgba(255, 91, 87, .18), transparent 26%),
        radial-gradient(circle at 72% 82%, rgba(255, 194, 104, .17), transparent 28%),
        linear-gradient(125deg, #fff1e7 0%, #fffaf2 58%, #f8f1ea 100%);
    box-shadow: 0 24px 70px rgba(51, 35, 45, .09);
}

.tx-rank-intro::after {
    position: absolute;
    top: -45%;
    right: 7%;
    width: 290px;
    height: 290px;
    content: "";
    border: 1px solid rgba(255, 91, 87, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 42px rgba(255, 91, 87, .035), 0 0 0 84px rgba(255, 170, 101, .025);
}

.tx-rank-intro__eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 11px;
    color: var(--tx-motion-coral-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
}

.tx-rank-intro__title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--tx-motion-ink);
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
}

.tx-rank-intro__summary {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 18px 0 0;
    color: #6f636a;
    font-size: 15px;
    line-height: 1.75;
}

#rankpage .rankpage {
    overflow: hidden;
    border-color: var(--tx-motion-line);
    box-shadow: 0 24px 64px rgba(48, 34, 44, .07);
}

#rankpage .rankpage .tabs > .content {
    min-height: 620px;
}

#rankpage .rank_hom {
    border-color: rgba(68, 48, 59, .09);
    box-shadow: 0 8px 22px rgba(48, 34, 44, .055);
}

/* Topic and discovery pages share the same curated-magazine voice. */
.topic-index-body .topic-index-main {
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 91, 87, .08), transparent 24%),
        linear-gradient(180deg, #fffaf4 0, #f7f5f3 680px);
}

.topic-index-body .topic-index-page-h1 {
    position: relative;
    margin-bottom: 34px;
    color: var(--tx-motion-ink);
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(38px, 5vw, 66px);
    font-weight: 800;
    letter-spacing: -.05em;
}

.topic-index-body .topic-index-page-h1::before {
    display: block;
    margin-bottom: 9px;
    content: "CURATED STORIES";
    color: var(--tx-motion-coral-deep);
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
}

.topic-index-status--empty,
.topic-index-status--error {
    border: 1px solid rgba(72, 50, 61, .08);
    border-radius: 24px;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 20px 54px rgba(48, 34, 44, .055);
}

.topic-detail-body .topic-detail-hero {
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(33, 25, 35, .16);
}

.topic-detail-body .topic-detail-title {
    font-family: "Songti SC", "STSong", serif;
    letter-spacing: -.045em;
}

.mac-catalog-show,
.search_box {
    --tx-catalog-line: rgba(66, 47, 58, .1);
}

.mac-catalog-show .mac-catalog-filter-head,
.search_box .wrapper_fl {
    border-color: var(--tx-catalog-line);
    background: rgba(255, 252, 248, .8);
    backdrop-filter: blur(12px);
}

/* Player stays quiet: one polished stage, no perpetual backdrop animation. */
#play_page .player_video {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .28);
}

#play_page .play_but {
    border-radius: 0 0 18px 18px;
}

#play_page .play_infobox {
    border: 1px solid rgba(255, 255, 255, .07);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
}

.bstem .tx-rank-intro {
    color: #f7edf4;
    border-color: rgba(255, 255, 255, .075);
    background:
        radial-gradient(circle at 88% 24%, rgba(255, 91, 87, .18), transparent 27%),
        linear-gradient(125deg, #202735 0%, #171e2b 66%, #121822 100%);
}

.bstem .tx-rank-intro__title {
    color: #fff5f8;
}

.bstem .tx-rank-intro__summary {
    color: #bdb4bd;
}

.bstem.detail-wrap .hot_banner {
    background:
        radial-gradient(circle at 14% 24%, rgba(255, 91, 87, .13), transparent 30%),
        linear-gradient(180deg, #161d2a 0%, #111722 100%);
}

.bstem.detail-wrap .vod-detail-hero-box {
    border-color: rgba(255, 255, 255, .075);
    background: rgba(25, 31, 44, .82);
}

@media (hover: hover) and (pointer: fine) {
    .tx-motion-action-target {
        transition: box-shadow .25s ease, border-color .25s ease, color .25s ease;
    }

    .tx-motion-action-target:hover {
        border-color: rgba(255, 91, 87, .46) !important;
        box-shadow: 0 10px 26px rgba(255, 91, 87, .16);
    }
}

@media screen and (max-width: 820px) {
    .tx-site-scroll-progress {
        height: 2px;
    }

    .tx-rank-intro {
        min-height: 168px;
        margin: 10px;
        padding: 26px 22px;
        border-radius: 20px;
    }

    .tx-rank-intro__title {
        font-size: 43px;
    }

    .tx-rank-intro__summary {
        margin-top: 13px;
        font-size: 13px;
        line-height: 1.6;
    }

    #rankpage .rankpage .tabs > .content {
        min-height: 680px;
    }

    .detail-wrap .hot_banner::before {
        display: none;
    }

    .detail-wrap .vod-detail-hero-box {
        backdrop-filter: none;
    }

    .topic-index-body .topic-index-page-h1 {
        margin-bottom: 22px;
        font-size: 42px;
    }

    #play_page .player_video,
    #play_page .play_but {
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tx-site-scroll-progress {
        display: none;
    }

    .tx-motion-card-target,
    .tx-motion-action-target {
        transform: none !important;
    }

    .tx-motion-card-target::after {
        display: none;
    }
}