/* ==========================================================================
   框架 19 专属样式：纱幕渐变 · 柔和纱幕飘动 (超高清 · 透亮高对比版)
   Gauze Veil Gradient & Floating Soft Voile Wave - Ultra High Clarity
   ========================================================================== */

/* 全屏纱幕 Canvas 画布背景（置于最底层背景，绝不覆盖页面文字） */
#gauze-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

/* 纱幕深邃背景光晕层（位于背景层，不遮挡正文） */
.gauze-ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gauze-light-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.2;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: floatOrb 24s ease-in-out infinite alternate;
}

.orb-violet {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, #8b5cf6 0%, rgba(139, 92, 246, 0) 70%);
  top: -120px;
  left: 10%;
  animation-duration: 20s;
}

.orb-cyan {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #06b6d4 0%, rgba(6, 182, 212, 0) 70%);
  bottom: 8%;
  right: -80px;
  animation-duration: 25s;
  animation-delay: -6s;
}

.orb-pink {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #ec4899 0%, rgba(236, 72, 153, 0) 70%);
  top: 45%;
  left: 55%;
  animation-duration: 22s;
  animation-delay: -11s;
}

@keyframes floatOrb {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -20px) scale(1.06);
  }
  100% {
    transform: translate(-20px, 30px) scale(0.95);
  }
}

/* 页面高清晰背景纹理（微点阵，纯净无任何暗化蒙层，z-index 为 0） */
.gauze-texture-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);
  background-size: 32px 32px;
}

/* 纱幕飘逸动效徽章 */
.gauze-shimmer-badge {
  position: relative;
  overflow: hidden;
}

.gauze-shimmer-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: gauzeShimmer 3.5s ease-in-out infinite;
}

@keyframes gauzeShimmer {
  0% {
    left: -100%;
  }
  40%, 100% {
    left: 200%;
  }
}

/* 超高清流体玻璃卡片 */
.glass-panel-gauze {
  background: rgba(17, 21, 44, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.glass-panel-gauze::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

/* 流体浮动微动画 */
.float-subtle {
  animation: subtleFloat 6s ease-in-out infinite alternate;
}

@keyframes subtleFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

/* 滚动渐入动画触发类 */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   无障碍：支持 prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #gauze-canvas {
    display: none !important;
  }
  
  .gauze-light-orb,
  .gauze-shimmer-badge::after,
  .float-subtle {
    animation: none !important;
  }
  
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}