/* ============================================================
* 各页专属样式(P01-P13) · 全 FULL 布局 · 教师圆框右下 PIP
* 布局原则:
* - 每页整页展示 PPT 内容
* - 含 AI 动画的页在内容区里嵌入 .slide-anim
* - 教师圆框 .teacher-circle 固定右下(品牌边框,唯一保留)
* 设计系统: Claude Parchment 编辑式 · Anthropic Serif 500 · Terracotta CTA
* ============================================================ */
/* ============ 两类分镜总规则 ============
* FULL 页:整页一栏,内容在右下预留 280×280 空间避开圆框教师 PIP
* PIP 页:两栏 grid,左 PPT 1fr + 右 380px 蒙板教师(无边框抠像)
* ================================== */
.slide--full {
padding: 58px 60px 80px;
}
.slide--pip.active {
display: grid;
grid-template-columns: 1fr 380px; /* 保留右栏 380px 空间给真实教师视频 */
gap: 22px;
padding: 58px 60px 80px;
}
.slide--pip > .slide-main { min-width: 0; overflow: hidden; }
/* PIP 模式下:只隐藏教师抠像占位图形(body 剪影 + 标签 + 文件名),
* 保留 .teacher-mask 容器占位,真实教师视频将来插入时仍然有地方 ·
* FULL 模式的 .teacher-circle 不受影响 */
.slide--pip .teacher-mask .mask-stub::before,
.slide--pip .teacher-mask .mask-stub .mask-label,
.slide--pip .teacher-mask .mask-stub .mask-hint {
display: none !important;
}
.slide--ms {
padding: 58px 60px 80px;
}
/* ============================================================
* 镜头 ① 专属样式(slide--s1)
* 布局:纯左右两栏 grid — 左栏(标题+地图) 1fr | 右栏 380px
* ============================================================ */
/* 镜头 1 已经 inset:0 占满整个 deck(无 topbar 边距),
* 教师照片直抵右栏边缘,因此只做轻度放大避免照片右侧被剪 */
.slide--s1 { --content-scale: 1.04; }
/* 重置:镜头 1 用 grid 左右两栏接管布局 */
.slide--s1.active {
display: grid !important; /* 覆盖 .slide--pip.active + .slide.active(display:block) */
grid-template-columns: 1fr 420px;
grid-template-rows: 1fr;
gap: 0;
padding: 0;
position: absolute;
inset: 0;
/* 旁白条 grid 行:不单独占行,让它 absolute 定位于 slide 底部 */
}
/* ---- 左栏容器:标题 + 地图 ---- */
.slide--s1 .shot1-left {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-start; /* ★ flex-start:子元素靠左 */
justify-content: center; /* ★ 列方向:整体垂直居中,让标题+地图组合在左栏中央 */
padding: 40px 32px 120px 80px; /* ★ top 40 (V3:由60→40,让标题上移让出空间);bottom 120:旁白条 */
position: relative;
overflow: visible; /* ★ visible:避免 iframe 被截断 */
gap: 20px; /* ★ V3:由28→20,更紧凑 */
}
/* ---- 右栏容器:教师剪影 + 名片 ---- */
.slide--s1 .shot1-right {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: stretch; /* teacher 占满后自行 center */
align-items: center;
gap: 0;
padding: 64px 20px 64px; /* ★ 顶部 64px 为 stamp 留空间;底部 64px */
position: relative;
}
/* ---- 标题块:flow 定位,跟随左栏 ---- */
.slide--s1 .shot1-header {
position: relative; /* ★ 确保是 flow 定位,不是 absolute */
width: 100%;
background: transparent;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
z-index: 5;
flex-shrink: 0; /* ★ 不压缩:标题占用它所需的高度 */
margin-top: 0; /* ★ 明确清零 margin-top */
}
/* ---- 主标题:7 段分级 Serif ---- */
.slide--s1 .shot1-title {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0;
line-height: 1.0;
font-feature-settings: "palt";
}
/* t1 · 一碗奶 · 叙事次强 · V3: 64 Near Black */
.slide--s1 .shot1-title .t1 {
font-family: var(--font-title);
font-size: 64px;
font-weight: 500;
color: #0f172a;
margin-left: 0;
margin-right: 8px;
}
/* t2 · 端平 · 连接极弱 */
.slide--s1 .shot1-title .t2 {
font-family: var(--font-title);
font-size: 40px;
font-weight: 400;
color: #64748b;
margin-right: 8px;
}
/* t3 · 苏超 · 案例载体 · V3: 72 Amber — 与地图脉冲呼应 */
.slide--s1 .shot1-title .t3 {
font-family: var(--font-title);
font-size: 72px;
font-weight: 500;
color: #d97706;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
/* t4 · —— · 破折号过渡 */
.slide--s1 .shot1-title .t4 {
font-family: var(--font-title);
font-size: 40px;
font-weight: 300;
color: #94a3b8;
margin-left: 12px;
margin-right: 12px;
vertical-align: middle;
}
/* t5 · 借势营销 · 全场主角 · 108 Academic Blue — 最大字 + pulse */
.slide--s1 .shot1-title .t5 {
font-family: var(--font-title);
font-size: 108px;
font-weight: 500;
color: #1e40af;
letter-spacing: 2px;
margin-left: 14px;
margin-right: 14px;
}
/* t6 · 三步法 · 方法论后缀 */
.slide--s1 .shot1-title .t6 {
font-family: var(--font-title);
font-size: 40px;
font-weight: 400;
color: #64748b;
margin-left: 8px;
}
/* t7 已删除 — V3 只有 6 段 */
/* ---- 副标题:三行仪式感 ---- */
.slide--s1 .shot1-subtitle-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-self: center; /* 自身在父 flex 中水平居中(不跟随主标靠左) */
gap: 2px;
margin-top: 36px; /* 与大标题拉开距离(原 6px 过近) */
}
.slide--s1 .shot1-subtitle-row {
font-family: var(--font-body);
text-align: center;
}
.slide--s1 .shot1-subtitle-row.overline-top {
font-size: 11px;
font-weight: 600;
color: var(--text-dim, #87867f);
letter-spacing: 2.5px;
text-transform: uppercase;
}
.slide--s1 .shot1-subtitle-row.main-line {
font-size: 20px;
font-weight: 400;
color: var(--text-muted, #5e5d59);
letter-spacing: 0.3px;
}
.slide--s1 .shot1-subtitle-row.overline-bot {
font-size: 11px;
font-weight: 500;
color: var(--text-dim, #87867f);
letter-spacing: 1.5px;
}
/* ---- 右上角:13 太保竖排小印 · 锚定到右栏顶部 ---- */
.slide--s1 .shot1-stamp {
position: absolute;
top: 24px;
right: 24px;
width: 36px; /* ★ 从 24px 扩大到 36px */
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
z-index: 10;
}
.slide--s1 .shot1-stamp .stamp-label {
font-family: var(--font-body);
font-size: 12px; /* ★ 从 9px 增至 12px */
font-weight: 600;
color: var(--accent-terracotta, #1e40af);
letter-spacing: 2px;
writing-mode: vertical-rl;
text-orientation: mixed;
border-bottom: 1px solid rgba(30, 64, 175, 0.4);
padding-bottom: 6px;
}
.slide--s1 .shot1-stamp .stamp-num {
font-family: var(--font-title);
font-size: 48px; /* ★ 从 40px 增至 48px */
font-weight: 500;
color: var(--accent-terracotta, #1e40af);
letter-spacing: -1px;
line-height: 1;
border-top: 1px solid rgba(30, 64, 175, 0.4);
border-bottom: 1px solid rgba(30, 64, 175, 0.4);
padding: 6px 0;
}
.slide--s1 .shot1-stamp .stamp-foot {
font-family: var(--font-body);
font-size: 12px; /* ★ 从 9px 增至 12px */
font-weight: 500;
color: var(--text-muted, #5e5d59);
letter-spacing: 2px;
writing-mode: vertical-rl;
text-orientation: mixed;
padding-top: 6px;
border-top: 1px solid rgba(30, 64, 175, 0.4);
}
/* ---- 角装饰:Amber L 形细线 · 锚定 .slide--s1(整页角落) ---- */
.slide--s1 .shot1-corner {
position: absolute;
width: 24px;
height: 24px;
opacity: 0.5;
z-index: 20;
pointer-events: none;
}
.slide--s1 .shot1-corner--bl {
left: 42px;
bottom: 16px;
border-left: 1px solid var(--accent-amber, #d97706);
border-bottom: 1px solid var(--accent-amber, #d97706);
}
.slide--s1 .shot1-corner--br {
right: 42px;
bottom: 16px;
border-right: 1px solid var(--accent-amber, #d97706);
border-bottom: 1px solid var(--accent-amber, #d97706);
}
/* ---- 地图容器:在左栏内,固定尺寸,不随 flex 压缩 ---- */
.slide--s1 .shot1-map {
background: transparent;
border: none;
display: flex;
align-items: flex-start; /* ★ flex-start:不额外拉伸 */
justify-content: center; /* ★ V3:改为 center,让 1200px 地图在左栏内居中 */
flex: 0 0 auto; /* ★ 不扩展不压缩,按内容决定高度 */
width: 100%;
margin-top: 0; /* ★ 由 shot1-left gap:20px 控制间距 */
}
.slide--s1 .shot1-map .shot-iframe {
width: 1400px; /* ★ 放大到 1400px 填满左侧内容区 */
height: 800px; /* ★ 放大到 800px */
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
flex-shrink: 0; /* ★ 禁止压缩 */
flex-grow: 0;
position: relative !important; /* ★ 覆盖 .s01-iframe-wrap { position: absolute },让元素回到流中 */
inset: auto !important; /* ★ 清除 inset: 0 遗留,避免 top/left 被强制设为 0 */
}
.slide--s1 .shot1-map .shot-iframe iframe {
width: 100%;
height: 100%;
border: 0;
background: transparent;
}
/* ---- 右:教师列(迁移到 .shot1-right) ---- */
.slide--s1 .shot1-teacher {
display: flex;
flex-direction: column;
justify-content: center; /* ★ 改为 center:剪影+名片组合在右栏中垂直居中 */
align-items: center;
gap: 36px; /* ★ 由 20→36:照片放大后,名片下移让出呼吸空间 */
background: transparent;
padding: 0;
width: 100%;
flex: 1; /* ★ 占据右栏 flex 中所有剩余高度,方便 center 生效 */
}
/* ---- 教师照片区(原剪影占位已替换为真实扣图照片) ---- */
.slide--s1 .shot1-silhouette {
width: 340px; /* ★ 由 270→340 等比放大约 26% */
height: 555px; /* ★ 由 440→555 同比 ≈ 1.26x 保持原宽高比 */
flex-shrink: 0;
display: flex;
align-items: flex-end; /* 头部偏上,人像沉底 · 与名片视觉相连 */
justify-content: center;
overflow: hidden;
}
/* 兼容:若仍存在旧 SVG 剪影,保持原行为 */
.slide--s1 .shot1-silhouette svg {
width: 100%;
height: 100%;
display: block;
}
/* 真实扣图照片 · object-fit:contain 保留完整人像 ·
* filter 加微弱 drop-shadow 让边缘从米色背景上微微浮起 */
.slide--s1 .shot1-silhouette .shot1-teacher-photo {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
display: block;
filter: drop-shadow(0 6px 16px rgba(20, 20, 19, 0.18));
}
.slide--s1.active .shot1-silhouette {
animation: silhouetteRise 1.2s var(--ease-editorial) 0.4s backwards;
}
/* ---- 名片 ---- */
.slide--s1 .shot1-card {
width: 320px; /* ★ 由 280→320 与放大后的照片宽度协调 */
background: var(--bg-card);
border: 1px solid rgba(30, 64, 175, 0.28); /* ★ Terracotta 主题描边 */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
padding: 18px 24px;
text-align: center;
flex-shrink: 0;
}
.slide--s1.active .shot1-card {
animation: cardFadeIn 0.5s var(--ease-editorial) 0.8s backwards;
}
.slide--s1 .shot1-card-name {
font-family: var(--font-title);
font-size: 28px;
font-weight: 500;
color: var(--brand-primary); /* ★ Terracotta 主题色 */
letter-spacing: 0.5px;
line-height: 1.2;
margin-bottom: 4px;
}
.slide--s1 .shot1-card-affil {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--accent-amber); /* ★ 琥珀金 · 与主题呼应 */
letter-spacing: 0.2px;
line-height: 1.5;
}
.slide--s1 .shot1-card-meta {
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
color: var(--brand-primary); /* ★ Terracotta 主题色(浅化版) */
letter-spacing: 0.3px;
line-height: 1.5;
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(30, 64, 175, 0.22); /* ★ Terracotta 细分隔线 */
opacity: 0.85;
}
/* ---- shot-meta:隐藏(左右栏布局中空间有限,不再显示) ---- */
.slide--s1 .shot-meta {
display: none;
}
/* ---- 旁白条:镜头 1 里保持全局样式,无需额外覆盖 ---- */
/* ---- 进入动画关键帧 ---- */
/* 标题 span 逐段浮入:fade-up */
@keyframes titleRise {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 关键字脉冲强化 · V3: t3(苏超) + t5(借势营销 主角特权 scale 1.09) */
@keyframes keywordPulse {
0% { transform: translateY(0) scale(1); }
60% { transform: translateY(-3px) scale(1.07); }
100% { transform: translateY(0) scale(1); }
}
/* 主角脉冲 · t5 借势营销专用 · 幅度更大 */
@keyframes keywordPulseStrong {
0% { transform: translateY(0) scale(1); }
60% { transform: translateY(-4px) scale(1.09); }
100% { transform: translateY(0) scale(1); }
}
/* 标题所有 span 默认隐藏,等待动画播放 */
.slide--s1 .shot1-title span {
opacity: 0;
display: inline-block; /* 让 transform 生效 */
}
/* 激活态:逐 span 入场 · V3 · 6 段 0.12s 间隔 */
/* t1 · 仅入场,无脉冲(V3 移除 t1 pulse) */
.slide--s1.active .shot1-title .t1 {
animation: titleRise 0.55s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.10s both;
}
.slide--s1.active .shot1-title .t2 {
animation: titleRise 0.50s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.22s both;
}
/* t3 · 苏超 · 入场 + 保留脉冲 delay 0.89s */
.slide--s1.active .shot1-title .t3 {
animation:
titleRise 0.55s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.34s both,
keywordPulse 0.40s ease-out 0.89s both;
}
.slide--s1.active .shot1-title .t4 {
animation: titleRise 0.45s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.46s both;
}
/* t5 · 借势营销 · 入场 + 主角强脉冲 delay 1.13s scale 1.09 */
.slide--s1.active .shot1-title .t5 {
animation:
titleRise 0.50s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.58s both,
keywordPulseStrong 0.45s ease-out 1.13s both;
}
/* t6 · 三步法 · 仅入场 */
.slide--s1.active .shot1-title .t6 {
animation: titleRise 0.50s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.70s both;
}
/* t7 已删除 — V3 无此 span */
/* 副标题三行:V3 提前 delay(由 1.05/1.20/1.35 → 0.93/1.08/1.23,因为没有 t7 了) */
.slide--s1 .shot1-subtitle-wrap .shot1-subtitle-row {
opacity: 0;
transform: translateY(14px);
}
.slide--s1.active .shot1-subtitle-wrap .shot1-subtitle-row:nth-child(1) {
animation: titleRise 0.45s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 0.93s both;
}
.slide--s1.active .shot1-subtitle-wrap .shot1-subtitle-row:nth-child(2) {
animation: titleRise 0.45s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 1.08s both;
}
.slide--s1.active .shot1-subtitle-wrap .shot1-subtitle-row:nth-child(3) {
animation: titleRise 0.45s var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) 1.23s both;
}
@keyframes silhouetteRise {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cardFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* ============================================================
* 镜头 ① 专属样式 结束
* ============================================================ */
/* ============ 通用:镜头内容容器 ============ */
.shot-main {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
position: relative;
}
.shot-main > * { max-height: 100%; }
/* FULL 镜头的全屏 iframe · 无边框 · 与 parchment 背景融合 */
.shot-iframe {
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
position: relative;
border: none;
box-shadow: none;
background: transparent;
}
.shot-iframe iframe { width: 100%; height: 100%; border: 0; background: transparent; }
/* FULL 镜头居中大字 */
.shot-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
}
/* ---- 大字基础(清零旧 PPT 遗留) ---- */
.shot-bigtext {
font-size: 88px;
font-weight: 500;
letter-spacing: 0.5px;
color: var(--text-title);
font-family: var(--font-title);
/* 无 text-shadow */
}
/* 金色强调版 · 琥珀 · 金句/总和/Thank You 专用 */
.shot-bigtext.gold {
color: var(--accent-amber); /* #d97706 */
}
/* 警示版 · Error Crimson · 仅"蹭势无底"一处 */
.shot-bigtext.red {
color: var(--accent-red); /* #b53333 */
}
.shot-subtext {
font-size: 20px;
color: var(--text-muted);
letter-spacing: 0;
font-weight: 400;
line-height: 1.6;
font-family: var(--font-body);
}
/* ============ 镜头 ④ inline 大字覆盖(54px letter-spacing 10px → 归零) ============ */
.slide[data-shotno="4"] .shot-bigtext {
font-size: 54px !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
font-family: var(--font-title) !important;
color: var(--accent-amber) !important;
}
.slide[data-shotno="4"] .shot-subtext {
letter-spacing: 0 !important;
font-size: 20px !important;
}
/* ============ 镜头 ㉘ 大字尺寸对比覆盖(120 vs 88) ============ */
.slide[data-shotno="28"] .shot-bigtext {
font-size: 120px !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
color: var(--text-title) !important;
}
.slide[data-shotno="28"] .shot-bigtext.red {
font-size: 88px !important;
color: var(--accent-red) !important;
}
.slide[data-shotno="28"] .shot-subtext {
letter-spacing: 0 !important;
font-size: 20px !important;
}
/* ============ 镜头 ㉜ 古籍引文大字覆盖 ============ */
.slide[data-shotno="32"] .shot-bigtext.gold {
font-size: 88px !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
font-family: var(--font-title) !important;
color: var(--accent-amber) !important;
}
/* ============ 镜头 ㉟ 金句大字覆盖 ============ */
.slide[data-shotno="35"] .shot-bigtext {
font-size: 64px !important;
letter-spacing: 0 !important;
font-weight: 500 !important;
color: var(--text-title) !important;
}
.slide[data-shotno="35"] .shot-bigtext.gold {
font-size: 52px !important;
letter-spacing: 0 !important;
color: var(--accent-amber) !important;
}
/* ============ 5 红线 环形布局(镜头 29) ============
* 容器 900×620 · 中心圆 240 · 5 节点 160
*/
.s10-circular {
position: relative;
width: 900px;
height: 620px;
margin: 0 auto;
}
/* 中心圆 · Near Black 实色(不再是红渐变) */
.s10-circular .center {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 240px; height: 240px;
border-radius: 50%;
background: var(--bg-dark); /* Slate 900 */
color: var(--text-on-dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 0 0 1px var(--border-dark); /* 极细 ring */
z-index: 1;
}
.s10-circular .center .big {
font-size: 36px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.1;
font-family: var(--font-title);
color: var(--color-terracotta); /* Terracotta */
}
.s10-circular .center .sub {
font-size: 14px;
letter-spacing: 0.2px;
margin-top: 10px;
color: var(--text-on-dark); /* Warm Silver */
font-weight: 500;
font-family: var(--font-body);
}
/* 节点 · Ivory + Border Warm + whisper(去红边红光) */
.s10-circular .node {
position: absolute;
width: 160px; height: 160px;
border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border-warm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: var(--shadow-whisper);
z-index: 3;
}
.s10-circular .node .num {
width: 28px; height: 28px; line-height: 28px;
border-radius: 50%;
background: var(--color-terracotta); /* Terracotta */
color: var(--bg-card); /* Ivory 文字 */
font-weight: 500;
font-size: 14px;
margin-bottom: 4px;
font-family: var(--font-body);
/* 无 box-shadow 发光 */
}
.s10-circular .node h4 {
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
color: var(--text-title); /* Near Black(去红色) */
margin-bottom: 3px;
font-family: var(--font-title);
}
.s10-circular .node p {
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
letter-spacing: 0.1px;
padding: 0 4px;
font-family: var(--font-body);
}
/* 正五边形节点位置(不变) */
.s10-circular .n1 { top: 10px; left: 370px; }
.s10-circular .n2 { top: 171px; left: 589px; }
.s10-circular .n3 { top: 416px; left: 505px; }
.s10-circular .n4 { top: 416px; left: 235px; }
.s10-circular .n5 { top: 171px; left: 151px; }
/* 虚线圈 · Ring Warm(去红) */
.s10-circular::before {
content: "";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 460px; height: 460px;
border-radius: 50%;
border: 1px dashed var(--ring-warm);
z-index: 1;
pointer-events: none;
}
/* 单卡居中 · Claude 风格:无强边框/阴影 · 与 parchment 背景融合 */
.shot-card {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
max-width: 960px;
width: 100%;
}
.shot-card .shot-title {
font-family: var(--font-title);
font-size: 36px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 0;
margin-bottom: 14px;
line-height: 1.2;
}
.shot-card p {
font-size: 18px;
color: var(--text-body);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
.shot-card .hl { color: var(--accent-red); font-weight: 500; }
.shot-card .kw { color: var(--color-terracotta); font-weight: 500; }
/* ============ 京东海报(镜头⑱) ============
* 保留"京东红"叙事本体,外框/周围全部中性化
*/
.jd-poster {
width: 520px;
aspect-ratio: 3/4;
background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); /* Terracotta 家族双色(保留"红海报"识别感) */
border: 1px solid var(--border-warm); /* 去4px金边→1px Border Warm */
border-radius: 16px;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow-whisper); /* 去红光→whisper */
}
.jd-poster .logo {
background: #FFF;
color: #E03137;
font-size: 36px;
font-weight: 500;
letter-spacing: 0;
padding: 6px 26px;
border-radius: 40px;
font-family: var(--font-body);
}
.jd-poster .headline {
font-size: 48px;
font-weight: 500;
color: #FFF;
letter-spacing: 0;
line-height: 1.3;
text-align: center;
font-family: var(--font-title);
/* 去 text-shadow */
}
.jd-poster .tag {
background: var(--accent-amber); /* #d97706 Accent Amber(去金色) */
color: #ffffff;
font-size: 18px;
padding: 6px 22px;
border-radius: 18px;
letter-spacing: 0.3px;
font-weight: 500;
font-family: var(--font-body);
}
/* ============ 拼贴(镜头②㉔) ============ */
.shot-collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
width: 100%;
max-width: 1500px;
}
.shot-collage .piece {
background: var(--bg-card);
border: 1px solid var(--border-warm); /* 去3px蓝边→1px Border Warm */
border-radius: 16px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 380px;
box-shadow: var(--shadow-whisper); /* 去蓝光→whisper */
}
.shot-collage .piece h4 {
font-size: 22px;
color: var(--text-title);
font-weight: 500;
letter-spacing: 0;
font-family: var(--font-title);
}
.shot-collage .piece .img-placeholder {
flex: 1;
background: var(--bg-sand); /* 去蓝渐变→暖沙 */
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dim);
font-size: 14px;
letter-spacing: 0.2px;
min-height: 180px;
font-family: var(--font-body);
}
.shot-collage .piece .caption {
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.1px;
line-height: 1.6;
font-family: var(--font-body);
}
.shot-collage .piece .data {
font-size: 30px;
color: var(--color-terracotta); /* Terracotta(去橙色) */
font-weight: 500;
font-family: var(--font-title);
}
/* ============ 集锦(3 个视频 clip 占位,镜头②) ============
* Near Black 暗面板替代深蓝渐变
*/
.shot-reel {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
width: 100%;
max-width: 1500px;
aspect-ratio: 16/6;
}
.shot-reel .clip {
background: var(--bg-dark); /* Slate 900 */
border-radius: 24px; /* Claude 大圆角 */
border: 1px solid var(--border-dark);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-on-dark);
padding: 18px;
gap: 10px;
box-shadow: var(--shadow-whisper);
}
.shot-reel .clip::before {
content: "▶";
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(177, 174, 165, 0.15);
border: 1px solid var(--ring-warm);
color: var(--brand-coral); /* Coral ▶ 图标 */
font-size: 22px;
line-height: 56px;
text-align: center;
padding-left: 4px;
}
.shot-reel .clip .label {
color: var(--text-on-dark); /* Warm Silver */
font-weight: 500;
letter-spacing: 0.3px;
font-size: 13px;
font-family: var(--font-body);
}
.shot-reel .clip .hint {
font-size: 10px;
color: var(--text-on-dark);
opacity: 0.6;
letter-spacing: 0.2px;
font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
}
/* ============ 过渡卡(镜头⑬㉒) ============ */
.shot-transition {
display: flex;
align-items: center;
gap: 24px;
padding: 28px 38px;
background: var(--bg-card);
border: 1px dashed var(--ring-warm); /* 去2px金虚线→1px Ring Warm */
border-radius: 16px;
font-size: 26px;
font-weight: 500;
letter-spacing: 0;
color: var(--text-title);
font-family: var(--font-title);
}
.shot-transition .from { color: var(--text-sub); }
.shot-transition .to { color: var(--color-terracotta); } /* Terracotta */
.shot-transition .arrow { color: var(--text-dim); font-size: 34px; font-weight: 300; }
/* ============ 教师全身 MS ============ */
.shot-ms-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
position: relative;
}
.shot-ms-body::before {
content: "";
width: 360px;
flex: 1;
background: linear-gradient(180deg, rgba(30, 64, 175, 0.18) 0%, rgba(30, 64, 175, 0.06) 100%);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center bottom / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center bottom / contain;
}
.shot-ms-body .label {
position: absolute;
bottom: 10px;
background: var(--bg-card);
color: var(--text-title);
padding: 5px 16px;
border-radius: 12px;
font-size: 14px;
letter-spacing: 0.2px;
font-weight: 500;
border: 1px solid var(--border-warm);
font-family: var(--font-body);
}
/* ===================== P01 片头 FULL · 全屏 AI 地图 ===================== */
.s01 {
position: absolute;
inset: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.s01-iframe-wrap {
position: absolute;
inset: 0;
border-radius: 0;
overflow: hidden;
}
.s01-iframe-wrap iframe {
width: 100%; height: 100%;
border: 0; display: block;
}
.s01 .teacher-circle {
right: 46px; bottom: 24px;
z-index: 11;
}
/* ===================== P02 赞助商时间轴 · PIP ===================== */
.s02 {
height: 100%;
display: flex; flex-direction: column;
}
.s02-lead {
display: flex;
gap: 18px;
margin-bottom: 16px;
}
.s02-lead .big-card {
flex: 1;
padding: 14px 20px;
text-align: center;
}
/* 数字主角 · Anthropic Serif 500 · 对应 3 色 */
.s02-lead .num {
font-family: var(--font-title);
font-size: 64px;
font-weight: 500;
color: var(--color-terracotta); /* Terracotta */
line-height: 1;
font-variant-numeric: tabular-nums;
}
.s02-lead .card.gold .num { color: var(--accent-amber); }
.s02-lead .card.red .num { color: var(--accent-red); }
.s02-lead .unit {
font-size: 20px;
color: var(--text-dim);
margin-left: 4px;
font-weight: 400;
font-family: var(--font-body);
}
.s02-lead .lbl {
font-size: 15px;
color: var(--text-dim);
letter-spacing: 0.1px;
margin-top: 4px;
font-family: var(--font-body);
}
.s02-chart-box {
flex: 1;
background: transparent;
border: none;
border-radius: 0;
padding: 0;
position: relative;
box-shadow: none;
min-height: 0;
}
#s02-chart { width: 100%; height: 100%; }
.s02-foot {
margin-top: 10px;
font-size: 13px;
color: var(--text-dim);
text-align: center;
letter-spacing: 0.2px;
font-family: var(--font-body);
}
/* ===================== P03 借势营销定义 + 三类型 · PIP ===================== */
.s03 {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
height: 100%;
}
.s03-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.s03-right { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.s03-def {
padding: 16px 22px;
background: var(--bg-card);
border: 1px solid var(--border-light); /* 去2px金边→1px Border Cream */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s03-def .kw { color: var(--color-terracotta); font-weight: 500; letter-spacing: 0; }
.s03-def-text {
font-size: 19px;
line-height: 1.65;
color: var(--text-body);
letter-spacing: 0;
font-family: var(--font-body);
}
.s03-types {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.s03-types .card {
padding: 14px 12px;
text-align: center;
}
.s03-types .card h4 {
font-size: 22px;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 6px;
font-family: var(--font-title);
}
.s03-types .card .ex {
font-size: 14px;
color: var(--text-sub);
letter-spacing: 0;
line-height: 1.6;
font-family: var(--font-body);
}
/* 悬念钩子条 · Terracotta 左边 + Ivory 底(去红渐变) */
.s03-hook {
padding: 14px 20px;
background: var(--bg-card);
border-left: 3px solid var(--color-terracotta); /* Terracotta */
border-radius: 10px;
font-size: 18px;
color: var(--color-terracotta);
letter-spacing: 0;
font-weight: 500;
font-family: var(--font-body);
}
.s03-hook .flag { font-weight: 500; margin-right: 8px; }
.s03-mascot {
height: 420px;
}
/* ===================== P04 三步框架 · FULL ===================== */
.s04 {
height: 100%;
padding-right: 260px;
padding-bottom: 20px;
}
/* 公式带 · 去金外框 · 在 parchment 上居中 Serif */
.s04-formula {
text-align: center;
margin: 18px 0 32px 0;
padding: 20px 28px;
background: var(--bg-card);
border: 1px solid var(--border-light); /* 去3px金边→1px Border Cream */
border-radius: 12px;
font-size: 28px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 0;
box-shadow: var(--shadow-whisper);
font-family: var(--font-title);
}
.s04-formula .op { color: var(--text-dim); margin: 0 12px; }
.s04-steps {
display: flex;
align-items: center;
gap: 10px;
}
/* 三步卡 · 统一 Ivory + Border Cream · 去三色边 */
.s04-steps .step {
flex: 1;
padding: 24px 16px;
text-align: center;
background: var(--bg-card);
border: 1px solid var(--border-light); /* 统一中性边框 */
border-radius: 16px;
box-shadow: var(--shadow-whisper);
}
/* 去 .s1/.s2/.s3 三色彩光 */
.s04-steps .step.s1,
.s04-steps .step.s2,
.s04-steps .step.s3 { border-color: var(--border-light); }
/* 序号大字 · Terracotta Serif 52px */
.s04-steps .step .num {
font-family: var(--font-title);
font-size: 52px;
font-weight: 500;
line-height: 1;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
color: var(--color-terracotta); /* Terracotta 统一(去三色) */
}
.s04-steps .step.s1 .num,
.s04-steps .step.s2 .num,
.s04-steps .step.s3 .num { color: var(--color-terracotta); }
/* STEP overline(通过:before 或自然结构表现,此处给 h3 上方加样式空间) */
.s04-steps .step h3 {
font-family: var(--font-title);
font-size: 25px;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 8px;
color: var(--text-title); /* Near Black(去蓝色) */
}
.s04-steps .step .sub {
font-size: 15px;
color: var(--text-muted);
letter-spacing: 0;
line-height: 1.6;
font-family: var(--font-body);
}
.s04-steps .arrow {
color: var(--text-dim);
font-size: 36px;
font-weight: 300;
}
.s04-bottom {
text-align: center;
margin-top: 28px;
font-size: 17px;
color: var(--text-sub);
letter-spacing: 0;
font-family: var(--font-body);
}
.s04-bottom .hl { color: var(--text-title); font-weight: 500; }
/* ===================== P05 识势 · PIP ===================== */
.s05 {
height: 100%;
}
/* 识势公式条 · 去蓝边→1px Border Light */
.s05-formula {
text-align: center;
padding: 16px 24px;
margin-bottom: 18px;
background: var(--bg-card);
border: 1px solid var(--border-light); /* 去3px蓝边 */
border-radius: 12px;
font-size: 25px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 0;
box-shadow: var(--shadow-whisper);
font-family: var(--font-title);
}
/* kw1/kw2/kw3 去三色 · 统一 text-title;主强调用 brand-primary 仅一处 */
.s05-formula .kw1 { color: var(--text-title); }
.s05-formula .kw2 { color: var(--color-terracotta); } /* 单一 Terracotta 强调 */
.s05-formula .kw3 { color: var(--text-title); }
.s05-formula .op { color: var(--text-dim); margin: 0 10px; }
.s05-check {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 18px;
}
.s05-check .card {
padding: 16px 18px;
text-align: center;
}
.s05-check .card h4 {
font-family: var(--font-title);
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 8px;
color: var(--text-title);
}
/* tick 圆 · 统一 Accent Olive(去三色) */
.s05-check .tick {
display: inline-block;
width: 40px; height: 40px;
border-radius: 50%;
color: #fff;
font-size: 26px;
font-weight: 500;
line-height: 40px;
margin-bottom: 8px;
background: var(--accent-olive) !important; /* 覆盖 inline style */
}
.s05-check .desc {
font-size: 15px;
color: var(--text-sub);
letter-spacing: 0;
line-height: 1.6;
font-family: var(--font-body);
}
/* 锚点数据条 · 去金边 */
.s05-anchor {
background: var(--bg-card);
border: 1px solid var(--border-warm); /* 去3px金边 */
border-radius: 16px;
padding: 18px 24px;
display: flex;
justify-content: space-around;
box-shadow: var(--shadow-whisper);
}
.s05-anchor .item { text-align: center; }
.s05-anchor .num {
font-family: var(--font-title);
font-size: 40px;
font-weight: 500;
color: var(--accent-amber); /* Accent Amber(去金) */
line-height: 1;
font-variant-numeric: tabular-nums;
}
.s05-anchor .unit {
font-size: 20px;
color: var(--text-dim);
margin-left: 4px;
font-family: var(--font-body);
}
.s05-anchor .lbl {
font-size: 14px;
color: var(--text-dim);
letter-spacing: 0.2px;
margin-top: 6px;
font-family: var(--font-body);
}
/* ===================== P06 接势三路径 · PIP ===================== */
.s06 {
display: grid;
grid-template-columns: 1fr 380px;
gap: 18px;
height: 100%;
}
.s06-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s06-right { display: flex; flex-direction: column; justify-content: center; }
/* 引言条 · 去蓝阴影 + 去金左边 */
.s06-intro {
padding: 12px 20px;
font-size: 18px;
color: var(--text-body);
letter-spacing: 0;
line-height: 1.6;
background: var(--bg-card);
border-left: 3px solid var(--color-terracotta); /* Terracotta 左边 */
border-radius: 10px;
box-shadow: var(--shadow-whisper);
font-family: var(--font-body);
}
.s06-paths {
display: flex;
flex-direction: column;
gap: 12px;
}
/* 三路径卡 · 统一 Ivory + Border Warm(去三色边) */
.s06-path {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
gap: 18px;
padding: 14px 20px;
background: var(--bg-card);
border: 1px solid var(--border-warm); /* 统一中性边框 */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s06-path.p1,
.s06-path.p2,
.s06-path.p3 { border-color: var(--border-warm); }
/* tag · Serif 25px text-title(去实心色块) */
.s06-path .tag {
font-family: var(--font-title);
font-size: 22px;
font-weight: 500;
letter-spacing: 0;
text-align: center;
padding: 10px 6px;
border-radius: 10px;
color: var(--text-title);
background: var(--bg-sand); /* 暖沙底(去实心绿橙红) */
}
.s06-path.p1 .tag { color: var(--text-title); }
.s06-path.p2 .tag { color: var(--color-terracotta); } /* Terracotta 主路径 */
.s06-path.p3 .tag { color: var(--text-title); }
.s06-path .desc {
font-size: 15px;
line-height: 1.6;
color: var(--text-body);
letter-spacing: 0;
font-family: var(--font-body);
}
.s06-path .desc .hl { color: var(--text-title); font-weight: 500; }
.s06-path .desc .case {
display: block;
color: var(--text-title);
font-weight: 500;
margin-bottom: 2px;
font-size: 13px;
}
.s06-baiban {
height: 360px;
}
/* ===================== P07 伊利三维拆解 · PIP ===================== */
.s07 {
display: grid;
grid-template-columns: 300px 1fr 340px;
gap: 16px;
height: 100%;
}
/* 海报外框 · 去4px金边→1px Border Warm + whisper */
.s07-poster {
border: 1px solid var(--border-warm);
border-radius: 16px;
padding: 10px;
background: var(--bg-card);
box-shadow: var(--shadow-whisper);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 海报本体 · 保留"伊利红"识别,用 Terracotta 家族 */
.s07-poster-inner {
width: 100%;
aspect-ratio: 3/4;
background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%); /* Terracotta 家族双色 */
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
color: #FFF;
}
.s07-poster-inner .logo {
font-size: 28px;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 12px;
background: #FFF;
color: var(--color-terracotta); /* Terracotta */
padding: 4px 20px;
border-radius: 40px;
font-family: var(--font-body);
}
.s07-poster-inner .headline {
font-family: var(--font-title);
font-size: 40px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.2;
text-align: center;
margin-bottom: 14px;
/* 无 text-shadow */
}
.s07-poster-inner .bowl {
width: 120px; height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #FFF 0%, #F0F0F0 80%);
box-shadow: inset 0 -10px 20px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.3);
}
.s07-poster-inner .tagline {
margin-top: 10px;
font-size: 16px;
letter-spacing: 0;
font-weight: 500;
font-family: var(--font-body);
}
/* caption · Stone Gray 中性(去旧 var(--text-sub)) */
.s07-poster .caption {
font-size: 13px;
color: var(--text-dim); /* Stone Gray */
margin-top: 6px;
letter-spacing: 0.1px;
font-family: var(--font-body);
}
.s07-dims {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
min-width: 0;
}
/* 三维度卡 · 统一 Ivory + Border Light(去三色边) */
.s07-dim {
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid var(--border-light); /* 统一中性 */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s07-dim.d1,
.s07-dim.d2,
.s07-dim.d3 { border-color: var(--border-light); }
.s07-dim h4 {
font-family: var(--font-title);
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 4px;
color: var(--accent-amber); /* Accent Amber 序号强调(去三色) */
}
.s07-dim.d1 h4,
.s07-dim.d2 h4,
.s07-dim.d3 h4 { color: var(--accent-amber); }
.s07-dim p {
font-size: 14px;
color: var(--text-body);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
.s07-dim .note {
font-size: 12px;
color: var(--text-dim);
font-style: italic;
margin-top: 3px;
letter-spacing: 0.1px;
font-family: var(--font-body);
}
.s07-tp {
display: flex;
align-items: center;
justify-content: center;
}
.s07-tp .slide-anim { width: 100%; height: 100%; }
/* ===================== P08 LDA 词云 · FULL ===================== */
.s08 {
display: grid;
grid-template-columns: 420px 420px 380px;
gap: 22px;
height: 100%;
padding-right: 260px;
padding-bottom: 16px;
justify-content: start;
}
/* 词云容器 · 去绿边→1px Border Cream */
.s08-cloud {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 18px 16px;
position: relative;
box-shadow: var(--shadow-whisper);
}
.s08-cloud h4 {
font-size: 13px;
color: var(--text-dim); /* Stone Gray(去绿色) */
letter-spacing: 0.3px;
font-weight: 500;
margin-bottom: 10px;
text-align: center;
font-family: var(--font-body);
border-bottom: 1px solid var(--border-warm);
padding-bottom: 8px;
}
.s08-cloud-words {
position: relative;
height: 380px;
overflow: hidden;
}
/* 词云字 · Anthropic Serif 500 · 4色循环(去彩虹6色) */
.s08-cloud-words .word {
position: absolute;
font-weight: 500;
font-family: var(--font-title);
opacity: 0;
animation: popIn var(--dur-normal, 0.6s) var(--ease-editorial, cubic-bezier(0.4,0,0.2,1)) both;
}
/* 4色循环: Terracotta / Near Black / Accent Amber / Accent Olive */
.s08-cloud-words .w1 { top: 30px; left: 40px; font-size: 54px; color: var(--color-terracotta); animation-delay: 0.3s; } /* 核心词 Terracotta */
.s08-cloud-words .w2 { top: 100px; left: 190px; font-size: 38px; color: var(--text-title); animation-delay: 0.5s; } /* Near Black */
.s08-cloud-words .w3 { top: 160px; left: 50px; font-size: 34px; color: var(--accent-amber); animation-delay: 0.7s; } /* Accent Amber */
.s08-cloud-words .w4 { top: 215px; left: 200px; font-size: 40px; color: var(--accent-olive); animation-delay: 0.9s; } /* Accent Olive */
.s08-cloud-words .w5 { top: 280px; left: 30px; font-size: 32px; color: var(--text-muted); animation-delay: 1.1s; } /* 小词 Olive Gray */
.s08-cloud-words .w6 { top: 310px; left: 180px; font-size: 46px; color: var(--color-terracotta); animation-delay: 1.3s; } /* 核心词 Terracotta */
.s08-cloud-words .w7 { top: 240px; left: 275px; font-size: 22px; color: var(--accent-olive); animation-delay: 1.5s; } /* small Olive */
.s08-cloud-words .w8 { top: 355px; left: 85px; font-size: 26px; color: var(--text-title); animation-delay: 1.7s; } /* Near Black */
.s08-mid {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
/* 主题卡 · 统一中性边框(去三色) */
.s08-topic {
padding: 14px 18px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s08-topic.t1,
.s08-topic.t2,
.s08-topic.t3 { border-color: var(--border-light); }
.s08-topic .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.s08-topic h4 {
font-family: var(--font-title);
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
color: var(--text-title);
}
.s08-topic.t1 h4,
.s08-topic.t2 h4,
.s08-topic.t3 h4 { color: var(--text-title); }
/* pct 数字主角 · Terracotta Serif 48px */
.s08-topic .pct {
font-family: var(--font-title);
font-size: 48px;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--color-terracotta); /* Terracotta */
}
.s08-topic.t1 .pct { color: var(--color-terracotta); }
.s08-topic.t2 .pct { color: var(--accent-amber); }
.s08-topic.t3 .pct { color: var(--accent-olive); }
.s08-topic p {
font-size: 13px;
color: var(--text-dim);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
/* 品牌形象总和框 · Ivory + 1px Border Warm(去金渐变+金边+sumPulse) */
.s08-sum {
background: var(--bg-card);
border: 1px solid var(--border-warm);
border-radius: 16px;
padding: 22px 16px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
box-shadow: var(--shadow-whisper);
/* 去 sumPulse 动画 */
}
/* sumPulse keyframe 在原 slides.css 中已删除 */
.s08-sum h3 {
font-family: var(--font-title);
font-size: 25px;
color: var(--text-title); /* Near Black(去蓝) */
letter-spacing: 0;
font-weight: 500;
}
.s08-sum .num {
font-family: var(--font-title);
font-size: 64px;
font-weight: 500;
color: var(--accent-amber); /* Accent Amber #d97706 */
line-height: 1;
font-variant-numeric: tabular-nums;
}
.s08-sum p {
font-size: 13px;
color: var(--text-body);
letter-spacing: 0;
line-height: 1.6;
margin-top: 2px;
font-family: var(--font-body);
}
.s08-sum p b { color: var(--color-terracotta); } /* Terracotta(去红) */
/* ===================== P09 造势三要素 + 数据漏斗 · PIP ===================== */
.s09 {
display: grid;
grid-template-columns: 1fr 340px;
gap: 18px;
height: 100%;
}
.s09-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.s09-right { display: flex; flex-direction: column; justify-content: center; }
.s09-els {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* 三要素卡 · Ivory + 1px Border Light(去金边) */
.s09-els .el {
padding: 12px 10px;
text-align: center;
background: var(--bg-card);
border: 1px solid var(--border-light); /* 去2px金边 */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s09-els .el .num {
display: inline-block;
width: 28px; height: 28px; line-height: 28px;
border-radius: 50%;
background: var(--color-terracotta); /* Terracotta(去金) */
color: #FFF;
font-weight: 500;
margin-bottom: 4px;
font-size: 14px;
font-family: var(--font-body);
}
.s09-els .el h4 {
font-family: var(--font-title);
font-size: 16px;
color: var(--text-title); /* Near Black(去蓝) */
font-weight: 500;
letter-spacing: 0;
margin-bottom: 3px;
}
.s09-els .el p {
font-size: 12px;
color: var(--text-dim);
line-height: 1.5;
letter-spacing: 0;
font-family: var(--font-body);
}
/* 数据漏斗 · 暖沙底 + Terracotta 实色条(去金渐变+金光) */
.s09-funnel {
display: flex;
flex-direction: column;
gap: 12px;
}
.s09-funnel .row {
display: grid;
grid-template-columns: 150px 1fr 140px;
align-items: center;
gap: 12px;
}
.s09-funnel .label {
font-size: 15px;
color: var(--text-body);
font-weight: 500;
letter-spacing: 0;
text-align: right;
font-family: var(--font-body);
}
.s09-funnel .bar-wrap {
position: relative;
height: 28px;
background: var(--bg-sand); /* 暖沙底(去冷蓝薄底) */
border-radius: 10px;
overflow: hidden;
}
.s09-funnel .bar {
position: absolute; left: 0; top: 0; bottom: 0;
height: 100%;
background: var(--color-terracotta); /* Terracotta 纯色(去金渐变) */
border-radius: 10px;
/* 无 box-shadow 金光 */
opacity: 0;
animation: wipeRight var(--dur-slow, 1.0s) var(--ease-slow, cubic-bezier(0.25,0.1,0.25,1)) both;
}
.slide.active .s09-funnel .r1 .bar { animation-delay: 0.3s; width: 95%; }
.slide.active .s09-funnel .r2 .bar { animation-delay: 0.5s; width: 82%; }
.slide.active .s09-funnel .r3 .bar { animation-delay: 0.7s; width: 68%; }
.slide.active .s09-funnel .r4 .bar { animation-delay: 0.9s; width: 55%; }
.slide.active .s09-funnel .r5 .bar { animation-delay: 1.1s; width: 42%; }
.s09-funnel .val {
font-family: var(--font-title);
font-size: 20px;
color: var(--color-terracotta); /* Terracotta(去金) */
font-weight: 500;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.s09-city {
height: 100%;
min-height: 460px;
}
/* ===================== P10 5 红线 + 正反对比 · PIP ===================== */
.s10 {
height: 100%;
}
/* 借势有格口号 · 去外框容器(纯 parchment 上 Serif) */
.s10-slogan {
text-align: center;
margin: 8px 0 22px 0;
padding: 18px 24px;
background: transparent; /* 去 Ivory 底和外框 */
border: none;
/* 无 box-shadow */
}
.s10-slogan h2 {
font-family: var(--font-title);
font-size: 52px;
font-weight: 500;
color: var(--text-title); /* Near Black(去蓝) */
letter-spacing: 0;
}
.s10-slogan .sub {
font-size: 16px;
color: var(--text-muted);
letter-spacing: 0.2px;
margin-top: 6px;
font-family: var(--font-body);
}
/* 5 红线横排 · 去红边+红圆+红光 */
.s10-lines {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.s10-lines .ln {
background: var(--bg-card);
border: 1px solid var(--border-warm); /* 去2px红边→1px Border Warm */
border-radius: 16px;
padding: 14px 8px;
text-align: center;
box-shadow: var(--shadow-whisper);
}
.s10-lines .ln .circ {
width: 44px; height: 44px;
line-height: 44px;
border-radius: 50%;
background: var(--color-terracotta); /* Terracotta(去红) */
color: var(--bg-card); /* Ivory 字 */
font-size: 20px;
font-weight: 500;
margin: 0 auto 6px auto;
/* 无 box-shadow 发光 */
font-family: var(--font-body);
}
.s10-lines .ln h4 {
font-family: var(--font-title);
font-size: 18px;
font-weight: 500;
letter-spacing: 0;
color: var(--text-title); /* Near Black(去红) */
margin-bottom: 4px;
}
.s10-lines .ln p {
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0;
line-height: 1.5;
font-family: var(--font-body);
}
/* 正反对比 · good 绿线/bad 红线(语义正确) */
.s10-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.s10-compare .side {
padding: 16px 20px;
border: 1px solid var(--border-warm);
border-radius: 16px;
background: var(--bg-card);
box-shadow: var(--shadow-whisper);
}
/* good/bad 共用中性边框,h4 文字色做区分 */
.s10-compare .side.good { border-color: var(--border-warm); }
.s10-compare .side.bad { border-color: var(--border-warm); }
.s10-compare .side h4 {
font-family: var(--font-title);
font-size: 20px;
font-weight: 500;
letter-spacing: 0;
margin-bottom: 5px;
}
.s10-compare .side.good h4 { color: var(--accent-olive); } /* Accent Olive "好" */
.s10-compare .side.bad h4 { color: var(--accent-red); } /* Error Crimson 警示(仅此处) */
.s10-compare .side p {
font-size: 14px;
color: var(--text-body);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
.s10-compare .side p .hl { font-weight: 500; }
.s10-compare .side.good .hl { color: var(--accent-olive); }
.s10-compare .side.bad .hl { color: var(--accent-red); }
/* ===================== P11 思政升华 · FULL ===================== */
.s11 {
display: grid;
grid-template-columns: 340px 1fr 340px;
gap: 18px;
height: 100%;
padding-bottom: 260px;
}
.s11-guji, .s11-shineng {
border-radius: 14px;
overflow: hidden;
position: relative;
}
.s11-mid {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
justify-content: center;
}
/* 古籍引文 · editorial 引文风:无卡片圆角,上下 1px Border Warm 分隔线 */
.s11-quote {
text-align: center;
padding: 20px 22px;
background: transparent; /* 去金渐变背景 */
border: none;
border-top: 1px solid var(--border-warm); /* editorial 上线 */
border-bottom: 1px solid var(--border-warm); /* editorial 下线 */
border-radius: 0; /* 去圆角 */
/* 无 box-shadow */
}
.s11-quote .book {
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.3px;
margin-bottom: 8px;
font-family: var(--font-body);
font-weight: 500;
}
.s11-quote .text {
font-family: var(--font-title);
font-size: 36px;
color: var(--text-title);
letter-spacing: 0;
font-weight: 500;
}
.s11-levels { display: flex; flex-direction: column; gap: 10px; }
/* 三层级卡 · 统一中性边框(去三色边) */
.s11-level {
display: grid;
grid-template-columns: 90px 1fr 100px;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s11-level.brand,
.s11-level.region,
.s11-level.nation { border-color: var(--border-light); }
/* tag · 暖沙底 + Serif Near Black(去实心绿橙红) */
.s11-level .tag {
font-family: var(--font-title);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
padding: 7px;
border-radius: 8px;
text-align: center;
color: var(--text-title);
background: var(--bg-sand);
}
.s11-level.brand .tag,
.s11-level.region .tag,
.s11-level.nation .tag { background: var(--bg-sand); color: var(--text-title); }
.s11-level .body {
font-size: 13px;
color: var(--text-body);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
.s11-level .body .hl { color: var(--text-title); font-weight: 500; }
.s11-level .metric { text-align: center; }
.s11-level .metric .num {
font-family: var(--font-title);
font-size: 18px;
font-weight: 500;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* metric 数字 · Terracotta 统一(去三色) */
.s11-level.brand .metric .num { color: var(--color-terracotta); }
.s11-level.region .metric .num { color: var(--color-terracotta); }
.s11-level.nation .metric .num { color: var(--color-terracotta); }
.s11-level .metric .lbl {
font-size: 10px;
color: var(--text-dim);
margin-top: 2px;
letter-spacing: 0.1px;
font-family: var(--font-body);
}
/* 金句卡 · Ivory + Border Warm(去金边) */
.s11-gold {
text-align: center;
padding: 10px 18px;
background: var(--bg-card);
border: 1px solid var(--border-warm); /* 去2px金边 */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
.s11-gold .text {
font-family: var(--font-title);
font-size: 25px;
color: var(--text-title);
letter-spacing: 0;
font-weight: 500;
}
/* ===================== P12 启示与作业 · PIP ===================== */
.s12 {
height: 100%;
}
.s12-head {
font-size: 18px;
color: var(--text-body);
margin-bottom: 14px;
letter-spacing: 0;
font-family: var(--font-body);
}
.s12-head .hl { color: var(--text-title); font-weight: 500; }
.s12-questions {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
/* 三问题卡 · Ivory + 3px Terracotta 左边(去蓝) */
.s12-questions .q {
display: grid;
grid-template-columns: 60px 1fr;
align-items: center;
gap: 18px;
padding: 12px 18px;
background: var(--bg-card);
border-left: 3px solid var(--color-terracotta); /* Terracotta 左边(去蓝) */
border-radius: 12px;
box-shadow: var(--shadow-whisper);
}
/* 序号圆 · Terracotta 底(去蓝) */
.s12-questions .num {
width: 44px; height: 44px; line-height: 44px;
border-radius: 50%;
background: var(--color-terracotta); /* Terracotta */
text-align: center;
font-size: 22px;
font-weight: 500;
color: #FFF;
box-shadow: 0 0 0 1px var(--ring-warm); /* ring shadow(去蓝光) */
font-family: var(--font-body);
}
.s12-questions .txt {
font-size: 16px;
color: var(--text-body);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
.s12-questions .txt .hl { color: var(--text-title); font-weight: 500; }
/* 作业三级 · Ivory + 1px Border Warm(去金渐变+3px金边) */
.s12-hw {
background: var(--bg-card);
border: 1px solid var(--border-warm);
border-radius: 16px;
padding: 18px 22px;
box-shadow: var(--shadow-whisper);
}
.s12-hw h3 {
font-family: var(--font-title);
color: var(--text-title); /* Near Black(去蓝) */
font-size: 25px;
letter-spacing: 0;
font-weight: 500;
margin-bottom: 12px;
}
.s12-hw ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 7px;
}
.s12-hw li {
display: grid;
grid-template-columns: 90px 1fr;
gap: 14px;
align-items: baseline;
font-size: 15px;
color: var(--text-body);
line-height: 1.6;
letter-spacing: 0;
font-family: var(--font-body);
}
.s12-hw li .lvl {
font-family: var(--font-title);
font-size: 15px;
font-weight: 500;
color: var(--accent-amber); /* Accent Amber(去蓝) */
letter-spacing: 0.1px;
}
.s12-hw li b { color: var(--accent-red); } /* 仅反例警示保留 Error Crimson */
/* ===================== P13 片尾 · 全屏书法 + 叠加文字 ===================== */
.s13 {
position: absolute;
inset: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.s13-book {
position: absolute; inset: 0;
overflow: hidden;
}
.s13-book iframe { width: 100%; height: 100%; border: 0; }
/* 叠加浮层 · Ivory 半透明 + blur(去浅蓝底+金边) */
.s13-overlay {
position: absolute;
left: 100px; top: 50%;
transform: translateY(-50%);
text-align: left;
z-index: 2;
background: rgba(248, 250, 252, 0.92); /* Ivory 半透明 */
backdrop-filter: blur(10px);
padding: 28px 38px;
border-radius: 24px;
border: 1px solid var(--border-warm); /* 去金边 */
box-shadow: var(--shadow-whisper);
max-width: 720px;
}
/* "谢谢" · Serif 500 Near Black(去 思源宋体 900 + 字距) */
.s13-thanks {
font-family: var(--font-title);
font-size: 90px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 0.5px;
line-height: 1;
}
.s13-thanks b { color: var(--accent-amber); }
/* "Thank You" · Serif 500 Amber(去 700 + 8px 字距) */
.s13-subtitle {
font-family: var(--font-title);
font-size: 25px;
color: var(--accent-amber); /* Accent Amber */
letter-spacing: 0.3px;
margin: 4px 0 18px 0;
font-weight: 500;
}
/* 下节预告 · 中性化(去蓝边) */
.s13-teaser {
font-size: 16px;
color: var(--text-body);
letter-spacing: 0;
margin-bottom: 12px;
padding: 8px 20px;
border: 1px solid var(--border-warm); /* 去2px蓝边 */
border-radius: 16px;
display: inline-block;
background: var(--bg-card);
font-family: var(--font-body);
}
.s13-teaser .kw { color: var(--color-terracotta); font-weight: 500; margin: 0 4px; }
/* 数据源注 */
.s13-meta {
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.1px;
margin-top: 10px;
line-height: 1.7;
font-family: var(--font-body);
border-top: 1px solid var(--border-light);
padding-top: 10px;
}
.s13-meta .line2 { color: var(--text-body); font-weight: 500; }
/* LOGO 署名 · Terracotta 左边 */
.s13-logo {
margin-top: 14px;
font-size: 14px;
color: var(--text-dim);
letter-spacing: 0.1px;
border-left: 3px solid var(--color-terracotta); /* Terracotta(去金) */
padding-left: 12px;
font-family: var(--font-body);
}
.s13-logo .big {
display: block;
font-family: var(--font-title);
font-size: 18px;
color: var(--text-title);
font-weight: 500;
letter-spacing: 0;
}
/* ===================== 镜头 ㊵(data-shotno=40) 片尾双栏 inline-style 覆盖 ===================== */
/* "谢 谢" 130px 字距归零 */
.slide[data-shotno="40"] .shot-main > div {
gap: 96px !important; /* 留白加倍 */
}
.slide[data-shotno="40"] .shot-main > div > div:first-child > div:first-child {
font-size: 130px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
font-family: var(--font-title) !important;
color: var(--text-title) !important; /* Near Black */
}
/* "Thank You" */
.slide[data-shotno="40"] .shot-main > div > div:first-child > div:last-child {
font-size: 25px !important;
color: var(--accent-amber) !important;
letter-spacing: 0.3px !important;
font-weight: 500 !important;
font-family: var(--font-title) !important;
}
/* "下节预告" 标签 */
.slide[data-shotno="40"] .shot-main > div > div:last-child > div:first-child {
font-size: 14px !important;
color: var(--text-dim) !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
font-family: var(--font-body) !important;
}
/* 下节预告容器 · 去2px蓝边 */
.slide[data-shotno="40"] .shot-main > div > div:last-child > div:nth-child(2) {
border: 1px solid var(--border-warm) !important;
border-radius: 16px !important;
background: var(--bg-card) !important;
font-size: 20px !important;
color: var(--text-body) !important;
letter-spacing: 0 !important;
font-family: var(--font-body) !important;
}
/* 数据源行 */
.slide[data-shotno="40"] .shot-main > div > div:last-child > div:last-child {
font-size: 13px !important;
color: var(--text-dim) !important;
letter-spacing: 0 !important;
line-height: 1.8 !important;
font-family: var(--font-body) !important;
}
/* ===================== 镜头 ㊶(data-shotno=41) 南财 LOGO inline-style 覆盖 ===================== */
/* 去金框大盒子 · 改 Ring Shadow 极简 */
.slide[data-shotno="41"] .shot-centered > div:first-child {
font-size: 52px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
font-family: var(--font-title) !important;
color: var(--text-title) !important;
border: none !important;
box-shadow: 0 0 0 1px var(--ring-warm) !important; /* Ring Shadow 替代金框 */
padding: 24px 60px !important;
border-radius: 32px !important;
background: var(--bg-card) !important;
}
/* 副标题 · 去字距 */
.slide[data-shotno="41"] .shot-centered > div:nth-child(2) {
font-size: 18px !important;
color: var(--text-muted) !important;
letter-spacing: 0 !important;
font-family: var(--font-body) !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
/* 免责提示 · Error Crimson 1px dashed(语义正确,保留) */
.slide[data-shotno="41"] .shot-centered > div:nth-child(3) {
font-size: 14px !important;
color: var(--accent-red) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
padding: 8px 22px !important;
border: 1px dashed var(--accent-red) !important;
border-radius: 8px !important;
font-family: var(--font-body) !important;
}
/* ===================== 镜头 ⑲ 胶囊标签覆盖(inline background:var(--accent-red/orange/green)) ===================== */
.slide[data-shotno="19"] .shot-main span[style*="background:var(--accent-red)"],
.slide[data-shotno="19"] .shot-main span[style*="background: var(--accent-red)"] {
background: var(--accent-red) !important; /* 保留语义红(宿迁籍地域) */
font-weight: 500 !important;
letter-spacing: 0 !important;
font-size: 16px !important;
}
.slide[data-shotno="19"] .shot-main span[style*="background:var(--accent-orange)"],
.slide[data-shotno="19"] .shot-main span[style*="background: var(--accent-orange)"] {
background: var(--color-terracotta) !important; /* Terracotta(去橙) */
font-weight: 500 !important;
letter-spacing: 0 !important;
font-size: 16px !important;
}
.slide[data-shotno="19"] .shot-main span[style*="background:var(--accent-green)"],
.slide[data-shotno="19"] .shot-main span[style*="background: var(--accent-green)"] {
background: var(--accent-olive) !important; /* Accent Olive(去绿) */
font-weight: 500 !important;
letter-spacing: 0 !important;
font-size: 16px !important;
}
/* 农特产 +82% 大数字 · 去 900/橙色 */
.slide[data-shotno="19"] .shot-main div[style*="font-size:54px"] {
font-size: 54px !important;
font-weight: 500 !important;
color: var(--color-terracotta) !important; /* Terracotta */
font-family: var(--font-title) !important;
letter-spacing: 0 !important;
}
/* ===================== 镜头 ⑥ 三类型 inline h4 颜色覆盖 ===================== */
.slide[data-shotno="6"] .card.green h4 { color: var(--accent-olive) !important; }
.slide[data-shotno="6"] .card.orange h4 { color: var(--color-terracotta) !important; }
.slide[data-shotno="6"] .card.red h4 { color: var(--text-title) !important; }
/* ===================== 镜头 ⑪ tick inline style 覆盖(颜色已被 .s05-check .tick 统一处理) ===================== */
.slide[data-shotno="11"] .card.green h4 { color: var(--accent-olive) !important; }
.slide[data-shotno="11"] .card.orange h4 { color: var(--color-terracotta) !important; }
.slide[data-shotno="11"] .card.red h4 { color: var(--text-title) !important; }
/* ===================== 镜头 ㉓ 三要素 inline el 容器覆盖(去金边) ===================== */
.slide[data-shotno="23"] .el[style] {
border: 1px solid var(--border-light) !important;
box-shadow: var(--shadow-whisper) !important;
}
.slide[data-shotno="23"] .el > div[style*="background:var(--brand-gold-deep)"],
.slide[data-shotno="23"] .el > div[style*="background: var(--brand-gold-deep)"] {
background: var(--color-terracotta) !important; /* Terracotta */
}
.slide[data-shotno="23"] .el h4 {
color: var(--text-title) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
font-family: var(--font-title) !important;
}
/* ===================== 通用:顶栏 slide-head 样式 =====================
* slides.css 末尾旧版本已删除,改由 theme.css 中的版本生效。
* 下方仅保留必要的补丁。
* =================================================================== */
/* golden-line 已由 theme.css 定义为 1px Border Warm 水平线,此处不重复覆盖 */
/* ===================== 镜头 ⑬ 过渡 · 足球从 Step1 跳向 Step2 =====================
* 容器 .s13-staircase: max-width:900px, 3 × 1fr 网格 + 16px gap
* → 每列宽 ≈ 289px · Step1 顶中心在 ~144px · Step2 顶中心在 ~449px
* → 水平跳跃距离 ≈ 305px;垂直抬升 60px(Step2 比 Step1 高)
* 弹跳动画由 slide-effects.js 物理引擎控制(不再使用 CSS keyframe)
* =================================================================== */
.slide[data-shotno="13"] .s13-ball {
position: absolute;
/* 球起点在标题下方间隙(top=-120 留出空间不与文字重合) */
top: -120px;
left: 50%; /* Step2 列中心(3 列中间) */
width: 40px; height: 40px;
margin-left: -20px;
font-size: 40px;
line-height: 1;
text-align: center;
z-index: 10;
pointer-events: none;
transform-origin: center center;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
/* JS 物理动画控制 transform,此处仅设置初始状态 */
/* Step2(接势)· 进行中呼吸光晕 */
.slide[data-shotno="13"].active .s13-step2 {
animation: s13-step2-breathe 2.4s ease-in-out 1.8s infinite;
}
@keyframes s13-step2-breathe {
0%, 100% { box-shadow: 0 8px 32px rgba(30,64,175,0.16), var(--shadow-whisper); }
50% { box-shadow: 0 10px 42px rgba(30,64,175,0.32), var(--shadow-whisper); }
}
/* ===================== 镜头 ㉒ 过渡 · 足球从 Step2 跳向 Step3 =====================
* 容器 .s22-staircase: 与 .s13-staircase 结构一致(3 × 1fr + 16px gap + align-items:end)
* Step2 顶边 grid y=60(320-260); Step3 顶边 y=0(Step3 撑满行高 320)
* 球起点 left:50% (Step2 列中心 = 容器正中),top:20px(球底贴 y=60)
* 跳跃位移仍为 (305,-60):到 Step3 列中心(x=W/2+305=754),且球底贴 y=0
* 弹跳动画由 slide-effects.js 物理引擎控制(不再使用 CSS keyframe)
* =================================================================== */
.slide[data-shotno="22"] .s22-ball {
position: absolute;
/* 球起点在标题下方间隙(top=-120 留出空间不与文字重合) */
top: -120px;
left: calc(100% / 3 * 2 + (100% - 32px) / 6); /* Step3 列中心 */
width: 40px; height: 40px;
margin-left: -20px;
font-size: 40px;
line-height: 1;
text-align: center;
z-index: 10;
pointer-events: none;
transform-origin: center center;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
/* JS 物理动画控制 transform,此处仅设置初始状态 */
/* Step3(造势)· 顶峰呼吸光晕 · 琥珀金 */
.slide[data-shotno="22"].active .s22-step3 {
animation: s22-step3-breathe 2.4s ease-in-out 1.8s infinite;
}
@keyframes s22-step3-breathe {
0%, 100% { box-shadow: 0 8px 32px rgba(30,64,175,0.18), var(--shadow-whisper); }
50% { box-shadow: 0 10px 44px rgba(30,64,175,0.34), var(--shadow-whisper); }
}
/* ===================== 镜头 ⑮ 伊利海报两段式轮播 =====================
* 阶段 1:三竖屏位并排 · 3 轮同步切换
* slot 1: v01(0-30%) → v04(34-63%) → v07(67-97%) [3 张]
* slot 2: v02(0-30%) → v05(34-97%) [2 张,末轮保持]
* slot 3: v03(0-30%) → v06(34-97%) [2 张,末轮保持]
* 阶段 2:单横屏大位置,5 张横屏 h01-h05 按 --i 0..4 淡入淡出
* 主时序(16s):0-8s 显示阶段 1, 8-16s 显示阶段 2
* 背景色 = var(--bg-page) parchment,与页面融为一体
* =================================================================== */
.slide[data-shotno="15"] .s15-stage {
position: relative;
width: 100%;
height: 360px;
}
.slide[data-shotno="15"] .s15-v-stage,
.slide[data-shotno="15"] .s15-h-stage {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.slide[data-shotno="15"] .s15-v-stage { gap: 18px; }
/* 单个竖屏位(3 个并排)· 背景与页面同,无白色描边 */
.slide[data-shotno="15"] .s15-v-slot {
position: relative;
width: 210px;
height: 280px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,0.20);
background: var(--bg-page);
}
.slide[data-shotno="15"] .s15-v-slot img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
}
/* 单程播放(no-loop):总时长 16s · H 先(0-8s)· V 后(8-16s)· 末帧保留
V 阶段 3 轮同步切换,延迟 8s 启动,与 H 阶段错开
第 1 张:0-30% 可见
第 2 张:34-63% 可见(slot 2/3 保持到末尾)
第 3 张:67-100% 可见(仅 slot 1,保持到末尾)
*/
.slide[data-shotno="15"].active .s15-v-slot img:nth-child(1) {
animation: s15-v-round1 8s linear 8s 1 both;
}
.slide[data-shotno="15"].active .s15-v-slot:nth-child(1) img:nth-child(2) {
animation: s15-v-round2 8s linear 8s 1 both;
}
.slide[data-shotno="15"].active .s15-v-slot:nth-child(1) img:nth-child(3) {
animation: s15-v-round3 8s linear 8s 1 both;
}
/* slot 2/3 只有 2 张,末轮保持最后一张 */
.slide[data-shotno="15"].active .s15-v-slot:nth-child(2) img:nth-child(2),
.slide[data-shotno="15"].active .s15-v-slot:nth-child(3) img:nth-child(2) {
animation: s15-v-round2-hold 8s linear 8s 1 both;
}
@keyframes s15-v-round1 {
0%, 30% { opacity: 1; }
34%, 100% { opacity: 0; }
}
@keyframes s15-v-round2 {
0%, 30% { opacity: 0; }
34%, 63% { opacity: 1; }
67%, 100% { opacity: 0; }
}
@keyframes s15-v-round3 {
0%, 63% { opacity: 0; }
67%, 100% { opacity: 1; } /* 末轮保持到结束 */
}
@keyframes s15-v-round2-hold {
0%, 30% { opacity: 0; }
34%, 100% { opacity: 1; } /* slot 2/3 末轮保持到结束 */
}
/* 横屏单位置 · 5 张顺播一遍,各 1.6s,最后一张定格 · 平滑淡入淡出 */
.slide[data-shotno="15"] .s15-h-box {
position: relative;
width: 640px;
height: 340px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,0.24);
background: var(--bg-page);
}
.slide[data-shotno="15"] .s15-h-box img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.3s ease-in-out; /* 平滑过渡 */
}
/* 前4张:正常轮播,带淡入淡出 */
.slide[data-shotno="15"].active .s15-h-box img {
animation: s15-h-slide 1.6s ease-in-out 1 both;
animation-delay: calc(var(--i) * 1.6s);
}
/* 第5张(最后一张):保持显示,不消失 */
.slide[data-shotno="15"].active .s15-h-box img[style*="--i:4"] {
animation: s15-h-last 1.6s ease-in-out 1 both;
animation-delay: calc(var(--i) * 1.6s);
}
@keyframes s15-h-slide {
0% { opacity: 0; }
10%, 85% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes s15-h-last {
0% { opacity: 0; }
15%, 100% { opacity: 1; } /* 最后一张淡入后保持 */
}
/* 镜头15:只显示单图轮播,隐藏三分屏
H 阶段单图轮播,每张 1.6s,最后定格 */
.slide[data-shotno="15"].active .s15-v-stage {
display: none; /* 隐藏三分屏 */
}
.slide[data-shotno="15"].active .s15-h-stage {
opacity: 1; /* 始终显示横屏单图 */
}
.slide[data-shotno="15"] .s15-phase-label {
position: absolute;
bottom: 4px;
right: 10px;
font-family: var(--font-title);
font-size: 13px;
color: var(--text-dim);
letter-spacing: 3px;
font-style: italic;
z-index: 40;
pointer-events: none;
}
/* ===================== 镜头 ㉛ 古籍翻书 + 金句 overlay · 从左到右逐字浮现 ===================== */
.slide[data-shotno="31"] .s31-stage {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide[data-shotno="31"] .s31-stage .shot-iframe {
position: absolute;
inset: 0;
}
.slide[data-shotno="31"] .s31-stage .shot-iframe iframe {
width: 100%;
height: 100%;
border: 0;
}
/* 金句 overlay · 置底层于 iframe 之上,延迟 8s 淡入 */
.slide[data-shotno="31"] .s31-quote {
position: absolute;
left: 35%;
bottom: 8%;
transform: translateX(-50%);
padding: 28px 60px 32px;
background: linear-gradient(180deg,
rgba(248, 250, 252, 0.96),
rgba(219, 234, 254, 0.92));
border: 2px solid rgba(30, 64, 175, 0.55);
border-radius: 18px;
box-shadow:
0 18px 48px rgba(0,0,0,0.22),
0 0 0 1px rgba(30, 64, 175, 0.14);
backdrop-filter: blur(6px);
text-align: center;
min-width: 900px;
opacity: 0;
z-index: 10;
}
/* 左右分栏布局 */
.slide[data-shotno="31"] .s31-quote-inner {
display: flex;
align-items: center;
gap: 32px;
}
.slide[data-shotno="31"] .s31-quote-left {
flex-shrink: 0;
opacity: 0;
animation: s31-portrait-in 0.8s ease-out 5.0s forwards;
}
.slide[data-shotno="31"] .s31-portrait {
height: 160px;
width: auto;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.slide[data-shotno="31"] .s31-quote-right {
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes s31-portrait-in {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
.slide[data-shotno="31"].active .s31-quote {
animation: s31-quote-frame-in 1s cubic-bezier(.22,1,.36,1) 5.2s forwards;
}
@keyframes s31-quote-frame-in {
from { opacity: 0; transform: translateX(-50%) translateY(30px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* 出处小字 */
.slide[data-shotno="31"] .s31-quote-source {
font-family: var(--font-title);
font-size: 20px;
color: #475569;
letter-spacing: 8px;
font-style: italic;
font-weight: 500;
margin-bottom: 20px;
opacity: 0;
animation: s31-source-in 0.6s ease-out 5.6s forwards;
}
@keyframes s31-source-in {
from { opacity: 0; }
to { opacity: 0.85; }
}
/* 主金句 · 每字 span 按 --i 从左到右依次落笔 */
.slide[data-shotno="31"] .s31-quote-main {
font-family: var(--font-title);
font-size: 78px;
font-weight: 700;
color: #1e40af;
letter-spacing: 4px;
line-height: 1.35;
text-shadow: 0 2px 6px rgba(139, 26, 26, 0.18);
margin-bottom: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.slide[data-shotno="31"] .s31-quote-line {
display: flex;
align-items: center;
justify-content: center;
}
.slide[data-shotno="31"] .s31-quote-main > span {
display: inline-block;
opacity: 0;
transform: translateY(-16px) scale(1.4);
filter: blur(6px);
}
.slide[data-shotno="31"] .s31-quote-main .s31-sep {
color: var(--accent-amber);
margin: 0 10px;
font-weight: 500;
}
/* 13 字按 --i 顺序,每字 0.22s 一笔 · 起始 6.0s */
.slide[data-shotno="31"].active .s31-quote-main > span {
animation: s31-char-brush 0.65s cubic-bezier(.25,.8,.35,1.1) forwards;
animation-delay: calc(6.0s + var(--i) * 0.22s);
}
@keyframes s31-char-brush {
0% { opacity: 0; transform: translateY(-16px) scale(1.4); filter: blur(6px); }
55% { opacity: 1; transform: translateY(4px) scale(1.08); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* 现代翻译 · 字按字母顺序从左到右(利用 writing-mode 的 text,不用 --i) · 最后整体淡入 */
.slide[data-shotno="31"] .s31-quote-translation {
font-family: var(--font-title);
font-size: 20px;
font-weight: 500;
color: #475569;
letter-spacing: 5px;
font-style: italic;
opacity: 0;
/* 翻译浮现:金句最后一字(--i:12)开始动画在 6.0 + 12*0.22 = 8.64s,加 0.6s 延时到 9.24s */
animation: s31-translation-in 1.2s ease-out 9.3s forwards;
}
@keyframes s31-translation-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 0.85; transform: translateY(0); }
}
/* 金句 overlay 出现时,轻微压暗 iframe 让文字更突出 */
.slide[data-shotno="31"] .s31-stage::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 30%,
rgba(0, 0, 0, 0.08) 70%,
rgba(0, 0, 0, 0.16) 100%);
pointer-events: none;
opacity: 0;
z-index: 5;
}
.slide[data-shotno="31"].active .s31-stage::after {
animation: s31-dim-in 1s ease-out 5.2s forwards;
}
@keyframes s31-dim-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ===================== 镜头 ㉗ 吉祥物 iframe + 对话气泡 overlay =====================
* 480px 高,使 iframe 内 stage-scaler 缩放(min(844/1920, 480/1080) ≈ 0.439)
* 与镜头 7 横向缩放(0.439)对齐 · 苏超吉祥物及对话气泡尺寸与镜头 7 一致 ·
* 去除外层 border/background/shadow/radius,与镜头 7 直接套 .shot-iframe 视觉一致 */
.slide[data-shotno="27"] .s27-stage {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.slide[data-shotno="27"] .s27-stage .shot-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide[data-shotno="27"] .s27-stage .shot-iframe iframe {
width: 100%;
height: 100%;
border: 0;
background: transparent;
}
/* 对话气泡公共样式 */
.slide[data-shotno="27"] .s27-avatar {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 0 0 56px;
}
.slide[data-shotno="27"] .s27-avatar-circle {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title);
font-size: 26px;
font-weight: 500;
color: #ffffff;
}
.slide[data-shotno="27"] .s27-avatar-teacher .s27-avatar-circle {
background: linear-gradient(135deg, var(--color-terracotta), #1d4ed8);
box-shadow: 0 4px 12px rgba(30,64,175,0.35);
}
.slide[data-shotno="27"] .s27-avatar-mascot .s27-avatar-circle {
background: linear-gradient(135deg, var(--accent-amber), #1d4ed8);
box-shadow: 0 4px 12px rgba(30,64,175,0.35);
font-size: 30px;
}
.slide[data-shotno="27"] .s27-avatar-tag {
font-family: var(--font-title);
font-size: 10px;
letter-spacing: 2px;
font-weight: 600;
background: rgba(248,250,252,0.88);
padding: 2px 8px;
border-radius: 6px;
}
.slide[data-shotno="27"] .s27-avatar-teacher .s27-avatar-tag { color: var(--color-terracotta); }
.slide[data-shotno="27"] .s27-avatar-mascot .s27-avatar-tag { color: var(--accent-amber); }
.slide[data-shotno="27"] .s27-bubble {
padding: 14px 18px;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(0,0,0,0.16);
max-width: 340px;
}
.slide[data-shotno="27"] .s27-bubble-teacher {
background: rgba(248,250,252,0.95);
border: 2px solid var(--color-terracotta);
}
.slide[data-shotno="27"] .s27-bubble-mascot {
background: linear-gradient(135deg, rgba(30,64,175,0.10), rgba(248,250,252,0.95) 60%);
border: 2px solid var(--accent-amber);
}
.slide[data-shotno="27"] .s27-bubble-text {
font-family: var(--font-title);
font-size: 16px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 1px;
line-height: 1.55;
}
.slide[data-shotno="27"] .s27-bubble-teacher .s27-bubble-text b { color: var(--color-terracotta); font-weight: 600; }
.slide[data-shotno="27"] .s27-bubble-mascot .s27-bubble-text b { color: var(--accent-amber); font-weight: 600; }
/* 教师气泡: 左上 */
.slide[data-shotno="27"] .s27-teacher-bubble {
position: absolute;
top: 18px;
left: 18px;
display: flex;
align-items: flex-start;
gap: 10px;
z-index: 5;
}
/* 吉祥物气泡: 右下 */
.slide[data-shotno="27"] .s27-mascot-bubble {
position: absolute;
bottom: 18px;
right: 18px;
display: flex;
align-items: flex-end;
gap: 10px;
z-index: 5;
}
/* ===================== 镜头 ㉕-㉖(合并) · ECharts 漏斗 + 胶囊带 + 权威背书 =====================
* Phase 1 (0-10s): 胶囊带逐个 + 漏斗 5 层逐层出现(同步,每条间隔 2s)
* Phase 2 (12s): 漏斗消失，胶囊带定格
* Phase 3 (14s): 权威背书横条弹出
* ============================================================================ */
/* ECharts 漏斗容器 */
.slide[data-shotno="25"] .s25-funnel-wrap {
width: 100%;
height: 380px;
padding: 4px 0;
margin: 0 auto;
transition: opacity 0.8s ease;
}
.slide[data-shotno="25"].collapse .s25-funnel-wrap {
opacity: 0;
pointer-events: none;
height: 0;
padding: 0;
overflow: hidden;
}
.slide[data-shotno="25"] #s25-funnel {
width: 100%;
height: 100%;
}
/* 胶囊 HERO 带 · 初始隐藏，加载后逐个淡入(与漏斗层同步) */
.slide[data-shotno="25"] .s25-capsule {
opacity: 0;
transform: translateY(-8px);
}
.slide[data-shotno="25"].show-caps .s25-capsule {
animation: s25-cap-in 0.5s cubic-bezier(.34,1.4,.64,1) both;
}
.slide[data-shotno="25"].show-caps .s25-capsule:nth-of-type(1) { animation-delay: 0s; }
.slide[data-shotno="25"].show-caps .s25-capsule:nth-of-type(2) { animation-delay: 2s; }
.slide[data-shotno="25"].show-caps .s25-capsule:nth-of-type(3) { animation-delay: 4s; }
.slide[data-shotno="25"].show-caps .s25-capsule:nth-of-type(4) { animation-delay: 6s; }
@keyframes s25-cap-in {
0% { opacity: 0; transform: translateY(-8px); }
100% { opacity: 1; transform: translateY(0); }
}
/* 权威背书横条 · Phase 3 弹出 */
.slide[data-shotno="25"] .s25-authority {
opacity: 0;
transform: translateY(24px) scale(0.94);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.slide[data-shotno="25"].show-news .s25-authority {
animation: s25-auth-in 0.9s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes s25-auth-in {
0% { opacity: 0; transform: translateY(24px) scale(0.94); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===================== 镜头 ⑱ +82% 增长动效(CSS @property integer + counter) =====================
* 原理:定义整数 CSS 属性 --s18-n,用 @keyframes 从 0 动画到 82,
* 通过 counter-reset + counter() 把整数值渲染为可见数字
* 兼容:Chrome 85+ / Safari 15.4+ / Firefox 128+ · 不支持的浏览器静态显示 82
* =================================================================== */
@property --s18-n {
syntax: '';
inherits: false;
initial-value: 82; /* 降级:不支持动画时直接显示终值 */
}
.slide[data-shotno="18"] .s18-count-num {
counter-reset: n var(--s18-n);
}
.slide[data-shotno="18"] .s18-count-num::after {
content: counter(n);
}
/* 计数动画 · 延迟至 finale 段(22s 后)启动,与 +82% 卡同步进入 */
.slide[data-shotno="18"].active .s18-count-num {
animation: s18-count-up 2.2s cubic-bezier(0.22, 1, 0.36, 1) 23.5s both;
}
@keyframes s18-count-up {
from { --s18-n: 0; }
to { --s18-n: 82; }
}
/* 右侧箭头 · 同步到 finale */
.slide[data-shotno="18"] .s18-arrow {
color: var(--accent-amber);
opacity: 0;
display: inline-block;
transform: translate(-6px, 6px) scale(0.6);
}
.slide[data-shotno="18"].active .s18-arrow {
animation: s18-arrow-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 25.5s forwards;
}
@keyframes s18-arrow-pop {
0% { opacity: 0; transform: translate(-6px, 6px) scale(0.6); }
60% { opacity: 1; transform: translate(4px, -6px) scale(1.15); }
100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* ===================== 镜头 ⑰ 玻璃杯作底座 + SVG 天平梁 =====================
* 结构:stage 底层玻璃杯 PNG(抠图,透明背景); 上层 SVG 只画横梁 + 吊绳 + 托盘 + 13 城市
* 玻璃杯鈯底部,SVG 自顶向下铺到横梁 y=230 对应玻璃杯口位置
* 横梁(.s17-beam)围绕 SVG viewBox 中点(700,230)轻微摆动
* caption 在 stage 外,不与玻璃杯重叠
* =================================================================== */
.slide[data-shotno="17"] .s17-stage {
position: relative;
width: 100%;
height: 560px;
}
/* 吉祥物 PNG · AI 合成(吉祥物+放大天平) · 居中展示 */
.slide[data-shotno="17"] .s17-mascot {
position: absolute;
left: 50%;
top: 50%;
height: 540px;
width: auto;
transform: translate(-50%, -50%);
z-index: 1;
filter: drop-shadow(0 4px 16px rgba(0,0,0,0.12));
}
/* SVG 城市徽章叠加层 · 与图片完全重合,共享坐标系 */
.slide[data-shotno="17"] .s17-cities-svg {
position: absolute;
left: 50%;
top: 50%;
height: 700px;
width: auto;
transform: translate(-50%, -50%);
z-index: 5;
pointer-events: none;
}
/* 城市徽章弹跳入场 + 上下跳动动画 */
.slide[data-shotno="17"].active .s17-city {
animation:
s17-city-pop 0.4s cubic-bezier(.34,1.56,.64,1) forwards,
s17-city-bounce 1.2s ease-in-out 1.0s infinite alternate;
animation-delay: calc(var(--i) * 0.08s), calc(1.0s + var(--i) * 0.12s);
opacity: 0;
transform: scale(0);
}
@keyframes s17-city-pop {
0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes s17-city-bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
/* 金句块 · 置于公式与天平之间,充当 hero 引子 · 复刻 P04 原版文案 */
.slide[data-shotno="17"] .s17-quote {
text-align: center;
align-self: center;
display: flex;
flex-direction: column;
gap: 6px;
}
.slide[data-shotno="17"] .s17-quote-main {
font-family: var(--font-title);
font-size: 28px;
font-weight: 500;
color: var(--accent-amber);
letter-spacing: 4px;
line-height: 1.2;
}
.slide[data-shotno="17"] .s17-quote-sub {
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--text-sub);
letter-spacing: 3px;
line-height: 1.4;
}
.slide[data-shotno="17"] .s17-quote-sub .op {
color: var(--text-dim);
margin: 0 4px;
}
/* ============================================================
* 镜头 3 · 数据卡片 + 趋势图动画(匹配旁白时序 00:20-00:35)
* 0.3s: 标题 "赞助商阵容暴涨"
* 1.5s: 卡片 30+(当旁白"30 多个品牌")
* 2.8s: 卡片 300万(当旁白"300 万")
* 4.0s: 趋势图容器显现 · ECharts 自有 3.2s 动画
* 7.0s: 卡片 370亿(当趋势线爬到最右"服务营收")
* ============================================================ */
.slide[data-shotno="3"] .s3-title {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
}
.slide[data-shotno="3"].active .s3-title {
animation: s3-fade-down 0.6s cubic-bezier(.22,1,.36,1) 0.3s both;
}
.slide[data-shotno="3"] .s3-card {
opacity: 0;
visibility: hidden;
transform: translateY(18px) scale(0.92);
}
.slide[data-shotno="3"].active .s3-card[data-idx="1"] {
animation: s3-card-pop 0.55s cubic-bezier(.34,1.56,.64,1) 4.0s both;
}
.slide[data-shotno="3"].active .s3-card[data-idx="2"] {
animation: s3-card-pop 0.55s cubic-bezier(.34,1.56,.64,1) 6.0s both;
}
.slide[data-shotno="3"].active .s3-card[data-idx="3"] {
animation: s3-card-pop-glow 0.7s cubic-bezier(.34,1.56,.64,1) 8.0s both;
}
.slide[data-shotno="3"] .s3-chart-wrap {
opacity: 0;
visibility: hidden;
}
.slide[data-shotno="3"].active .s3-chart-wrap {
animation: s3-fade-in 0.8s ease-out 0s both;
}
@keyframes s3-fade-down {
0% { opacity: 0; visibility: hidden; transform: translateY(-8px); }
100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes s3-fade-in {
0% { opacity: 0; visibility: hidden; }
100% { opacity: 1; visibility: visible; }
}
@keyframes s3-card-pop {
0% { opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.92); }
60% { opacity: 1; visibility: visible; transform: translateY(-4px) scale(1.04); }
100% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
}
@keyframes s3-card-pop-glow {
0% { opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.92); box-shadow: 0 0 0 rgba(181,51,51,0); }
55% { opacity: 1; visibility: visible; transform: translateY(-6px) scale(1.08); box-shadow: 0 10px 40px rgba(181,51,51,0.35); }
100% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); box-shadow: 0 4px 18px rgba(181,51,51,0.15); }
}
/* ============================================================
* 镜头 4 · "品牌借势营销" hero 主视觉 · 匹配旁白 00:35-00:45
* 0.4s: "今天 · 我们一起拆解" 浅色小字出现
* 1.4s: 品 / 牌 / 借 / 势 / 营 / 销 依次落字(每字 160ms stagger)
* 3.8s: 底部发光底线展开
* 4.6s: "'识·接·造' 三步法" 出现
* ============================================================ */
.slide[data-shotno="4"].active .s4-prelude {
animation: s4-prelude-in 0.7s cubic-bezier(.22,1,.36,1) 0.4s forwards;
}
.slide[data-shotno="4"] .s4-char {
display: inline-block;
opacity: 0;
transform: translateY(-20px) scale(1.3);
filter: blur(8px);
}
.slide[data-shotno="4"].active .s4-char {
animation: s4-char-fall 0.65s cubic-bezier(.25,.8,.35,1.1) forwards;
animation-delay: calc(1.4s + var(--i) * 0.16s);
}
.slide[data-shotno="4"] .s4-underline {
opacity: 0;
}
.slide[data-shotno="4"].active .s4-underline {
animation: s4-underline 0.9s cubic-bezier(.22,1,.36,1) 3.8s forwards;
}
.slide[data-shotno="4"].active .s4-tail {
animation: s4-tail-in 0.8s cubic-bezier(.22,1,.36,1) 4.6s forwards;
}
@keyframes s4-prelude-in {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes s4-char-fall {
0% { opacity: 0; transform: translateY(-20px) scale(1.3); filter: blur(8px); }
55% { opacity: 1; transform: translateY(3px) scale(1.05); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes s4-underline {
0% { opacity: 0; width: 0; }
100% { opacity: 1; width: 420px; }
}
@keyframes s4-tail-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 5 · 定义卡 · 统一 Serif 字体 + 文案逐层浮现
* 0.3s: 标题卡淡入
* 0.8s: 标题 "借势营销 · 定义" 下划
* 1.6s: 正文 fade-up
* ============================================================ */
.slide[data-shotno="5"] .s5-card {
opacity: 0;
transform: translateY(16px);
}
.slide[data-shotno="5"].active .s5-card {
animation: s5-card-in 0.8s cubic-bezier(.22,1,.36,1) 0.3s forwards;
}
.slide[data-shotno="5"] .s5-title {
opacity: 0;
transform: translateY(-6px);
}
.slide[data-shotno="5"].active .s5-title {
animation: s3-fade-down 0.6s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}
.slide[data-shotno="5"] .s5-body {
opacity: 0;
transform: translateY(8px);
}
.slide[data-shotno="5"].active .s5-body {
animation: s5-body-in 0.8s cubic-bezier(.22,1,.36,1) 1.6s forwards;
}
.slide[data-shotno="5"] .s5-hl,
.slide[data-shotno="5"] .s5-kw {
position: relative;
}
@keyframes s5-card-in {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes s5-body-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 6 · 太阳系轨道布局 · 匹配 01:00-01:20
* 左侧缩略列 + 中间hero卡(仅"借XX") + 轨道图片环
* JS 驱动动画：0.5s/6.5s/12.5s 三段时序
* ============================================================ */
/* 主容器：左右布局 */
.s6-container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 20px;
width: 100%;
height: 100%;
}
/* 左侧缩略列 */
.s6-left-col {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
align-items: flex-end;
padding-right: 12px;
}
.s6-left-col .s6-card-mini {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 22px;
border-radius: 10px;
background: var(--bg-card);
border: 1px solid var(--border-light);
box-shadow: var(--shadow-card);
width: 270px;
opacity: 0;
animation: s6-mini-in 0.5s ease-out forwards;
}
.s6-left-col .s6-card-mini .s6-mini-kicker {
font-family: var(--font-title);
font-size: 14px;
letter-spacing: 3px;
font-style: italic;
opacity: 0.7;
margin-bottom: 4px;
}
.s6-left-col .s6-card-mini .s6-mini-title {
font-family: var(--font-title);
font-size: 26px;
font-weight: 600;
letter-spacing: 4px;
}
.s6-left-col .s6-card-mini .s6-mini-examples {
font-family: var(--font-title);
font-size: 16px;
color: var(--text-title);
letter-spacing: 1px;
margin-top: 6px;
line-height: 1.5;
text-align: center;
}
.s6-card-mini.green { border-left: 3px solid var(--accent-olive); }
.s6-card-mini.green .s6-mini-title { color: var(--accent-olive); }
.s6-card-mini.orange { border-left: 3px solid var(--brand-primary); }
.s6-card-mini.orange .s6-mini-title { color: var(--brand-primary); }
.s6-card-mini.red { border-left: 3px solid var(--accent-red); }
.s6-card-mini.red .s6-mini-title { color: var(--accent-red); }
@keyframes s6-mini-in {
0% { opacity: 0; transform: translateX(-20px) scale(0.85); }
100% { opacity: 1; transform: translateX(0) scale(1); }
}
/* 中间区域 */
.s6-center {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
/* Hero 卡片（仅"借XX"，无标签文字） */
.s6-hero-card {
position: relative;
z-index: 2;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 28px 40px;
text-align: center;
box-shadow: var(--shadow-card);
opacity: 0;
animation: s6-card-in 0.7s cubic-bezier(.34,1.56,.64,1) forwards;
}
.s6-hero-card.green { border-left: 4px solid var(--accent-olive); }
.s6-hero-card.orange { border-left: 4px solid var(--brand-primary); }
.s6-hero-card.red { border-left: 4px solid var(--accent-red); }
.s6-hero-card .s6-hero-kicker {
font-family: var(--font-title);
font-size: 13px;
letter-spacing: 6px;
font-style: italic;
opacity: 0.8;
margin-bottom: 6px;
}
.s6-hero-card .s6-hero-title {
font-family: var(--font-title);
font-size: 52px;
font-weight: 600;
letter-spacing: 4px;
line-height: 1.1;
}
.s6-hero-card.green .s6-hero-kicker { color: var(--accent-olive); }
.s6-hero-card.green .s6-hero-title { color: var(--accent-olive); }
.s6-hero-card.orange .s6-hero-kicker { color: var(--brand-primary); }
.s6-hero-card.orange .s6-hero-title { color: var(--brand-primary); }
.s6-hero-card.red .s6-hero-kicker { color: var(--accent-red); }
.s6-hero-card.red .s6-hero-title { color: var(--accent-red); }
@keyframes s6-card-in {
0% { opacity: 0; transform: translateY(22px) scale(0.92); }
60% { opacity: 1; transform: translateY(-6px) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes s6-card-pulse {
0% { box-shadow: 0 0 0 0 rgba(30,64,175,0.35), var(--shadow-whisper); }
60% { box-shadow: 0 0 0 14px rgba(30,64,175,0), var(--shadow-whisper); }
100% { box-shadow: 0 0 0 0 rgba(30,64,175,0), var(--shadow-whisper); }
}
.s6-hero-card.pulse-once {
animation: s6-card-in 0.7s cubic-bezier(.34,1.56,.64,1) forwards,
s6-card-pulse 1.0s ease-out 0.8s 1;
}
/* 轨道环 SVG */
.s6-orbit-svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 820px;
height: 820px;
z-index: 1;
pointer-events: none;
overflow: visible;
}
/* 轨道环线（虚线圆） */
.s6-orbit-ring {
fill: none;
stroke-width: 2.4;
stroke-dasharray: 8 10;
opacity: 0;
animation: s6-ring-in 0.8s ease-out 0.3s forwards;
}
@keyframes s6-ring-in {
0% { opacity: 0; stroke-dashoffset: 400; }
100% { opacity: 0.55; stroke-dashoffset: 0; }
}
@keyframes s6-ring-spin {
to { stroke-dashoffset: 700; }
}
/* 轨道上的图片节点 */
.s6-orbit-node {
position: absolute;
width: 300px;
text-align: center;
transform: translate(-50%, -50%);
opacity: 0;
animation: s6-node-in 0.6s ease-out forwards;
z-index: 3;
}
.s6-orbit-node img {
width: 300px;
height: 191px;
border-radius: 8px;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.s6-orbit-node .s6-node-label {
font-family: var(--font-title);
font-size: 36px;
font-weight: 600;
color: var(--text-title);
margin-top: 10px;
letter-spacing: 3px;
white-space: nowrap;
}
@keyframes s6-node-in {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* ============================================================
* 镜头 8 · 两问依次出现 · 匹配 01:35-01:50 (15s)
* 0.5s: 分割线 fade
* 3.0s: Q·01 "如何借势?"(旁白"怎样才能借得巧?")
* 8.5s: Q·02 "借势 = 蹭势?"(旁白"借势,真的等于蹭势吗?")
* ============================================================ */
.slide[data-shotno="8"] .s8-q,
.slide[data-shotno="8"] .s8-sep {
opacity: 0;
transform: translateX(-16px);
}
.slide[data-shotno="8"].active .s8-q1 {
animation: s8-q-in 0.8s cubic-bezier(.22,1,.36,1) 3.0s forwards;
}
.slide[data-shotno="8"].active .s8-sep {
animation: s3-fade-in 0.8s ease-out 7.5s forwards;
transform: none;
}
.slide[data-shotno="8"].active .s8-q2 {
animation: s8-q-in 0.8s cubic-bezier(.22,1,.36,1) 8.5s forwards;
}
@keyframes s8-q-in {
0% { opacity: 0; transform: translateX(-16px); }
60% { opacity: 1; transform: translateX(4px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Q·02 问号放大 + 摇摆 */
.s8-qmark {
font-size: 72px;
vertical-align: baseline;
transform-origin: center bottom;
}
.slide[data-shotno="8"].active .s8-q2 .s8-qmark {
animation: s8-q-wobble 2.8s ease-in-out 9.0s infinite;
}
@keyframes s8-q-wobble {
0%, 100% { transform: rotate(0deg); }
15% { transform: rotate(14deg); }
30% { transform: rotate(-12deg); }
45% { transform: rotate(8deg); }
60% { transform: rotate(-6deg); }
75% { transform: rotate(3deg); }
90% { transform: rotate(-1deg); }
}
/* ============================================================
* 镜头 9 · 公式+三阶梯 · 匹配 01:50-02:00 (10s)
* 0.3s: 公式 "高级借势 = 识势 × 接势 × 造势" 淡入
* 2.5s: Step 1 识势(旁白"识势")
* 3.5s: Step 2 接势(旁白"接势")
* 4.5s: Step 3 造势(旁白"造势")
* 6.0s: 递进指示条 "声量 & 收益 ↗"
* ============================================================ */
.slide[data-shotno="9"] .s9-formula {
opacity: 0;
transform: translateY(-6px);
}
.slide[data-shotno="9"].active .s9-formula {
animation: s3-fade-down 0.8s cubic-bezier(.22,1,.36,1) 0.3s forwards;
}
.slide[data-shotno="9"] .s9-step {
opacity: 0;
transform: translateY(30px);
}
.slide[data-shotno="9"].active .s9-step[data-idx="1"] {
animation: s9-step-rise 0.7s cubic-bezier(.34,1.56,.64,1) 2.5s forwards;
}
.slide[data-shotno="9"].active .s9-step[data-idx="2"] {
animation: s9-step-rise 0.7s cubic-bezier(.34,1.56,.64,1) 3.5s forwards;
}
.slide[data-shotno="9"].active .s9-step[data-idx="3"] {
animation: s9-step-rise-peak 0.8s cubic-bezier(.34,1.56,.64,1) 4.5s forwards;
}
.slide[data-shotno="9"] .s9-arrow {
opacity: 0;
}
.slide[data-shotno="9"].active .s9-arrow {
animation: s3-fade-in 0.8s ease-out 6.0s forwards;
}
@keyframes s9-step-rise {
0% { opacity: 0; transform: translateY(30px); }
60% { opacity: 1; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes s9-step-rise-peak {
0% { opacity: 0; transform: translateY(30px) scale(0.95); }
55% { opacity: 1; transform: translateY(-8px) scale(1.04); box-shadow: 0 18px 48px rgba(30,64,175,0.25), var(--shadow-whisper); }
100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 8px 32px rgba(30,64,175,0.10), var(--shadow-whisper); }
}
/* ============================================================
* 阶段专属装饰动画 · 识势(扫描线)/ 接势(连接点)/ 造势(金粒)
* 覆盖镜头 9 / 13 / 22
* ============================================================ */
/* --- 橄榄扫描线 · 识势:横向扫过卡片(模拟探测/识别) --- */
.step-olive .scan-line {
position: absolute;
left: -40%;
top: 44px;
width: 35%;
height: 2px;
background: linear-gradient(90deg,
rgba(122,130,97,0) 0%,
rgba(122,130,97,0.5) 40%,
rgba(122,130,97,0.9) 55%,
rgba(122,130,97,0.5) 70%,
rgba(122,130,97,0) 100%);
opacity: 0;
pointer-events: none;
filter: blur(1px);
}
.slide.active .step-olive .scan-line {
animation: scan-sweep 3.2s ease-in-out infinite;
animation-delay: 0.8s;
}
@keyframes scan-sweep {
0% { left: -40%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 105%; opacity: 0; }
}
/* --- 赤陶连接点 · 接势:3 圆点连带横线脉冲穿过 --- */
.step-terra .connect-line {
position: absolute;
left: 22px; right: 22px;
top: 44px;
display: flex; align-items: center; gap: 0;
pointer-events: none;
opacity: 0;
}
.step-terra .connect-line .cn-dot {
width: 8px; height: 8px;
background: var(--color-terracotta);
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(30,64,175,0.2);
flex-shrink: 0;
}
.step-terra .connect-line .cn-bar {
flex: 1;
height: 2px;
background: linear-gradient(90deg,
rgba(30,64,175,0.25) 0%,
var(--color-terracotta) 50%,
rgba(30,64,175,0.25) 100%);
transform-origin: left;
transform: scaleX(0);
}
.slide.active .step-terra .connect-line {
animation: connect-show 0.4s ease-out forwards;
animation-delay: 0.8s;
}
.slide.active .step-terra .connect-line .cn-bar:nth-of-type(2) {
animation: bar-grow 0.6s ease-out forwards, bar-pulse 2.4s ease-in-out 1.4s infinite;
animation-delay: 1.1s, 1.7s;
}
.slide.active .step-terra .connect-line .cn-bar:nth-of-type(4) {
animation: bar-grow 0.6s ease-out forwards, bar-pulse 2.4s ease-in-out 1.8s infinite;
animation-delay: 1.4s, 2.0s;
}
.slide.active .step-terra .connect-line .cn-dot:nth-of-type(3) {
animation: dot-pop 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: 1.7s;
transform: scale(0);
}
.slide.active .step-terra .connect-line .cn-dot:nth-of-type(5) {
animation: dot-pop 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
animation-delay: 2.0s;
transform: scale(0);
}
@keyframes connect-show { to { opacity: 1; } }
@keyframes bar-grow { to { transform: scaleX(1); } }
@keyframes bar-pulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.4); }
}
@keyframes dot-pop { to { transform: scale(1); } }
/* --- 琥珀金粒 · 造势:5 颗金点从卡底缓升腾 --- */
.step-amber .amber-particles {
position: absolute;
inset: 0;
pointer-events: none;
}
.step-amber .am-p {
position: absolute;
bottom: 0;
left: var(--x);
width: 6px; height: 6px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(245,158,11,0.9) 0%,
rgba(30,64,175,0.6) 60%,
rgba(30,64,175,0) 100%);
opacity: 0;
filter: blur(0.5px);
}
.slide.active .step-amber .am-p {
animation: particle-rise 3.4s ease-out infinite;
animation-delay: var(--d);
}
@keyframes particle-rise {
0% { opacity: 0; bottom: -8px; transform: translateY(0) scale(0.6); }
15% { opacity: 1; }
85% { opacity: 0.5; }
100% { opacity: 0; bottom: 95%; transform: translateY(-10px) scale(1); }
}
/* --- DONE ✓ 徽章 勾起脉冲(镜头13/22) --- */
.step-olive .done-badge .done-check {
transform: scale(0) rotate(-40deg);
opacity: 0;
}
.slide.active .step-olive .done-badge .done-check {
animation: done-pop 0.55s cubic-bezier(.34,1.56,.64,1) forwards,
done-glow 1.6s ease-out 0.6s 1;
}
@keyframes done-pop {
0% { transform: scale(0) rotate(-40deg); opacity: 0; }
60% { transform: scale(1.15) rotate(0deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes done-glow {
0% { box-shadow: 0 0 0 0 rgba(122,130,97,0.7); }
100% { box-shadow: 0 0 0 18px rgba(122,130,97,0); }
}
/* --- step-name 字入场 · 三阶梯共用 · 浮升 --- */
.slide[data-shotno="9"] .step-name {
opacity: 0;
transform: translateY(10px);
}
.slide[data-shotno="9"].active .s9-step[data-idx="1"] .step-name {
animation: step-name-in 0.7s cubic-bezier(.22,1,.36,1) 2.8s forwards;
}
.slide[data-shotno="9"].active .s9-step[data-idx="2"] .step-name {
animation: step-name-in 0.7s cubic-bezier(.22,1,.36,1) 3.8s forwards;
}
.slide[data-shotno="9"].active .s9-step[data-idx="3"] .step-name {
animation: step-name-in-glow 0.8s cubic-bezier(.22,1,.36,1) 4.8s forwards;
}
@keyframes step-name-in {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes step-name-in-glow {
0% { opacity: 0; transform: translateY(10px); text-shadow: 0 0 0 rgba(30,64,175,0); }
50% { opacity: 1; transform: translateY(-3px); text-shadow: 0 0 22px rgba(30,64,175,0.45); }
100% { opacity: 1; transform: translateY(0); text-shadow: 0 0 8px rgba(30,64,175,0.2); }
}
/* 镜头 13 / 22 · step-name 直接显示(不做入场延迟,随卡片动画即出) */
.slide[data-shotno="13"] .step-name,
.slide[data-shotno="22"] .step-name {
opacity: 1;
transform: none;
}
/* ============================================================
* 章节头统一:所有 STEP 1/2/3 标题强制左上角定位(覆盖 inline align-self:center)
* ============================================================ */
.chapter-head {
align-self: flex-start !important;
}
/* 确保位于顶部固定坐标 · 不被后续内容挤下去 · shot-main 已经 padding:60px 40px 0,所以 chapter-head
自然贴在 y=60 · 此处再锁一次 margin-bottom 空间给公式缩小锚点 */
.slide.active .chapter-head {
opacity: 0;
transform: translateX(-12px);
animation: chapter-head-in 0.6s cubic-bezier(.22,1,.36,1) 0.3s forwards;
}
@keyframes chapter-head-in {
0% { opacity: 0; transform: translateX(-12px); }
100% { opacity: 1; transform: translateX(0); }
}
/* ============================================================
* 镜头11 · 三验算卡 + 公式因子 按旁白时序依次高亮
* 旁白 "时效性:赛事跨度 90 天" 约 2.0s · "相关性:牛奶..." 约 7.5s · "合规性:省政府..." 约 13s · "三项全绿灯" 约 18s
* ============================================================ */
.slide[data-shotno="11"] .s11-check,
.slide[data-shotno="11"] .s11-factor,
.slide[data-shotno="11"] .s11-arrow,
.slide[data-shotno="11"] .s11-mult {
opacity: 0;
}
.slide[data-shotno="11"].active .s11-factor[data-idx="1"] {
animation: fade-up 0.55s cubic-bezier(.22,1,.36,1) 1.0s forwards,
factor-glow 1.2s ease-out 2.0s 1;
}
.slide[data-shotno="11"].active .s11-mult[data-idx="1"] {
animation: fade-up 0.4s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
.slide[data-shotno="11"].active .s11-arrow[data-idx="1"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 1.6s forwards;
}
.slide[data-shotno="11"].active .s11-check[data-idx="1"] {
animation: fade-up 0.7s cubic-bezier(.34,1.56,.64,1) 2.0s forwards;
transform: translateY(18px) scale(0.94);
}
.slide[data-shotno="11"].active .s11-factor[data-idx="2"] {
animation: fade-up 0.55s cubic-bezier(.22,1,.36,1) 6.5s forwards,
factor-glow 1.2s ease-out 7.5s 1;
}
.slide[data-shotno="11"].active .s11-mult[data-idx="2"] {
animation: fade-up 0.4s cubic-bezier(.22,1,.36,1) 7.0s forwards;
}
.slide[data-shotno="11"].active .s11-arrow[data-idx="2"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 7.1s forwards;
}
.slide[data-shotno="11"].active .s11-check[data-idx="2"] {
animation: fade-up 0.7s cubic-bezier(.34,1.56,.64,1) 7.5s forwards;
transform: translateY(18px) scale(0.94);
}
.slide[data-shotno="11"].active .s11-factor[data-idx="3"] {
animation: fade-up 0.55s cubic-bezier(.22,1,.36,1) 12.0s forwards,
factor-glow 1.2s ease-out 13.0s 1;
}
.slide[data-shotno="11"].active .s11-arrow[data-idx="3"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 12.6s forwards;
}
.slide[data-shotno="11"].active .s11-check[data-idx="3"] {
animation: fade-up 0.7s cubic-bezier(.34,1.56,.64,1) 13.0s forwards;
transform: translateY(18px) scale(0.94);
}
@keyframes fade-up {
0% { opacity: 0; transform: translateY(18px) scale(0.94); }
60% { opacity: 1; transform: translateY(-4px) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes factor-glow {
0% { text-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
40% { text-shadow: 0 0 16px currentColor; transform: scale(1.08); }
100% { text-shadow: 0 0 0 rgba(0,0,0,0); transform: scale(1); }
}
/* ============================================================
* 镜头14 · 公式由左往右逐个出现 + 三定义卡按旁白时序依次高亮
* 公式动画: 产品力(2.0s) → +(2.5s) → 人格力(3.0s) → +(3.5s) → 价值观(4.0s)
* 卡片动画: 产品力卡(3.0s) → 人格力卡(5.0s) → 价值观卡(7.0s)
* ============================================================ */
.slide[data-shotno="14"] .s14-card,
.slide[data-shotno="14"] .s14-factor,
.slide[data-shotno="14"] .s14-arrow,
.slide[data-shotno="14"] .s14-plus {
opacity: 0;
}
/* 公式从左往右逐个出现 */
.slide[data-shotno="14"].active .s14-factor[data-idx="1"] {
animation: fade-up 0.55s cubic-bezier(.22,1,.36,1) 2.0s forwards,
factor-glow 1.2s ease-out 3.0s 1;
}
.slide[data-shotno="14"].active .s14-plus[data-idx="1"] {
animation: fade-up 0.4s cubic-bezier(.22,1,.36,1) 2.5s forwards;
}
.slide[data-shotno="14"].active .s14-factor[data-idx="2"] {
animation: fade-up 0.55s cubic-bezier(.22,1,.36,1) 3.0s forwards,
factor-glow 1.2s ease-out 4.0s 1;
}
.slide[data-shotno="14"].active .s14-plus[data-idx="2"] {
animation: fade-up 0.4s cubic-bezier(.22,1,.36,1) 3.5s forwards;
}
.slide[data-shotno="14"].active .s14-factor[data-idx="3"] {
animation: fade-up 0.55s cubic-bezier(.22,1,.36,1) 4.0s forwards,
factor-glow 1.2s ease-out 5.0s 1;
}
/* 箭头和卡片按旁白时序出现 */
.slide[data-shotno="14"].active .s14-arrow[data-idx="1"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 3.2s forwards;
}
.slide[data-shotno="14"].active .s14-card[data-idx="1"] {
animation: fade-up 0.7s cubic-bezier(.34,1.56,.64,1) 3.5s forwards;
transform: translateY(18px) scale(0.94);
}
.slide[data-shotno="14"].active .s14-arrow[data-idx="2"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 5.0s forwards;
}
.slide[data-shotno="14"].active .s14-card[data-idx="2"] {
animation: fade-up 0.7s cubic-bezier(.34,1.56,.64,1) 5.3s forwards;
transform: translateY(18px) scale(0.94);
}
.slide[data-shotno="14"].active .s14-arrow[data-idx="3"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 7.0s forwards;
}
.slide[data-shotno="14"].active .s14-card[data-idx="3"] {
animation: fade-up 0.7s cubic-bezier(.34,1.56,.64,1) 7.3s forwards;
transform: translateY(18px) scale(0.94);
}
/* ============================================================
* 镜头23 · 造势公式动画（同镜头11模式）
* 旁白 06:00–06:15（15s）
* 因子逐个出现 → 乘号逐个出现 → 箭头+卡片逐组出现
* ============================================================ */
.slide[data-shotno="23"] .s23-factor,
.slide[data-shotno="23"] .s23-mult,
.slide[data-shotno="23"] .s23-arrow,
.slide[data-shotno="23"] .s23-card {
opacity: 0;
}
/* 公式因子逐个出现 */
.slide[data-shotno="23"].active .s23-factor[data-idx="1"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 1.0s forwards,
factor-glow 1.2s ease-out 2.5s 1;
}
.slide[data-shotno="23"].active .s23-mult[data-idx="1"] {
animation: fade-up 0.35s cubic-bezier(.22,1,.36,1) 1.5s forwards;
}
.slide[data-shotno="23"].active .s23-factor[data-idx="2"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 2.5s forwards,
factor-glow 1.2s ease-out 4.5s 1;
}
.slide[data-shotno="23"].active .s23-mult[data-idx="2"] {
animation: fade-up 0.35s cubic-bezier(.22,1,.36,1) 3.0s forwards;
}
.slide[data-shotno="23"].active .s23-factor[data-idx="3"] {
animation: fade-up 0.5s cubic-bezier(.22,1,.36,1) 3.5s forwards,
factor-glow 1.2s ease-out 7.5s 1;
}
/* 箭头和卡片按旁白时序逐组出现 */
.slide[data-shotno="23"].active .s23-arrow[data-idx="1"] {
animation: fade-up 0.45s cubic-bezier(.22,1,.36,1) 4.5s forwards;
}
.slide[data-shotno="23"].active .s23-card[data-idx="1"] {
animation: fade-up 0.6s cubic-bezier(.34,1.56,.64,1) 4.8s forwards;
transform: translateY(18px) scale(0.94);
}
.slide[data-shotno="23"].active .s23-arrow[data-idx="2"] {
animation: fade-up 0.45s cubic-bezier(.22,1,.36,1) 7.5s forwards;
}
.slide[data-shotno="23"].active .s23-card[data-idx="2"] {
animation: fade-up 0.6s cubic-bezier(.34,1.56,.64,1) 7.8s forwards;
transform: translateY(18px) scale(0.94);
}
.slide[data-shotno="23"].active .s23-arrow[data-idx="3"] {
animation: fade-up 0.45s cubic-bezier(.22,1,.36,1) 10.5s forwards;
}
.slide[data-shotno="23"].active .s23-card[data-idx="3"] {
animation: fade-up 0.6s cubic-bezier(.34,1.56,.64,1) 10.8s forwards;
transform: translateY(18px) scale(0.94);
}
/* ============================================================
* 锚点公式 · 首现 hero → 尾部缩小 / 后续镜头固定 mini 位置
* ============================================================ */
/* Hero 状态:首次亮相(镜头10/14/23)· 完整尺寸,镜头后段做一次 scale → 0.72 动画,
提示"公式已讲完,记在顶部" */
.anchor-formula-hero {
transform-origin: top center;
/* 默认值:保持原始 100% 尺寸,待 .active 后由动画驱动 */
}
.slide[data-shotno="10"].active .anchor-formula-hero {
/* 不做缩小动画,公式保持原尺寸 */
}
/* 镜头14 公式保持初始大小,不做缩小动画 */
.slide[data-shotno="14"].active .anchor-formula-hero {
/* 不做缩小动画,公式保持原尺寸 */
}
/* 镜头23 公式保持初始大小,不做缩小动画 */
@keyframes formula-pin {
0% { transform: scale(1); box-shadow: var(--shadow-whisper); }
40% { transform: scale(1.03); box-shadow: 0 12px 40px rgba(30,64,175,0.22); }
100% { transform: scale(0.72); box-shadow: var(--shadow-whisper); }
}
/* Mini 状态:后续镜头(11/15/16/17)固定显示为 0.72 缩放,贴靠顶部章节头下方,
为本镜头新内容让出核心视觉区 */
.anchor-formula-mini {
transform-origin: top center;
transform: scale(0.72);
margin-bottom: -90px; /* 抵消 scale 后的空白,让下方内容自然上移 */
opacity: 0;
}
.slide.active .anchor-formula-mini {
animation: formula-mini-in 0.6s ease-out 0.3s forwards;
}
@keyframes formula-mini-in {
0% { opacity: 0; transform: scale(0.72) translateY(-8px); }
100% { opacity: 0.92; transform: scale(0.72) translateY(0); }
}
/* mini 公式下方的内容块(箭头/卡片行)也需要对应微微压缩并减少额外间距 */
.slide[data-shotno="11"] .anchor-formula-mini + *,
.slide[data-shotno="15"] .anchor-formula-mini + *,
.slide[data-shotno="16"] .anchor-formula-mini + *,
.slide[data-shotno="17"] .anchor-formula-mini + * {
margin-top: 0;
}
/* ============================================================
* 镜头 15 · s15-stage--big 变体 · 去除公式后海报放大居中
* ============================================================ */
.slide[data-shotno="15"] .s15-stage--big {
width: 100%;
max-width: 1100px;
height: 560px;
}
.slide[data-shotno="15"] .s15-stage--big .s15-v-slot {
width: 320px;
height: 440px;
box-shadow: 0 14px 36px rgba(0,0,0,0.24);
}
.slide[data-shotno="15"] .s15-stage--big .s15-v-stage { gap: 28px; }
.slide[data-shotno="15"] .s15-stage--big .s15-h-box {
width: 940px;
height: 520px;
box-shadow: 0 16px 42px rgba(0,0,0,0.28);
}
/* ============================================================
* 镜头 16 · 三因子依次轮播 + 末期汇合
* 20s 总时长分 4 段:
* 0-5s 产品力(olive) hero 居中
* 5-10s 人格力(terra) hero 居中
* 10-15s 价值观(amber) hero 居中
* 15-20s 三卡并排汇合
* ============================================================ */
.slide[data-shotno="16"] .s16-stage {
position: relative;
width: 100%;
height: 600px;
align-self: stretch;
}
/* Hero 单卡 · 居中 · 大图 + 标题 + 正文 · 绝对定位,覆盖整个 stage */
.slide[data-shotno="16"] .s16-hero {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateY(18px) scale(0.96);
}
.slide[data-shotno="16"] .s16-hero-img {
width: 520px;
height: 360px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 42px rgba(0,0,0,0.22);
}
.slide[data-shotno="16"] .s16-hero-tag {
font-family: var(--font-title);
font-size: 42px;
font-weight: 500;
letter-spacing: 8px;
line-height: 1;
}
.slide[data-shotno="16"] .s16-hero-body {
font-size: 20px;
font-weight: 400;
color: var(--text-sub);
line-height: 1.7;
text-align: center;
letter-spacing: 1px;
}
.slide[data-shotno="16"] .s16-hero-body b { color: var(--text-title); font-weight: 600; }
.slide[data-shotno="16"] .s16-hero[data-color="olive"] .s16-hero-tag { color: var(--accent-olive); }
.slide[data-shotno="16"] .s16-hero[data-color="terra"] .s16-hero-tag { color: var(--color-terracotta); }
.slide[data-shotno="16"] .s16-hero[data-color="amber"] .s16-hero-tag { color: var(--accent-amber); }
/* 三卡汇合区 · 默认隐藏 · 第 15s 淡入 */
.slide[data-shotno="16"] .s16-trio {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
opacity: 0;
transform: translateY(18px);
}
.slide[data-shotno="16"] .s16-mini {
width: 300px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: var(--shadow-whisper);
padding: 14px 14px 18px;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.slide[data-shotno="16"] .s16-mini[data-color="olive"] { border-top: 3px solid var(--accent-olive); }
.slide[data-shotno="16"] .s16-mini[data-color="terra"] { border-top: 3px solid var(--color-terracotta); }
.slide[data-shotno="16"] .s16-mini[data-color="amber"] { border-top: 3px solid var(--accent-amber); }
.slide[data-shotno="16"] .s16-mini-img {
width: 100%;
height: 160px;
border-radius: 8px;
overflow: hidden;
}
.slide[data-shotno="16"] .s16-mini-tag {
font-family: var(--font-title);
font-size: 22px;
font-weight: 500;
letter-spacing: 3px;
}
.slide[data-shotno="16"] .s16-mini[data-color="olive"] .s16-mini-tag { color: var(--accent-olive); }
.slide[data-shotno="16"] .s16-mini[data-color="terra"] .s16-mini-tag { color: var(--color-terracotta); }
.slide[data-shotno="16"] .s16-mini[data-color="amber"] .s16-mini-tag { color: var(--accent-amber); }
.slide[data-shotno="16"] .s16-mini-body {
font-size: 14px;
color: var(--text-sub);
line-height: 1.7;
}
.slide[data-shotno="16"] .s16-mini-body b { color: var(--text-title); font-weight: 600; }
/* 时间线驱动 · 20s 无限循环(实际只播一次,靠 slide.active 重置) */
.slide[data-shotno="16"].active .s16-hero[data-phase="1"] {
animation: s16-hero1 20s ease-in-out both;
}
.slide[data-shotno="16"].active .s16-hero[data-phase="2"] {
animation: s16-hero2 20s ease-in-out both;
}
.slide[data-shotno="16"].active .s16-hero[data-phase="3"] {
animation: s16-hero3 20s ease-in-out both;
}
.slide[data-shotno="16"].active .s16-trio {
animation: s16-trio 20s ease-in-out both;
}
@keyframes s16-hero1 {
0% { opacity: 0; transform: translateY(18px) scale(0.96); }
2.5%, 22% { opacity: 1; transform: translateY(0) scale(1); }
27%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s16-hero2 {
0%, 25% { opacity: 0; transform: translateY(18px) scale(0.96); }
27.5%, 47% { opacity: 1; transform: translateY(0) scale(1); }
52%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s16-hero3 {
0%, 50% { opacity: 0; transform: translateY(18px) scale(0.96); }
52.5%, 72% { opacity: 1; transform: translateY(0) scale(1); }
77%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s16-trio {
0%, 75% { opacity: 0; transform: translateY(18px); }
78%, 100% { opacity: 1; transform: translateY(0); }
}
/* 镜头 17 城市动画已移至上方 s17-stage 区域定义 */
/* ============================================================
* 镜头 24 · 一物一码 · 三闭环依次轮播 + 末期汇合
* 25s 总时长分 4 段:
* 0-6s 低门槛(olive) hero
* 6-12s 价值(terra) hero
* 12-18s 扩势(amber) hero
* 18-25s 三卡并排汇合
* ============================================================ */
.slide[data-shotno="24"] .s24-stage {
position: relative;
width: 100%;
height: 620px;
align-self: stretch;
}
.slide[data-shotno="24"] .s24-hero {
position: absolute;
inset: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
opacity: 0;
transform: translateY(18px) scale(0.96);
}
/* 左侧文字区 */
.slide[data-shotno="24"] .s24-hero-left {
width: 280px;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 14px;
padding-right: 20px;
}
/* 中间竖线分割 · 已移除 */
.slide[data-shotno="24"] .s24-hero-divider { display: none; }
/* 右侧图片区 */
.slide[data-shotno="24"] .s24-hero-right {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding-left: 0;
}
.slide[data-shotno="24"] .s24-hero-tag {
font-family: var(--font-title);
font-size: 32px;
font-weight: 500;
letter-spacing: 3px;
line-height: 1;
padding-bottom: 10px;
border-bottom: 3px solid currentColor;
}
.slide[data-shotno="24"] .s24-hero-sub {
font-family: var(--font-title);
font-size: 16px;
font-weight: 400;
color: var(--text-muted);
letter-spacing: 3px;
}
.slide[data-shotno="24"] .s24-hero-img {
max-width: 100%;
max-height: 600px;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 14px 42px rgba(0,0,0,0.22);
}
.slide[data-shotno="24"] .s24-hero-num {
font-family: var(--font-title);
font-weight: 500;
line-height: 1;
}
.slide[data-shotno="24"] .s24-hero-num .s24-n { font-size: 56px; }
.slide[data-shotno="24"] .s24-hero-num .s24-u { font-size: 28px; font-weight: 400; margin-left: 4px; }
.slide[data-shotno="24"] .s24-hero-body {
font-size: 15px;
color: var(--text-sub);
line-height: 1.7;
letter-spacing: 1px;
}
.slide[data-shotno="24"] .s24-hero-body b { color: var(--text-title); font-weight: 600; }
.slide[data-shotno="24"] .s24-hero[data-color="olive"] .s24-hero-tag,
.slide[data-shotno="24"] .s24-hero[data-color="olive"] .s24-hero-num { color: var(--accent-olive); }
.slide[data-shotno="24"] .s24-hero[data-color="terra"] .s24-hero-tag,
.slide[data-shotno="24"] .s24-hero[data-color="terra"] .s24-hero-num { color: var(--color-terracotta); }
.slide[data-shotno="24"] .s24-hero[data-color="amber"] .s24-hero-tag,
.slide[data-shotno="24"] .s24-hero[data-color="amber"] .s24-hero-num { color: var(--accent-amber); }
/* 三卡汇合 */
.slide[data-shotno="24"] .s24-trio {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
opacity: 0;
transform: translateY(18px);
}
.slide[data-shotno="24"] .s24-mini {
flex: 1;
min-width: 0;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.10);
padding: 18px 16px 22px;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.slide[data-shotno="24"] .s24-mini[data-color="olive"] { border-top: 3px solid var(--accent-olive); }
.slide[data-shotno="24"] .s24-mini[data-color="terra"] { border-top: 3px solid var(--color-terracotta); }
.slide[data-shotno="24"] .s24-mini[data-color="amber"] { border-top: 3px solid var(--accent-amber); }
.slide[data-shotno="24"] .s24-mini-tag {
font-family: var(--font-title);
font-size: 26px;
font-weight: 500;
letter-spacing: 3px;
}
.slide[data-shotno="24"] .s24-mini[data-color="olive"] .s24-mini-tag,
.slide[data-shotno="24"] .s24-mini[data-color="olive"] .s24-mini-num { color: var(--accent-olive); }
.slide[data-shotno="24"] .s24-mini[data-color="terra"] .s24-mini-tag,
.slide[data-shotno="24"] .s24-mini[data-color="terra"] .s24-mini-num { color: var(--color-terracotta); }
.slide[data-shotno="24"] .s24-mini[data-color="amber"] .s24-mini-tag,
.slide[data-shotno="24"] .s24-mini[data-color="amber"] .s24-mini-num { color: var(--accent-amber); }
.slide[data-shotno="24"] .s24-mini-img {
width: 100%;
height: 240px;
border-radius: 8px;
overflow: hidden;
}
.slide[data-shotno="24"] .s24-mini-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide[data-shotno="24"] .s24-mini-num {
font-family: var(--font-title);
font-size: 48px;
font-weight: 500;
line-height: 1;
}
.slide[data-shotno="24"] .s24-mini-num span { font-size: 26px; font-weight: 400; }
.slide[data-shotno="24"] .s24-mini-body {
font-size: 16px;
color: var(--text-sub);
line-height: 1.65;
}
/* 时间线驱动 · 25s 总时长 */
.slide[data-shotno="24"].active .s24-hero[data-phase="1"] { animation: s24-hero1 25s ease-in-out both; }
.slide[data-shotno="24"].active .s24-hero[data-phase="2"] { animation: s24-hero2 25s ease-in-out both; }
.slide[data-shotno="24"].active .s24-hero[data-phase="3"] { animation: s24-hero3 25s ease-in-out both; }
.slide[data-shotno="24"].active .s24-trio { animation: s24-trio 25s ease-in-out both; }
@keyframes s24-hero1 {
0% { opacity: 0; transform: translateY(18px) scale(0.96); }
2%, 22% { opacity: 1; transform: translateY(0) scale(1); }
26%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s24-hero2 {
0%, 24% { opacity: 0; transform: translateY(18px) scale(0.96); }
26%, 46% { opacity: 1; transform: translateY(0) scale(1); }
50%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s24-hero3 {
0%, 48% { opacity: 0; transform: translateY(18px) scale(0.96); }
50%, 70% { opacity: 1; transform: translateY(0) scale(1); }
74%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s24-trio {
0%, 72% { opacity: 0; transform: translateY(18px); }
76%, 100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 18 · 京东接势 · 30s 5 段式分镜舞台
* Phase 1 (0-6s) · 海报全屏居中
* Phase 2 (6-11s) · 海报缩至左 + ① 地域性产品 出
* Phase 3 (11-16s) · 海报保持左 + ② 情感认同
* Phase 4 (16-22s) · 海报保持左 + ③ 优惠活动
* Phase 5 (22-30s) · 只显示京东接势公式 + +82%
* ============================================================ */
.slide[data-shotno="18"] .s18-stage {
position: relative;
width: 100%;
height: 640px;
align-self: stretch;
}
/* Phase 1 · 海报大图居中 */
.slide[data-shotno="18"] .s18-poster-hero {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.slide[data-shotno="18"] .s18-poster-hero img {
max-width: 640px;
max-height: 620px;
height: auto;
border-radius: 14px;
box-shadow: 0 16px 46px rgba(0,0,0,0.28);
}
/* Phase 2-4 · 左海报 + 右三卡轮播 */
.slide[data-shotno="18"] .s18-split {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 380px 1fr;
gap: 48px;
align-items: center;
opacity: 0;
}
.slide[data-shotno="18"] .s18-poster-left {
width: 380px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}
.slide[data-shotno="18"] .s18-poster-left img {
display: block;
width: 100%;
height: auto;
}
.slide[data-shotno="18"] .s18-factors {
position: relative;
height: 460px;
}
.slide[data-shotno="18"] .s18-factor {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
opacity: 0;
transform: translateY(18px) scale(0.96);
}
.slide[data-shotno="18"] .s18-f-tag {
font-family: var(--font-title);
font-size: 38px;
font-weight: 500;
letter-spacing: 6px;
line-height: 1;
}
.slide[data-shotno="18"] .s18-f-sub {
font-size: 20px;
color: var(--text-muted);
letter-spacing: 4px;
}
.slide[data-shotno="18"] .s18-f-main {
font-family: var(--font-title);
font-size: 56px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 6px;
line-height: 1.2;
}
.slide[data-shotno="18"] .s18-factor[data-color="olive"] .s18-f-tag { color: var(--accent-olive); }
.slide[data-shotno="18"] .s18-factor[data-color="red"] .s18-f-tag { color: var(--accent-red); }
.slide[data-shotno="18"] .s18-factor[data-color="amber"] .s18-f-tag { color: var(--accent-amber); }
/* Phase 5 · 公式 + +82% */
.slide[data-shotno="18"] .s18-finale {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
opacity: 0;
transform: translateY(18px);
}
.slide[data-shotno="18"] .s18-finale-formula {
position: relative;
width: 100%;
max-width: 900px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 16px;
padding: 40px 32px;
box-shadow: var(--shadow-whisper);
}
.slide[data-shotno="18"] .s18-finale-result {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-left: 6px solid var(--accent-amber);
border-radius: 12px;
padding: 22px 40px;
box-shadow: 0 10px 30px rgba(30,64,175,0.18);
min-width: 460px;
}
/* 时序驱动 · 30s 总时长 */
.slide[data-shotno="18"].active .s18-poster-hero { animation: s18-hero 30s ease-in-out both; }
.slide[data-shotno="18"].active .s18-split { animation: s18-split 30s ease-in-out both; }
.slide[data-shotno="18"].active .s18-factor[data-phase="2"] { animation: s18-f1 30s ease-in-out both; }
.slide[data-shotno="18"].active .s18-factor[data-phase="3"] { animation: s18-f2 30s ease-in-out both; }
.slide[data-shotno="18"].active .s18-factor[data-phase="4"] { animation: s18-f3 30s ease-in-out both; }
.slide[data-shotno="18"].active .s18-finale { animation: s18-finale 30s ease-in-out both; }
@keyframes s18-hero {
0% { opacity: 0; transform: scale(0.94); }
3%, 18% { opacity: 1; transform: scale(1); }
22%, 100% { opacity: 0; transform: scale(0.94); }
}
@keyframes s18-split {
0%, 18% { opacity: 0; }
22%, 72% { opacity: 1; }
76%, 100% { opacity: 0; }
}
/* 三因子分别在 split 可见期内轮播 */
@keyframes s18-f1 {
0%, 22% { opacity: 0; transform: translateY(18px) scale(0.96); }
26%, 34% { opacity: 1; transform: translateY(0) scale(1); }
38%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s18-f2 {
0%, 38% { opacity: 0; transform: translateY(18px) scale(0.96); }
42%, 50% { opacity: 1; transform: translateY(0) scale(1); }
54%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s18-f3 {
0%, 54% { opacity: 0; transform: translateY(18px) scale(0.96); }
58%, 70% { opacity: 1; transform: translateY(0) scale(1); }
74%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s18-finale {
0%, 74% { opacity: 0; transform: translateY(18px); }
78%, 100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 ㉝-㉞ (合并) · SVG 三环共振扩散
* 圆心苏超 → 内品牌层(0.4s) → 中区域层(1.2s) → 外国家层(2.0s)
* 环展开后持续呼吸,圆心光晕持续脉动
* ============================================================ */
.slide[data-shotno="33"] .s33-stage {
width: 100%;
}
.slide[data-shotno="33"] .s33-rings {
width: 100%;
max-width: 1050px; /* ★ 800→1050:同心圆图案大幅扩大,
PIP 主栏 1398px 内仍留出 ≈ 174px 余量 */
height: auto;
display: block;
margin: 0 auto;
}
.slide[data-shotno="33"] .shot-main {
align-items: center;
justify-content: flex-start; /* 垂直方向整体上移 */
padding-top: 0; /* ★ 20→0:标题/图例顶到上方,腾出空间给放大后的环 */
}
.slide[data-shotno="33"] .s33-stage {
gap: 4px !important; /* ★ 6→4:标题+图例 与 SVG 之间再压一压 */
}
.slide[data-shotno="33"] .s33-title {
font-size: 36px !important; /* ★ 30→36:标题再放大,与同心圆主体匹配 */
letter-spacing: 8px !important;
}
.slide[data-shotno="33"] .s33-legend {
font-size: 14px !important; /* ★ 12→14:图例稍放大配合标题 */
letter-spacing: 2.5px !important;
}
.slide[data-shotno="33"] .s33-head {
gap: 4px !important;
}
/* 圆心光晕脉动 · 始终跑 */
.slide[data-shotno="33"] .s33-core-halo {
transform-origin: 600px 410px;
opacity: 0;
}
.slide[data-shotno="33"].active .s33-core-halo {
animation:
s33-halo-in 0.6s ease-out 0.1s both,
s33-halo-pulse 2.4s ease-in-out 0.7s infinite;
}
@keyframes s33-halo-in {
0% { opacity: 0; transform: scale(0.4); }
100% { opacity: 0.9; transform: scale(1); }
}
@keyframes s33-halo-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.22); opacity: 0.45; }
}
/* 苏超徽章 · 入场弹性 */
.slide[data-shotno="33"] .s33-core {
transform-origin: 600px 410px;
opacity: 0;
}
.slide[data-shotno="33"].active .s33-core {
animation: s33-core-in 0.8s cubic-bezier(.34,1.56,.64,1) 0s both;
}
@keyframes s33-core-in {
0% { opacity: 0; transform: scale(0.3); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
/* 三环圆弧 · 依次展开 + 持续呼吸 · 虚线缓慢转动 */
.slide[data-shotno="33"] .s33-ring {
transform-origin: 600px 410px;
opacity: 0;
}
/* 三环同方向旋转,由内到外速度递减:内环最快 45s,中环 90s,外环 150s */
.slide[data-shotno="33"].active .s33-ring-brand {
animation:
s33-ring-in 0.8s cubic-bezier(.34,1.56,.64,1) 0.4s both,
s33-ring-breathe 4s ease-in-out 1.4s infinite,
s33-ring-spin 18s linear 1.4s infinite;
}
.slide[data-shotno="33"].active .s33-ring-region {
animation:
s33-ring-in 0.8s cubic-bezier(.34,1.56,.64,1) 1.2s both,
s33-ring-breathe 4s ease-in-out 2.2s infinite,
s33-ring-spin 36s linear 2.2s infinite;
}
.slide[data-shotno="33"].active .s33-ring-nation {
animation:
s33-ring-in 0.8s cubic-bezier(.34,1.56,.64,1) 2.0s both,
s33-ring-breathe 4s ease-in-out 3.0s infinite,
s33-ring-spin 70s linear 3.0s infinite;
}
@keyframes s33-ring-in {
0% { opacity: 0; transform: scale(0.55); }
100% { opacity: 0.7; transform: scale(1); }
}
@keyframes s33-ring-breathe {
0%, 100% { stroke-opacity: 0.55; }
50% { stroke-opacity: 0.9; }
}
/* dashoffset 位移加大到 700 · 18s 完成一轮 → 约 39 units/s (≈25 px/s 屏幕速度),明显可见 */
@keyframes s33-ring-spin {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 700; }
}
/* 各层胶囊 · 环展开后逐个淡入 */
.slide[data-shotno="33"] .s33-chip {
opacity: 0;
}
.slide[data-shotno="33"].active .s33-brands .s33-chip {
animation: s33-chip-in 0.5s ease-out both;
animation-delay: calc(0.8s + var(--i) * 0.07s);
}
.slide[data-shotno="33"].active .s33-regions .s33-chip {
animation: s33-chip-in 0.6s ease-out both;
animation-delay: calc(1.6s + var(--i) * 0.11s);
}
.slide[data-shotno="33"].active .s33-nations .s33-chip {
animation:
s33-chip-in 0.7s cubic-bezier(.34,1.56,.64,1) both,
s33-chip-glow 3s ease-in-out infinite;
animation-delay:
calc(2.4s + var(--i) * 0.14s),
calc(3.2s + var(--i) * 0.14s);
}
@keyframes s33-chip-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes s33-chip-glow {
0%, 100% { filter: drop-shadow(0 0 0 rgba(30,64,175,0)); }
50% { filter: drop-shadow(0 0 6px rgba(30,64,175,0.35)); }
}
/* 标题 + 图例淡入 · 在 SVG 之前 */
.slide[data-shotno="33"] .s33-head { opacity: 0; }
.slide[data-shotno="33"].active .s33-head {
animation: s33-head-in 0.6s ease-out 0.15s both;
}
@keyframes s33-head-in {
0% { opacity: 0; transform: translateY(-12px); }
100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 21 · 伊利接势 · 词云 + 吉祥物对话
* Phase 1:词云放大居中占满教学区
* Phase 2:词云缩小 + 吉祥物出现 + 问题在右边
* ============================================================ */
.slide[data-shotno="21"] .s21b-stage {
position: relative;
width: 100%;
height: 620px;
align-self: stretch;
}
/* Phase 1 · 词云放大居中 */
.slide[data-shotno="21"] .s21b-cloud-hero {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.slide[data-shotno="21"] .s21b-cloud-hero img {
max-width: 900px;
max-height: 560px;
width: auto;
height: auto;
filter: drop-shadow(0 10px 32px rgba(0,0,0,0.12));
}
/* Phase 2 · 词云缩小 + 吉祥物 + 问题 */
.slide[data-shotno="21"] .s21b-phase2 {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
opacity: 0;
}
/* 缩小后的词云(上方) */
.slide[data-shotno="21"] .s21b-cloud-small {
display: flex;
align-items: center;
justify-content: center;
}
.slide[data-shotno="21"] .s21b-cloud-small img {
max-width: 550px;
max-height: 320px;
width: auto;
height: auto;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.10));
}
/* 吉祥物 + 问题气泡(横向) */
.slide[data-shotno="21"] .s21b-mascot-row {
display: flex;
align-items: center;
gap: 24px;
}
.slide[data-shotno="21"] .s21b-mascot {
width: 180px;
height: auto;
transform-origin: bottom center;
animation: s21b-mascot-bob 2.2s ease-in-out infinite;
filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20));
}
@keyframes s21b-mascot-bob {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(-1.5deg); }
}
/* 问题气泡(一个框) */
.slide[data-shotno="21"] .s21b-question-box {
background: #ffffff;
border: 2px solid var(--color-terracotta);
border-radius: 18px;
padding: 18px 28px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
font-family: var(--font-title);
font-size: 22px;
font-weight: 500;
color: var(--text-title);
letter-spacing: 2px;
line-height: 1.6;
max-width: 500px;
opacity: 0;
}
.slide[data-shotno="21"] .s21b-question-box .hl {
color: var(--color-terracotta);
font-weight: 700;
}
.slide[data-shotno="21"] .s21b-question-box b {
font-weight: 700;
color: var(--accent-amber);
}
/* 时序驱动 · 总时长 15s */
.slide[data-shotno="21"].active .s21b-cloud-hero { animation: s21b-hero 15s ease-in-out both; }
.slide[data-shotno="21"].active .s21b-phase2 { animation: s21b-phase2-in 15s ease-in-out both; }
.slide[data-shotno="21"].active .s21b-question-box { animation: s21b-question-in 15s ease-in-out both; }
@keyframes s21b-hero {
0% { opacity: 0; transform: scale(0.85); }
8%, 35% { opacity: 1; transform: scale(1); }
42%, 100% { opacity: 0; transform: scale(0.85); }
}
@keyframes s21b-phase2-in {
0%, 38% { opacity: 0; transform: translateY(20px); }
48%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes s21b-question-in {
0%, 55% { opacity: 0; transform: translateX(-10px); }
65%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes s21b-line-in {
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 35 · 结语金句 · 震撼 PIP 版
* - 径向光晕背景
* - 斜纹放射线
* - 左右 Serif 大号引号 浮雕
* - 主金句两行 · 逐字落字 + 关键字高光
* ============================================================ */
/* 径向光晕 · terracotta 核心 → amber 外圈 → 透明 */
.slide[data-shotno="35"] .s35-halo {
position: absolute;
inset: -10%;
background:
radial-gradient(ellipse 60% 50% at 50% 50%,
rgba(30, 64, 175, 0.20) 0%,
rgba(30, 64, 175, 0.12) 28%,
rgba(248, 250, 252, 0) 62%);
pointer-events: none;
opacity: 0;
animation: s35-halo-in 2.4s cubic-bezier(.22,1,.36,1) 0.3s forwards,
s35-halo-pulse 4s ease-in-out 2.7s infinite;
}
@keyframes s35-halo-in {
0% { opacity: 0; transform: scale(0.85); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes s35-halo-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.82; transform: scale(1.03); }
}
/* 放射斜纹 · 远景动感 */
.slide[data-shotno="35"] .s35-rays {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
60deg,
rgba(30,64,175,0.00) 0 14px,
rgba(30,64,175,0.045) 14px 15px,
rgba(30,64,175,0.00) 15px 42px
);
pointer-events: none;
opacity: 0;
animation: s35-rays-in 2s ease-out 0.6s forwards;
}
@keyframes s35-rays-in {
0% { opacity: 0; transform: translateX(-20px); }
100% { opacity: 0.9; transform: translateX(0); }
}
/* 左右大号引号浮雕 */
.slide[data-shotno="35"] .s35-quote-open,
.slide[data-shotno="35"] .s35-quote-close {
position: absolute;
font-family: var(--font-title);
font-size: 340px;
font-weight: 500;
color: rgba(30, 64, 175, 0.08);
line-height: 1;
user-select: none;
pointer-events: none;
opacity: 0;
font-style: italic;
}
.slide[data-shotno="35"] .s35-quote-open { left: 4%; top: 6%; }
.slide[data-shotno="35"] .s35-quote-close { right: 4%; bottom: -8%; }
.slide[data-shotno="35"].active .s35-quote-open {
animation: s35-quote-in 1.4s cubic-bezier(.22,1,.36,1) 0.5s forwards;
}
.slide[data-shotno="35"].active .s35-quote-close {
animation: s35-quote-in 1.4s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}
@keyframes s35-quote-in {
0% { opacity: 0; transform: scale(1.3) translateY(-14px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* 金句主容器 · 居中 */
.slide[data-shotno="35"] .s35-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
max-width: 1200px;
text-align: center;
padding: 60px 40px;
}
/* 眉带(上下分隔) */
.slide[data-shotno="35"] .s35-eyebrow {
display: flex;
align-items: center;
gap: 18px;
opacity: 0;
animation: s35-eye-in 0.9s ease-out 1.6s forwards;
}
.slide[data-shotno="35"] .s35-eyebrow--bot {
animation-delay: 4.2s;
}
.slide[data-shotno="35"] .s35-line {
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-terracotta));
}
.slide[data-shotno="35"] .s35-eyebrow--bot .s35-line {
background: linear-gradient(90deg, transparent, var(--accent-amber));
}
.slide[data-shotno="35"] .s35-eyebrow .s35-line:last-child {
background: linear-gradient(90deg, var(--color-terracotta), transparent);
}
.slide[data-shotno="35"] .s35-eyebrow--bot .s35-line:last-child {
background: linear-gradient(90deg, var(--accent-amber), transparent);
}
.slide[data-shotno="35"] .s35-eye-text {
font-family: var(--font-title);
font-size: 15px;
font-style: italic;
font-weight: 500;
color: var(--color-terracotta);
letter-spacing: 6px;
}
.slide[data-shotno="35"] .s35-eye-bot {
color: var(--accent-amber);
letter-spacing: 8px;
}
@keyframes s35-eye-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
/* 主金句 & 副金句 — 大字逐字落入 */
.slide[data-shotno="35"] .s35-main {
font-family: var(--font-title);
font-size: 120px;
font-weight: 500;
letter-spacing: 14px;
color: var(--text-title);
line-height: 1.1;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-shadow: 0 4px 18px rgba(30, 64, 175, 0.12);
}
.slide[data-shotno="35"] .s35-sub {
font-family: var(--font-title);
font-size: 54px;
font-weight: 500;
letter-spacing: 10px;
color: var(--text-title);
line-height: 1.35;
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1100px;
}
/* 每字初始态:从上方落入 + blur */
.slide[data-shotno="35"] .s35-word {
display: inline-block;
opacity: 0;
transform: translateY(-28px) scale(1.3);
filter: blur(10px);
}
.slide[data-shotno="35"].active .s35-word {
animation: s35-word-drop 0.75s cubic-bezier(.25,.8,.35,1.1) forwards;
animation-delay: calc(2.0s + var(--i) * 0.14s);
}
@keyframes s35-word-drop {
0% { opacity: 0; transform: translateY(-28px) scale(1.3); filter: blur(10px); }
55% { opacity: 1; transform: translateY(4px) scale(1.05); filter: blur(2px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* 关键字强调颜色 */
.slide[data-shotno="35"] .s35-accent { color: var(--color-terracotta); }
.slide[data-shotno="35"] .s35-gold { color: var(--accent-amber); }
/* 关键字落字后 · 持续光晕脉冲 */
.slide[data-shotno="35"].active .s35-accent {
animation: s35-word-drop 0.75s cubic-bezier(.25,.8,.35,1.1) forwards,
s35-accent-glow 3s ease-in-out infinite;
animation-delay: calc(2.0s + var(--i) * 0.14s), calc(2.0s + var(--i) * 0.14s + 0.8s);
}
.slide[data-shotno="35"].active .s35-gold {
animation: s35-word-drop 0.75s cubic-bezier(.25,.8,.35,1.1) forwards,
s35-gold-glow 3s ease-in-out infinite;
animation-delay: calc(2.0s + var(--i) * 0.14s), calc(2.0s + var(--i) * 0.14s + 0.8s);
}
@keyframes s35-accent-glow {
0%, 100% { text-shadow: 0 0 0 rgba(30, 64, 175, 0); }
50% { text-shadow: 0 0 28px rgba(30, 64, 175, 0.55); }
}
@keyframes s35-gold-glow {
0%, 100% { text-shadow: 0 0 0 rgba(30, 64, 175, 0); }
50% { text-shadow: 0 0 32px rgba(30, 64, 175, 0.60); }
}
/* ============================================================
* 镜头 29 · 五条红线 · 依次 hero + 末段汇合
* 20s 总时长分 6 段:
* 0-3.5s ① 合规 hero
* 3.5-7s ② 合时 hero
* 7-10.5s ③ 合品 hero
* 10.5-14s④ 合众 hero
* 14-17s ⑤ 合心 hero(peak)
* 17-20s 五卡并排汇合
* ============================================================ */
.slide[data-shotno="29"] .s29-stage {
position: relative;
width: 100%;
height: 520px;
align-self: stretch;
}
/* Hero 单卡 */
.slide[data-shotno="29"] .s29-hero {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
opacity: 0;
transform: translateY(18px) scale(0.96);
text-align: center;
}
.slide[data-shotno="29"] .s29-hero-badge {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--accent-red);
color: #ffffff;
font-family: var(--font-title);
font-size: 36px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(181,51,51,0.30);
}
.slide[data-shotno="29"] .s29-hero-title {
font-family: var(--font-title);
font-size: 88px;
font-weight: 500;
color: var(--accent-red);
letter-spacing: 12px;
line-height: 1;
}
.slide[data-shotno="29"] .s29-hero-body {
font-family: var(--font-title);
font-size: 30px;
color: var(--text-sub);
letter-spacing: 4px;
line-height: 1.6;
}
.slide[data-shotno="29"] .s29-hero-body b {
color: var(--accent-red);
font-weight: 700;
}
.slide[data-shotno="29"] .s29-hero--peak .s29-hero-badge {
background: #8a2828;
box-shadow: 0 10px 28px rgba(181,51,51,0.45);
}
.slide[data-shotno="29"] .s29-hero--peak .s29-hero-title {
color: #8a2828;
text-shadow: 0 4px 16px rgba(181,51,51,0.35);
}
/* ============================================================
* 汇合五卡 · 正五边形布局 + 五边形连线 + 同心圆 + 旋转
* 正五边形顶点坐标(中心 50% 50%, 半径 30%):
* V1(50.0%, 20.0%) 顶
* V2(78.5%, 40.2%) 右上
* V3(67.6%, 74.5%) 右下
* V4(32.4%, 74.5%) 左下
* V5(21.5%, 40.2%) 左上
* ============================================================ */
.slide[data-shotno="29"] .s29-quintet {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(16px);
}
/* ===== SVG 连线层(五边形 + 同心圆) ===== */
.slide[data-shotno="29"] .s29-rings {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
overflow: visible;
}
/* 圆旋转(绕 quintet 中心 50% 50%) */
.slide[data-shotno="29"] .s29-ring {
transform-origin: 50% 50%;
}
.slide[data-shotno="29"].active .s29-ring {
animation: s29-ring-spin 25s linear infinite;
}
@keyframes s29-ring-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== 五卡片 · 正五边形顶点 ===== */
.slide[data-shotno="29"] .s29-mini {
position: absolute;
width: 200px;
padding: 30px 18px 24px;
background: var(--bg-card);
border: 2px solid var(--accent-red);
border-radius: 14px;
box-shadow: 0 6px 20px rgba(181,51,51,0.12);
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
transform: translate(-50%, -50%);
}
/* 五卡片定位 · 用户指定坐标 */
.slide[data-shotno="29"] .s29-mini:nth-child(2) { top: 17%; left: 50%; z-index: 3; } /* 1 合规 · 顶 */
.slide[data-shotno="29"] .s29-mini:nth-child(3) { top: 50%; left: 70%; z-index: 2; } /* 2 合时 · 右 */
.slide[data-shotno="29"] .s29-mini:nth-child(4) { top: 90%; left: 65%; z-index: 1; } /* 3 合品 · 右下 */
.slide[data-shotno="29"] .s29-mini:nth-child(5) { top: 90%; left: 35%; z-index: 1; } /* 4 合众 · 左下 */
.slide[data-shotno="29"] .s29-mini:nth-child(6) { top: 50%; left: 30%; z-index: 2; } /* 5 合心 · 左 */
.slide[data-shotno="29"] .s29-mini--peak {
background: linear-gradient(180deg, rgba(181,51,51,0.08), var(--bg-card) 50%);
border: 2.5px solid var(--accent-red);
box-shadow: 0 8px 28px rgba(181,51,51,0.20);
z-index: 5;
}
.slide[data-shotno="29"] .s29-mini-badge {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
width: 36px; height: 36px;
border-radius: 50%;
background: var(--accent-red);
color: #ffffff;
font-family: var(--font-title);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.slide[data-shotno="29"] .s29-mini-title {
font-family: var(--font-title);
font-size: 34px;
font-weight: 500;
color: var(--accent-red);
letter-spacing: 6px;
line-height: 1;
}
.slide[data-shotno="29"] .s29-mini-body {
font-family: var(--font-title);
font-size: 17px;
color: var(--text-sub);
letter-spacing: 2px;
line-height: 1.55;
}
.slide[data-shotno="29"] .s29-mini-body b {
color: var(--accent-red);
font-weight: 700;
}
/* 时序驱动 · 20s 总时长 */
.slide[data-shotno="29"].active .s29-hero[data-phase="1"] { animation: s29-h1 20s ease-in-out both; }
.slide[data-shotno="29"].active .s29-hero[data-phase="2"] { animation: s29-h2 20s ease-in-out both; }
.slide[data-shotno="29"].active .s29-hero[data-phase="3"] { animation: s29-h3 20s ease-in-out both; }
.slide[data-shotno="29"].active .s29-hero[data-phase="4"] { animation: s29-h4 20s ease-in-out both; }
.slide[data-shotno="29"].active .s29-hero[data-phase="5"] { animation: s29-h5 20s ease-in-out both; }
.slide[data-shotno="29"].active .s29-quintet { animation: s29-quintet 20s ease-in-out both; }
/* 5 条轮播窗口均为 ~3.5s · 留 0.5s 缓冲做 crossfade */
@keyframes s29-h1 {
0% { opacity: 0; transform: translateY(18px) scale(0.96); }
2%, 16% { opacity: 1; transform: translateY(0) scale(1); }
19%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s29-h2 {
0%, 18% { opacity: 0; transform: translateY(18px) scale(0.96); }
20%, 33% { opacity: 1; transform: translateY(0) scale(1); }
36%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s29-h3 {
0%, 35% { opacity: 0; transform: translateY(18px) scale(0.96); }
37%, 50% { opacity: 1; transform: translateY(0) scale(1); }
53%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s29-h4 {
0%, 52% { opacity: 0; transform: translateY(18px) scale(0.96); }
54%, 67% { opacity: 1; transform: translateY(0) scale(1); }
70%, 100% { opacity: 0; transform: translateY(-12px) scale(0.96); }
}
@keyframes s29-h5 {
0%, 69% { opacity: 0; transform: translateY(18px) scale(0.92); }
71%, 82% { opacity: 1; transform: translateY(0) scale(1.02); }
85%, 100% { opacity: 0; transform: translateY(-14px) scale(0.94); }
}
@keyframes s29-quintet {
0%, 83% { opacity: 0; transform: translateY(16px); }
86%, 100% { opacity: 1; transform: translateY(0); }
}
/* ============================================================
* 镜头 20 · 接势公式打字机动画 · 逐字输出 + 光标闪烁
* ============================================================ */
.slide[data-shotno="20"] .s20-typeline {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
font-family: var(--font-title);
font-size: 40px;
font-weight: 500;
letter-spacing: 6px;
line-height: 1.3;
min-height: 70px;
color: var(--text-title);
}
.slide[data-shotno="20"] .s20-ch {
display: inline-block;
opacity: 0;
transform: translateY(4px);
margin-right: 2px;
transition: opacity 0.05s steps(1), transform 0.05s steps(1);
}
.slide[data-shotno="20"] .s20-ch.s20-show {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* 三色分色 */
.slide[data-shotno="20"] .s20-olive { color: var(--accent-olive); }
.slide[data-shotno="20"] .s20-terra { color: var(--color-terracotta); }
.slide[data-shotno="20"] .s20-amber { color: var(--accent-amber); }
.slide[data-shotno="20"] .s20-dim { color: var(--text-dim); font-weight: 400; margin: 0 4px; }