/* ══════════════════════════════════════════════
   赣味数智消费博览会 · H5 视觉识别系统
   设计系统：辣椒红 #C8321E / 亮椒红 #F03A22
             稻穗金 #E6B54A / 青花蓝 #2B5C9E / 数智青 #17D1E0
   ══════════════════════════════════════════════ */
:root{
  --red-deep:#C8321E;
  --red:#F03A22;
  --gold:#E6B54A;
  --gold-bright:#FFD66B;
  --blue:#2B5C9E;
  --cyan:#17D1E0;
  --ink:#FFF9F0;
  --ink-soft:#FFE7CE;
  --serif:"Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#8f1608;
  overflow-x:hidden;
}
/* 全站统一底图：活力国潮底图 + 红调渐变蒙版 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    linear-gradient(178deg, rgba(196,42,18,.78) 0%, rgba(178,30,12,.86) 46%, rgba(132,20,7,.92) 100%),
    url("../assets/bg-main.jpg") center/cover no-repeat;
}
.wrap{max-width:480px;margin:0 auto;position:relative}

/* ── 数据雨画布 ── */
#rain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}

/* ── 通用：入场动画（由翻页引擎 activateContent 触发，按 --d 逐块延迟）── */
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1.3s ease var(--d,0s),transform 1.3s cubic-bezier(.22,.9,.3,1) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ══════ 屏幕骨架 ══════ */
.screen{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  padding:max(20px, env(safe-area-inset-top)) 24px 14px;
  position:relative;
}
/* 全屏 H5：屏内滚动不显示滚动条（滚轮 / 触摸仍可滚）。
   与 s05 结果卡、s07 细节面板、s10 横滑台的内层处理保持一致，
   避免在竖屏整屏版式里露出右侧一条浏览器滚动条。 */
.screen{scrollbar-width:none;-ms-overflow-style:none}
.screen::-webkit-scrollbar{width:0;height:0;display:none}
.s-head{display:flex;justify-content:flex-end;align-items:baseline;margin-bottom:18px}
/* 全片已移除页码：页眉只剩右侧分类标签，用 flex-end 把它钉在右缘 */
/* 窄屏（视口 < 544px）时，右上角固定音乐按钮会压住 .cat 标签的尾部。
   给页眉留出 40px 右侧空档；宽屏下 wrap 居中、按钮远在视口右侧，无需让位。 */
@media (max-width:560px){.s-head{padding-right:40px}}
.s-head .cat{font-size:13px;letter-spacing:.2em;color:var(--ink-soft);opacity:.85}
.screen h2{
  font-family:var(--serif);font-size:clamp(24px,6.6vw,31px);
  font-weight:900;letter-spacing:.02em;line-height:1.3;
  text-shadow:0 2px 14px rgba(120,10,0,.55);margin-bottom:14px;
}
.lead{font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:20px}
.pic{
  border-radius:16px;overflow:hidden;margin-bottom:8px;
  box-shadow:0 10px 30px rgba(90,8,0,.45),0 0 0 1px rgba(255,230,180,.22) inset;
  clip-path:inset(8% 6% 8% 6% round 16px);
  transition:clip-path 1.4s cubic-bezier(.25,.8,.25,1) var(--d,0s);
}
.pic.in{clip-path:inset(0 0 0 0 round 16px)}
.pic img{width:100%;aspect-ratio:16/10.5;object-fit:cover;display:block;transform:scale(1.14);transition:transform 1.8s ease var(--d,0s)}
.pic.in img{transform:scale(1)}
.pic-red{box-shadow:0 10px 30px rgba(90,8,0,.45),0 0 0 2px rgba(240,58,34,.55),0 0 0 6px rgba(240,58,34,.16)}
.pic-blue{box-shadow:0 10px 30px rgba(90,8,0,.45),0 0 0 2px rgba(43,92,158,.6),0 0 0 6px rgba(43,92,158,.18)}
.pic-cyan{box-shadow:0 10px 30px rgba(90,8,0,.45),0 0 0 2px rgba(23,209,224,.55),0 0 0 6px rgba(23,209,224,.16)}

/* ── 卡片 ── */
.cards{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.card{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,235,200,.2);
  border-radius:14px;padding:14px 16px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .35s ease,background .35s ease;
}
.card:active{transform:scale(.97);background:rgba(255,255,255,.2)}
.card h3{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.card h3 b{color:var(--gold-bright);font-family:var(--serif);margin-right:8px}
.card p{font-size:13.5px;line-height:1.7;color:var(--ink-soft)}

/* ── 页脚 ── */
.s-foot{
  margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(255,240,210,.28);
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--ink-soft);letter-spacing:.06em;
}

/* ══════ 印章组件 ══════ */
.seal{
  position:relative;width:210px;height:210px;margin:0 auto;
  border-radius:50%;
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 34px rgba(230,181,74,.35),0 0 0 8px rgba(230,181,74,.1);
}
.seal b{
  font-family:var(--serif);font-weight:900;color:var(--ink);
  font-size:96px;line-height:1;text-shadow:0 4px 24px rgba(120,10,0,.6);
}
.seal-dots{position:absolute;inset:0;animation:spin 26s linear infinite}
.seal-dots i{
  position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 10px var(--cyan);
  animation:pulse 2.4s ease-in-out infinite;
}
.seal-dots i:nth-child(1){left:50%;top:0}
.seal-dots i:nth-child(2){left:85.4%;top:14.6%;animation-delay:.3s}
.seal-dots i:nth-child(3){left:100%;top:50%;animation-delay:.6s}
.seal-dots i:nth-child(4){left:85.4%;top:85.4%;animation-delay:.9s}
.seal-dots i:nth-child(5){left:50%;top:100%;animation-delay:1.2s}
.seal-dots i:nth-child(6){left:14.6%;top:85.4%;animation-delay:1.5s}
.seal-dots i:nth-child(7){left:0;top:50%;animation-delay:1.8s}
.seal-dots i:nth-child(8){left:14.6%;top:14.6%;animation-delay:2.1s}

/* ══════ 01 封面（整图定稿 + 流光动效层）══════ */
.cover{padding:0;overflow:hidden}
.cover-hero{
  position:absolute;inset:0;
  background:url("../assets/cover-hero.jpg") center/cover no-repeat;
}
/* 中央流苏：放射光束，亮段沿射线由近(底部)向远(印章)匀速推进 */
.fx-center{
  position:absolute;left:3%;right:3%;top:36%;height:44%;
  overflow:hidden;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 0%, #000 54%, transparent 92%);
          mask-image:radial-gradient(125% 105% at 50% 0%, #000 54%, transparent 92%);
}
.fx-center i{
  position:absolute;left:50%;top:0;width:2.5px;height:100%;
  margin-left:-1.25px;transform-origin:50% 0;transform:rotate(var(--a));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.fx-center i:nth-child(even){width:5px;margin-left:-2.5px;opacity:.5}
.fx-center i::after{
  content:"";position:absolute;left:0;right:0;top:0;height:30%;
  background:linear-gradient(to bottom, transparent, rgba(170,232,255,.95) 45%, transparent);
  animation:flowFar 1.8s linear infinite var(--d,0s);
}
@keyframes flowFar{
  0%   {transform:translateY(320%);opacity:0}
  12%  {opacity:1}
  88%  {opacity:1}
  100% {transform:translateY(-32%);opacity:0}
}
/* 右侧光流：向中心汇聚 */
.fx-right{
  position:absolute;right:-2%;top:31%;width:40%;height:28%;
  overflow:hidden;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask-image:linear-gradient(255deg, #000 22%, transparent 82%);
          mask-image:linear-gradient(255deg, #000 22%, transparent 82%);
  background:repeating-linear-gradient(112deg,
    transparent 0 30px, rgba(110,200,255,.4) 30px 33px, transparent 33px 84px);
  animation:flowSide 2.4s linear infinite;
}
/* 数据粒子闪光 */
.fx-spark{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
  mix-blend-mode:screen;pointer-events:none;
  animation:pulse 2.2s ease-in-out infinite;
}
.fx-spark.sp1{left:38%;top:47%;animation-delay:0s}
.fx-spark.sp2{left:62%;top:52%;animation-delay:.5s;width:5px;height:5px}
.fx-spark.sp3{left:44%;top:60%;animation-delay:1s;width:4px;height:4px}
.fx-spark.sp4{left:70%;top:42%;animation-delay:1.5s;width:6px;height:6px}
@keyframes flowSide{from{background-position:0 0}to{background-position:168px 0}}

/* ══════════════════════════════════════════════
   导览页：煨煨导游 + 三座 3D 悬浮岛
   ══════════════════════════════════════════════ */
/* ── 煨煨（左上角 · 3D 浮空形象）── */
.wawa-wrap{position:absolute;left:14px;top:64px;display:flex;align-items:flex-end;gap:8px;z-index:30;perspective:700px}
.wawa-fig{position:relative;flex:none;width:102px}
.wawa-fig picture{display:block}
.wawa-fig img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 14px rgba(60,4,0,.5));
  transform-origin:50% 92%;
  animation:wawa3d 4.8s ease-in-out infinite;
}
.wawa-shadow{
  position:absolute;left:15%;bottom:-7px;width:70%;height:13px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(70,4,0,.55), rgba(70,4,0,0) 72%);
  animation:wawaShadow 4.8s ease-in-out infinite;
}
.bubble{
  position:relative;width:168px;margin-bottom:24px;
  background:#FFF6E8;color:#8F1608;
  font-size:13px;line-height:1.65;
  padding:10px 13px;border-radius:14px;
  border:1.5px solid var(--gold);
  box-shadow:0 6px 18px rgba(60,5,0,.35);
}
.bubble::before{
  content:"";position:absolute;left:-7px;top:15px;width:12px;height:12px;
  background:#FFF6E8;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
}
.caret{display:inline-block;width:2px;height:12px;background:#8F1608;margin-left:2px;vertical-align:-2px;animation:caretBlink .8s step-end infinite}
.caret.done{display:none}

/* ── 3D 场景：三馆自上而下、左右错位，间距由 .conn 撑开 ── */
.guide .scene{
  position:relative;flex:1;min-height:0;margin:86px 0 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;perspective:900px;
}
.isle{position:relative;width:100%;height:112px;flex:none}

/* 悬浮岛面（rotateX 压成椭圆平台 + 多层阴影做厚度与投影）*/
.disc{
  position:absolute;left:var(--ix,50%);top:10px;width:124px;height:124px;margin-left:-62px;border-radius:50%;
  transform:rotateX(58deg);
  background:radial-gradient(circle at 42% 34%, var(--c1), var(--c2));
  box-shadow:
    0 6px 0 var(--c3), 0 12px 0 var(--c4), 0 18px 0 rgba(30,5,0,.5),
    0 24px 26px rgba(30,5,0,.45),
    inset 0 0 0 2px rgba(255,240,210,.32);
  animation:discFloat 5.4s ease-in-out infinite var(--fz,0s);
}
.isl-red{--c1:#FF7A55;--c2:#C8321E;--c3:#8E1F10;--c4:#6A160B}
.isl-blue{--c1:#6FA3DE;--c2:#2B5C9E;--c3:#1E4272;--c4:#152F53}
.isl-cyan{--c1:#4FE0EA;--c2:#12A5B4;--c3:#0B7C88;--c4:#085A63}

/* 岛上建筑群（与地面同步浮动，内部小建筑再各自微浮）*/
.art{
  position:absolute;left:var(--ix,50%);top:4px;width:132px;height:80px;margin-left:-66px;
  animation:artFloat 5.4s ease-in-out infinite var(--fz,0s);
}
.art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 5px 8px rgba(30,5,0,.42))}

/* 馆名牌：靠左的岛牌挂右侧，靠右的岛牌挂左侧，形成错落节奏 */
.tag{
  position:absolute;left:var(--ix,50%);top:54px;
  font-size:11px;font-weight:700;letter-spacing:.03em;color:#FFF3D6;white-space:nowrap;
  background:rgba(40,8,2,.55);border:1px solid rgba(255,235,200,.4);
  border-radius:999px;padding:3px 10px;backdrop-filter:blur(4px);
  animation:tagPulse 3s ease-in-out infinite var(--fz,0s);
}
.isle.rt .tag{margin-left:64px}
.isle.lf .tag{margin-left:-58px;transform:translateX(-100%)}

/* 馆间活力虚线动线：既连两岛又撑开间隔（弧线外扩，跑动光点）*/
.conn{width:100%;height:56px;flex:none;display:block;overflow:visible}
.rte{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 9;animation:dashRun 1.6s linear infinite}
.rte-red{stroke:#FFA98C;filter:drop-shadow(0 0 2px rgba(255,120,80,.9))}
.rte-blue{stroke:#A9D5FF;filter:drop-shadow(0 0 2px rgba(120,180,255,.9))}
.rte-cyan{stroke:#7FF0FA;filter:drop-shadow(0 0 2px rgba(60,220,240,.9))}
.runner{fill:#FFF6E0;filter:drop-shadow(0 0 3px rgba(255,240,200,.95))}

/* 岛内元素动画 */
.art .sp path{
  stroke:#FFE7CE;stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:12 10;opacity:0;
  animation:steamUp 2.8s ease-in-out infinite;
}
.art .sp path:nth-child(2){animation-delay:.45s}
.art .sp path:nth-child(3){animation-delay:.9s}
.art .halo{transform-box:fill-box;transform-origin:center;animation:spin 9s linear infinite}
.art .bar{transform-box:fill-box;transform-origin:bottom;animation:barRise 1.8s ease-in-out infinite}
.art .b2{animation-delay:.3s}
.art .b3{animation-delay:.6s}
.art .fb{transform-box:fill-box;transform-origin:center;animation:fbFloat 4.6s ease-in-out infinite var(--fd,0s)}
.art .pp{transform-box:fill-box;transform-origin:center;animation:pulseDot 2s ease-in-out infinite}

.guide-tip{
  font-size:13px;line-height:1.7;color:var(--ink-soft);
  text-align:center;margin:26px 4px 0;
}

/* 矮屏手机：压缩三岛场景高度，保证一屏装下 */
@media (max-height:720px){
  .wawa-wrap{top:54px;left:12px}
  .wawa-fig{width:87px}
  .bubble{width:154px;margin-bottom:20px;font-size:12.5px}
  .guide .scene{margin-top:64px}
  .isle{height:98px}
  .disc{top:8px;width:106px;height:106px;margin-left:-53px}
  .art{top:5px;width:116px;height:70px;margin-left:-58px}
  .tag{top:46px}
  .isle.rt .tag{margin-left:56px}
  .isle.lf .tag{margin-left:-50px}
  .conn{height:40px}
}

/* ── 关键帧 ── */
@keyframes wawa3d{
  0%,100%{transform:translateY(-5px) rotateY(-7deg) rotateZ(-1.2deg) scale(1)}
  50%    {transform:translateY(4px)  rotateY(7deg)  rotateZ(1.2deg) scale(1.02)}
}
@keyframes wawaShadow{
  0%,100%{transform:scale(.84);opacity:.5}
  50%    {transform:scale(1.1);opacity:.9}
}
@keyframes steamUp{0%{stroke-dashoffset:22;opacity:0}25%{opacity:.85}100%{stroke-dashoffset:-22;opacity:0}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes caretBlink{50%{opacity:0}}
@keyframes dashRun{to{stroke-dashoffset:-32}}
@keyframes discFloat{0%,100%{transform:translateY(-4px) rotateX(58deg)}50%{transform:translateY(4px) rotateX(58deg)}}
@keyframes artFloat{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes fbFloat{0%,100%{transform:translateY(-2.5px)}50%{transform:translateY(2.5px)}}
@keyframes pulseDot{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.3);opacity:1}}
@keyframes barRise{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes tagPulse{0%,100%{border-color:rgba(255,235,200,.4)}50%{border-color:rgba(255,214,107,.9)}}

/* ══════ 03 / 14 数智链路流光线 ══════ */
.chain-line{
  position:relative;height:2px;margin:18px 4px 6px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(230,181,74,.65),transparent);
  overflow:visible;
}
.chain-line i{
  position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 12px var(--gold-bright);
  animation:flowDot 3s linear infinite;
}
.chain-line i:nth-child(1){animation-delay:0s}
.chain-line i:nth-child(2){animation-delay:.6s}
.chain-line i:nth-child(3){animation-delay:1.2s}
.chain-line i:nth-child(4){animation-delay:1.8s}
.chain-line i:nth-child(5){animation-delay:2.4s}

/* ══════ 04 大印章 ══════ */
.seal-big{width:230px;height:230px;margin:6px auto 24px}
.seal-big b{font-size:110px}

/* ══════ 05 标准色 ══════ */
.swatches{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.sw{
  display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,235,200,.2);
  border-radius:14px;padding:13px 16px;
  backdrop-filter:blur(6px);
}
.sw i{
  width:56px;height:56px;border-radius:12px;flex:none;background:var(--c);
  box-shadow:0 4px 14px rgba(70,5,0,.4),0 0 0 1px rgba(255,255,255,.28) inset;
  transition:transform .35s ease;
}
.sw:hover i,.sw:active i{transform:scale(1.14)}
.sw p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.sw p b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}

/* ══════ 06 缠枝数据纹 ══════ */
.pattern-box{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,235,200,.22);
  border-radius:16px;padding:18px 10px;margin-bottom:6px;
  backdrop-filter:blur(6px);
}
.pattern{width:100%;height:auto;display:block}
.pattern .vine{
  fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
}
.pattern .vine2{stroke:rgba(230,181,74,.55);stroke-width:2}
.pattern.in .vine{animation:drawVine 2.6s ease forwards}
.pattern.in .vine2{animation:drawVine 2.6s ease .4s forwards}
.pattern .nodes circle{
  fill:var(--cyan);filter:drop-shadow(0 0 5px var(--cyan));
  transform-origin:center;transform-box:fill-box;
  animation:pulse 2.2s ease-in-out infinite;
}
.pattern .nodes circle:nth-child(2){animation-delay:.4s}
.pattern .nodes circle:nth-child(3){animation-delay:.8s}
.pattern .nodes circle:nth-child(4){animation-delay:1.2s}
.pattern .nodes circle:nth-child(5){animation-delay:1.6s}

/* ══════ 15 封底 ══════ */
.backcover{justify-content:center;text-align:center}
.backcover .seal-mid{width:150px;height:150px;margin-bottom:30px}
.backcover .seal-mid b{font-size:66px}
.back-title{
  font-family:var(--serif);font-size:clamp(25px,7vw,32px);
  font-weight:900;letter-spacing:.05em;
  text-shadow:0 3px 16px rgba(110,8,0,.6);
}
.back-sub{font-family:var(--serif);color:var(--gold-bright);font-size:16px;margin-top:12px;letter-spacing:.16em;font-weight:700}
.back-when{
  margin-top:14px;display:flex;flex-direction:column;gap:3px;
  font-variant-numeric:tabular-nums;
}
.back-when span:first-child{
  font-size:14px;letter-spacing:.16em;color:#FFDDC9;
}
.back-when span:last-child{
  font-size:13.5px;letter-spacing:.1em;color:rgba(255,231,206,.82);
}
.back-when span:last-child::before,
.back-when span:last-child::after{content:"·";margin:0 7px;color:rgba(255,214,107,.7)}
.back-text{font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:26px 6px 0}
.qr-box{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:10px}
.qr-frame{
  width:118px;height:118px;border-radius:12px;
  border:2px dashed rgba(255,225,160,.75);
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  animation:qrBreath 2.6s ease-in-out infinite;
}
.qr-frame span{font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.6;opacity:.9}
.qr-box p{font-size:13px;letter-spacing:.08em;color:var(--ink-soft)}
.share-btn{
  margin-top:30px;border:none;cursor:pointer;
  background:linear-gradient(135deg,#F5C86B,#E6A63A);
  color:#5d1403;font-family:var(--sans);
  font-size:15.5px;font-weight:700;letter-spacing:.1em;
  padding:13px 46px;border-radius:999px;
  box-shadow:0 8px 24px rgba(150,60,0,.4);
  transition:transform .3s ease,box-shadow .3s ease;
}
.share-btn:active{transform:scale(.95)}
.share-btn:hover{box-shadow:0 10px 30px rgba(150,60,0,.55)}

/* ══════ 右侧导航点 ══════ */
#dots{
  position:fixed;right:9px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:7px;z-index:60;
}
#dots i{
  width:6px;height:6px;border-radius:50%;cursor:pointer;
  background:rgba(255,240,210,.4);transition:all .3s ease;
}
#dots i.on{background:var(--gold-bright);box-shadow:0 0 8px var(--gold-bright);transform:scale(1.5)}
@media (max-width:420px){#dots{display:none}}

/* ══════ 音乐按钮 ══════ */
.bgm-btn{
  position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:70;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,235,200,.45);
  background:rgba(120,15,3,.45);backdrop-filter:blur(8px);
  color:var(--gold-bright);font-size:19px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease;
}
.bgm-btn span{display:block}
.bgm-btn.playing{animation:discSpin 5s linear infinite;background:rgba(200,50,20,.6)}
.bgm-btn.playing span{animation:pulse 1.6s ease-in-out infinite}

/* ══════ Toast ══════ */
#toast{
  position:fixed;left:50%;bottom:70px;transform:translateX(-50%) translateY(20px);
  background:rgba(40,5,0,.82);color:var(--ink);font-size:13.5px;
  padding:10px 22px;border-radius:999px;border:1px solid rgba(255,235,200,.3);
  opacity:0;pointer-events:none;transition:all .4s ease;z-index:80;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════ 关键帧 ══════ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.5);opacity:1}}
@keyframes flowDot{0%{left:-4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:102%;opacity:0}}
@keyframes drawVine{to{stroke-dashoffset:0}}
@keyframes qrBreath{0%,100%{box-shadow:0 0 0 rgba(255,225,160,0)}50%{box-shadow:0 0 22px rgba(255,225,160,.4)}}
@keyframes discSpin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════
   展馆子主题 · 第 3~9 屏
   三馆融合内容：主题影片 / 赣菜馆 / 非遗馆 / 农产数字馆
   语汇：暗红木色底 · 金线 · 卷轴 · 印牌 · 数据格
   ══════════════════════════════════════════════ */
.screen.hall{
  background:linear-gradient(180deg,rgba(52,6,0,.5) 0%,rgba(26,3,0,.68) 100%);
  box-shadow:inset 0 1px 0 rgba(255,214,120,.13),inset 0 -1px 0 rgba(255,214,120,.13);
}
.screen.hall .s-head .cat{color:#FFE0A0;letter-spacing:.22em}
.screen.hall .lead{color:#FFE7CE}

/* ── 通用：小标题块 ── */
.blk{margin-top:16px}
.blk h4{
  font-family:var(--serif);font-size:15px;font-weight:700;color:var(--gold-bright);
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
}
.blk h4::before{content:"";width:5px;height:15px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold-bright),#B9761A)}
.blk p{font-size:13px;line-height:1.72;color:#FFE7CE}
.blk p b{color:#FFE0A0;font-weight:700}

/* ── 通用：数据格 ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stats.c2{grid-template-columns:repeat(2,1fr)}
.st{
  background:linear-gradient(158deg,rgba(255,214,107,.15),rgba(255,255,255,.045));
  border:1px solid rgba(255,226,160,.24);border-radius:12px;
  padding:10px 7px;text-align:center;
}
.st b{
  display:block;font-family:var(--serif);font-size:20px;font-weight:900;line-height:1.08;
  color:var(--gold-bright);text-shadow:0 2px 10px rgba(90,8,0,.55);
  font-variant-numeric:tabular-nums;
}
.st b i{font-style:normal;font-size:11px;font-weight:700;margin-left:2px;opacity:.92}
.st b.w{font-size:15.5px}
.st span{display:block;font-size:10.5px;line-height:1.45;color:rgba(255,238,216,.84);margin-top:5px}

/* ── 通用：标签 / 外链 / 题注 / 来源 ── */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chips span{font-size:11px;padding:5px 11px;border-radius:999px;letter-spacing:.03em;
  background:rgba(255,214,107,.13);border:1px solid rgba(255,226,160,.3);color:#FFE7CE}
.lk{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.lk a{
  font-size:11.5px;color:#FFE0A0;text-decoration:none;padding:4.5px 11px;border-radius:999px;
  border:1px solid rgba(246,196,83,.42);background:rgba(246,196,83,.08);
  transition:background .3s ease;
}
.lk a:active{background:rgba(246,196,83,.24)}
.lk.c{justify-content:center}
.cap{font-size:11.5px;color:rgba(255,238,216,.72);letter-spacing:.05em;text-align:center;margin-top:9px}
.src{
  margin-top:13px;padding-top:9px;border-top:1px solid rgba(246,196,83,.2);
  font-size:10.5px;line-height:1.75;color:rgba(255,238,216,.55);
}
.src a{color:rgba(255,215,140,.82);text-decoration:none;border-bottom:1px dotted rgba(255,215,140,.4)}

/* ══════ 03 主题影片 ══════ */
.vwrap{
  position:relative;border-radius:18px;overflow:hidden;background:#2b0a02;
  box-shadow:0 16px 40px rgba(50,3,0,.6),0 0 0 1px rgba(255,214,120,.32),0 0 0 8px rgba(255,214,120,.07);
}
.vwrap video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#1a0400}
.vplay{
  position:absolute;inset:0;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(30,3,0,.08),rgba(30,3,0,.55));
  transition:opacity .45s ease;
}
.vplay::before{
  content:"";width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 36% 28%,#FFF0C4,#E9AE3C 58%,#B0701A);
  box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 9px rgba(255,226,150,.16);
  animation:vPulse 2.6s ease-in-out infinite;
}
.vplay::after{
  content:"";position:absolute;width:0;height:0;margin-left:6px;
  border-left:19px solid #4A1805;border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.vplay.hide{opacity:0;pointer-events:none}
@keyframes vPulse{50%{box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 17px rgba(255,226,150,.05)}}
.vtag{position:absolute;left:11px;bottom:11px;display:flex;gap:7px;font-size:10.5px;pointer-events:none}
.vtag span{
  padding:4px 9px;border-radius:999px;color:#FFE0A0;
  background:rgba(28,4,0,.72);border:1px solid rgba(246,196,83,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* 五步融合链 */
.chainv{list-style:none;margin:14px 0 0;padding:0 0 0 26px;position:relative}
.chainv::before{
  content:"";position:absolute;left:9px;top:7px;bottom:7px;width:2px;border-radius:1px;
  background:linear-gradient(180deg,rgba(255,214,107,.75),rgba(23,209,224,.5));
}
.chainv li{position:relative;padding-bottom:13px}
.chainv li:last-child{padding-bottom:0}
.chainv li::before{
  content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 0 3px rgba(255,214,107,.18),0 0 10px rgba(255,214,107,.6);
}
.chainv b{font-family:var(--serif);font-size:13.5px;color:var(--gold-bright);margin-right:7px}
.chainv em{
  font-style:normal;font-size:10.5px;color:rgba(255,224,160,.62);
  font-variant-numeric:tabular-nums;float:right;letter-spacing:.05em;padding-top:2px;
}
.chainv p{font-size:12.5px;line-height:1.65;color:rgba(255,238,216,.86);margin-top:4px}

/* ══════ 06 非遗馆：卷轴 + 三章印牌 ══════ */
.scrollx{position:relative;padding:17px 0;margin-top:4px}
.scrollx::before,.scrollx::after{
  content:"";position:absolute;left:-7px;right:-7px;height:15px;border-radius:8px;
  background:linear-gradient(180deg,#EFC462,#A9741C 62%,#6C420A);
  box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.scrollx::before{top:0}
.scrollx::after{bottom:0}
.scrollx img{
  display:block;width:100%;border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,226,160,.25),0 12px 30px rgba(40,3,0,.55);
}
.seals3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.sl{
  position:relative;border-radius:12px;padding:11px 9px 12px;
  background:linear-gradient(168deg,rgba(122,26,12,.88),rgba(46,5,0,.92));
  border:1px solid rgba(246,196,83,.32);
  box-shadow:0 8px 20px rgba(30,2,0,.45),inset 0 1px 0 rgba(255,226,160,.12);
}
.sl em{
  display:inline-block;font-style:normal;font-family:var(--serif);font-weight:900;font-size:13px;
  color:#3A0700;background:linear-gradient(160deg,#FFE6A8,#D9962E);
  border-radius:5px;padding:1px 6px;letter-spacing:.06em;
}
.sl b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:8px 0 4px;line-height:1.35}
.sl span{display:block;font-size:10.5px;line-height:1.5;color:rgba(255,238,216,.7)}
.sl span.who{color:#FFD88A;margin-top:5px;font-weight:600;letter-spacing:.03em}
.taglines{margin-top:14px;border-top:1px solid rgba(246,196,83,.22);padding-top:12px}
.taglines div{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.taglines div+div{border-top:1px dotted rgba(246,196,83,.16)}
.taglines b{font-family:var(--serif);font-size:14px;font-weight:700;color:#FFE0A0;letter-spacing:.03em}
.taglines span{font-size:11px;color:rgba(255,238,216,.68)}

/* 三件展品详情卡 */
.exh{
  display:flex;gap:12px;margin-top:12px;padding:12px;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  border:1px solid rgba(255,226,160,.22);
}
.exh>img{
  flex:0 0 auto;width:82px;height:103px;object-fit:cover;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 1px rgba(255,226,160,.25);
}
.exh .bd{min-width:0;flex:1}
.exh h5{font-family:var(--serif);font-size:15px;font-weight:700;color:#FFE0A0;letter-spacing:.03em}
.exh h5 i{
  font-style:normal;font-family:var(--sans);font-size:10.5px;font-weight:400;
  color:rgba(255,238,216,.6);margin-left:7px;letter-spacing:.04em;
}
.exh p{font-size:12px;line-height:1.66;color:rgba(255,238,216,.86);margin-top:6px}
.facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.facts span{
  font-size:10.5px;padding:3px 8px;border-radius:6px;color:#FFE0A0;
  background:rgba(246,196,83,.13);border:1px solid rgba(246,196,83,.3);
}

/* ══════ 08 农产：溯源链 ══════ */
.trace{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px;position:relative}
.trace::before{
  content:"";position:absolute;left:13%;right:13%;top:15px;height:2px;
  background:linear-gradient(90deg,rgba(95,182,255,.2),rgba(95,182,255,.8),rgba(95,182,255,.2));
}
.trace div{position:relative;text-align:center}
.trace i{
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 auto 7px;
  border-radius:50%;font-style:normal;font-size:12px;font-weight:700;font-family:var(--serif);
  color:#8FD0FF;background:rgba(10,26,44,.94);border:1px solid rgba(95,182,255,.6);
  box-shadow:0 0 14px rgba(95,182,255,.35);
}
.trace span{font-size:10.5px;line-height:1.45;color:rgba(255,238,216,.86)}

/* ══════ 09 农产：直播卡 ══════ */
.live{
  margin-top:14px;padding:14px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(142,26,20,.6),rgba(30,3,0,.86));
  border:1px solid rgba(246,196,83,.28);
}
.live .hd{display:flex;align-items:center;gap:8px;font-size:11px;color:#FFE0A0;letter-spacing:.16em}
.live .hd i{
  width:7px;height:7px;border-radius:50%;background:#F03A22;font-style:normal;
  box-shadow:0 0 10px #F03A22;animation:pulse 1.6s ease-in-out infinite;
}
.live .row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.live .row div{text-align:center}
.live .row b{
  display:block;font-family:var(--serif);font-size:19px;font-weight:900;color:var(--gold-bright);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(90,8,0,.55);
}
.live .row b i{font-style:normal;font-size:10.5px;margin-left:2px;opacity:.9}
.live .row span{display:block;font-size:10.5px;color:rgba(255,238,216,.78);margin-top:4px}
.curve{
  margin-top:12px;padding:11px 12px 8px;border-radius:12px;
  background:linear-gradient(160deg,rgba(10,30,48,.6),rgba(10,18,30,.4));
  border:1px solid rgba(95,182,255,.28);
}
.curve svg{display:block;width:100%;height:76px}
.curve .lb{display:flex;justify-content:space-between;font-size:10.5px;color:rgba(200,230,255,.72);margin-top:4px}

/* ══════════════════════════════════════════════
   第 3~9 屏「紧密化」：把三馆内容拉回一屏一页的节奏
   只作用于 .screen.hall，不影响封面 / 导览 / 简介 / 封底诸屏
   原则：不删任何文字，只收紧图片高度、字号、行高与块间距
   v3 —— 基准校准：改版前本工程各屏内容高度上限约 863px（宽 496 时），
         本轮目标即把 03~09 屏全部压到该上限以内
   ══════════════════════════════════════════════ */
.screen.hall{padding:max(12px, env(safe-area-inset-top)) 19px 6px}
.screen.hall .s-head{margin-bottom:5px}
.screen.hall .s-head .cat{font-size:11px;letter-spacing:.16em}
.screen.hall h2{font-size:clamp(19px,5.2vw,24px);line-height:1.22;margin-bottom:4px}
.screen.hall .lead{font-size:12.4px;line-height:1.52;margin-bottom:6px}

/* 主图：16:10.5 → 16:6.5，单张省约 110px */
.screen.hall .pic{margin-bottom:4px;border-radius:13px}
.screen.hall .pic img{aspect-ratio:16/6.2}
.screen.hall .cap{margin-top:3px;font-size:10.2px}

/* 小标题块 */
.screen.hall .blk{margin-top:5px}
.screen.hall .blk h4{font-size:12.5px;margin-bottom:2px;gap:6px}
.screen.hall .blk h4::before{width:4px;height:12px}
.screen.hall .blk p{font-size:11.5px;line-height:1.44}

/* 数据格 */
.screen.hall .stats{gap:5px;margin-top:5px}
.screen.hall .st{padding:4px 4px;border-radius:9px}
.screen.hall .st b{font-size:14.6px;line-height:1.05}
.screen.hall .st b.w{font-size:11.6px}
.screen.hall .st b i{font-size:9px}
.screen.hall .st span{font-size:9px;line-height:1.26;margin-top:2px}

/* 标签 / 外链 / 来源 */
.screen.hall .chips{margin-top:5px;gap:5px}
.screen.hall .chips span{font-size:9.6px;padding:3px 7px}
.screen.hall .lk{margin-top:4px;gap:5px}
.screen.hall .lk a{font-size:10px;padding:2.5px 8px}
.screen.hall .src{margin-top:4px;padding-top:3px;font-size:9.1px;line-height:1.42}

/* 06 卷轴 + 三章印牌 */
.screen.hall .scrollx{padding:11px 0;margin-top:2px}
.screen.hall .scrollx::before,.screen.hall .scrollx::after{height:11px;border-radius:6px}
.screen.hall .seals3{gap:6px;margin-top:7px}
.screen.hall .sl{padding:7px 6px 8px;border-radius:10px}
.screen.hall .sl em{font-size:11px;padding:1px 5px}
.screen.hall .sl b{font-size:11.2px;margin:4px 0 3px}
.screen.hall .sl span{font-size:9.2px;line-height:1.38}

/* 标签行 */
.screen.hall .taglines{margin-top:6px;padding-top:5px}
.screen.hall .taglines div{padding:1px 0;gap:7px}
.screen.hall .taglines b{font-size:11.8px}
.screen.hall .taglines span{font-size:9.6px}

/* 07 展品详情卡 */
.screen.hall .exh{margin-top:6px;padding:8px;gap:8px;border-radius:11px}
.screen.hall .exh>img{width:58px;height:73px;border-radius:7px}
.screen.hall .exh h5{font-size:12.4px}
.screen.hall .exh h5 i{font-size:9.3px;margin-left:5px}
.screen.hall .exh p{font-size:10.5px;line-height:1.46;margin-top:3px}
.screen.hall .facts{margin-top:4px;gap:4px}
.screen.hall .facts span{font-size:9.2px;padding:2px 6px;border-radius:5px}

/* 08 溯源链 */
.screen.hall .trace{margin-top:5px;gap:5px}
.screen.hall .trace::before{top:9px}
.screen.hall .trace i{width:19px;height:19px;font-size:9.6px;margin-bottom:2px}
.screen.hall .trace span{font-size:9.2px;line-height:1.36}

/* 09 直播卡 / 曲线 */
.screen.hall .live{margin-top:5px;padding:6px;border-radius:11px}
.screen.hall .live .hd{font-size:10.4px;letter-spacing:.14em}
.screen.hall .live .row{margin-top:4px;gap:5px}
.screen.hall .live .row b{font-size:14.4px}
.screen.hall .live .row b i{font-size:9.2px}
.screen.hall .live .row span{font-size:9.2px;margin-top:1px}
.screen.hall .curve{margin-top:4px;padding:5px 8px 3px;border-radius:9px}
.screen.hall .curve svg{height:41px}
.screen.hall .curve .lb{font-size:9.2px;margin-top:2px}

/* 03 视频页 */
.screen.hall .vwrap{border-radius:14px}
.screen.hall .vplay::before{width:48px;height:48px;
  box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 6px rgba(255,226,150,.16)}
.screen.hall .vplay::after{margin-left:4px;border-left:15px solid #4A1805;
  border-top:8px solid transparent;border-bottom:8px solid transparent}
.screen.hall .vtag{left:8px;bottom:8px;gap:5px;font-size:9.3px}
.screen.hall .vtag span{padding:3px 7px}
.screen.hall .chainv{margin:8px 0 0;padding-left:20px}
.screen.hall .chainv::before{left:6px;top:5px;bottom:5px}
.screen.hall .chainv li{padding-bottom:6px}
.screen.hall .chainv li::before{left:-18px;top:4px;width:9px;height:9px}
.screen.hall .chainv b{font-size:11.6px;margin-right:5px}
.screen.hall .chainv em{font-size:9.3px}
.screen.hall .chainv p{font-size:10.6px;line-height:1.42;margin-top:2px}

/* ══════════════════════════════════════════════
   11 展馆三 · 参展企业名录 + 助农直播间
   设计语言：数智助农控制台 —— 数据看板 / 单元名录 / 品牌流 / 直播台
   用数智青 --cyan 作技术底色（全片首个把青色当主角的屏）
   名录数据取自江西省农业农村厅公开名录，条条可查证
   ══════════════════════════════════════════════ */

/* ── 屏内科技底纹：细网格 + 呼吸青色光斑（只作用于本屏）── */
#s11{position:relative;overflow:hidden;isolation:isolate}
#s11::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(23,209,224,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,209,224,.07) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(132% 66% at 50% 32%,#000 0%,transparent 76%);
          mask-image:radial-gradient(132% 66% at 50% 32%,#000 0%,transparent 76%);
}
#s11::after{
  content:"";position:absolute;left:50%;top:26%;width:160%;height:56%;z-index:-1;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(23,209,224,.16),transparent 64%);
  animation:fx11Glow 7.5s ease-in-out infinite;
}
@keyframes fx11Glow{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1; transform:translate(-50%,-50%) scale(1.14)}
}

/* ── 数据看板条（入场时数字滚动）── */
.drail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:7px;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(23,209,224,.36),rgba(23,209,224,.08));
  border:1px solid rgba(23,209,224,.28);
  box-shadow:0 0 20px rgba(23,209,224,.1),inset 0 0 20px rgba(23,209,224,.06);
}
.drail .dx{
  position:relative;padding:8px 2px 9px;text-align:center;
  background:linear-gradient(165deg,rgba(8,38,48,.82),rgba(12,6,4,.74));
}
.drail .dx::after{                       /* 单元格底部数据线 */
  content:"";position:absolute;left:14%;right:14%;bottom:0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(23,209,224,.85),transparent);
}
.drail .dx>b{
  display:block;font-size:19px;font-weight:800;line-height:1;
  letter-spacing:-.02em;color:#8FF3FA;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(23,209,224,.65);
}
.drail .dx>b em{font-style:normal}
.drail .dx>b i{font-size:10px;font-style:normal;margin-left:1px;opacity:.78}
.drail .dx>span{
  display:block;margin-top:4px;font-size:9px;letter-spacing:.09em;
  color:rgba(255,231,206,.62);
}

/* ── 企业名录：单元化（左侧数据轴 + 序号水印 + 错落入场）── */
.entgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px;
  opacity:1;transform:none;                /* 自身不做位移，交给每个单元错落进场 */
}
.ent{
  position:relative;overflow:hidden;
  padding:7px 21px 8px 13px;border-radius:11px;
  background:linear-gradient(150deg,rgba(255,255,255,.105),rgba(255,255,255,.032));
  border:1px solid rgba(255,226,160,.2);
  opacity:0;translate:0 14px;
  transition:
    opacity .6s ease var(--td,0s), translate .6s cubic-bezier(.22,.9,.3,1) var(--td,0s),
    transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.entgrid.in .ent{opacity:1;translate:0 0}
.ent::before{                              /* 左侧数据轴 */
  content:"";position:absolute;left:6px;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(230,181,74,.85));
  opacity:.62;transition:opacity .3s,box-shadow .3s;
}
.ent::after{                               /* 序号水印 */
  content:attr(data-i);position:absolute;right:8px;top:6px;
  font-size:15px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:rgba(23,209,224,.34);font-variant-numeric:tabular-nums;
}
.ent:active{
  transform:scale(.975);background:rgba(255,255,255,.17);
  border-color:rgba(23,209,224,.5);
  box-shadow:0 0 0 1px rgba(23,209,224,.32),0 6px 18px rgba(0,0,0,.32);
}
.ent:active::before{opacity:1;box-shadow:0 0 10px rgba(23,209,224,.85)}
.ent>b{
  display:block;font-family:var(--serif);font-size:13px;font-weight:700;
  color:#FFE0A0;letter-spacing:.035em;line-height:1.2;
}
.ent>em{
  display:block;font-style:normal;font-size:9.3px;color:rgba(143,243,250,.74);
  margin-top:3px;letter-spacing:.04em;
}
.ent>span{
  display:block;font-size:10.4px;line-height:1.38;color:var(--ink-soft);
  margin-top:4px;padding-top:4px;border-top:1px dashed rgba(23,209,224,.22);
}

/* ── 企业卡 = 可点击入口（整卡跳转官网 / 企业详情）── */
a.ent{color:inherit;text-decoration:none;display:block}
a.ent:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(23,209,224,.52);
  box-shadow:0 0 0 1px rgba(23,209,224,.3),0 7px 20px rgba(0,0,0,.32);
}
a.ent:hover::before{opacity:1;box-shadow:0 0 10px rgba(23,209,224,.85)}
.ent .go{                                  /* 「官网 ↗ / 详情 ↗」入口标 */
  display:inline-block;font-style:normal;margin-left:5px;padding:0 5px;
  font-size:8px;font-weight:700;letter-spacing:.03em;line-height:1.25;
  vertical-align:1px;border-radius:999px;white-space:nowrap;
  color:#8FF3FA;background:rgba(23,209,224,.13);
  border:1px solid rgba(23,209,224,.34);
  transition:background .25s,color .25s,border-color .25s;
}
a.ent:hover .go{background:rgba(23,209,224,.3);color:#E4FDFF;border-color:rgba(23,209,224,.62)}
.ent-hero .go{font-size:8.6px;margin-left:6px}
.ent-more .go{display:none}                /* 收尾格文案自带 ↗，不重复 */

/* ── 头雁品牌：通栏主卡，打破等大网格 ── */
.ent-hero{
  grid-column:1/-1;
  padding:11px 26px 11px 16px;
  background:linear-gradient(115deg,rgba(23,209,224,.17),rgba(255,255,255,.055) 42%,rgba(230,181,74,.1));
  border-color:rgba(23,209,224,.46);
  box-shadow:0 0 0 1px rgba(23,209,224,.13),0 6px 20px rgba(0,0,0,.26),
             inset 0 0 24px rgba(23,209,224,.08);
}
.ent-hero::after{content:none}                     /* 通栏卡不用序号水印 */
.ent-hero::before{left:7px;top:12px;bottom:12px;opacity:.92}
.ent-hero>b{font-size:17px;letter-spacing:.06em}
.ent-hero>em{margin-top:4px;font-size:9.8px}
.ent-hero>span{margin-top:5px;padding-top:5px}
.ent-hero .htag{
  position:absolute;right:11px;top:10px;font-style:normal;
  font-size:8.8px;font-weight:700;letter-spacing:.08em;color:#08242C;
  padding:3px 8px;border-radius:4px;
  background:linear-gradient(135deg,#8FF3FA,#17D1E0);
  box-shadow:0 0 12px rgba(23,209,224,.5);
}

/* ── 名录收尾格：省级完整名录入口（补满网格，兼作外链）── */
.ent-more{
  display:flex;flex-direction:column;justify-content:center;
  text-decoration:none;
  background:linear-gradient(150deg,rgba(23,209,224,.1),rgba(255,255,255,.028));
  border-style:dashed;border-color:rgba(23,209,224,.42);
}
.ent-more>b{color:#8FF3FA;font-family:var(--sans);font-size:11.6px;letter-spacing:.04em}
.ent-more>em{color:rgba(143,243,250,.7)}
.ent-more>span{border-top-color:rgba(23,209,224,.3);color:#FFE0A0}

/* ── 区域公用品牌：横向流动带 ── */
.brandbar{display:flex;align-items:center;gap:9px;margin-top:6px}
.brandbar .btag{
  flex:0 0 auto;font-size:9.2px;letter-spacing:.06em;color:#8FF3FA;
  padding:3px 7px;border-radius:5px;
  background:rgba(23,209,224,.1);border:1px solid rgba(23,209,224,.3);
}
.brandtrack{
  flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.brandtrack .row{display:flex;gap:6px;width:max-content;animation:fx11Marq 26s linear infinite}
.brandtrack .row span{
  flex:0 0 auto;font-size:10px;padding:4px 10px;border-radius:999px;white-space:nowrap;
  color:rgba(255,231,206,.9);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,226,160,.22);
}
@keyframes fx11Marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── 助农直播间：直播控制台（角标 + 频谱 + 扫描线 + 实时在线）── */
.liveroom{
  position:relative;overflow:hidden;margin-top:7px;padding:10px 11px 11px;border-radius:13px;
  background:linear-gradient(150deg,rgba(120,22,16,.66),rgba(16,4,10,.9));
  border:1px solid rgba(23,209,224,.32);
  box-shadow:0 0 0 1px rgba(255,214,107,.06),0 10px 26px rgba(0,0,0,.34),
             inset 0 0 26px rgba(23,209,224,.07);
}
.liveroom .cnr{                            /* 四角科技角标 */
  position:absolute;width:12px;height:12px;pointer-events:none;z-index:3;
  border:1.5px solid rgba(23,209,224,.8);
}
.liveroom .cnr.tl{left:5px;top:5px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.liveroom .cnr.tr{right:5px;top:5px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.liveroom .cnr.bl{left:5px;bottom:5px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.liveroom .cnr.br{right:5px;bottom:5px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.liveroom .scan{                           /* 自上而下扫描线 */
  position:absolute;left:0;right:0;height:40%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(23,209,224,.13),transparent);
  animation:fx11Scan 4.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes fx11Scan{0%{top:-40%}72%{top:100%}100%{top:100%}}
.liveroom .hd{
  position:relative;z-index:2;display:flex;align-items:center;gap:7px;
  font-size:10.6px;color:#8FF3FA;letter-spacing:.16em;
}
.liveroom .hd i{
  width:7px;height:7px;border-radius:50%;background:#F03A22;font-style:normal;
  box-shadow:0 0 10px #F03A22;animation:pulse 1.6s ease-in-out infinite;
}
.liveroom .lmeta{
  margin-left:auto;display:flex;align-items:baseline;gap:4px;
  font-size:9.2px;letter-spacing:.02em;color:rgba(255,231,206,.62);
}
.liveroom .lmeta b{
  font-size:12.5px;font-weight:800;color:#8FF3FA;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(23,209,224,.6);
}
.liveroom .lbody{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-top:9px}
.liveroom .eq{flex:0 0 auto;display:flex;align-items:flex-end;gap:2.5px;height:32px}
.liveroom .eq i{
  width:3px;height:100%;border-radius:2px;
  transform-origin:bottom;transform:scaleY(.38);
  background:linear-gradient(180deg,var(--cyan),rgba(255,214,107,.8));
  box-shadow:0 0 6px rgba(23,209,224,.45);
  animation:fx11Eq 1.1s ease-in-out infinite;
}
.liveroom .eq i:nth-child(1){animation-delay:0s}
.liveroom .eq i:nth-child(2){animation-delay:.13s}
.liveroom .eq i:nth-child(3){animation-delay:.26s}
.liveroom .eq i:nth-child(4){animation-delay:.39s}
.liveroom .eq i:nth-child(5){animation-delay:.52s}
.liveroom .eq i:nth-child(6){animation-delay:.65s}
.liveroom .eq i:nth-child(7){animation-delay:.78s}
@keyframes fx11Eq{0%,100%{transform:scaleY(.38)}50%{transform:scaleY(1)}}
.liveroom .ltxt{flex:1;min-width:0}
.liveroom h4{
  font-family:var(--serif);font-size:14.6px;font-weight:700;
  color:#FFE7BE;letter-spacing:.025em;line-height:1.25;
}
.liveroom .sub{font-size:9.6px;color:rgba(143,243,250,.8);letter-spacing:.05em;margin-top:3px}
.liveroom p{
  position:relative;z-index:2;font-size:10.8px;line-height:1.52;
  color:rgba(255,238,216,.76);margin-top:6px;
}
.liveroom .kv{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.liveroom .kv span{
  font-size:9.4px;padding:3px 8px;border-radius:999px;letter-spacing:.03em;
  color:#FFE7CE;background:rgba(255,214,107,.1);border:1px solid rgba(255,226,160,.24);
}
.livebtn{
  position:relative;z-index:2;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:9px;height:39px;border-radius:999px;text-decoration:none;
  font-size:13.5px;font-weight:700;letter-spacing:.07em;color:#4A1805;
  background:linear-gradient(135deg,#FFD66B,#E6B54A 55%,#F0A93B);
  box-shadow:0 8px 20px rgba(120,40,0,.5),inset 0 1px 0 rgba(255,255,255,.52),
             0 0 0 1px rgba(23,209,224,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.livebtn::before{                          /* 按钮流光 */
  content:"";position:absolute;top:0;left:-40%;width:36%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:fx11Sheen 3.4s ease-in-out infinite;
}
@keyframes fx11Sheen{0%{left:-40%}55%{left:118%}100%{left:118%}}
.livebtn::after{
  content:"";width:6px;height:6px;margin-top:-1px;flex:0 0 auto;
  border-right:2px solid #4A1805;border-top:2px solid #4A1805;transform:rotate(45deg);
}
.livebtn:active{transform:scale(.975);box-shadow:0 4px 12px rgba(120,40,0,.56)}
.liveroom .alt{
  position:relative;z-index:2;display:flex;justify-content:center;gap:15px;margin-top:7px;
}
.liveroom .alt a{
  font-size:10px;color:rgba(255,224,160,.82);text-decoration:none;
  border-bottom:1px dotted rgba(255,224,160,.42);
}

/* ══════════════════════════════════════════════
   14 展馆导航 · 按图索赣
   设计语言：数智导览台 —— 方位图 / 路网 / 轨道 / 到达方式
   与第 11 屏共用数智青 --cyan，但节奏更慢、留白更多（舒适优先）
   方位图为可缩放矢量示意图，不依赖任何外部地图接口
   ══════════════════════════════════════════════ */
#s14{position:relative;overflow:hidden;isolation:isolate}
#s14::before{                                  /* 屏内科技底纹：细网格 */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(23,209,224,.105) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,209,224,.105) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(132% 64% at 50% 40%,#000 0%,transparent 76%);
          mask-image:radial-gradient(132% 64% at 50% 40%,#000 0%,transparent 76%);
}
#s14::after{                                   /* 屏内呼吸光斑：托住方位图卡 */
  content:"";position:absolute;left:50%;top:35%;width:150%;height:48%;z-index:-1;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(23,209,224,.2),rgba(23,209,224,.07) 44%,transparent 72%);
  animation:navGlow 8s ease-in-out infinite;
}
@keyframes navGlow{0%,100%{opacity:.42}50%{opacity:.92}}
#s14 h2{margin-bottom:9px}
#s14 .lead{margin-bottom:15px;font-size:13.4px;line-height:1.68}

/* ── 倒数第二 / 倒数第三屏（s14 展馆导航 · s13 在线预约）──
   背景对齐末页 s15：与之完全相同的四层渐变栈。
   ⚠️ 色值须与 build_summary15.py 的 PALETTE_TUNE 保持一致（s15 改色时这里同步改）。
   落在屏元素自身 background 上、并用 border-box 满幅铺底：
   不用 ::before（会被 #deck .screen::before 揭幕扫光按优先级顶掉，
   见 build_summary15.py 里的说明），border-box 则消除 .screen 内边距留下的一圈边。 */
#s13,#s14{
  background:
    radial-gradient(120% 48% at 50% -6%, rgba(227,196,134,.22), transparent 62%),
    radial-gradient(95% 42% at 50% 104%, rgba(127,169,212,.14), transparent 64%),
    radial-gradient(70% 40% at 50% 46%, rgba(150,30,34,.55), transparent 70%),
    linear-gradient(180deg,#640F14 0%,#4A0A0C 46%,#2E0609 100%) #2E0609;
  background-origin:border-box;
  background-clip:border-box;
}

/* ── 方位图卡 ── */
.navmap{
  position:relative;overflow:hidden;margin-top:2px;
  border-radius:15px;padding:9px 9px 0;
  background:linear-gradient(158deg,rgba(7,32,42,.88),rgba(34,7,4,.9));
  border:1px solid rgba(23,209,224,.34);
  box-shadow:0 0 0 1px rgba(255,214,107,.06),0 12px 28px rgba(0,0,0,.36),
             inset 0 0 26px rgba(23,209,224,.08);
}
.navmap .cnr{position:absolute;width:13px;height:13px;pointer-events:none;z-index:5;
  border:1.5px solid rgba(23,209,224,.82)}
.navmap .cnr.tl{left:5px;top:5px;border-right:0;border-bottom:0;border-radius:4px 0 0 0}
.navmap .cnr.tr{right:5px;top:5px;border-left:0;border-bottom:0;border-radius:0 4px 0 0}
.navmap .cnr.bl{left:5px;bottom:5px;border-right:0;border-top:0;border-radius:0 0 0 4px}
.navmap .cnr.br{right:5px;bottom:5px;border-left:0;border-top:0;border-radius:0 0 4px 0}
.navmap .scan{                                 /* 自上而下扫描线（慢速，不抢戏） */
  position:absolute;left:0;right:0;height:34%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(23,209,224,.11),transparent);
  animation:navScan 6.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes navScan{0%{top:-34%}68%{top:100%}100%{top:100%}}
.mtag{                                          /* 左上角场馆名牌 */
  position:absolute;left:14px;top:12px;z-index:5;pointer-events:none;
}
.mtag b{
  display:block;font-family:var(--serif);font-size:13.6px;font-weight:700;
  color:#FFF3E4;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.85);
}
.mtag span{
  display:block;margin-top:3px;font-size:9.2px;letter-spacing:.12em;
  color:#9BF5FC;text-shadow:0 1px 8px rgba(0,0,0,.85);
}
.mmap{display:block;width:100%;height:auto;position:relative;z-index:2}

/* 方位图内的矢量元素动效 */
.mmap .river-flow{stroke-dasharray:16 12;animation:navFlow 4.6s linear infinite}
@keyframes navFlow{to{stroke-dashoffset:-112}}
.mmap .metro{stroke-dasharray:9 7;animation:navRun 3.2s linear infinite}
@keyframes navRun{to{stroke-dashoffset:-64}}
.mmap .ring{transform-box:fill-box;transform-origin:center;animation:navRing 3.4s ease-out infinite}
.mmap .ring.r2{animation-delay:1.7s}
@keyframes navRing{
  0%  {transform:scale(.42);opacity:.85}
  75% {transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
.mmap .vencore{transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-in-out infinite}

/* ── 方位图底栏：指北针 / 图例 ── */
.mfoot{
  position:relative;z-index:3;display:flex;align-items:center;gap:11px;
  margin:0 -9px;padding:6px 12px 7px;
  border-top:1px solid rgba(23,209,224,.2);
  background:linear-gradient(180deg,rgba(4,20,26,.5),rgba(4,20,26,.75));
  font-size:9.4px;color:rgba(255,236,214,.72);letter-spacing:.05em;
}
.mfoot .cmp{display:flex;align-items:center;gap:4px;color:#9BF5FC;flex:0 0 auto}
.mfoot .cmp i{
  width:9px;height:13px;flex:0 0 auto;
  background:linear-gradient(180deg,#9BF5FC 0 50%,rgba(155,245,252,.28) 50% 100%);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.mfoot .lg{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.mfoot .lg i{width:13px;height:3px;border-radius:2px;flex:0 0 auto}
.mfoot .lg i.river{background:linear-gradient(90deg,#2E7FB8,#17D1E0)}
.mfoot .lg i.metro{background:repeating-linear-gradient(90deg,#17D1E0 0 4px,transparent 4px 7px)}
.mfoot .lg i.venue{background:#FFD66B;box-shadow:0 0 6px #FFD66B}
.mfoot .scl{margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums;opacity:.8}

/* ── 底栏下方：场馆规格读数（HUD 一行）── */
.mhud{
  position:relative;z-index:3;margin:0 -9px;
  padding:6px 12px 7px;
  border-top:1px dashed rgba(23,209,224,.16);
  font-size:9.2px;line-height:1.5;letter-spacing:.04em;
  color:rgba(155,245,252,.8);font-variant-numeric:tabular-nums;
  background:rgba(4,18,24,.6);
}
.mhud b{color:#FFF0DC;font-weight:500}

/* ── 到达方式：三格 ── */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.way{
  position:relative;overflow:hidden;
  padding:8px 8px 9px;border-radius:11px;
  background:linear-gradient(155deg,rgba(255,255,255,.105),rgba(255,255,255,.032));
  border:1px solid rgba(255,226,160,.2);
  opacity:0;translate:0 14px;
  transition:opacity .6s ease var(--td,0s),translate .6s cubic-bezier(.22,.9,.3,1) var(--td,0s),
             background .3s ease,border-color .3s ease;
}
.ways.in .way{opacity:1;translate:0 0}
.way:active{background:rgba(255,255,255,.17);border-color:rgba(23,209,224,.48)}
.way .ico{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;margin-bottom:7px;
  background:rgba(23,209,224,.13);border:1px solid rgba(23,209,224,.34);
}
.way .ico svg{width:15px;height:15px;display:block}
.way h4{font-size:11.8px;font-weight:700;color:#FFE0A0;letter-spacing:.03em;line-height:1.25}
.way p{font-size:9.5px;line-height:1.5;color:rgba(255,231,206,.8);margin-top:4px}
.way p b{color:#9BF5FC;font-weight:700;font-variant-numeric:tabular-nums}
.busline{
  margin-top:6px;font-size:9.4px;line-height:1.5;letter-spacing:.03em;
  color:rgba(255,231,206,.62);
}
.busline b{color:#9BF5FC;font-weight:500;font-variant-numeric:tabular-nums}

/* ── 一键导航 ── */
.navgo{margin-top:9px}
.go-primary{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:41px;border-radius:999px;text-decoration:none;
  font-size:13.6px;font-weight:700;letter-spacing:.07em;color:#0A2A32;
  background:linear-gradient(135deg,#9BF5FC,#17D1E0 58%,#3FBED2);
  box-shadow:0 8px 20px rgba(0,40,50,.5),inset 0 1px 0 rgba(255,255,255,.6),
             0 0 0 1px rgba(255,214,107,.24);
  transition:transform .25s ease,box-shadow .25s ease;
}
.go-primary::before{
  content:"";position:absolute;top:0;left:-40%;width:36%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  animation:navSheen 3.8s ease-in-out infinite;
}
@keyframes navSheen{0%{left:-40%}55%{left:118%}100%{left:118%}}
.go-primary:active{transform:scale(.975)}
.go-primary .pin{width:13px;height:13px;flex:0 0 auto}
.go-alt{display:flex;justify-content:center;gap:16px;margin-top:8px}
.go-alt a{
  font-size:10.4px;color:rgba(255,224,160,.86);text-decoration:none;
  border-bottom:1px dotted rgba(255,224,160,.42);
}
.go-alt a:active{color:#FFF3E4}



/* ══════════════════════════════════════════════
   08 农产数字馆 · 数据驾驶舱（原 08 + 09 合并重建）
   设计语言：把「品牌 / 出海 / 产销」三块数据装进一台数智控制台，
            航拍图做底、青色数据做主，用大字号读数替代段落
   ══════════════════════════════════════════════ */
/* ── 顶部航拍横幅：真果园 + 数据叠层 ── */
.npb{position:relative;overflow:hidden;border-radius:13px;margin:0 0 2px}
.npb img{display:block;width:100%;aspect-ratio:16/4.1;object-fit:cover;object-position:center 42%}
.npb .scan{position:absolute;left:0;right:0;top:0;height:26%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(23,209,224,.34),transparent);
  animation:npbScan 4.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes npbScan{0%{top:-26%}72%{top:100%}100%{top:100%}}
.npb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,4,0,.06) 30%,rgba(20,3,0,.8)),
             repeating-linear-gradient(0deg,rgba(255,240,214,.055) 0 1px,transparent 1px 4px)}
.npb figcaption{position:absolute;left:11px;bottom:9px;right:11px;z-index:2;display:flex;
  align-items:baseline;gap:7px}
.npb figcaption b{font-family:var(--serif);font-size:13.4px;color:#FFF3E4;letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}
.npb figcaption span{font-size:9.2px;letter-spacing:.1em;color:#9BF5FC;
  border:1px solid rgba(23,209,224,.42);border-radius:999px;padding:1px 6px;
  background:rgba(6,26,34,.5)}

/* ── 数据驾驶舱 ── */
.ckpt{position:relative;overflow:hidden;margin-top:5px;padding:0;border-radius:13px;
  background:linear-gradient(158deg,rgba(5,26,36,.9),rgba(38,7,4,.9));
  border:1px solid rgba(23,209,224,.32);
  box-shadow:0 0 0 1px rgba(255,214,107,.07),0 10px 24px rgba(0,0,0,.34),
             inset 0 0 26px rgba(23,209,224,.08)}
.ckpt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(23,209,224,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(23,209,224,.08) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
          mask-image:linear-gradient(180deg,#000,transparent 78%)}
.ck-hd{position:relative;display:flex;align-items:center;gap:6px;padding:5px 10px;
  border-bottom:1px solid rgba(23,209,224,.2);
  font-size:9.6px;letter-spacing:.14em;color:rgba(155,245,252,.9);
  background:linear-gradient(90deg,rgba(23,209,224,.12),transparent)}
.ck-hd .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:0 0 auto;
  box-shadow:0 0 9px var(--cyan);animation:pulse 1.6s ease-in-out infinite}
.ck-hd .tick{margin-left:auto;font-style:normal;font-size:8.4px;letter-spacing:.16em;
  color:rgba(155,245,252,.5);font-variant-numeric:tabular-nums}
.ck-hero{position:relative;display:grid;grid-template-columns:1fr 1fr}
.ck-cell{position:relative;padding:6px 10px 7px;border-left:1px solid rgba(23,209,224,.14);
  border-top:1px solid rgba(23,209,224,.14)}
.ck-cell:nth-child(2n+1){border-left:0}
.ck-cell:nth-child(-n+2){border-top:0}
.ck-cell b{display:block;font-family:var(--serif);font-size:20.5px;font-weight:900;line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ck-cell b i{font-style:normal;font-size:9.6px;font-weight:400;margin-left:3px;opacity:.85;
  letter-spacing:0}
.ck-cell>span{display:block;margin-top:3px;font-size:9.3px;line-height:1.35;
  color:rgba(255,238,216,.72)}
.ck-cell.k-gold b{color:var(--gold-bright);text-shadow:0 0 16px rgba(255,214,107,.5)}
.ck-cell.k-cyan b{color:#8FF0FA;text-shadow:0 0 16px rgba(23,209,224,.55)}
.ck-cell::after{content:"";position:absolute;left:10px;top:6px;width:12px;height:1.5px;
  border-radius:2px;background:currentColor;opacity:0}
.ck-cell.k-gold::after{background:var(--gold-bright);opacity:.55}
.ck-cell.k-cyan::after{background:var(--cyan);opacity:.55}
.ck-rail{position:relative;display:flex;flex-wrap:wrap;gap:4px;padding:5px 10px 6px;
  border-top:1px dashed rgba(23,209,224,.22);background:rgba(3,16,22,.5)}
.ck-rail span{font-size:9px;letter-spacing:.02em;color:rgba(255,238,216,.62);
  padding:1.5px 6px;border-radius:5px;background:rgba(255,255,255,.045);
  font-variant-numeric:tabular-nums}
.ck-rail b{color:#9BF5FC;font-weight:500}

/* ── 溯源链上跑动的光点 + 出海曲线 ── */
#s08 .trace::after{content:"";position:absolute;top:7px;left:14%;width:7px;height:7px;
  border-radius:50%;background:#8FD0FF;box-shadow:0 0 10px #8FD0FF;
  animation:t8run 3.8s linear infinite}
@keyframes t8run{0%{left:14%;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:86%;opacity:0}}
/* 基线即「已画出」：动画不跑（虚拟时间截图 / 省电模式）时曲线照样在，
   只是少了描线过程 —— 若基线取 520，一旦动画不跑整条线就永久隐形。 */
#s08 .curve .cln{stroke-dasharray:520;stroke-dashoffset:0;
  animation:t8draw 2.4s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes t8draw{from{stroke-dashoffset:520}to{stroke-dashoffset:0}}

/* ══════════════════════════════════════════════════════════════
   整屏切换 · 幕布揭开（新屏自顶部 inset(100%)→0 往下展开覆盖旧屏）
   ──────────────────────────────────────────────────────────────
   ① 外层滚动流改 JS 翻页引擎：#deck 是 fixed 视口容器，15 个 .screen
      绝对定位叠放，靠 CSS 类（is-active/is-up/is-down）的 clip-path +
      opacity 过渡切换；#rain/#bgmBtn/#dots/#pgbar 在 deck 之外，不被吃掉。
   ② 切换语义：新屏如幕布从顶部降下、向下揭开覆盖旧屏，旧屏被盖住淡出；
      展开时叠一道自上而下的扫光，强化「揭幕」感。
   ③ 超屏（s08/s11/s13 比一屏高）翻到该屏后改屏内 overflow-y 滚动，翻页手势
      锁在屏内滚到边界时才翻——不压缩、不丢布局。
   ④ prefers-reduced-motion：去过渡，直切，版面一致。
   ⑤ 用 #deck .screen 前缀：压过各屏 ID 级 position/overflow。
   ══════════════════════════════════════════════════════════════ */
html{ overscroll-behavior-y: contain; }
body{ overflow:hidden; }     /* 外层不再滚动，翻页由 JS 接管 */

#deck{
  position:fixed; inset:0; left:0; right:0; margin:0 auto;
  max-width:480px;          /* 桌面预览居中，移动端满屏 */
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
}
#deck .screen{
  position:absolute; inset:0;
  height:100%; width:100%;
  will-change:clip-path, opacity;
  transition:clip-path 1.5s cubic-bezier(.66,0,.34,1), opacity 1s ease;
  overflow-y:auto; overflow-x:hidden;  /* 超屏屏内滚动 */
  -webkit-overflow-scrolling:touch;
  opacity:0;                          /* 默认：藏在顶部，待从上往下揭开 */
  clip-path: inset(0 0 100% 0);
}
#deck .screen.is-active{ clip-path: inset(0 0 0 0); opacity:1; z-index:30; pointer-events:auto; box-shadow:0 0 60px rgba(0,0,0,.45); }
#deck .screen.is-up    { clip-path: inset(0 0 0 0); opacity:0; z-index:20; pointer-events:none; }  /* 旧屏：被盖住淡出 */
#deck .screen.is-down  { clip-path: inset(0 0 100% 0); opacity:0; z-index:10; pointer-events:none; } /* 待翻入：藏在顶部 */

/* 超屏屏（s08/s11/s13 等）屏内滚动：.screen 是 flex 列，超一屏高时 flex 默认会
   把每个内容块压扁（drail 被压成 2px、直播间/品牌带严重变形）——禁止收缩，
   内容保持自然高度，由 .screen 自身的 overflow-y:auto 滚动。 */
#deck .screen > *{ flex-shrink:0; }

/* 揭幕扫光：新屏展开时一道自上而下的亮光缓扫，强化幕布拉开感 */
#deck .screen::before{
  content:""; position:absolute; left:0; right:0; top:0; height:46%; z-index:7; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,247,232,.30), rgba(255,247,232,0));
  mix-blend-mode:screen; opacity:0;
}
#deck .screen.is-active::before{ animation:curtainSweep 1.5s cubic-bezier(.66,0,.34,1) both; }
@keyframes curtainSweep{ 0%{opacity:0;transform:translateY(-30%)} 30%{opacity:.95} 100%{opacity:0;transform:translateY(160%)} }

@media (prefers-reduced-motion: reduce){
  #deck .screen{ transition:none; opacity:1!important; clip-path:none!important; }
  #deck .screen.is-down, #deck .screen.is-up{ opacity:0!important; }
  #deck .screen::before{ animation:none!important; opacity:0!important; }
  .reveal, .pic{ transition:none!important; }
  .reveal{ opacity:1!important; transform:none!important; }
  .pic{ clip-path:inset(0 0 0 0 round 16px)!important; }
  .pic img{ transform:none!important; transition:none!important; }
}

/* ══════════════════════════════════════════════════════════════
   右侧导航点：圆点 → 胶囊指示 + 导轨
   ══════════════════════════════════════════════════════════════ */
#dots::before{
  content:"";position:absolute;left:50%;top:-8px;bottom:-8px;width:1px;
  transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,240,210,0) 0%, rgba(255,240,210,.26) 18%,
    rgba(255,240,210,.26) 82%, rgba(255,240,210,0) 100%);
}
#dots i{
  width:6px;height:6px;border-radius:999px;
  background:rgba(255,240,210,.42);
  transition: height .5s cubic-bezier(.22,1,.36,1),
              background .35s ease, box-shadow .35s ease, opacity .35s ease;
}
#dots i:hover{background:rgba(255,240,210,.75)}
#dots i.on{
  height:17px;
  background:var(--gold-bright);
  box-shadow:0 0 10px rgba(255,214,107,.85), 0 0 22px rgba(255,214,107,.35);
}

/* ══════════════════════════════════════════════════════════════
   顶部翻屏进度条（JS 随当前屏序驱动 scaleX）
   ══════════════════════════════════════════════════════════════ */
#pgbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,
    var(--red) 0%, var(--gold) 55%, var(--gold-bright) 100%);
  box-shadow:0 0 8px rgba(255,214,107,.45);
}