/* 自定义工具类 */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

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

/* 自定义样式 */
body {
  font-family: 'Inter', system-ui, sans-serif;
}

.font-display {
  font-family: 'Montserrat', sans-serif;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #12121F;
}

::-webkit-scrollbar-thumb {
  background: #6C5CE7;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5A4FD1;
}

/* 导航栏滚动效果 */
.navbar-scrolled {
  background: rgba(18, 18, 31, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 移动端菜单动画 */
#mobile-menu {
  transition: all 0.3s ease;
}

#mobile-menu:not(.hidden) {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 卡片悬停效果 */
.group:hover .group-hover\:bg-primary\/30 {
  background-color: rgba(108, 92, 231, 0.3);
}

.group:hover .group-hover\:bg-secondary\/30 {
  background-color: rgba(0, 210, 211, 0.3);
}

.group:hover .group-hover\:bg-accent\/30 {
  background-color: rgba(253, 121, 168, 0.3);
}

/* 按钮悬停效果 */
.transform {
  transition: transform 0.3s ease;
}

.hover\:scale-105:hover {
  transform: scale(1.05);
}

/* 渐变文字效果 */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-primary {
  --tw-gradient-from: #6C5CE7;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(108, 92, 231, 0));
}

.to-secondary {
  --tw-gradient-to: #00D2D3;
}

/* 响应式字体 */
.text-\[clamp\(2\.5rem\,5vw\,4rem\)\] {
  font-size: clamp(2.5rem, 5vw, 4rem);
}

.text-\[clamp\(1\.8rem\,4vw\,2\.5rem\)\] {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

/* 背景装饰动画 */
.absolute {
  position: absolute;
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-3xl {
  --tw-blur: blur(64px);
}

/* 图片加载动画 */
img {
  transition: opacity 0.3s ease;
}

img[data-src] {
  opacity: 0;
}

img.loaded {
  opacity: 1;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
  
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr;
  }
}

/* 打印样式 */
@media print {
  .fixed {
    position: static;
  }
  
  .bg-dark,
  .bg-darker {
    background: white;
    color: black;
  }
  
  .text-white,
  .text-light {
    color: black;
  }
}