/* ============ ZCP2026 宣传片 ============ */
:root {
  --accent: #ff3b2f;
  --accent-soft: rgba(255, 59, 47, 0.35);
  --bg: #05060a;
  --panel: rgba(10, 12, 18, 0.72);
  --line: rgba(255, 255, 255, 0.09);
  --txt: #eef0f4;
  --txt-dim: rgba(238, 240, 244, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }
#app.hidecursor #stage { cursor: none; }

/* ---------- 电影黑边 ---------- */
.bar { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 5; transition: none; pointer-events: none; }
.bar-top { top: 0; }
.bar-bottom { bottom: 0; }

/* ---------- 字幕层 ---------- */
#captions { position: absolute; left: clamp(24px, 6vw, 90px); bottom: clamp(15vh, 18vh, 22vh); z-index: 6; pointer-events: none; opacity: 0; }
.caption { opacity: 1; }
.caption:not(:first-child) { transition: opacity 0.4s; }
#capKicker {
  font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 600;
  color: var(--accent); margin-bottom: 14px; text-shadow: 0 0 18px var(--accent-soft);
}
.cap-title {
  font-size: clamp(34px, 5.2vw, 62px); font-weight: 900; line-height: 1.12; letter-spacing: 0.06em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.85), 0 0 60px rgba(0, 0, 0, 0.5);
}
.cap-title.huge { font-size: clamp(48px, 7.5vw, 96px); letter-spacing: 0.22em; }
.cap-sub {
  margin-top: 14px; font-size: clamp(13px, 1.35vw, 17px); color: var(--txt-dim); letter-spacing: 0.14em; font-weight: 400;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9);
}
.cap-accent { width: 64px; height: 3px; margin-top: 20px; background: linear-gradient(90deg, var(--accent), transparent); box-shadow: 0 0 14px var(--accent-soft); }

/* ---------- 品牌角标 ---------- */
#brandmark {
  position: absolute; top: 22px; left: 26px; z-index: 8; display: flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.24em; color: var(--txt-dim); opacity: 0; transition: opacity 0.6s;
}
.brandmark-moon { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6a54, #c21f14 70%); box-shadow: 0 0 12px rgba(255, 59, 47, 0.8); }

/* ---------- 顶栏 ---------- */
#topbar { position: absolute; top: 18px; right: 22px; z-index: 9; display: flex; gap: 10px; opacity: 0; transition: opacity 0.4s; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; font-size: 12.5px; letter-spacing: 0.14em;
  color: var(--txt-dim); background: rgba(8, 9, 14, 0.55); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(10px); transition: all 0.25s; font-family: inherit;
}
.chip-btn:hover { color: var(--txt); border-color: rgba(255, 255, 255, 0.25); background: rgba(20, 22, 30, 0.7); }

/* ---------- 播放器 ---------- */
#player { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 0 26px 14px; opacity: 0; transition: opacity 0.4s; }
#player::before {
  content: ""; position: absolute; inset: -40px 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 55%, transparent);
}
#chapters { position: relative; display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.chapter-chip {
  font-size: 11px; letter-spacing: 0.12em; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  color: var(--txt-dim); border: 1px solid transparent; background: transparent; transition: all 0.25s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.chapter-chip i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); opacity: 0.55; transition: 0.25s; }
.chapter-chip:hover { color: var(--txt); background: rgba(255, 255, 255, 0.06); }
.chapter-chip.active { color: var(--txt); background: rgba(255, 255, 255, 0.08); border-color: var(--line); }
.chapter-chip.active i { opacity: 1; box-shadow: 0 0 8px var(--c); }

#progressWrap { position: relative; padding: 8px 0 2px; }
#progress { position: relative; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); cursor: pointer; }
#progress:hover { height: 8px; margin-top: -1.5px; }
#progressSegs { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; display: flex; }
#progressSegs .seg { height: 100%; opacity: 0.28; }
#progressFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); box-shadow: 0 0 10px var(--accent-soft); }
#progressThumb {
  position: absolute; top: 50%; left: 0%; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-soft);
  transition: transform 0.15s; pointer-events: none;
}
#progressWrap:hover #progressThumb, #progressWrap.scrubbing #progressThumb { transform: translate(-50%, -50%) scale(1); }
#progressTip {
  position: absolute; bottom: 26px; transform: translateX(-50%); padding: 7px 12px; border-radius: 8px; pointer-events: none;
  background: rgba(8, 9, 14, 0.9); border: 1px solid var(--line); font-size: 12px; letter-spacing: 0.08em; white-space: nowrap;
  display: none; backdrop-filter: blur(8px);
}
#progressTip b { color: var(--accent); margin-right: 8px; }
#progressWrap:hover #progressTip { display: block; }

#controls { display: flex; align-items: center; gap: 6px; margin-top: 6px; height: 40px; }
.ctl {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
  background: transparent; color: rgba(238, 240, 244, 0.85); cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.ctl:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.ctl-gap { flex: 0 0 6px; }
.text-ctl { width: auto; padding: 0 12px; font-size: 12px; letter-spacing: 0.12em; }
#timeRead { font-size: 12.5px; letter-spacing: 0.1em; color: var(--txt-dim); margin-left: 6px; font-variant-numeric: tabular-nums; }
#timeRead #timeCur { color: var(--txt); }
.time-sep { margin: 0 7px; opacity: 0.5; }
#volBox { display: flex; align-items: center; gap: 4px; }
#vol { width: 0; opacity: 0; transition: all 0.3s var(--ease); accent-color: var(--accent); cursor: pointer; }
#volBox:hover #vol, #vol:focus { width: 84px; opacity: 1; margin-right: 6px; }

/* ---------- 终章卡片 ---------- */
#endcard { position: absolute; inset: 0; z-index: 7; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; opacity: 0; }
#endcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 88%, rgba(5, 6, 10, 0.88), rgba(5, 6, 10, 0.25) 60%, transparent); }
.endcard-inner { position: relative; text-align: center; padding-bottom: 13vh; transform: translateY(30px); }
.endcard-kicker { font-size: 12px; letter-spacing: 0.5em; color: var(--accent); margin-bottom: 18px; font-weight: 600; }
.endcard-title { font-size: clamp(56px, 9vw, 120px); font-weight: 900; letter-spacing: 0.06em; line-height: 1.04; text-shadow: 0 4px 50px rgba(0, 0, 0, 0.9); }
.endcard-title span { display: block; font-size: 0.32em; letter-spacing: 0.5em; color: var(--accent); margin-top: 10px; text-shadow: 0 0 60px var(--accent-soft), 0 4px 50px rgba(0, 0, 0, 0.9); font-weight: 800; }
.endcard-slogan { margin-top: 16px; font-size: clamp(14px, 1.5vw, 18px); color: var(--txt-dim); letter-spacing: 0.18em; }
.endcard-meta { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 12.5px; letter-spacing: 0.12em; color: var(--txt-dim); flex-wrap: wrap; }
.endcard-meta b { color: var(--txt); font-weight: 700; }
.endcard-meta i { width: 1px; height: 12px; background: var(--line); }
.endcard-actions { margin-top: 34px; display: flex; align-items: center; justify-content: center; gap: 16px; pointer-events: auto; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px; padding: 17px 44px; border-radius: 12px; text-decoration: none;
  font-size: 17px; font-weight: 700; letter-spacing: 0.22em; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ff4433, #c81e14); border: 0;
  box-shadow: 0 6px 30px rgba(255, 59, 47, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.25s var(--ease); position: relative; overflow: hidden;
}
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%); transform: translateX(-120%); animation: sheen 3.2s infinite; }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 44px rgba(255, 59, 47, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 12px; font-size: 14.5px; letter-spacing: 0.16em;
  color: var(--txt-dim); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); cursor: pointer; transition: all 0.25s; font-family: inherit;
}
.btn-ghost:hover { color: var(--txt); border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.09); }
.endcard-foot { margin-top: 30px; font-size: 11px; letter-spacing: 0.4em; color: rgba(238, 240, 244, 0.3); }

/* ---------- 闪光 / Toast ---------- */
#flash { position: absolute; inset: 0; z-index: 12; background: #fff; opacity: 0; pointer-events: none; }
#toast {
  position: absolute; left: 50%; bottom: 110px; transform: translate(-50%, 20px); z-index: 20; padding: 12px 22px;
  background: rgba(10, 12, 18, 0.92); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; letter-spacing: 0.06em;
  opacity: 0; pointer-events: none; transition: all 0.35s var(--ease); backdrop-filter: blur(12px); max-width: 80vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 加载页 ---------- */
#loading { position: absolute; inset: 0; z-index: 50; background: radial-gradient(ellipse at 50% 42%, #0c0e16, #05060a 70%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transition: opacity 0.8s; }
#loading.done { opacity: 0; pointer-events: none; }
.load-cube { width: 46px; height: 46px; position: relative; transform-style: preserve-3d; animation: cubeSpin 3.2s linear infinite; margin-bottom: 38px; }
.load-cube i { position: absolute; inset: 0; background: rgba(255, 59, 47, 0.09); border: 1px solid rgba(255, 59, 47, 0.5); box-shadow: 0 0 24px rgba(255, 59, 47, 0.12) inset; }
.load-cube i:nth-child(1) { transform: translateZ(23px); }
.load-cube i:nth-child(2) { transform: rotateY(180deg) translateZ(23px); }
.load-cube i:nth-child(3) { transform: rotateY(90deg) translateZ(23px); }
.load-cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(23px); }
.load-cube i:nth-child(5) { transform: rotateX(90deg) translateZ(23px); }
.load-cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(23px); }
@keyframes cubeSpin { 0% { transform: rotateX(-24deg) rotateY(0); } 100% { transform: rotateX(-24deg) rotateY(360deg); } }
.load-title { font-size: 42px; font-weight: 900; letter-spacing: 0.06em; }
.load-title span { color: var(--accent); text-shadow: 0 0 34px var(--accent-soft); }
.load-sub { margin-top: 10px; font-size: 13px; letter-spacing: 0.5em; color: var(--txt-dim); }
.load-track { width: min(320px, 60vw); height: 3px; background: rgba(255, 255, 255, 0.09); border-radius: 3px; margin-top: 42px; overflow: hidden; }
.load-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #ff4433, #ff8a3d); border-radius: 3px; transition: width 0.3s; box-shadow: 0 0 12px rgba(255, 59, 47, 0.7); }
.load-step { margin-top: 14px; font-size: 12px; letter-spacing: 0.22em; color: var(--txt-dim); height: 16px; }
.load-start {
  margin-top: 34px; padding: 16px 74px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 19px; font-weight: 800; letter-spacing: 0.5em; text-indent: 0.5em; color: #fff;
  background: linear-gradient(135deg, #ff4433, #c81e14);
  box-shadow: 0 6px 30px rgba(255, 59, 47, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: startPulse 2.2s ease-in-out infinite; transition: transform 0.2s var(--ease), box-shadow 0.25s;
}
.load-start:hover { transform: translateY(-2px); box-shadow: 0 10px 44px rgba(255, 59, 47, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.load-start:active { transform: translateY(0); }
@keyframes startPulse { 0%, 100% { box-shadow: 0 6px 30px rgba(255, 59, 47, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); } 50% { box-shadow: 0 6px 44px rgba(255, 59, 47, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25); } }
.load-meta { margin-top: 8px; font-size: 11px; letter-spacing: 0.2em; color: rgba(238, 240, 244, 0.3); }

/* ---------- WebGL 缺失 ---------- */
#nogl { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 2; background: #05060a; font-size: 15px; letter-spacing: 0.1em; }

.hud-hidden { opacity: 0 !important; pointer-events: none !important; }
#captions { transition: opacity 0.5s; }

@media (max-width: 760px) {
  #captions { bottom: 24vh; }
  .chapter-chip { padding: 4px 8px; }
  #volBox:hover #vol { width: 60px; }
  .endcard-actions { flex-direction: column; }
  #brandmark { display: none; }
}