/**
 * Modern UI - Glassmorphism & Gradient Styles
 * 七有企业官网 - 现代科技感UI优化
 */

/* ===================================
   1. 全局字体引入
   =================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

/* ===================================
   2. CSS变量扩展 - 玻璃拟态 & 渐变
   =================================== */
:root {
  /* 原有颜色 */
  --primary-color: #0867f5;
  --secondary-color: #1cabfe;
  --accent-color: #10afff;

  /* 渐变色 - 主色调蓝色系 */
  --gradient-primary: linear-gradient(135deg, #0867f5 0%, #00d4ea 100%);
  --gradient-primary-vibrant: linear-gradient(135deg, #0052a3 0%, #00ccff 100%);
  --gradient-secondary: linear-gradient(135deg, #ff6b35 0%, #ff9068 100%);
  --gradient-accent: linear-gradient(135deg, #00b894 0%, #00d9a8 100%);

  /* 文字渐变 - 科技感 */
  --text-gradient-blue: linear-gradient(135deg, #0867f5 0%, #00ccff 50%, #00d4ea 100%);
  --text-gradient-vibrant: linear-gradient(135deg, #0f87ff 0%, #0064e7 50%, #0069ea 100%);
  --text-gradient-cool: linear-gradient(135deg, #0867f5 0%, #00d4ea 100%);

  /* 玻璃拟态背景 */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-light: rgba(255, 255, 255, 0.6);
  --glass-bg-lighter: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* 深色玻璃拟态 */
  --glass-dark-bg: rgba(15, 23, 42, 0.7);
  --glass-dark-border: rgba(255, 255, 255, 0.1);

  /* 模糊强度 */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;

  /* 动画时长 */
  --transition-fast: 200ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;

  /* 新增：科技感发光效果 */
  --glow-primary: 0 0 20px rgba(0, 102, 204, 0.4);
  --glow-accent: 0 0 20px rgba(0, 184, 148, 0.4);
  --glow-secondary: 0 0 20px rgba(255, 107, 53, 0.4);
}

/* ===================================
   3. 玻璃拟态组件样式
   =================================== */

/* 玻璃导航栏 */
.glass-nav {
  background: var(--glass-bg-lighter) !important;
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-normal) ease;
}

.glass-nav:hover {
  background: var(--glass-bg-light) !important;
  box-shadow: 0 8px 40px 0 rgba(31, 38, 135, 0.2);
}

/* 玻璃卡片 */
.glass-card {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-normal) ease;
  cursor: pointer;
}

.glass-card:hover {
  background: var(--glass-bg-lighter);
  transform: translateY(-8px);
  box-shadow: 0 12px 48px 0 rgba(31, 38, 135, 0.25);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 深色玻璃卡片（用于深色背景） */
.glass-card-dark {
  background: var(--glass-dark-bg);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glass-dark-border);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  transition: all var(--transition-normal) ease;
}

.glass-card-dark:hover {
  background: rgba(15, 23, 42, 0.8);
  transform: translateY(-8px);
  box-shadow: 0 12px 48px 0 rgba(0, 0, 0, 0.4);
}

/* 玻璃按钮 */
.glass-button {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  padding: 12px 32px;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  box-shadow: var(--glass-shadow);
}

.glass-button:hover {
  background: var(--glass-bg-lighter);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px 0 rgba(31, 38, 135, 0.3);
}

/* ===================================
   4. 文字渐变效果
   =================================== */

/* 主标题渐变 */
.gradient-text-primary {
  background: var(--text-gradient-blue);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradient-shift 3s ease infinite;
}

/* 彩色渐变文字 */
.gradient-text-vibrant {
  background: var(--text-gradient-vibrant);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradient-shift 4s ease infinite;
}

/* 冷色调渐变 */
.gradient-text-cool {
  background: var(--text-gradient-cool);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradient-shift 3.5s ease infinite;
}

/* 渐变动画 */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ===================================
   5. 现代化背景效果
   =================================== */

/* 渐变背景 */
.gradient-bg-primary {
  background: var(--gradient-primary);
  position: relative;
  overflow: hidden;
}

.gradient-bg-vibrant {
  background: var(--gradient-primary-vibrant);
  position: relative;
  overflow: hidden;
}

/* 网格背景（科技感） */
.tech-grid-bg {
  background-color: #0a0e27;
  background-image:
    linear-gradient(rgba(0, 102, 204, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 102, 204, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  position: relative;
}

/* 动态网格背景 */
.tech-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 102, 204, 0.15) 0%, transparent 50%);
  animation: pulse-grid 4s ease-in-out infinite;
}

@keyframes pulse-grid {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* 发光圆点装饰 */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

.glow-orb-blue {
  background: radial-gradient(circle, rgba(0, 102, 204, 0.8) 0%, transparent 70%);
}

.glow-orb-green {
  background: radial-gradient(circle, rgba(0, 184, 148, 0.8) 0%, transparent 70%);
}

.glow-orb-orange {
  background: radial-gradient(circle, rgba(255, 107, 53, 0.8) 0%, transparent 70%);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

/* ===================================
   6. 现代化按钮样式
   =================================== */

/* 主要按钮 - 渐变 */
.btn-gradient-primary {
  background: var(--gradient-primary);
  border: none;
  color: white;
  padding: 14px 36px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-gradient-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.btn-gradient-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 102, 204, 0.4);
}

.btn-gradient-primary:hover::before {
  opacity: 1;
}

/* 次要按钮 - 玻璃拟态 */
.btn-glass {
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  color: rgb(255, 255, 255);
  padding: 14px 36px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.btn-glass:hover {
  background: var(--glass-bg-lighter);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

/* 发光按钮 */
.btn-glow {
  background: var(--gradient-primary);
  border: none;
  color: white;
  padding: 14px 36px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  box-shadow: var(--glow-primary);
  animation: glow-pulse 2s ease-in-out infinite;
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0, 102, 204, 0.6);
  animation: none;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 102, 204, 0.6);
  }
}

/* ===================================
   7. 卡片悬停效果增强
   =================================== */

.modern-card {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  border-radius: 16px;
  padding: 24px;
  transition: all var(--transition-normal) ease;
  /* border: 1px solid rgba(0, 0, 0, 0.08); */
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.modern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 102, 204, 0.1), transparent);
  transition: left 0.5s ease;
}

.modern-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 102, 204, 0.15);
  border-color: rgba(0, 102, 204, 0.3);
}

.modern-card:hover::before {
  left: 100%;
}

/* ===================================
   8. 页面加载动画
   =================================== */

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

/* 延迟淡入 */
.fade-in-delay-1 {
  animation: fadeIn 0.6s ease-out 0.1s forwards;
  opacity: 0;
}

.fade-in-delay-2 {
  animation: fadeIn 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

.fade-in-delay-3 {
  animation: fadeIn 0.6s ease-out 0.3s forwards;
  opacity: 0;
}

/* 滑入动画 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-up {
  animation: slideInUp 0.8s ease-out forwards;
}

/* ===================================
   9. 滚动触发动画
   =================================== */

.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================
   10. 导航栏现代化
   =================================== */

.modern-header {
  background: var(--glass-bg-lighter);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
  transition: all var(--transition-normal) ease;
}

.modern-header.scrolled {
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(var(--blur-xl));
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.16);
}

/* 导航链接悬停效果 */
.nav-link-modern {
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link-modern:hover {
  color: var(--primary-color);
}

.nav-link-modern.active {
  color: var(--primary-color);
  font-weight: 600;
}

.nav-link-modern::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width var(--transition-fast) ease;
  border-radius: 1px;
}

.nav-link-modern:hover::after {
  width: 85%;
}

.nav-link-modern.active::after {
  width: 85%;
  height: 3px;
}

/* ===================================
   11. 输入框现代化
   =================================== */

.modern-input {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(0, 102, 204, 0.1);
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 16px;
  transition: all var(--transition-fast) ease;
  backdrop-filter: blur(var(--blur-sm));
}

.modern-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
  background: white;
}

.modern-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* ===================================
   12. 视差效果
   =================================== */

.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.parallax-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(1, 22, 44, 0.1) 0%, rgba(44, 128, 255, 0.2) 50%);
}

/* ===================================
   13. 响应式动画控制
   =================================== */

/* 尊重用户的动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===================================
   14. 移动端优化
   =================================== */

@media (max-width: 767px) {
  /* 减少模糊强度以提升性能 */
  .glass-nav,
  .glass-card,
  .glass-button {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* 减少悬停效果 */
  .modern-card:hover,
  .glass-card:hover {
    transform: translateY(-4px);
  }

  /* 移动端按钮全宽 */
  .btn-gradient-primary,
  .btn-glass {
    width: 100%;
    text-align: center;
  }
}

/* ===================================
   15. 打印样式优化
   =================================== */

@media print {
  .glass-nav,
  .glass-card,
  .glass-button,
  .modern-card {
    background: white !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .gradient-text-primary,
  .gradient-text-vibrant,
  .gradient-text-cool {
    -webkit-text-fill-color: initial !important;
    background: none !important;
    color: black !important;
  }
}

/* ===================================
   16. 辅助类
   =================================== */

/* 指针 */
.cursor-pointer {
  cursor: pointer;
}

/* 过渡效果 */
.transition-smooth {
  transition: all var(--transition-normal) ease;
}

/* 文字居中 */
.text-center {
  text-align: center;
}

/* 相对定位 */
.relative {
  position: relative;
}

/* 溢出隐藏 */
.overflow-hidden {
  overflow: hidden;
}