/* 视差滚动效果样式 - 使用全局变量 */
/* 基础视差容器 */
.parallax-container {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

/* 页面加载动画 - 使用全局过渡变量 */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 标题视差效果 */
.parallax-title {
  position: relative;
  z-index: 2;
  transition: var(--parallax-transition);
  will-change: transform;
}

/* 章节卡片视差效果 */
.chapter-card {
  transition: var(--parallax-transition);
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.chapter-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--box-shadow-lg);
}

/* 浮动元素 */
.floating-element {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
  z-index: -1;
}

.floating-element.circle {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
}

.floating-element.square {
  border-radius: 5px;
  background: linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}

/* 滚动指示器 */
.scroll-indicator {
  position: fixed;
  bottom: calc(var(--spacing-unit) * 3.75);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--spacing-unit) * 3.75);
  height: calc(var(--spacing-unit) * 6.25);
  border: 2px solid var(--text-color);
  border-radius: var(--border-radius);
  opacity: 0.6;
  z-index: 10;
  display: flex;
  justify-content: center;
  transition: opacity var(--transition-speed) ease;
}

.scroll-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--text-color);
  margin-top: 8px;
  animation: scrollAnimation 2s infinite;
}

@keyframes scrollAnimation {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 视差背景 */
.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.1;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJub25lIi8+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjIwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSJjdXJyZW50Q29sb3IiPumAmuS/oTwvdGV4dD48L3N2Zz4=');
  background-size: 100px 100px;
  will-change: transform;
}

/* 章节内容视差效果 */
.chapter-content {
  position: relative;
  z-index: 1;
  transition: var(--parallax-transition);
}

.chapter-text {
  position: relative;
  transition: var(--parallax-transition);
}

/* 滚动进度指示器 */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  background: var(--accent-color);
  width: 0%;
  transition: width var(--transition-speed) ease;
}

/* 视差装饰元素 */
.decoration {
  position: absolute;
  pointer-events: none;
  opacity: 0.1;
  z-index: -1;
  will-change: transform;
}

.decoration.yin-yang {
  width: 200px;
  height: 200px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik01MCw5IGE0MCw0MCAwIDAgMSAwLDgwIGE0MCw0MCAwIDAgMCAwLTgwIE01MCw5IHYxNiBhMjQsMjQgMCAwIDAgMCw0OCB2MTYiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iMjkiIHI9IjgiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNjkiIHI9IjgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
  background-size: contain;
  background-repeat: no-repeat;
}

.decoration.bagua {
  width: 150px;
  height: 150px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIvPjxsaW5lIHgxPSI1MCIgeTE9IjIiIHgyPSI1MCIgeTI9Ijk4IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIi8+PGxpbmUgeDE9IjIiIHkxPSI1MCIgeDI9Ijk4IiB5Mj0iNTAiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iMTUiIHkxPSIxNSIgeDI9Ijg1IiB5Mj0iODUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48bGluZSB4MT0iODUiIHkxPSIxNSIgeDI9IjE1IiB5Mj0iODUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 滚动时的视差效果 */
.parallax-scroll {
  transition: var(--parallax-transition);
  will-change: transform;
}

/* 鼠标移动视差效果 */
.mouse-parallax {
  transition: transform var(--transition-speed) ease-out;
  will-change: transform;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .scroll-indicator {
    display: none;
  }
  
  .floating-element {
    display: none;
  }
}

/* 暗色模式适配 */
html.dark .parallax-bg {
  opacity: 0.05;
}

/* 章节卡片悬停效果 */
.chapter-card {
  position: relative;
  overflow: hidden;
}

.chapter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-speed) ease;
}

.chapter-card:hover::before {
  left: 100%;
}