/* Tailwind CSS 核心引入 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义工具类（扩展Tailwind） */
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .card-hover {
    transition: all 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(247,37,133,0.2), 0 8px 10px -6px rgba(247,37,133,0.2);
  }
  .nav-scrolled {
    background-color: rgba(15,23,42,0.95);
    backdrop-filter: blur(8px);
  }
}

/* 基础全局样式 */
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}
.hero-gradient {
  background: linear-gradient(to right, rgba(15,23,42,0.9), rgba(124,58,237,0.7));
}
.agent-card {
  background: rgba(15,23,42,0.7);
  backdrop-filter: blur(4px);
}

/* 元素淡入动画（页面滚动触发） */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* 确保主题色兼容（备用，防止Tailwind配置失效） */
:root {
  --valorant-red: #F72585;
  --valorant-dark: #0F172A;
  --valorant-light: #E2E8F0;
  --valorant-accent: #7C3AED;
  --valorant-cyan: #06B6D4;
}

/* 兜底样式，确保图片和颜色正常显示 */
.bg-valorant-hero {
  background-size: cover;
  background-position: center;
}
img {
  object-fit: cover;
  border-radius: 0.375rem;
}