/* 
 * Dancing Effect 基础样式（跟随滚动版本）
 * 确保Canvas正确显示和性能优化
 */

/* 容器样式 */
#dancing-effect-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 300px;
  z-index: 9998;
  pointer-events: none;
  contain: layout paint; /* 性能优化：containment */
}

/* Canvas样式 */
#dancing-effect-canvas {
  position: absolute;
  width: 400px;
  height: 300px;
  z-index: 9999;
  pointer-events: auto;
  border: none;
  will-change: transform; /* 性能优化：提示浏览器准备GPU加速 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 移动端隐藏 */
@media screen and (max-width: 768px) {
  #dancing-effect-container,
  #dancing-effect-canvas {
    display: none !important;
  }
}

/* 小屏幕优化（平板） */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  #dancing-effect-container {
    width: 300px;
    height: 225px;
  }
  
  #dancing-effect-canvas {
    width: 300px;
    height: 225px;
  }
}

/* 打印时隐藏 */
@media print {
  #dancing-effect-container,
  #dancing-effect-canvas {
    display: none !important;
  }
}

/* 性能优化：减少动画在非激活标签页的资源占用 */
@media (prefers-reduced-motion: reduce) {
  #dancing-effect-canvas {
    display: none !important;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  #dancing-effect-canvas {
    filter: contrast(1.2);
  }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  #dancing-effect-canvas {
    /* 暗色模式下可以添加轻微背景区分 */
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 无障碍访问：确保不影响焦点导航 */
#dancing-effect-canvas {
  outline: none;
}

#dancing-effect-canvas:focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* 加载状态指示器（可选） */
.dancing-effect-loading {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #4A90E2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  z-index: 9998;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  pointer-events: none;
}

/* 性能监控指示器（调试用） */
.dancing-effect-fps {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #0f0;
  font-family: monospace;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10000;
  display: none;
}

.dancing-effect-debug .dancing-effect-fps {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 滚动时轻微淡出效果（可选） */
.is-scrolling #dancing-effect-canvas {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}