/* FastFly 赛博朋克霓虹科技主题样式表 - 2026 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --cyber-dark: #05060f;
  --cyber-dark-alt: #080b18;
  --neon-cyan: #00f0ff;
  --neon-magenta: #ff2bd6;
  --neon-purple: #9d4edd;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cyber-dark);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-magenta));
  border-radius: 4px;
}

body {
  background-color: var(--cyber-dark);
  color: var(--text-main);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* 赛博网格背景 */
.cyber-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 43, 214, 0.05) 1px, transparent 1px);
}

/* 故障与闪烁动画 Glitch */
.glitch-text {
  position: relative;
  display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 0, 0, 0);
}
.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 var(--neon-cyan);
  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}
.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 var(--neon-magenta);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(10px, 9999px, 44px, 0); }
  20% { clip: rect(60px, 9999px, 80px, 0); }
  40% { clip: rect(20px, 9999px, 35px, 0); }
  60% { clip: rect(80px, 9999px, 100px, 0); }
  80% { clip: rect(40px, 9999px, 60px, 0); }
  100% { clip: rect(10px, 9999px, 30px, 0); }
}
@keyframes glitch-anim-2 {
  0% { clip: rect(30px, 9999px, 70px, 0); }
  25% { clip: rect(15px, 9999px, 45px, 0); }
  50% { clip: rect(75px, 9999px, 95px, 0); }
  75% { clip: rect(5px, 9999px, 25px, 0); }
  100% { clip: rect(50px, 9999px, 85px, 0); }
}

/* 无限滚动跑马灯 */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 22s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* 玻璃质感卡片与悬停霓虹高光 */
.glass-card {
  background: rgba(13, 16, 35, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.2);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  transform: translateY(-6px);
  border-color: var(--neon-cyan);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.25), inset 0 0 15px rgba(0, 240, 255, 0.1);
}
.glass-card-magenta:hover {
  border-color: var(--neon-magenta);
  box-shadow: 0 10px 30px rgba(255, 43, 214, 0.25), inset 0 0 15px rgba(255, 43, 214, 0.1);
}

/* 脉冲光环雷达动画 */
@keyframes ping-slow {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}
.pulse-node {
  animation: ping-slow 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 减弱动效适配 */
@media (prefers-reduced-motion: reduce) {
  .glitch-text::before, .glitch-text::after, .animate-marquee, .pulse-node {
    animation: none !important;
  }
  .glass-card:hover {
    transform: none !important;
  }
}