@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Modern color system inspired by julebu.co */
    --background: 255 255 255;
    --foreground: 15 15 15;
    --card: 255 255 255;
    --card-foreground: 15 15 15;
    --popover: 255 255 255;
    --popover-foreground: 15 15 15;
    --primary: 280 100% 70%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 280 100% 70%;
    --radius: 0.5rem;
    
    /* Custom properties */
    --gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #3B82F6 100%);
    --gradient-secondary: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 50%, #EBF4FF 100%);
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 280 100% 70%;
    --primary-foreground: 0 0% 9%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 280 100% 70%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
  
  html {
    scroll-behavior: smooth;
  }
}

/* Hero gradient background */
.hero-gradient {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.3) 0%, 
    rgba(236, 72, 153, 0.25) 25%,
    rgba(59, 130, 246, 0.3) 50%,
    rgba(139, 92, 246, 0.25) 75%,
    rgba(236, 72, 153, 0.3) 100%
  );
  animation: gradient-shift 20s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background: linear-gradient(135deg, 
      rgba(139, 92, 246, 0.3) 0%, 
      rgba(236, 72, 153, 0.25) 25%,
      rgba(59, 130, 246, 0.3) 50%,
      rgba(139, 92, 246, 0.25) 75%,
      rgba(236, 72, 153, 0.3) 100%
    );
  }
  33% {
    background: linear-gradient(135deg, 
      rgba(236, 72, 153, 0.3) 0%, 
      rgba(59, 130, 246, 0.25) 25%,
      rgba(139, 92, 246, 0.3) 50%,
      rgba(236, 72, 153, 0.25) 75%,
      rgba(59, 130, 246, 0.3) 100%
    );
  }
  66% {
    background: linear-gradient(135deg, 
      rgba(59, 130, 246, 0.3) 0%, 
      rgba(139, 92, 246, 0.25) 25%,
      rgba(236, 72, 153, 0.3) 50%,
      rgba(59, 130, 246, 0.25) 75%,
      rgba(139, 92, 246, 0.3) 100%
    );
  }
}

/* Floating elements animation */
.floating-element {
  animation: float 6s ease-in-out infinite;
}

.floating-element-delayed {
  animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(5deg);
  }
  66% {
    transform: translateY(10px) rotate(-3deg);
  }
}

/* Modern feature cards */
.feature-card {
  @apply bg-white/90 backdrop-blur-xl border border-purple-100/50 rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-500;
  @apply hover:-translate-y-2 hover:scale-[1.02] hover:border-purple-200;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 250, 252, 0.9) 100%
  );
}

.feature-card:hover {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(248, 250, 252, 0.95) 100%
  );
  box-shadow: 
    0 25px 50px -12px rgba(139, 92, 246, 0.25),
    0 0 0 1px rgba(139, 92, 246, 0.1);
}

/* Glass card effect */
.glass-card {
  @apply bg-white/20 backdrop-blur-2xl border border-white/30 rounded-3xl shadow-2xl;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.25) 0%, 
    rgba(255, 255, 255, 0.1) 100%
  );
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Button enhancements */
.btn-primary {
  @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-2xl;
  @apply hover:from-purple-700 hover:to-pink-700 transition-all duration-300;
  @apply shadow-lg hover:shadow-xl hover:-translate-y-1;
  box-shadow: 
    0 10px 25px -5px rgba(139, 92, 246, 0.4),
    0 4px 6px -2px rgba(139, 92, 246, 0.1);
}

.btn-primary:hover {
  box-shadow: 
    0 20px 40px -10px rgba(139, 92, 246, 0.6),
    0 8px 16px -4px rgba(139, 92, 246, 0.2);
}

/* Testimonial cards */
.testimonial-card {
  @apply bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-6;
  @apply hover:bg-white/20 hover:border-white/30 transition-all duration-300;
  @apply hover:-translate-y-1 hover:shadow-xl;
}

/* Text gradients */
.text-gradient-primary {
  @apply bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent;
}

.text-gradient-secondary {
  @apply bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent;
}

/* Smooth scrolling and performance */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Loading animations */
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .hero-gradient {
    background-attachment: scroll;
  }
  
  .feature-card {
    @apply p-6;
  }
  
  .floating-element, .floating-element-delayed {
    display: none;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gradient-to-b from-purple-400 to-pink-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply from-purple-500 to-pink-500;
}

/* Selection styling */
::selection {
  @apply bg-purple-200 text-purple-900;
}

::-moz-selection {
  @apply bg-purple-200 text-purple-900;
}

/* 强制统一学习模块卡片尺寸 */
.learning-module-card {
  min-height: 200px !important;
  width: 100% !important;
  padding: 1.5rem !important;
}

.learning-module-grid {
  gap: 1.5rem !important;
  max-width: 75rem !important;
}

@media (min-width: 1024px) {
  .learning-module-card {
    min-height: 220px !important;
    padding: 2rem !important;
  }
  
  .learning-module-grid {
    gap: 2rem !important;
  }
}

/* 导航栏样式 */
.nav-item {
    @apply relative flex items-center space-x-2 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 group;
    @apply text-gray-600 hover:text-purple-600 hover:bg-purple-50/50;
}
.nav-item.active {
    @apply text-white bg-gradient-to-r from-purple-600 to-pink-600 shadow-lg;
}
.nav-item.active::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl blur opacity-30 -z-10;
}
.mobile-nav-item {
    @apply flex items-center space-x-3 px-4 py-3 rounded-xl text-base font-semibold transition-all duration-200;
    @apply text-gray-600 hover:text-purple-600 hover:bg-purple-50;
}
.mobile-nav-item.active {
    @apply text-white bg-gradient-to-r from-purple-600 to-pink-600 shadow-lg;
}
/* 语言切换按钮 */
.lang-btn {
    @apply px-3 py-2 rounded-lg transition-all duration-300 flex items-center space-x-2 font-medium text-sm;
    @apply bg-white/50 text-gray-700 hover:bg-white/70 hover:scale-105 cursor-pointer;
}
.lang-btn.active {
    @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg transform scale-105;
}