/* 设计稿 1920×1080（Figma web3），--u = 1 设计 px：默认按宽比，窗口比 ≥16:9 时按高比；
   logo/胶囊/海报条/二维码贴真实视口边、背景 cover 铺满窗口，同黄桃 HTDJ 的方案 */
:root {
    --u: 0.0520833vw;
}

@media (min-aspect-ratio: 16/9) {
    :root {
        --u: 0.0925926vh;
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-user-drag: none;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background: #000;
}

body {
    color: #fff;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

img {
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

.desktop {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 背景（人物 + 底部压暗已合成在图里），缓慢呼吸缩放 */
.sceneBg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: url(../images/desktop/bg.js?v=1) center center / cover no-repeat;
    will-change: transform;
    animation: sceneBreathe 9s ease-in-out infinite;
}

.shadeTop {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    height: calc(var(--u) * 160);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 56.7%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* ===== 左上 logo + 站名 ===== */
.brandRow {
    position: absolute;
    top: calc(var(--u) * 40);
    left: calc(var(--u) * 64);
    z-index: 5;
    display: flex;
    align-items: center;
}

.logoIcon {
    width: calc(var(--u) * 80);
    height: calc(var(--u) * 80);
    animation: logoGlow 3.2s ease-in-out infinite;
}

.brandWord {
    height: calc(var(--u) * 53);
    margin-left: calc(var(--u) * 10);
}

/* ===== 右上三胶囊（白 20% 毛玻璃） ===== */
.navBar {
    position: absolute;
    top: calc(var(--u) * 50);
    right: calc(var(--u) * 64);
    z-index: 5;
    display: flex;
}

.navPill {
    display: flex;
    align-items: center;
    height: calc(var(--u) * 60);
    padding: 0 calc(var(--u) * 20);
    border-radius: calc(var(--u) * 36);
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(calc(var(--u) * 6));
    backdrop-filter: blur(calc(var(--u) * 6));
    font-size: calc(var(--u) * 25.5);
    font-weight: 500;
    line-height: calc(var(--u) * 35.7);
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.navPill + .navPill {
    margin-left: calc(var(--u) * 30);
}

.navPill:hover {
    transform: scale(1.06);
}

.pillIcon {
    flex: none;
    width: calc(var(--u) * 32);
    height: calc(var(--u) * 32);
    margin-right: calc(var(--u) * 10);
}

/* ===== 标题（暗影 + 字 + 扫光）：按视口中心定位，偏移 = 画布中心 − 设计稿坐标（167 = 540 − 373，372.5 = 960 − 587.5） ===== */
.heroTitle {
    position: absolute;
    top: calc(50% - var(--u) * 167);
    left: calc(50% - var(--u) * 372.5);
    z-index: 2;
    width: calc(var(--u) * 745);
    height: calc(var(--u) * 411);
    pointer-events: none;
    animation: titleBreathe 2.8s ease-in-out infinite;
}

/* 标题后的深褐椭圆柔光（设计稿 509×247 椭圆 + 200 模糊） */
.titleShade {
    position: absolute;
    top: calc(var(--u) * -205);
    left: calc(var(--u) * -185);
    width: calc(var(--u) * 1109);
    height: calc(var(--u) * 847);
    background: radial-gradient(50% 50% at 50% 50%, rgba(66, 12, 4, 0.8) 0%, rgba(66, 12, 4, 0.4) 45%, rgba(66, 12, 4, 0) 75%);
}

.titleText,
.titleShine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.titleText {
    animation: titleGlow 2.8s ease-in-out infinite;
}

/* ===== 左下海报滚动条：左贴视口、右端停在二维码卡左侧，两端渐隐；行图 15 张 + 尾部 24 间距 = 2970 ===== */
/* z-index 高于标题：设计稿里海报条压在标题暗影之上，标题图底边与海报条顶边相接不会被遮 */
.posterStrip {
    position: absolute;
    right: calc(var(--u) * 442);
    bottom: calc(var(--u) * 64);
    left: calc(var(--u) * 64);
    z-index: 3;
    height: calc(var(--u) * 232);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--u) * 141), #000 calc(100% - var(--u) * 141), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--u) * 141), #000 calc(100% - var(--u) * 141), transparent 100%);
    pointer-events: none;
}

.posterTrack {
    display: flex;
    width: calc(var(--u) * 14850);
    will-change: transform;
    animation: marqueeStrip 80s linear infinite;
}

.posterTrack img {
    flex: none;
    width: calc(var(--u) * 2970);
    height: calc(var(--u) * 232);
}

@keyframes marqueeStrip {
    from { transform: translateX(0); }
    to { transform: translateX(-20%); }
}

/* ===== 右下二维码 + 文案 ===== */
.qrCard {
    position: absolute;
    right: calc(var(--u) * 64);
    bottom: calc(var(--u) * 105);
    z-index: 3;
    width: calc(var(--u) * 378);
    height: calc(var(--u) * 150);
    cursor: pointer;
}

/* 白框 150u，padding 留出的 130u 内容区承接 qrcode.js 生成的图 */
.qrBox {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--u) * 150);
    height: calc(var(--u) * 150);
    padding: calc(var(--u) * 10);
    overflow: hidden;
    background: #fff;
    animation: qrGlow 2.6s ease-in-out infinite;
}

.qrBox img,
.qrBox canvas {
    width: 100%;
    height: 100%;
}

.isBlinking .qrBox {
    animation: qrPulse 1.2s ease-out 2;
}

.qrText {
    position: absolute;
    top: calc(var(--u) * 10);
    left: calc(var(--u) * 174);
    white-space: nowrap;
}

.qrTitle {
    color: #ffa100;
    font-size: calc(var(--u) * 34);
    font-weight: 700;
    line-height: calc(var(--u) * 41);
}

.qrDesc {
    margin-top: calc(var(--u) * 20);
    font-size: calc(var(--u) * 26);
    font-weight: 500;
    line-height: calc(var(--u) * 34);
}

/* ===== 动效 ===== */
@keyframes sceneBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@keyframes titleBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@keyframes titleGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 196, 92, 0)); }
    50% { filter: brightness(1.08) drop-shadow(0 0 calc(var(--u) * 14) rgba(255, 196, 92, 0.7)); }
}

@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 170, 60, 0)); }
    50% { filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 170, 60, 0.9)); }
}

@keyframes qrGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 161, 0, 0); }
    50% { box-shadow: 0 0 calc(var(--u) * 22) calc(var(--u) * 2) rgba(255, 161, 0, 0.7); }
}

@keyframes qrPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 161, 0, 0.95); }
    70% { box-shadow: 0 0 0 calc(var(--u) * 42) rgba(255, 161, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 161, 0, 0); }
}

/* 标题扫光：白色字图副本 + 斜向渐变遮罩（3 倍宽，位置右→左挪即光带从左往右划过字），扫完停 3.6s 再循环 */
.titleShine {
    opacity: 0.6;
    filter: brightness(0) invert(1);
    -webkit-mask-image: linear-gradient(117deg, transparent 45.5%, #000 50%, transparent 54.5%);
    mask-image: linear-gradient(117deg, transparent 45.5%, #000 50%, transparent 54.5%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: titleShine 4.8s ease-in-out infinite;
}

@keyframes titleShine {
    0% { -webkit-mask-position: 87% 0; mask-position: 87% 0; }
    25%, 100% { -webkit-mask-position: 13% 0; mask-position: 13% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sceneBg,
    .posterTrack,
    .heroTitle,
    .titleText,
    .logoIcon,
    .qrBox,
    .titleShine {
        animation: none;
    }
}