/**
 * 算优网络科技 - 公共样式文件
 * 包含全站共用的基础样式、组件样式和动画效果
 */

/* ============================
   1. CSS 变量定义
   ============================ */
:root {
  --color-primary: #222F68;
  --color-secondary: #8A2BE2;
  --color-accent: #00ffff;
  --color-bg: #0a0a12;
  --color-text: #e0e0ff;
  --color-text-muted: rgba(224, 224, 255, 0.7);
  --color-border: rgba(138, 43, 226, 0.3);
}

/* ============================
   2. 基础样式
   ============================ */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow-x: hidden;
}

/* ============================
   3. 组件样式
   ============================ */

/* Cyber Button */
.cyber-btn {
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid rgba(138, 43, 226, 0.5);
}

.cyber-btn:hover {
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.7), 0 0 25px rgba(138, 43, 226, 0.5);
}

/* Cyber Card */
.cyber-card {
  transition: all 0.3s ease;
  border: 1px solid var(--color-border);
  background: rgba(10, 10, 18, 0.7);
  backdrop-filter: blur(5px);
}

.cyber-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);
}

/* Cyber Input */
.cyber-input {
  background: rgba(10, 10, 18, 0.7);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.cyber-input:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
  outline: none;
}

/* ============================
   4. 导航栏样式
   ============================ */
.nav-link {
  transition: all 0.3s ease;
}

.nav-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* 移动端菜单 */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* ============================
   5. 动画效果
   ============================ */

/* 浮动动画 */
@keyframes floatAnimation {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.floating {
  animation: floatAnimation 6s ease-in-out infinite;
}

/* 渐变背景动画 */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-bg {
  background: linear-gradient(-45deg, #222F68, #8A2BE2, #0a0a12, #00ffff);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
}

/* 脉冲发光效果 */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.3);
  }
  50% {
    box-shadow: 0 0 50px rgba(138, 43, 226, 0.5);
  }
}

.glow-effect {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* 电力闪烁效果 */
@keyframes titleFlicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
  }
  5% {
    opacity: 0.95;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
  }
  10% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  }
  15% {
    opacity: 0.98;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
  }
  25% {
    opacity: 1;
    text-shadow: 0 0 14px rgba(0, 255, 255, 0.6);
  }
  30% {
    opacity: 0.97;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
  }
}

.power-flicker {
  animation: titleFlicker 4s infinite;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
  position: relative;
  display: inline-block;
}

/* ============================
   6. 背景效果
   ============================ */

/* 网格背景 */
.cyber-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(138, 43, 226, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(138, 43, 226, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
  animation: pulseGrid 4s ease-in-out infinite;
}

@keyframes pulseGrid {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================
   7. 响应式调整
   ============================ */
@media (max-width: 768px) {
  .cyber-card {
    padding: 1rem;
  }
}

/* ============================
   8. 辅助类
   ============================ */
.text-gradient {
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}