/* ============================================
   动态背景系统 - 首页 + 内页
   科技感 + 高级感 + 动态效果
============================================ */

/* ===== 首页 HERO 动态背景 ===== */
.hero {
  background:
    linear-gradient(115deg, rgba(10, 10, 10, 0.52) 0%, rgba(10, 10, 10, 0.08) 42%, rgba(10, 10, 10, 0.36) 100%),
    linear-gradient(135deg, #7b0d13 0%, #c8161d 38%, #9f1017 68%, #4d070b 100%);
  background-size: 200% 200%;
  animation: heroGradientShift 12s ease-in-out infinite;
}

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

/* 动态粒子层 */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* 流动光束 */
.hero-beams {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.beam {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: beamFlow 8s linear infinite;
}

.beam:nth-child(1) { left: 15%; animation-delay: 0s; animation-duration: 7s; }
.beam:nth-child(2) { left: 30%; animation-delay: 2s; animation-duration: 9s; opacity: 0.6; }
.beam:nth-child(3) { left: 50%; animation-delay: 4s; animation-duration: 6s; }
.beam:nth-child(4) { left: 70%; animation-delay: 1s; animation-duration: 10s; opacity: 0.5; }
.beam:nth-child(5) { left: 85%; animation-delay: 3s; animation-duration: 8s; opacity: 0.7; }

@keyframes beamFlow {
  0% { transform: translateY(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* 浮动几何装饰 */
.hero-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.shape {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
}

.shape-ring {
  border-radius: 50%;
  animation: shapeFloat 10s ease-in-out infinite;
}

.shape-ring.s1 {
  width: 200px; height: 200px;
  top: 10%; right: 8%;
  animation-duration: 12s;
}

.shape-ring.s2 {
  width: 120px; height: 120px;
  top: 60%; right: 20%;
  animation-duration: 8s;
  animation-delay: 2s;
  border-color: rgba(255, 255, 255, 0.08);
}

.shape-ring.s3 {
  width: 80px; height: 80px;
  bottom: 15%; right: 5%;
  animation-duration: 10s;
  animation-delay: 4s;
}

.shape-square {
  width: 100px; height: 100px;
  top: 20%; left: 5%;
  transform: rotate(45deg);
  animation: shapeRotate 20s linear infinite;
  border-color: rgba(255, 255, 255, 0.06);
}

.shape-hex {
  width: 60px; height: 60px;
  bottom: 25%; left: 10%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(255, 255, 255, 0.04);
  border: none;
  animation: shapeFloat 8s ease-in-out infinite 1s;
}

@keyframes shapeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(8deg); }
}

@keyframes shapeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 动态网格层 */
.hero-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 80%);
  animation: meshMove 20s linear infinite;
}

@keyframes meshMove {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}

/* 光晕脉冲 */
.hero-glow-pulse {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
}

.hero-glow-pulse.g1 {
  width: 500px; height: 500px;
  top: -150px; right: -100px;
  background: radial-gradient(circle, rgba(255, 80, 80, 0.35) 0%, transparent 70%);
  animation: glowPulse 6s ease-in-out infinite;
}

.hero-glow-pulse.g2 {
  width: 400px; height: 400px;
  bottom: -100px; left: -50px;
  background: radial-gradient(circle, rgba(255, 100, 60, 0.2) 0%, transparent 70%);
  animation: glowPulse 8s ease-in-out infinite 2s;
}

.hero-glow-pulse.g3 {
  width: 300px; height: 300px;
  top: 40%; left: 30%;
  background: radial-gradient(circle, rgba(200, 50, 50, 0.15) 0%, transparent 70%);
  animation: glowPulse 7s ease-in-out infinite 1s;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* 扫描线效果 */
.hero-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  z-index: 1;
  pointer-events: none;
  animation: scanline 6s linear infinite;
}

@keyframes scanline {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 数据流装饰 */
.hero-data-stream {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.4;
}

.hero-data-stream.ds-left { left: 0; }
.hero-data-stream.ds-right { right: 0; }

.data-line {
  position: absolute;
  width: 100%;
  font-family: 'Georgia', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  animation: dataFlow 15s linear infinite;
}

.data-line:nth-child(1) { top: 5%; animation-delay: 0s; }
.data-line:nth-child(2) { top: 20%; animation-delay: 3s; }
.data-line:nth-child(3) { top: 35%; animation-delay: 6s; }
.data-line:nth-child(4) { top: 50%; animation-delay: 9s; }
.data-line:nth-child(5) { top: 65%; animation-delay: 2s; }
.data-line:nth-child(6) { top: 80%; animation-delay: 5s; }
.data-line:nth-child(7) { top: 95%; animation-delay: 8s; }

@keyframes dataFlow {
  0% { transform: translateX(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(200%); opacity: 0; }
}

/* ===== 内页 HERO 高级背景 ===== */

/* 基础渐变升级 */
.page-hero {
  background:
    linear-gradient(118deg, rgba(10, 10, 10, 0.52) 0%, rgba(10, 10, 10, 0.06) 46%, rgba(10, 10, 10, 0.38) 100%),
    linear-gradient(135deg, #7b0d13 0%, #c8161d 42%, #9f1017 70%, #4d070b 100%);
  background-size: 150% 150%;
  animation: pageGradientShift 15s ease-in-out infinite;
}

.page-hero-en {
  z-index: 1;
}

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

/* 透视网格地板 */
.page-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.page-hero-grid::before {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -50%;
  width: 200%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 80%);
  animation: gridScroll 10s linear infinite;
}

@keyframes gridScroll {
  from { background-position: 0 0; }
  to { background-position: 0 50px; }
}

/* 几何装饰图形 */
.page-hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 六边形阵列 */
.deco-hexagon {
  position: absolute;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: hexFloat 12s ease-in-out infinite;
}

.deco-hexagon.h1 { width: 140px; height: 140px; top: 15%; right: 10%; animation-delay: 0s; }
.deco-hexagon.h2 { width: 80px; height: 80px; top: 55%; right: 25%; animation-delay: 3s; opacity: 0.6; }
.deco-hexagon.h3 { width: 50px; height: 50px; bottom: 20%; right: 8%; animation-delay: 6s; opacity: 0.4; }

@keyframes hexFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
  50% { transform: translateY(-15px) rotate(15deg); opacity: 0.8; }
}

/* 同心圆环 */
.deco-rings {
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  pointer-events: none;
  z-index: 0;
}

.deco-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.deco-rings .ring:nth-child(1) { width: 100%; height: 100%; animation: ringPulse 4s ease-in-out infinite; }
.deco-rings .ring:nth-child(2) { width: 75%; height: 75%; animation: ringPulse 4s ease-in-out infinite 1s; }
.deco-rings .ring:nth-child(3) { width: 50%; height: 50%; animation: ringPulse 4s ease-in-out infinite 2s; }
.deco-rings .ring:nth-child(4) { width: 25%; height: 25%; animation: ringPulse 4s ease-in-out infinite 3s; }

@keyframes ringPulse {
  0%, 100% { border-color: rgba(255, 255, 255, 0.06); }
  50% { border-color: rgba(255, 255, 255, 0.18); }
}

/* 电路线条 */
.deco-circuit {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.deco-circuit svg {
  width: 100%;
  height: 100%;
}

.deco-circuit path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1;
  stroke-dasharray: 200;
  animation: circuitDraw 8s linear infinite;
}

@keyframes circuitDraw {
  0% { stroke-dashoffset: 200; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: -200; opacity: 0; }
}

/* 光晕 */
.page-hero-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
  filter: none;
  transform: skewX(-16deg);
}

.page-hero-glow.pg1 {
  width: 46%;
  height: 120%;
  top: -10%;
  right: 8%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  animation: lightSweep 8s ease-in-out infinite;
}

.page-hero-glow.pg2 {
  width: 38%;
  height: 100%;
  bottom: -16%;
  left: 4%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: lightSweep 10s ease-in-out infinite 2s;
}

/* 浮动粒子点 */
.particle-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.particle-dots .pdot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: particleDrift 15s linear infinite;
}

.particle-dots .pdot:nth-child(odd) {
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
}

@keyframes particleDrift {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) translateX(30px); opacity: 0; }
}

/* 对角光线 */
.diagonal-light {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 150%;
  height: 100px;
  left: -25%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: rotate(-15deg);
}

.diagonal-light.dl1 { top: 30%; animation: lightSweep 8s ease-in-out infinite; }
.diagonal-light.dl2 { top: 60%; animation: lightSweep 10s ease-in-out infinite 3s; opacity: 0.5; }

@keyframes lightSweep {
  0%, 100% { opacity: 0; transform: rotate(-15deg) translateX(-50px); }
  50% { opacity: 1; transform: rotate(-15deg) translateX(50px); }
}

/* 科技感角标装饰 */
.tech-corner {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 120px;
  height: 120px;
}

.tech-corner::before,
.tech-corner::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
}

.tech-corner.tl::before { top: 0; left: 0; width: 40px; height: 1px; }
.tech-corner.tl::after { top: 0; left: 0; width: 1px; height: 40px; }

.tech-corner.br::before { bottom: 0; right: 0; width: 40px; height: 1px; }
.tech-corner.br::after { bottom: 0; right: 0; width: 1px; height: 40px; }

.tech-corner.bl::before { bottom: 0; left: 0; width: 40px; height: 1px; }
.tech-corner.bl::after { bottom: 0; left: 0; width: 1px; height: 40px; }

/* CTA区块增强 */
.cta-wrap {
  background: linear-gradient(135deg, #8B0F15 0%, #C8161D 40%, #A50F16 70%, #6B0A0F 100%);
  background-size: 200% 200%;
  animation: heroGradientShift 12s ease-in-out infinite;
}

/* 风险区块增强 */
.risk-wrap {
  background: linear-gradient(135deg, #8B0F15 0%, #C8161D 40%, #A50F16 70%, #6B0A0F 100%);
  background-size: 200% 200%;
  animation: heroGradientShift 12s ease-in-out infinite;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .hero-data-stream { display: none; }
  .shape-square, .shape-hex { display: none; }
  .deco-rings { width: 300px; height: 300px; right: -80px; }
  .deco-hexagon.h2, .deco-hexagon.h3 { display: none; }
  .diagonal-light { display: none; }
}