/* china.css — 首页三层视差（中国新年）
   远：烟花星空 | 中：灯笼街景 | 近：红灯笼特写
   滚动时按不同速度位移，形成立体视差 */
:root { --cn-shade: #f3fbf8; }
[data-theme="dark"] { --cn-shade: #0d1a16; }

.cn-parallax {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none; background: #0a0d0c;
}
.cn-layer {
  position: absolute; inset: 0; will-change: transform;
  transform: translate3d(0, 0, 0);
}
.cn-layer video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}

/* 远层：烟花夜空，最慢 */
.cn-layer--sky video { filter: brightness(.68) saturate(.95); opacity: .9; }

/* 中层：街景灯笼，中速，顶部渐隐融入夜空 */
.cn-layer--mid {
  left: -6%; right: -6%; top: auto; bottom: -2%; height: 62%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 26%, #000 58%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 26%, #000 58%, #000 100%);
}
.cn-layer--mid video { object-position: center 74%; filter: saturate(1.02) brightness(.9); }

/* 近层：红灯笼特写，最快，底部压暗 */
.cn-layer--fg {
  left: auto; right: -8%; top: auto; bottom: -12%; width: 46%; height: 60%;
  -webkit-mask-image: radial-gradient(72% 72% at 52% 56%, #000 38%, rgba(0,0,0,.55) 62%, transparent 82%);
          mask-image: radial-gradient(72% 72% at 52% 56%, #000 38%, rgba(0,0,0,.55) 62%, transparent 82%);
}
.cn-layer--fg video { object-position: 62% 46%; filter: saturate(1.06) brightness(.95); }

/* 文字保护层 */
.cn-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(0, 0, 0, .16);
}
[data-theme="dark"] .cn-vignette { background: rgba(0, 0, 0, .20); }

/* 首屏内容压在视差层之上 */
#xyHero > .mx-wrap { position: relative; z-index: 2; }

/* 轻量滚动入场（非首屏） */
.cn-reveal { opacity: 0; transform: translateY(18px); }
.cn-reveal.cn-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,.8,.3,1), transform .6s cubic-bezier(.22,.8,.3,1);
}

/* 窄屏减少一层，控制解码压力 */
@media (max-width: 640px) {
  .cn-layer--fg { display: none; }
  .cn-layer--mid { height: 66%; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-parallax { display: none; }
  .cn-reveal { opacity: 1; transform: none; }
  #xyHero { background: linear-gradient(180deg, #0f1513, #241a16); }
}

/* 移除首屏悬浮玻璃卡片，让背景视频完整露出
   只保留：顶部导航、主标题、副标题、按钮 */
#xyHero .mx-visual { display: none !important; }
#xyHero .mx-start-grid { grid-template-columns: minmax(0, 1fr); }

/* 首屏文字在深色视频上的可读处理（不改排版） */
#xyHero .mx-title { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.42); }
#xyHero .mx-title em {
  background: linear-gradient(100deg, #ffe4b5, #ffb27a 48%, #ff8f6b);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
#xyHero .mx-lead { color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.42); }
#xyHero .mx-kicker { color: #f3cf95; }
#xyHero .mx-link { color: #ffdca5; }
#xyHero .mx-link:hover { color: #fff; }
#xyHero .mx-scroll-hint { color: rgba(255,255,255,.72); }
#xyHero .mx-btn.primary { box-shadow: 0 12px 30px -12px rgba(0,0,0,.55); }

/* 移除视频上方的极光光斑与 three.js 画布，避免白色/浅色波形遮挡视频 */
#xyHero .mx-aurora,
#xyHero .xy-canvas { display: none !important; }

/* ==========================================================================
   内页年味视频横幅（教程总览 / 章节页 / 音乐台 / 联系页）
   复用首页三层素材，短幅呈现；滚动视差由 china.js 挂载
   ========================================================================== */
.cn-video-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cn-video-host > .cn-video-layers {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #0a0d0c;
}
.cn-v {
  position: absolute; inset: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.cn-v video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.cn-v--sky video { filter: brightness(.70) saturate(.95); }
.cn-v--mid {
  left: -6%; right: -6%; top: auto; bottom: -2%; height: 78%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 26%, #000 58%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.34) 26%, #000 58%, #000 100%);
}
.cn-v--mid video { object-position: center 74%; filter: saturate(1.02) brightness(.92); }
.cn-v--fg {
  left: auto; right: -10%; top: auto; bottom: -16%; width: 46%; height: 70%;
  -webkit-mask-image: radial-gradient(72% 72% at 52% 56%, #000 38%, rgba(0,0,0,.55) 62%, transparent 82%);
          mask-image: radial-gradient(72% 72% at 52% 56%, #000 38%, rgba(0,0,0,.55) 62%, transparent 82%);
}
.cn-v--fg video { object-position: 62% 46%; filter: saturate(1.06) brightness(.96); }
.cn-v-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,12,11,.12), rgba(8,12,11,.34) 62%, rgba(8,12,11,.52));
}

/* 视频横幅上的文字统一提亮 */
.cn-video-host h1,
.cn-video-host .mx-h2 { color: #fff !important; text-shadow: 0 2px 22px rgba(0,0,0,.48); }
.cn-video-host .mx-kicker,
.cn-video-host .music-eyebrow { color: #f3cf95 !important; }
.cn-video-host .edu-sub,
.cn-video-host .edu-chapter-sub,
.cn-video-host .page-head p { color: rgba(255,255,255,.88) !important; }

/* 教程总览头图 */
.cn-video-host.edu-hero {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #12100e;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 26px 56px -34px rgba(0,0,0,.65);
}
.cn-video-host.edu-hero::before,
.cn-video-host.edu-hero::after { display: none; }
.cn-video-host.edu-hero .edu-stats b { color: #fff; }
.cn-video-host.edu-hero .edu-stats span { color: rgba(255,255,255,.72); }
.cn-video-host.edu-hero .edu-start-link a { color: #ffdca5; }
.cn-video-host.edu-hero .edu-seal { color: rgba(255,255,255,.26); }

/* 章节页头图 */
.cn-video-host.edu-chapter-head {
  min-height: 240px;
  background: #12100e;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 52px -34px rgba(0,0,0,.65);
}
.cn-video-host.edu-chapter-head::after { display: none; }
.cn-video-host.edu-chapter-head .breadcrumb,
.cn-video-host.edu-chapter-head .breadcrumb a { color: rgba(255,255,255,.78); }
.cn-video-host.edu-chapter-head .edu-chapter-badge {
  background: rgba(255,255,255,.16); color: #ffe9c4;
}
.cn-video-host.edu-chapter-head .edu-chapter-time { color: rgba(255,255,255,.7); }
.cn-video-host.edu-chapter-head .edu-progress { background: rgba(255,255,255,.22); }
.cn-video-host.edu-chapter-head .edu-prereq { color: rgba(255,255,255,.82); }
.cn-video-host.edu-chapter-head .edu-prereq a { color: #ffdca5; }

/* 音乐台头图 */
.cn-video-host.music-room-hero {
  background: #12100e;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 26px 56px -36px rgba(0,0,0,.65);
}
.cn-video-host.music-room-hero .music-room-bg { z-index: 0; opacity: .35; }
.cn-video-host.music-room-hero .music-now,
.cn-video-host.music-room-hero .music-queue { position: relative; z-index: 1; }
.cn-video-host.music-room-hero #roomTitle { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.cn-video-host.music-room-hero #roomArtist { color: rgba(255,255,255,.82); }
.cn-video-host.music-room-hero .music-eyebrow { color: #f3cf95; }

/* 联系页头图 */
.cn-video-host.contact-head {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: #12100e;
  box-shadow: 0 26px 56px -36px rgba(0,0,0,.65);
}
.cn-video-host.contact-head .pill {
  background: rgba(255,255,255,.16); color: #ffe9c4; border-color: rgba(255,255,255,.22);
}
.cn-video-host.contact-head h1 { margin: 10px 0 6px; }

@media (max-width: 640px) {
  .cn-video-host > .cn-video-layers .cn-v--fg { display: none; }
  .cn-video-host.edu-hero { min-height: 260px; }
  .cn-video-host.edu-chapter-head { min-height: 200px; }
  .cn-video-host.contact-head { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-video-host > .cn-video-layers { display: none; }
  .cn-video-host.edu-hero,
  .cn-video-host.edu-chapter-head,
  .cn-video-host.music-room-hero,
  .cn-video-host.contact-head {
    background: linear-gradient(160deg, #1c1512, #2a1c17);
  }
}

/* ==========================================================================
   首页下三屏：各自独立的年味循环视频背景（灯笼夜 / 烟花 / 水墨）
   ========================================================================== */
.mx-panel.cn-panel-video { background: #0b0f0e; }
.cn-panel-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; background: #0b0f0e;
}
.cn-panel-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .9s ease;
}
.cn-panel-media.is-ready video { opacity: 1; }
.cn-panel-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,9,.62) 0%, rgba(6,10,9,.34) 42%, rgba(6,10,9,.66) 100%);
}
.mx-panel.cn-panel-video > .mx-wrap { position: relative; z-index: 2; }

/* 深色视频屏：文字提亮，卡片保持浅色玻璃 */
.cn-panel-video .mx-h2 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.cn-panel-video .mx-sub { color: rgba(255,255,255,.86); }
.cn-panel-video .mx-kicker { color: #f3cf95; }
.cn-panel-video .mx-stats { border-top-color: rgba(255,255,255,.24); }
.cn-panel-video .mx-stats b { color: #fff; }
.cn-panel-video .mx-stats span { color: rgba(255,255,255,.72); }
.cn-panel-video .mx-btn.ghost {
  color: #ffe9c4; background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.cn-panel-video .mx-link { color: #ffdca5; }

/* 第三屏是浅色水墨，保持深色文字 */
.cn-panel-video.cn-panel-video--light { background: #eef3ee; }
.cn-panel-video--light .cn-panel-shade {
  background: linear-gradient(180deg, rgba(250,247,238,.58) 0%, rgba(250,247,238,.24) 42%, rgba(250,247,238,.66) 100%);
}
.cn-panel-video--light .mx-h2 { color: #213b34; text-shadow: 0 1px 18px rgba(255,255,255,.62); }
.cn-panel-video--light .mx-sub { color: #46645a; }
.cn-panel-video--light .mx-kicker { color: #4f8a7b; }

@media (max-width: 640px) {
  .cn-panel-shade { background: linear-gradient(180deg, rgba(6,10,9,.68), rgba(6,10,9,.42) 45%, rgba(6,10,9,.72)); }
}

@media (prefers-reduced-motion: reduce) {
  .cn-panel-media { display: none; }
}