/* ============================================================
   main.css - 全局样式
   主题：Netflix 风格高端深色（深黑 + Netflix红 + 磨砂玻璃）
   字体：Inter（英文）+ 思源黑体（中文）—— 端正、专业
   ============================================================ */

/* ============================================================
   CSS 变量
   ============================================================ */
:root {
    /* 主色板 - 深色高端 */
    --color-bg: #0a0a0f;
    --color-bg-soft: #141420;
    --color-bg-card: #1c1c28;
    --color-bg-elevated: #2a2a38;

    --color-primary: #e50914;         /* Netflix 红 */
    --color-primary-deep: #b20710;
    --color-accent: #f5f5f1;

    /* 文字颜色 */
    --color-text: #ffffff;
    --color-text-soft: rgba(255, 255, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.55);
    --color-text-faint: rgba(255, 255, 255, 0.35);

    /* 玻璃效果 */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-border-strong: rgba(255, 255, 255, 0.28);

    /* 字体 */
    --font-display: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
    --font-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans CN', sans-serif;
    /* ★ 书法字体（用于 hero 大标题）：ZCOOL KuaiLe 粗壮霸气，回退到毛笔楷书 ★ */
    --font-calligraphy: 'ZCOOL KuaiLe', 'Ma Shan Zheng', 'STKaiti', 'KaiTi', 'PingFang SC', serif;

    /* ★ 小米橙品牌色 ★ */
    --color-mi-orange: #FF6900;
    --color-mi-orange-light: #FFB347;

    /* 圆角 */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* 阴影 */
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-red-glow: 0 8px 30px rgba(229, 9, 20, 0.4);
}

/* ============================================================
   全局基础样式
   ============================================================ */
body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:
        radial-gradient(ellipse at top right, #2a1a3a 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, #1a2a3a 0%, transparent 60%),
        var(--color-bg);
}

/* ============================================================
   页面主容器
   ============================================================ */
.page {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================================
   背景视频层
   ============================================================ */
.page__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--color-bg);
}

.page__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.page__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(58, 28, 74, 0.6) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(26, 58, 92, 0.6) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(229, 9, 20, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0a0a0f 0%, #141420 50%, #000000 100%);
}

/* 视频上方的渐变遮罩 - 已去除，让视频背景完全清爽展示 */
.page__overlay {
    display: none;
}

/* ============================================================
   顶部导航栏
   ============================================================ */
.header {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0;
    animation: fadeInDown 0.8s ease 0.1s both;
}

.header__logo {
    display: inline-flex;
    align-items: center;
    /* ★★★ LOGO 容器尺寸 - 正方形 50px ★★★ */
    /* 想改 LOGO 大小：改这一行的高度（同步改 width） */
    width: 50px;
    height: 50px;
}

.header__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 圆角让正方形 LOGO 更柔和 */
    border-radius: 12px;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   磨砂玻璃按钮通用样式
   ============================================================ */
.glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
        var(--shadow-glass),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.glass-btn:hover,
.glass-btn:active {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
    transform: translateY(-1px);
}

.header__support-icon {
    width: 20px;       /* 控制显示大小 */
    height: 20px;
    opacity: 0.9;
    display: block;
}

/* ============================================================
   主标题区 - 顶部居中
   ============================================================ */
.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    /* ★ 减小顶部 padding，并去掉底部空白，让标题更贴近卡片区 ★ */
    padding: clamp(20px, 4vh, 36px) 20px 0;
    animation: fadeInUp 1s ease 0.3s both;
}

.hero-title-img {
  display: block;
  width: clamp(260px, 78vw, 620px);
  height: auto;
  margin: 0 auto;
  /* 因为字是黑色的，在你的深色背景上需要发光才看得清 */
  filter:
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.6))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.8));
}

/* ★ "小米"二字：小米橙渐变高亮 ★ */
.hero-title__highlight {
  background: linear-gradient(135deg, #FFB347 0%, #FF6900 50%, #FF3D00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 给渐变文字加发光效果（用 filter 实现，因为 text-shadow 不能透过透明文字） */
  filter: drop-shadow(0 0 12px rgba(255, 105, 0, 0.45))
          drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  /* 微调字间距让渐变更明显 */
  padding: 0 2px;
}

/* ============================================================
   底部内容区
   ============================================================ */
.bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 10;
    padding: 0 20px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: fadeInUp 1s ease 0.5s both;
}

.bottom-bar__subtitle {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-text-soft);
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.download-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    border-radius: var(--radius-pill);
    /* ★ 毛玻璃风格（不再是Netflix红填充） ★ */
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-border);
    color: #fff;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow:
        var(--shadow-glass),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.download-trigger:hover,
.download-trigger:active {
    transform: translateY(-2px);
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.download-trigger__icon {
    font-size: 18px;
    color: var(--color-accent);  /* 闪电图标用米白色，呼应主题 */
}

/* ============================================================
   下载弹窗
   ============================================================ */
.download-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.download-sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
}

.download-sheet__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.download-sheet.is-open .download-sheet__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.download-sheet__inner {
    background: rgba(20, 20, 32, 0.85);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-top: 1px solid var(--glass-border);
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 28px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0));
    max-height: 80vh;
    overflow-y: auto;
}

.download-sheet__handle {
    width: 44px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 18px;
}

/* 标题栏：左关闭 + 中标题 + 右倒计时 */
.download-sheet__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.download-sheet__close {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.download-sheet__close svg {
    width: 12px;
    height: 12px;
    opacity: 0.85;
}

.download-sheet__title {
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 1px;
}

.download-sheet__countdown {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
    min-width: 38px;
    text-align: center;
}

.line-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.line-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.line-item:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-strong);
}

.line-item__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.line-item__icon svg {
    width: 100%;
    height: 100%;
}

.line-item__info {
    flex: 1;
    min-width: 0;
}

.line-item__name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.line-item__ping {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.line-item__ping-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #06d6a0;
    animation: pingPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px currentColor;
}

.line-item__ping--fast .line-item__ping-dot { background: #06d6a0; }
.line-item__ping--medium .line-item__ping-dot { background: #ffd166; }
.line-item__ping--slow .line-item__ping-dot { background: #ff7e5f; }

@keyframes pingPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.line-item__btn {
    flex-shrink: 0;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    /* ★ 毛玻璃风（保留淡淡红色调表示这是下载动作）★ */
    background: rgba(229, 9, 20, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 9, 20, 0.4);
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.line-item__btn:hover,
.line-item__btn:active {
    transform: scale(1.05);
    background: rgba(229, 9, 20, 0.4);
    border-color: rgba(229, 9, 20, 0.6);
}


/* ============================================================
   ★★★ 滚筒卡片展示（核心展示功能） ★★★
   ============================================================
   原理：6 张卡片均匀分布在一个 3D 圆筒的圆周上，
   每张卡片绕中心轴旋转 60° (360°/6)。
   圆筒持续旋转，最前面那张卡片始终面向用户。
   黄金比例：卡片宽 240px，高 388px (240 × 1.618)
   ============================================================ */

/* 整个展示舞台（容器） */
.drum-stage {
    position: absolute;
    /* ★ 滚筒位置：让"卡片+caption"整体居中在标题与下载按钮之间 ★ */
    /* stage 自带 130px 余量给 caption，所以几何中心要再往下偏移 ~30px */
    top: calc(50vh + 30px);
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 100%;
    /* ★★★ 卡片尺寸（黄金比例 1:1.618，自适应屏幕） ★★★ */
    /* 用 min() 确保大屏不会过大、小屏会缩小 */
    /* 默认：屏幕宽度 × 0.42（小屏自动缩小，最大 180px） */
    --card-w: min(42vw, 180px);
    --card-h: calc(var(--card-w) * 1.618);
    /* 滚筒半径同比缩小 */
    --drum-radius: calc(var(--card-w) * 0.94);
    height: calc(var(--card-h) + 130px);
    perspective: 1400px;
    perspective-origin: center 40%;
}

/* ★★★ 小屏适配：屏幕高度小于 700px 时滚筒进一步缩小并上移 ★★★ */
/* 避免在 iPhone SE 等小屏上和标题、副标题重叠 */
@media (max-height: 700px) {
    /* 标题往上贴 */
    .hero-content {
        padding-top: 12px;
    }
    .hero-title {
        font-size: clamp(24px, 8vw, 48px);
        letter-spacing: 0;
    }
    /* 滚筒缩小并相应调整 */
    .drum-stage {
        --card-w: min(30vw, 130px);
        top: calc(50vh + 20px);
    }
    /* caption 字号缩小 */
    .drum-caption__name {
        font-size: clamp(24px, 7vw, 30px);
    }
    /* 副标题增加上方间距 */
    .bottom-bar__subtitle {
        margin-top: 8px;
    }
}

/* 超小屏（高度 < 600px） */
@media (max-height: 600px) {
    .hero-content {
        padding-top: 8px;
    }
    .hero-title {
        font-size: clamp(22px, 7.5vw, 32px);
        letter-spacing: 0;
    }
    .drum-stage {
        --card-w: min(26vw, 110px);
        top: calc(50vh + 15px);
    }
}

/* 滚筒本体（3D 旋转的容器） */
.drum {
    position: absolute;
    /* 滚筒在容器顶部居中（卡片高度区域） */
    top: 0;
    left: 50%;
    transform-style: preserve-3d;
    width: var(--card-w);
    height: var(--card-h);
    margin-left: calc(var(--card-w) / -2);
    /* ★ 滚筒持续平滑旋转（JS控制 transform 角度）★ */
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    transform: rotateY(0deg);
}

/* 每张卡片 */
.drum-card {
    position: absolute;
    inset: 0;
    /* 关键：把卡片绕Y轴旋转一定角度，并往前移到圆筒表面 */
    /* --angle 由 nth-child 控制（0/60/120/180/240/300 度） */
    transform:
        rotateY(var(--angle))
        translateZ(var(--drum-radius));
    transform-style: preserve-3d;
    backface-visibility: hidden;  /* 卡片背面不显示（像贴在圆筒外侧）*/
    transition: opacity 0.6s ease;
}

/* 6张卡片在圆周上均匀分布：360° / 6 = 60° */
.drum-card:nth-child(1) { --angle: 0deg; }
.drum-card:nth-child(2) { --angle: 60deg; }
.drum-card:nth-child(3) { --angle: 120deg; }
.drum-card:nth-child(4) { --angle: 180deg; }
.drum-card:nth-child(5) { --angle: 240deg; }
.drum-card:nth-child(6) { --angle: 300deg; }

/* 卡片内容 - 满铺图片/emoji */
.drum-card__inner {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    background: rgba(20, 20, 32, 0.7);
    padding: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Emoji 满铺 - 大小跟随卡片尺寸自适应 */
.drum-card__emoji {
    font-size: calc(var(--card-w) * 0.62);
    line-height: 1;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* ★★★ 6张卡片的背景图（图片满铺卡片）★★★ */
/* 想换图：把 url() 里的路径改成你的图片路径 */
.drum-card--qipai .drum-card__inner {
    background: url('../assets/card-qipai.jpg') center/cover no-repeat;
}
.drum-card--dianzi .drum-card__inner {
    background: url('../assets/card-dianzi.jpg') center/cover no-repeat;
}
.drum-card--zhenren .drum-card__inner {
    background: url('../assets/card-zhenren.jpg') center/cover no-repeat;
}
.drum-card--tiyu .drum-card__inner {
    background: url('../assets/card-tiyu.jpg') center/cover no-repeat;
}
.drum-card--buyu .drum-card__inner {
    background: url('../assets/card-buyu.jpg') center/cover no-repeat;
}
.drum-card--caipiao .drum-card__inner {
    background: url('../assets/card-caipiao.jpg') center/cover no-repeat;
}

/* ★★★ 滚筒下方的文字区（标题 + slogan） ★★★ */
.drum-caption {
    position: absolute;
    /* 定位到滚筒下方 */
    top: calc(var(--card-h) + 30px);
    left: 0;
    right: 0;
    text-align: center;
    /* JS 切换文字时的过渡 */
    transition: opacity 0.4s ease;
}

.drum-caption.is-changing {
    opacity: 0;
}

/* 中文标题 - 大、清晰，自适应屏幕 */
.drum-caption__name {
    font-family: var(--font-display);
    font-size: clamp(28px, 9vw, 38px);
    font-weight: 700;
    color: #fff;
    letter-spacing: clamp(4px, 2vw, 8px);
    margin-bottom: 10px;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.8),
        0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Slogan */
.drum-caption__slogan {
    font-family: var(--font-display);
    font-size: clamp(12px, 3.5vw, 15px);
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: clamp(2px, 0.7vw, 3px);
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* 兜底：旧的飘卡和堆叠样式都隐藏 */
.float-cards, .card-stack { display: none; }



@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   微信打开提示遮罩
   ============================================================ */
.wechat-tip {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
}

.wechat-tip.is-active {
    display: flex;
}

.wechat-tip__inner {
    position: relative;
    text-align: center;
    color: #fff;
    max-width: 320px;
}

.wechat-tip__arrow {
    position: absolute;
    top: -120px;
    right: 0;
    width: 80px;
    height: 80px;
}

.wechat-tip__arrow svg {
    width: 100%;
    height: 100%;
    color: var(--color-primary);
}

.wechat-tip__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.wechat-tip__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-soft);
    margin-bottom: 24px;
    font-weight: 400;
}

.wechat-tip__step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    font-size: 14px;
    font-weight: 500;
}

.wechat-tip__step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

/* ============================================================
   全局加载遮罩
   ============================================================ */
.loading-mask {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.loading-mask.is-active {
    display: flex;
}

.loading-mask__spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}