/* ================================================
   逍遥DAO — BP v6.0 动效增强层
   叠加在 bp.css 之上，仅补充动画、粒子、3D、微交互
   ================================================ */

/* === 1. 全局动画基础 === */
@keyframes floatUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow), 0 4px 20px rgba(0,0,0,0.25); }
  50%      { box-shadow: 0 0 40px 6px var(--gold-glow), 0 8px 32px rgba(0,0,0,0.3); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes rotateRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* === 2. 粒子画布背景 === */
.bp-particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}
[data-theme="light"] .bp-particles { opacity: 0.35; }

/* 渐变光晕覆盖（增强氛围） */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 800px 500px at 10% 10%, rgba(201,168,76,0.06), transparent 60%),
    radial-gradient(ellipse 600px 400px at 90% 90%, rgba(59,130,246,0.04), transparent 60%);
  z-index: 0;
}
[data-theme="light"] .slide::after {
  background:
    radial-gradient(ellipse 800px 500px at 10% 10%, rgba(201,168,76,0.08), transparent 60%),
    radial-gradient(ellipse 600px 400px at 90% 90%, rgba(37,99,235,0.04), transparent 60%);
}
.slide-inner { position: relative; z-index: 1; }

/* === 3. 封面（Slide 1）升级 === */
.cover-orbit-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  height: 680px;
  pointer-events: none;
  z-index: 0;
}
.cover-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-border);
  opacity: 0.4;
}
.cover-orbit.r1 { animation: rotateRing 40s linear infinite; }
.cover-orbit.r2 { inset: 60px; border-color: rgba(201,168,76,0.15); animation: rotateRing 60s linear infinite reverse; }
.cover-orbit.r3 { inset: 120px; border-color: rgba(201,168,76,0.1); animation: rotateRing 80s linear infinite; }

.cover-orbit-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 20px var(--gold-glow);
}
.cover-orbit.r1 .cover-orbit-dot { top: -5px; left: 50%; transform: translateX(-50%); }
.cover-orbit.r2 .cover-orbit-dot { top: 50%; right: -5px; transform: translateY(-50%); background: var(--gold-l); }
.cover-orbit.r3 .cover-orbit-dot { bottom: -5px; left: 30%; background: var(--gold-d); }

.cover-logo {
  animation: softFloat 6s var(--ease) infinite, floatIn 1s var(--ease) both;
  filter: drop-shadow(0 0 30px var(--gold-glow));
  position: relative;
  z-index: 2;
}

/* 闪光文字效果（仅封面主标题的金色部分） */
.slide.cover .gold {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-l) 30%,
    #fff4b5 50%,
    var(--gold-l) 70%,
    var(--gold) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
[data-theme="light"] .slide.cover .gold {
  background: linear-gradient(90deg, var(--gold-d), var(--gold), #B8891E, var(--gold), var(--gold-d));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* 封面徽章：Claude 4.7 赋能 */
.cover-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gold);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  margin-top: 14px;
  backdrop-filter: blur(10px);
  animation: goldPulse 3s var(--ease) infinite;
}
.cover-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: twinkle 1.5s ease-in-out infinite;
}

/* === 4. 数字滚动效果 === */
.stat-num,
.counter-num {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--gold-l) 0%, var(--gold) 50%, var(--gold-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px var(--gold-glow));
  transition: transform 0.3s var(--ease);
}
.stat-card {
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-border);
  box-shadow: 0 12px 32px rgba(201,168,76,0.15);
}
.stat-card:hover::before { opacity: 0.3; }
.stat-card:hover .stat-num { transform: scale(1.08); }

/* === 5. 卡片通用悬浮（玻璃拟态升级） === */
.track-card,
.wall-card,
.product-item,
.biz-card,
.vision-card,
.team-card,
.roadmap-card,
.market-layer,
.highlight-card {
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.track-card:hover,
.wall-card:hover,
.biz-card:hover,
.vision-card:hover,
.team-card:hover,
.roadmap-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25), 0 0 0 1px var(--gold-border);
}
.product-item:hover,
.market-layer:hover {
  transform: translateX(4px);
  border-left-color: var(--gold);
}

/* 金色高光扫光条 */
.track-card::after,
.wall-card::after,
.biz-card::after,
.vision-card::after,
.roadmap-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.track-card:hover::after,
.wall-card:hover::after,
.biz-card:hover::after,
.vision-card:hover::after,
.roadmap-card:hover::after { left: 100%; }

/* === 6. 架构层"堆叠"进入动效 === */
.arch-layer {
  transition: all 0.35s var(--ease);
  position: relative;
}
.arch-layer:hover {
  transform: translateX(6px);
  background: var(--gold-bg) !important;
  border-color: var(--gold-border) !important;
}
.arch-layer:hover .arch-num {
  background: var(--gold);
  color: var(--gold-btn-text);
  box-shadow: 0 0 20px var(--gold-glow);
}

/* === 7. 时间线小节点动态光点 === */
.timeline-item::before {
  animation: twinkle 2s ease-in-out infinite;
}
.timeline-item.highlight::before {
  animation: goldPulse 2s var(--ease) infinite, twinkle 2s ease-in-out infinite;
  background: var(--gold) !important;
  box-shadow: 0 0 0 4px var(--gold-bg), 0 0 20px var(--gold-glow);
}

/* === 8. 表格行悬浮动效 === */
.compete-table tbody tr {
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.compete-table tbody tr:hover {
  background: var(--gold-bg) !important;
  transform: scale(1.01);
}

/* === 9. 打字机标题光标 === */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--gold);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: twinkle 0.8s step-end infinite;
}

/* === 10. "数字增生"概念可视化 === */
.growth-visual {
  position: relative;
  padding: 20px;
  margin-top: 14px;
  background: linear-gradient(135deg, var(--gold-bg), transparent);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  overflow: hidden;
}
.growth-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, var(--gold-glow) 0%, transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(139,92,246,0.2) 0%, transparent 40%);
  opacity: 0.5;
  pointer-events: none;
  animation: breathe 4s ease-in-out infinite;
}

.growth-nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  gap: 8px;
  flex-wrap: wrap;
}
.growth-node {
  flex: 1;
  min-width: 90px;
  text-align: center;
  padding: 10px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--t2);
  transition: all 0.35s var(--ease);
  position: relative;
}
.growth-node.active {
  background: var(--gold-bg);
  border-color: var(--gold);
  color: var(--t1);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px var(--gold-glow);
}
.growth-node-label {
  font-size: 0.7rem;
  color: var(--t3);
  margin-bottom: 4px;
  font-weight: 500;
}
.growth-node-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
}
.growth-arrow {
  color: var(--gold);
  font-size: 0.9rem;
  flex: 0 0 auto;
  opacity: 0.6;
}

/* === 11. 文明演进可视化 === */
.civ-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
  position: relative;
}
.civ-timeline::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold) 20%,
    var(--gold-l) 50%,
    var(--gold) 80%,
    transparent
  );
  opacity: 0.4;
  z-index: 0;
}
.civ-stage {
  position: relative;
  z-index: 1;
  padding: 18px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  transition: all 0.4s var(--ease);
}
.civ-stage:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 36px rgba(201,168,76,0.15);
}
.civ-stage-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 10px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold-btn-text);
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  border-radius: 50%;
  box-shadow: 0 6px 18px var(--gold-glow);
}
.civ-stage-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 6px;
}
.civ-stage-desc {
  font-size: 0.78rem;
  color: var(--t2);
  line-height: 1.6;
}
.civ-stage.future .civ-stage-num {
  background: linear-gradient(135deg, #8B5CF6, var(--gold));
}

/* === 12. "9·9全球发布日"徽章 === */
.launch-badge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--gold-bg), rgba(139,92,246,0.08));
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}
.launch-badge::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--gold), transparent, var(--gold));
  z-index: -1;
  border-radius: 16px;
  opacity: 0.15;
  animation: breathe 3s ease-in-out infinite;
}
.launch-date {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-l), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px var(--gold-glow));
}
.launch-info { font-size: 0.85rem; color: var(--t2); line-height: 1.7; }
.launch-info strong { color: var(--gold); }

/* === 13. 投资案例飞轮（Slide 8 升级） === */
.invest-flywheel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.invest-case {
  padding: 14px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.invest-case:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 28px rgba(201,168,76,0.15);
}
.invest-case-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px var(--gold-glow));
}
.invest-case-name {
  font-size: 0.72rem;
  color: var(--t3);
  font-weight: 500;
}
.invest-case-note {
  font-size: 0.68rem;
  color: var(--t2);
  margin-top: 4px;
}

/* === 14. Slide 切入动画增强 === */
.slide.active .fade-in { animation: floatIn 0.8s var(--ease) both; }
.slide.active .fade-in-up { animation: floatUp 0.8s var(--ease) both; }
.slide.active .fade-in-d1 { animation-delay: 0.15s; }
.slide.active .fade-in-d2 { animation-delay: 0.30s; }
.slide.active .fade-in-d3 { animation-delay: 0.45s; }
.slide.active .fade-in-d4 { animation-delay: 0.60s; }
.slide.active .fade-in-d5 { animation-delay: 0.75s; }

/* 子元素错峰进入：卡片组 */
.slide.active .stat-grid > *,
.slide.active .track-grid > *,
.slide.active .wall-grid > *,
.slide.active .biz-grid > *,
.slide.active .vision-grid > *,
.slide.active .invest-flywheel > *,
.slide.active .civ-timeline > * {
  animation: floatIn 0.7s var(--ease) both;
}
.slide.active .stat-grid > *:nth-child(1),
.slide.active .track-grid > *:nth-child(1),
.slide.active .wall-grid > *:nth-child(1),
.slide.active .biz-grid > *:nth-child(1),
.slide.active .vision-grid > *:nth-child(1),
.slide.active .invest-flywheel > *:nth-child(1),
.slide.active .civ-timeline > *:nth-child(1) { animation-delay: 0.35s; }
.slide.active .stat-grid > *:nth-child(2),
.slide.active .track-grid > *:nth-child(2),
.slide.active .wall-grid > *:nth-child(2),
.slide.active .biz-grid > *:nth-child(2),
.slide.active .vision-grid > *:nth-child(2),
.slide.active .invest-flywheel > *:nth-child(2),
.slide.active .civ-timeline > *:nth-child(2) { animation-delay: 0.45s; }
.slide.active .stat-grid > *:nth-child(3),
.slide.active .track-grid > *:nth-child(3),
.slide.active .wall-grid > *:nth-child(3),
.slide.active .biz-grid > *:nth-child(3),
.slide.active .vision-grid > *:nth-child(3),
.slide.active .invest-flywheel > *:nth-child(3),
.slide.active .civ-timeline > *:nth-child(3) { animation-delay: 0.55s; }
.slide.active .stat-grid > *:nth-child(4),
.slide.active .track-grid > *:nth-child(4),
.slide.active .wall-grid > *:nth-child(4),
.slide.active .biz-grid > *:nth-child(4),
.slide.active .invest-flywheel > *:nth-child(4) { animation-delay: 0.65s; }
.slide.active .stat-grid > *:nth-child(5),
.slide.active .biz-grid > *:nth-child(5),
.slide.active .invest-flywheel > *:nth-child(5) { animation-delay: 0.75s; }
.slide.active .stat-grid > *:nth-child(6),
.slide.active .biz-grid > *:nth-child(6),
.slide.active .invest-flywheel > *:nth-child(6) { animation-delay: 0.85s; }

/* === 15. 技术赋能条（Claude 4.7） === */
.tech-stack-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--t2);
  transition: all 0.3s var(--ease);
  backdrop-filter: blur(10px);
}
.tech-chip:hover {
  color: var(--gold);
  border-color: var(--gold-border);
  background: var(--gold-bg);
  transform: translateY(-2px);
}
.tech-chip.primary {
  color: var(--gold);
  background: var(--gold-bg);
  border-color: var(--gold-border);
  font-weight: 600;
}
.tech-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* === 16. "42"命叙事卡 === */
.destiny-card {
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--gold-bg), rgba(139,92,246,0.06));
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}
.destiny-number {
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 900;
  line-height: 1;
  color: var(--gold);
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.12;
  pointer-events: none;
}
.destiny-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}
.destiny-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.78rem;
  color: var(--t2);
  line-height: 1.9;
}
.destiny-list li { position: relative; padding-left: 16px; }
.destiny-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.6rem;
  top: 6px;
}

/* === 17. Slide 徽章标签 === */
.slide-tag {
  position: relative;
  padding-left: 20px !important;
}
.slide-tag::before {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
  box-shadow: 0 0 10px var(--gold-glow);
  animation: twinkle 2s ease-in-out infinite;
}

/* === 18. 滚动条样式（玻璃拟态） === */
.slide::-webkit-scrollbar { width: 6px; }
.slide::-webkit-scrollbar-track { background: transparent; }
.slide::-webkit-scrollbar-thumb {
  background: var(--gold-border);
  border-radius: 3px;
}
.slide::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* === 19. 响应式适配 === */
@media (max-width: 820px) {
  .cover-orbit-wrap { width: 420px; height: 420px; }
  .cover-orbit.r2 { inset: 40px; }
  .cover-orbit.r3 { inset: 80px; }
  .civ-timeline { grid-template-columns: 1fr; }
  .civ-timeline::before { display: none; }
  .launch-date { font-size: 2rem; }
  .destiny-number { font-size: 3rem; }
  .invest-flywheel { grid-template-columns: repeat(2, 1fr); }
}

/* === 20. 打印/PDF 时禁用复杂动画（防止黑屏） === */
@media print {
  .bp-particles,
  .cover-orbit-wrap,
  .slide::after { display: none !important; }
  * {
    animation: none !important;
    transition: none !important;
  }
  .slide.cover .gold {
    -webkit-text-fill-color: var(--gold) !important;
    color: var(--gold) !important;
  }
}

/* === 21. 减弱动画偏好支持 === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .bp-particles { display: none; }
}