/* 主题变量 */
:root {
  --color-primary: #2A2356;
  --color-secondary: #4A3F8D;
  --color-accent: #8A7FD8;
  --color-text: #1A1626;
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* 自定义动画 */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes glow {
  0% { filter: drop-shadow(0 0 1px rgba(138, 127, 216, 0.6)); }
  50% { filter: drop-shadow(0 0 8px rgba(138, 127, 216, 0.9)); }
  100% { filter: drop-shadow(0 0 1px rgba(138, 127, 216, 0.6)); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotate-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes twinkle {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(138, 127, 216, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(138, 127, 216, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(138, 127, 216, 0);
  }
}

/* 星盘动画类 */
.animate-spin-slow {
  animation: rotate 20s linear infinite;
}

.animate-spin-slow-reverse {
  animation: rotate 25s linear infinite reverse;
}

.animate-spin-medium {
  animation: rotate 15s linear infinite;
}

.animate-spin-very-slow {
  animation: rotate 80s linear infinite;
}

.animate-twinkle {
  animation: twinkle 2s ease-in-out infinite alternate;
}

.animate-twinkle-delay-1 {
  animation: twinkle 3s ease-in-out 0.5s infinite;
}

.animate-twinkle-delay-2 {
  animation: twinkle 3s ease-in-out 1s infinite;
}

.animate-twinkle-delay-3 {
  animation: twinkle 3s ease-in-out 1.5s infinite;
}

/* 自定义工具类 */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, 
    rgba(138, 127, 216, 0.1), 
    rgba(138, 127, 216, 0.2), 
    rgba(138, 127, 216, 0.1)
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2s infinite;
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.5s ease-out forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.5s ease-out forwards;
}

.animate-delay-1 {
  animation-delay: 0.1s;
}

.animate-delay-2 {
  animation-delay: 0.3s;
}

.animate-delay-3 {
  animation-delay: 0.5s;
}

.rotate-hover:hover {
  animation: rotate 20s linear infinite;
}

/* 强化文字可读性 */
.text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.text-shadow-md {
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.text-shadow-lg {
  text-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.text-shadow-white {
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.text-stroke-sm {
  -webkit-text-stroke: 0.5px rgba(0,0,0,0.2);
}

/* 渐变文字 */
.gradient-text {
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

/* 增强背景图案 */
.bg-pattern {
  background-image: url('images/background-pattern.svg');
  background-size: 200px;
  background-repeat: repeat;
  position: relative;
}

.bg-pattern::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, var(--color-primary) 100%);
  opacity: 0.7;
}

/* 玻璃态效果 */
.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 星盘效果 */
.star-chart-container:hover .animate-spin-slow {
  animation-duration: 15s;
}

.star-chart-container:hover .animate-spin-slow-reverse {
  animation-duration: 20s;
}

.star-chart-container:hover .animate-spin-medium {
  animation-duration: 15s;
}

.star-chart-container:hover .animate-glow {
  animation-duration: 1.5s;
}

/* 星盘动画 */
.star-chart {
  position: relative;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.star-chart:hover {
  transform: scale(1.05) rotate(5deg);
}

.star-chart::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.star-chart:hover::before {
  opacity: 1;
  transform: scale(1.1);
}

/* 按钮悬浮效果 */
.btn-hover-effect {
  position: relative;
  overflow: hidden;
}

.btn-hover-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.btn-hover-effect:hover::after {
  transform: translateX(100%);
}

/* 数据统计动画 */
.stat-number {
  display: inline-block;
  transition: transform 0.3s;
}

.stat-number:hover {
  transform: scale(1.1);
  color: var(--color-accent);
}

/* 装饰背景 */
.bg-pattern-overlay {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
  background-size: 40px 40px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* 卡片悬浮效果 */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(42, 35, 86, 0.2);
}

/* 内容区块 */
.section-divider {
  position: relative;
  height: 4rem;
  overflow: hidden;
}

.section-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, var(--color-primary) 0%, transparent 50%, var(--color-primary) 100%);
  opacity: 0.1;
}

/* 加载动画 */
@keyframes loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading::after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--color-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading 1s linear infinite;
}

/* 暗模式优化 - 增强对比度 */
.dark-mode-text {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.high-contrast {
  filter: contrast(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .gradient-text {
    font-size: 90%;
  }
  
  .hover-card:hover {
    transform: none;
  }
  
  .text-shadow-lg {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  }
}

/* 增强可读性的基础样式 */
body {
  letter-spacing: 0.015em;
  line-height: 1.6;
  color: #2A2356;
  background-color: #f8f9fa;
  transition: all 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* 交互效果 */
.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.03);
}

.hover-elevate {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-elevate:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(42, 35, 86, 0.2);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(42, 35, 86, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 35, 86, 0.7);
}