/* 全局赛博朋克基础样式 */
body {

  background: #000 !important;

  margin: 0;

  overflow: hidden;

  font-family: 'Courier New', monospace !important;

}


/* 动态网格背景 */
#cyberGrid {

  position: fixed;

  width: 100%;

  height: 100vh;

  pointer-events: none;

  z-index: -1;

}
.grid-v, .grid-h {

  position: absolute;

  background: rgba(0, 243, 255, 0.05);

}
.grid-v { width: 1px; height: 100vh; }
.grid-h { width: 100vw; height: 1px; }


/* 启动容器 */
#cyberContainer {

  position: fixed;

  width: 100vw;

  height: 100vh;

  background: #000;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  z-index: 9999;

}


/* 故障文字效果 */
#cyberText {

  color: #0ff;

  font-size: 4em;

  font-weight: bold;

  text-shadow: 0 0 10px #0ff;

  position: relative;

  animation: textGlitch 2s infinite;

}
#cyberText::before, #cyberText::after {

  content: attr(data-text);

  position: absolute;

  top: 0;

  left: 0;

}
#cyberText::before {

  color: #f0f;

  animation: glitch1 0.5s infinite;

  clip-path: polygon(0 20%, 100% 30%, 100% 70%, 0 80%);

}
#cyberText::after {

  color: #0f0;

  animation: glitch2 0.8s infinite;

  clip-path: polygon(0 40%, 100% 50%, 100% 60%, 0 50%);

}


/* 扫描线效果 */
#scanLine {

  position: absolute;

  width: 100%;

  height: 2px;

  background: linear-gradient(to right, #0ff 50%, transparent 100%);

  box-shadow: 0 0 10px #0ff;

  animation: scan 3s linear infinite;

}


/* 关键帧动画 */
@keyframes textGlitch {

  0% { transform: translate(0); }

  20% { transform: translate(-3px, 3px); }

  40% { transform: translate(-3px, -3px); }

  60% { transform: translate(3px, 3px); }

  80% { transform: translate(3px, -3px); }

  100% { transform: translate(0); }

}


@keyframes glitch1 {

  0% { opacity: 0.8; transform: translate(-2px); }

  100% { opacity: 0; transform: translate(5px); }

}


@keyframes glitch2 {

  0% { opacity: 0.8; transform: translate(2px); }

  100% { opacity: 0; transform: translate(-5px); }

}


@keyframes scan {

  0% { top: 0; opacity: 0.8; }

  50% { opacity: 0.3; }

  100% { top: 100%; opacity: 0.8; }

}


@keyframes glitchDisappear {

  0% { opacity: 1; filter: blur(0); }

  50% { opacity: 0.5; filter: blur(2px); transform: skew(20deg); }

  100% { opacity: 0; transform: skew(-30deg) scale(2); }

}