/* ========================================
   织网 (WebWeave) - 动画性能优化
   使用 GPU 加速和 will-change 优化
   ======================================== */

/* === GPU 加速优化 === */
.holy-button,
.nav-item,
.scroll-card,
.stela-card,
.sacred-geometry-card,
.workflow-node,
.workflow-edge,
.role-node {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* === 动画性能优化 === */
@keyframes holyScan {
  0%, 100% {
    transform: translateY(-100%) translateZ(0);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes featherFall {
  0% {
    transform: translateY(-100px) translateX(0) rotate(0deg) translateZ(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) translateX(50px) rotate(360deg) translateZ(0);
    opacity: 0;
  }
}

@keyframes particleFloat {
  0%, 100% {
    transform: translate(0, 0) translateZ(0);
    opacity: 0.3;
  }
  50% {
    transform: translate(20px, -20px) translateZ(0);
    opacity: 0.8;
  }
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    transform: scale(1) translateZ(0);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    transform: scale(1.05) translateZ(0);
  }
}

/* === 减少重绘优化 === */
.holy-button,
.nav-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.holy-button:hover,
.nav-item:hover {
  transform: translateY(-2px) translateZ(0);
}

/* === 滚动性能优化 === */
.org-content,
.component-panel,
.property-panel,
.workflow-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* === 图片懒加载优化 === */
img[data-lazy] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[data-lazy].loaded {
  opacity: 1;
}

/* === 减少动画复杂度（低性能设备） === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === 性能分级（基于设备能力） === */
@media (max-width: 640px) {
  /* 移动端：减少粒子数量 */
  .holy-particle {
    display: none;
  }
  
  /* 简化发光效果 */
  .holy-glow-strong {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important;
  }
  
  /* 减少动画 */
  .feather-fall {
    animation-duration: 3s;
  }
}

/* === 低性能设备检测 === */
@media (prefers-reduced-motion: no-preference) {
  /* 仅在用户不偏好减少动画时应用 */
  .holy-scan {
    animation: holyScan 5s infinite;
  }
  
  .feather-fall {
    animation: featherFall 3s infinite;
  }
}

/* === 使用 CSS containment 优化 === */
.scroll-card,
.stela-card,
.sacred-geometry-card {
  contain: layout style paint;
}

/* === 优化 SVG 动画 === */
svg {
  shape-rendering: geometricPrecision;
}

.workflow-edge,
.connection-line {
  vector-effect: non-scaling-stroke;
}

/* === 优化字体加载 === */
@font-face {
  font-family: 'Cinzel';
  font-display: swap; /* 使用 swap 策略，避免阻塞渲染 */
}

/* === 优化关键渲染路径 === */
.holy-button,
.nav-item {
  contain: layout style paint;
}

/* === 使用 transform 替代 top/left === */
.fade-in {
  animation: fadeIn 0.3s ease;
  transform: translateZ(0);
}

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

/* === 优化模态框动画 === */
.modal-overlay {
  will-change: opacity;
  transform: translateZ(0);
}

.modal-content {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.modal-content.show {
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}