/**
 * 模板：10 · 虫洞穿梭 (Wormhole Warp Dynamic Visual System)
 * 宇宙深空、相对论视界光环、时空折叠曲率与超空间穿梭流光
 */

:root {
  --wh-singularity: #00F0FF;
  --wh-event-horizon: #7C3AED;
  --wh-hyperspace: #1E1B4B;
  --wh-deep-space: #070A13;
  --wh-particle: rgba(0, 240, 255, 0.8);
}

/* 虫洞穿梭视界容器 */
.wormhole-portal-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Canvas 实时星流穿梭层 */
.wormhole-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

/* 相对论引力奇点发光核心 */
.wormhole-singularity {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  max-width: 90vw;
  max-height: 90vw;
  background: radial-gradient(
    circle at center,
    rgba(0, 240, 255, 0.28) 0%,
    rgba(124, 58, 237, 0.2) 35%,
    rgba(30, 27, 75, 0.15) 60%,
    transparent 80%
  );
  filter: blur(40px);
  border-radius: 50%;
  animation: wormholePulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* 时空曲率环 */
.wormhole-rings {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  pointer-events: none;
}

.wormhole-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
  transform: translate(-50%, -50%);
  animation: rotateWormholeRing 24s linear infinite;
}

.ring-1 {
  width: 220px;
  height: 220px;
  border-color: rgba(0, 240, 255, 0.5);
  animation-duration: 16s;
  animation-direction: reverse;
}

.ring-2 {
  width: 360px;
  height: 360px;
  border-color: rgba(124, 58, 237, 0.4);
  border-style: dotted;
  animation-duration: 28s;
}

.ring-3 {
  width: 480px;
  height: 480px;
  border-color: rgba(0, 240, 255, 0.2);
  animation-duration: 40s;
}

/* 虫洞光束折射流 */
.wormhole-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 240, 255, 0.4) 45%,
    rgba(124, 58, 237, 0.5) 55%,
    transparent 100%
  );
  transform: translateX(-50%);
  opacity: 0.6;
}

/* 关键帧动画 */
@keyframes wormholePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }
}

@keyframes rotateWormholeRing {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 动效无障碍访问适配 */
@media (prefers-reduced-motion: reduce) {
  .wormhole-singularity,
  .wormhole-ring {
    animation: none !important;
  }
  .wormhole-canvas {
    opacity: 0.35;
  }
}