/* ==========================================
   聚光灯特效样式
   ========================================== */

.spotlight-container {
  position: relative;
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-radius: 300px;
}

/* 聚光灯遮罩层 */
.spotlight-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  backdrop-filter: grayscale(1) brightness(0.4);
  -webkit-backdrop-filter: grayscale(1) brightness(0.4);
  background: rgba(0, 0, 0, 0.001);
  
  mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),
    transparent 0%,
    transparent 20%,
    rgba(0, 0, 0, 0.1) 35%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.7) 80%,
    rgba(0, 0, 0, 0.9) 95%,
    black 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),
    transparent 0%,
    transparent 20%,
    rgba(0, 0, 0, 0.1) 35%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.7) 80%,
    rgba(0, 0, 0, 0.9) 95%,
    black 100%
  );
  
  transition: opacity 0.3s ease;
}

/* 淡入淡出层 */
.spotlight-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
  backdrop-filter: grayscale(1) brightness(0.4);
  -webkit-backdrop-filter: grayscale(1) brightness(0.4);
  background: rgba(0, 0, 0, 0.001);
  
  mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),
    black 0%,
    black 20%,
    rgba(0, 0, 0, 0.9) 35%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0.1) 95%,
    transparent 100%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),
    black 0%,
    black 20%,
    rgba(0, 0, 0, 0.9) 35%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.3) 80%,
    rgba(0, 0, 0, 0.1) 95%,
    transparent 100%
  );
  
  opacity: 1;
  transition: opacity 0.6s ease;
}

/* 当鼠标移动时隐藏淡入层 */
.spotlight-container.mouse-active .spotlight-fade {
  opacity: 0;
}

/* 作品项目增强效果 */
.spotlight-container .portfolio-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spotlight-container .portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}

/* 确保文字、导航、背景不受影响 */
.spotlight-container .category-header,
.spotlight-container .portfolio-filters,
.spotlight-container .navbar,
.spotlight-container .page-header,
.spotlight-container .cta-section,
.spotlight-container .footer {
  position: relative;
  z-index: 20;
}

/* 背景视频不受影响 */
.spotlight-container .portfolio-hero-video {
  position: relative;
  z-index: 1;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .spotlight-container {
    --spotlight-radius: 200px;
  }
  
  .spotlight-overlay,
  .spotlight-fade {
    backdrop-filter: grayscale(0.8) brightness(0.6);
    -webkit-backdrop-filter: grayscale(0.8) brightness(0.6);
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .spotlight-overlay,
  .spotlight-fade {
    display: none;
  }
}

/* 性能优化 - 减少重绘 */
.spotlight-container {
  will-change: transform;
}

.spotlight-overlay,
.spotlight-fade {
  will-change: mask-position, opacity;
}