/* 
 * 视频背景样式 - 完整双视频背景系统 + JSON纹理效果（性能优化版）
 */

/* 视频背景容器 */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  overflow: hidden;
  /* 性能优化：开启硬件加速 */
  transform: translateZ(0);
  will-change: auto;
}

/* 视频元素 - 基础设置 */
.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.1) translateZ(0);
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 优化渲染性能 */
  image-rendering: optimizeQuality;
  /* 确保视频质量 */
  filter: none;
}

/* 暗色主题视频 - 素材/@ 20.mp4 */
.video-background video.dark-video {
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* 亮色主题视频 - 素材/@ 17.mp4 */
.video-background video.light-video {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 主题切换时的视频显示 */
.light-theme .video-background video.dark-video {
  display: none;
  opacity: 0;
}

.light-theme .video-background video.light-video {
  display: block;
  opacity: 1;
}

/* ===== 暗色主题纹理效果 - 基于 circuit-silk-sanctum.1.json ===== */
/* "极简未来主义优雅风格，带有虹彩流动性，纯黑背景和虹彩反射" */
/* JSON纹理特性：高光泽透明材质、虹彩finish、光线弯折表面、镜面效果 */

/* 视频叠加层 - 纹理效果容器 */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -8;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity;
  opacity: 0; /* 临时完全禁用纹理层 */
}

/* 暗色主题 - 纯黑色背景基调（JSON要求：Pure black background） */
.video-overlay::before {
  display: none; /* 临时禁用 */
}

/* 暗色主题 - 虹彩流动效果（JSON要求：Iridescent finish with light-bending surface） */
.video-overlay::after {
  display: none; /* 临时禁用 */
}

/* ===== 亮色主题纹理效果 - 基于 circuit-silk-sanctum3.json ===== */
/* "柔软的电子织物，带有可编程折痕，开放天空背景、铜天线和彩虹蓝色调" */

/* 亮色主题 - 开放天空背景 */
.light-theme .video-overlay::before {
  background: rgba(135, 206, 235, 0.3); /* 天空蓝色调 */
}

/* 亮色主题 - 丝绸织物纹理（增强版） */
.light-theme .video-overlay::after {
  background: 
    /* 主要织物纹理层 */
    radial-gradient(
      circle at 25% 75%,
      rgba(184, 115, 51, 0.15) 0%,    /* 铜天线色 */
      rgba(75, 0, 130, 0.12) 25%,     /* 彩虹蓝色 */
      rgba(135, 206, 235, 0.08) 50%,  /* 天空色 */
      transparent 70%
    ),
    /* 可编程折痕效果 */
    linear-gradient(
      45deg,
      rgba(184, 115, 51, 0.08) 0%,
      transparent 15%,
      rgba(75, 0, 130, 0.10) 30%,
      transparent 45%,
      rgba(184, 115, 51, 0.08) 60%,
      transparent 75%,
      rgba(75, 0, 130, 0.10) 90%,
      transparent 100%
    ),
    /* 织物光泽层 */
    conic-gradient(
      from 45deg at 60% 40%,
      rgba(184, 115, 51, 0.06) 0deg,
      rgba(75, 0, 130, 0.08) 90deg,
      rgba(135, 206, 235, 0.05) 180deg,
      rgba(184, 115, 51, 0.06) 270deg,
      rgba(75, 0, 130, 0.08) 360deg
    );
  background-size: 400% 400%, 200% 200%, 180% 180%;
  animation: 
    silkFlow 20s ease infinite,
    fabricCreases 25s ease infinite reverse,
    silkShimmer 30s ease infinite;
  mix-blend-mode: soft-light;
}

/* ===== 动画效果定义 ===== */

/* 暗色主题 - 虹彩流动动画（基于circuit-silk-sanctum.1.json） */
@keyframes prismaticFlow {
  0% { 
    background-position: 0% 50%, 0% 0%, 0% 0%, 0% 50%;
    filter: hue-rotate(0deg) brightness(1);
  }
  25% { 
    background-position: 25% 75%, 50% 25%, 30% 70%, 25% 75%;
    filter: hue-rotate(90deg) brightness(1.1);
  }
  50% { 
    background-position: 75% 25%, 100% 50%, 70% 30%, 75% 25%;
    filter: hue-rotate(180deg) brightness(0.9);
  }
  75% { 
    background-position: 50% 100%, 25% 75%, 40% 80%, 50% 100%;
    filter: hue-rotate(270deg) brightness(1.05);
  }
  100% { 
    background-position: 0% 50%, 0% 0%, 0% 0%, 0% 50%;
    filter: hue-rotate(360deg) brightness(1);
  }
}

@keyframes iridescenceWave {
  0% { 
    transform: rotate(0deg) scale(1) skew(0deg) translateZ(0);
    opacity: 0.8;
  }
  33% { 
    transform: rotate(120deg) scale(1.05) skew(1deg) translateZ(0);
    opacity: 1;
  }
  66% { 
    transform: rotate(240deg) scale(0.95) skew(-0.5deg) translateZ(0);
    opacity: 0.9;
  }
  100% { 
    transform: rotate(360deg) scale(1) skew(0deg) translateZ(0);
    opacity: 0.8;
  }
}

@keyframes mirrorReflection {
  0% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: brightness(1) contrast(1);
  }
  20% { 
    background-position: 100% 20%, 80% 100%, 60% 40%, 20% 80%;
    filter: brightness(1.2) contrast(1.1);
  }
  40% { 
    background-position: 20% 100%, 100% 60%, 80% 20%, 100% 40%;
    filter: brightness(0.9) contrast(1.2);
  }
  60% { 
    background-position: 80% 40%, 40% 20%, 100% 80%, 60% 100%;
    filter: brightness(1.1) contrast(0.9);
  }
  80% { 
    background-position: 40% 80%, 20% 80%, 40% 60%, 80% 20%;
    filter: brightness(1.05) contrast(1.05);
  }
  100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: brightness(1) contrast(1);
  }
}

@keyframes digitalLuxury {
  0%, 100% { 
    opacity: 0.75; 
    transform: translateX(0) translateY(0) scale(1) translateZ(0);
  }
  25% { 
    opacity: 0.9; 
    transform: translateX(2px) translateY(-1px) scale(1.02) translateZ(0);
  }
  50% { 
    opacity: 1; 
    transform: translateX(-1px) translateY(2px) scale(0.98) translateZ(0);
  }
  75% { 
    opacity: 0.85; 
    transform: translateX(1px) translateY(1px) scale(1.01) translateZ(0);
  }
}

/* 替换旧的彩虹动画（保持向后兼容） */
@keyframes rainbowFlow {
  0% { background-position: 0% 50%, 0% 0%, 0% 0%; }
  33% { background-position: 50% 100%, 100% 50%, 30% 70%; }
  66% { background-position: 100% 0%, 50% 100%, 70% 30%; }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; }
}

@keyframes secondaryWave {
  0% { transform: rotate(0deg) scale(1) translateZ(0); }
  50% { transform: rotate(180deg) scale(1.1) translateZ(0); }
  100% { transform: rotate(360deg) scale(1) translateZ(0); }
}

@keyframes lightSpots {
  0%, 100% { opacity: 0.8; transform: translateX(0) translateY(0) translateZ(0); }
  33% { opacity: 1; transform: translateX(20px) translateY(-10px) translateZ(0); }
  66% { opacity: 0.6; transform: translateX(-15px) translateY(15px) translateZ(0); }
}

/* 亮色主题 - 丝绸织物动画 */
@keyframes silkFlow {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  25% { background-position: 25% 75%, 50% 25%, 30% 70%; }
  50% { background-position: 75% 25%, 100% 50%, 70% 30%; }
  75% { background-position: 50% 100%, 25% 75%, 40% 80%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
}

@keyframes fabricCreases {
  0%, 100% { transform: skewX(0deg) translateZ(0); }
  25% { transform: skewX(1deg) translateZ(0); }
  50% { transform: skewX(-0.5deg) translateZ(0); }
  75% { transform: skewX(0.5deg) translateZ(0); }
}

@keyframes silkShimmer {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ===== 视频滤镜效果 ===== */

/* 暗色主题视频滤镜 - 增强亮度让视频更清晰 */
.video-background video.dark-video {
  filter: brightness(1.1) contrast(1.15) saturate(1.2);
}

/* 亮色主题视频滤镜 - 柔化以配合丝绸纹理 */
.light-theme .video-background video.light-video {
  filter: brightness(1.3) contrast(0.8) saturate(1.1) sepia(0.1);
}

/* ===== 增强纹理效果层 ===== */

/* 玻璃质感滤镜 - 根据主题调整 */
.glass-filter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -6;
  backdrop-filter: blur(1px) brightness(1.03) contrast(1.05);
  -webkit-backdrop-filter: blur(1px) brightness(1.03) contrast(1.05);
  pointer-events: none;
  transform: translateZ(0);
}

.light-theme .glass-filter {
  backdrop-filter: blur(1.5px) brightness(1.05) contrast(1.1) hue-rotate(10deg);
  -webkit-backdrop-filter: blur(1.5px) brightness(1.05) contrast(1.1) hue-rotate(10deg);
}

/* 暗色主题 - 彩虹光晕效果 */
.video-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -7;
  pointer-events: none;
  background: 
    radial-gradient(
      circle at 20% 80%,
      rgba(0, 255, 255, 0.04) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 0, 255, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 0, 0.02) 0%,
      transparent 60%
    );
  animation: pulseGlow 10s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* 亮色主题 - 织物光晕效果 */
.light-theme .video-glow {
  background: 
    radial-gradient(
      ellipse at 30% 70%,
      rgba(184, 115, 51, 0.10) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 30%,
      rgba(75, 0, 130, 0.08) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at center,
      rgba(135, 206, 235, 0.06) 0%,
      transparent 70%
    );
  animation: pulseGlow 10s ease-in-out infinite, fabricGlow 15s ease infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1) translateZ(0); }
  50% { opacity: 1; transform: scale(1.05) translateZ(0); }
}

@keyframes fabricGlow {
  0% { background-position: 0% 0%, 0% 0%, center; }
  50% { background-position: 100% 100%, 100% 100%, center; }
  100% { background-position: 0% 0%, 0% 0%, center; }
}

/* 丝绸质感效果 - 亮色主题专用 */
.silk-texture {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translateZ(0);
}

.light-theme .silk-texture {
  opacity: 1;
  background: 
    /* 横向丝线 */
    repeating-linear-gradient(
      0deg,
      rgba(184, 115, 51, 0.03) 0px,
      rgba(184, 115, 51, 0.03) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* 纵向丝线 */
    repeating-linear-gradient(
      90deg,
      rgba(75, 0, 130, 0.03) 0px,
      rgba(75, 0, 130, 0.03) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* 对角编织 */
    repeating-linear-gradient(
      45deg,
      rgba(135, 206, 235, 0.02) 0px,
      rgba(135, 206, 235, 0.02) 2px,
      transparent 2px,
      transparent 8px
    );
  animation: silkWave 25s ease infinite;
}

@keyframes silkWave {
  0%, 100% { transform: translate(0, 0) rotate(0deg) translateZ(0); }
  25% { transform: translate(2px, -1px) rotate(0.5deg) translateZ(0); }
  50% { transform: translate(-1px, 2px) rotate(-0.3deg) translateZ(0); }
  75% { transform: translate(1px, 1px) rotate(0.2deg) translateZ(0); }
}

/* 暗色主题 - 虹彩高光增强效果（基于circuit-silk-sanctum.1.json） */
.dark-theme-enhancement {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -6;
  pointer-events: none;
  opacity: 1;
  background: 
    /* 高光泽透明材质层 - 镜面反射效果 */
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0%,   /* 透明玻璃高光 */
      transparent 20%,
      rgba(0, 255, 255, 0.06) 35%,    /* 虹彩青色反射 */
      transparent 50%,
      rgba(255, 0, 255, 0.08) 65%,    /* 虹彩洋红反射 */
      transparent 80%,
      rgba(255, 255, 0, 0.06) 100%    /* 虹彩黄色高光 */
    ),
    /* 光线弯折表面效果 */
    radial-gradient(
      ellipse at 70% 30%,
      rgba(255, 255, 255, 0.12) 0%,   /* 镜面中心高光 */
      rgba(0, 255, 255, 0.08) 30%,    /* 虹彩青色扩散 */
      rgba(255, 0, 255, 0.06) 60%,    /* 虹彩洋红边缘 */
      transparent 80%
    ),
    /* 虹彩光谱层 - 模拟Prismatic reflections */
    conic-gradient(
      from 135deg at 30% 70%,
      rgba(255, 0, 0, 0.05) 0deg,     /* 红色光谱 */
      rgba(255, 165, 0, 0.06) 60deg,  /* 橙色光谱 */
      rgba(255, 255, 0, 0.08) 120deg, /* 黄色光谱 */
      rgba(0, 255, 0, 0.06) 180deg,   /* 绿色光谱 */
      rgba(0, 255, 255, 0.08) 240deg, /* 青色光谱 */
      rgba(0, 0, 255, 0.06) 300deg,   /* 蓝色光谱 */
      rgba(255, 0, 255, 0.05) 360deg  /* 紫色光谱 */
    ),
    /* 数字奢华效果层 - 流体优雅 */
    linear-gradient(
      225deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 15%,  /* 流体高光 */
      rgba(0, 255, 255, 0.08) 30%,    /* 优雅青色 */
      transparent 45%,
      rgba(255, 0, 255, 0.06) 60%,    /* 优雅洋红 */
      rgba(255, 255, 0, 0.04) 75%,    /* 优雅黄色 */
      transparent 100%
    );
  background-size: 280% 280%, 220% 220%, 180% 180%, 300% 300%;
  animation: 
    iridescenceFlow 25s ease-in-out infinite,
    mirrorSurface 20s linear infinite,
    prismaticSpectrum 30s ease infinite,
    fluidElegance 35s ease-in-out infinite reverse;
  transform: translateZ(0);
  will-change: transform, background-position, filter;
}

.light-theme .dark-theme-enhancement {
  opacity: 0;
}

/* 新增动画效果 - 虹彩和镜面效果 */
@keyframes iridescenceFlow {
  0% { 
    background-position: 0% 50%, 0% 0%, 0% 0%, 0% 50%;
    filter: brightness(1) saturate(1);
  }
  25% { 
    background-position: 50% 100%, 100% 50%, 30% 70%, 25% 75%;
    filter: brightness(1.1) saturate(1.2);
  }
  50% { 
    background-position: 100% 0%, 50% 100%, 70% 30%, 75% 25%;
    filter: brightness(0.9) saturate(1.1);
  }
  75% { 
    background-position: 25% 75%, 75% 25%, 40% 80%, 50% 100%;
    filter: brightness(1.05) saturate(1.15);
  }
  100% { 
    background-position: 0% 50%, 0% 0%, 0% 0%, 0% 50%;
    filter: brightness(1) saturate(1);
  }
}

@keyframes mirrorSurface {
  0% { 
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
    filter: brightness(1) contrast(1);
  }
  20% { 
    transform: perspective(1000px) rotateX(1deg) rotateY(2deg) translateZ(0);
    filter: brightness(1.15) contrast(1.1);
  }
  40% { 
    transform: perspective(1000px) rotateX(-0.5deg) rotateY(-1deg) translateZ(0);
    filter: brightness(0.95) contrast(1.2);
  }
  60% { 
    transform: perspective(1000px) rotateX(1.5deg) rotateY(-1.5deg) translateZ(0);
    filter: brightness(1.08) contrast(0.9);
  }
  80% { 
    transform: perspective(1000px) rotateX(-1deg) rotateY(1deg) translateZ(0);
    filter: brightness(1.02) contrast(1.05);
  }
  100% { 
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
    filter: brightness(1) contrast(1);
  }
}

@keyframes prismaticSpectrum {
  0% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg);
  }
  33% { 
    background-position: 100% 50%, 50% 100%, 30% 70%, 70% 30%;
    filter: hue-rotate(120deg);
  }
  66% { 
    background-position: 50% 100%, 100% 0%, 70% 30%, 30% 70%;
    filter: hue-rotate(240deg);
  }
  100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(360deg);
  }
}

@keyframes fluidElegance {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1) skew(0deg) translateZ(0);
  }
  25% { 
    opacity: 0.85; 
    transform: scale(1.02) skew(0.5deg) translateZ(0);
  }
  50% { 
    opacity: 0.9; 
    transform: scale(0.98) skew(-0.3deg) translateZ(0);
  }
  75% { 
    opacity: 0.95; 
    transform: scale(1.01) skew(0.2deg) translateZ(0);
  }
}

/* ===== 性能优化设置 ===== */

/* 隐藏原有的背景伪元素 */
body.has-video-bg::before,
body.has-video-bg::after {
  display: none;
}

/* 视频加载状态 */
.video-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2rem;
  z-index: -1;
  opacity: 0.7;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 30px;
  border-radius: 10px;
}

.light-theme .video-loading {
  color: #333;
  background: rgba(255, 255, 255, 0.8);
}

/* ===== 响应式和性能优化 ===== */

/* 移动设备优化 */
@media (max-width: 768px) {
  .video-background video {
    transform: translate(-50%, -50%) scale(1.2) translateZ(0);
  }
  
  /* 简化纹理效果 */
  .video-overlay::after {
    background-size: 150% 150%, 100% 100%, 100% 100% !important;
    animation-duration: 25s, 30s, 35s !important;
  }
  
  .light-theme .video-overlay::after {
    background-size: 200% 200%, 100% 100%, 120% 120% !important;
    animation-duration: 30s, 35s, 40s !important;
  }
  
  /* 减少玻璃效果 */
  .glass-filter {
    backdrop-filter: blur(1px) brightness(1.02);
    -webkit-backdrop-filter: blur(1px) brightness(1.02);
  }
}

/* 低性能设备优化 */
@media (max-width: 480px) {
  .video-background video {
    filter: blur(0.5px) !important;
  }
  
  /* 禁用复杂动画 */
  .video-overlay::after,
  .video-glow,
  .dark-theme-enhancement,
  .silk-texture {
    animation-duration: 60s !important;
  }
}

/* 低性能设备CSS类优化 */
.low-performance-device .video-overlay::after,
.low-performance-device .video-glow,
.low-performance-device .dark-theme-enhancement,
.low-performance-device .silk-texture {
  animation-duration: 45s !important;
  opacity: 0.5 !important;
}

.low-performance-device .glass-filter {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 省电模式优化 */
.power-save-mode .video-overlay::after,
.power-save-mode .video-glow,
.power-save-mode .dark-theme-enhancement,
.power-save-mode .silk-texture {
  animation-play-state: paused !important;
}

/* 视频性能危急模式 */
.video-performance-critical .video-overlay::after,
.video-performance-critical .video-glow,
.video-performance-critical .dark-theme-enhancement,
.video-performance-critical .silk-texture {
  display: none !important;
}

/* 预加载和渲染优化 */
.video-background video {
  preload: "metadata";
  will-change: transform, opacity;
}

.video-background video:not([autoplay]) {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-background video[autoplay] {
  opacity: 1;
}