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

/* 自定义组件样式 */
@layer components {
  /* 导航链接样式 */
  .nav-link {
    @apply relative text-secondary hover:text-primary font-medium transition-colors duration-300 py-2;
  }
  
  .nav-link::after {
    @apply content-[''] absolute left-0 bottom-0 w-0 h-0.5 bg-primary transition-all duration-300;
  }
  
  .nav-link:hover::after,
  .nav-link.active::after {
    @apply w-full;
  }
  
  .nav-link.active {
    @apply text-primary;
  }
  
  .nav-link-mobile {
    @apply block py-2 px-4 text-secondary hover:text-primary hover:bg-gray-50 transition-colors duration-200;
  }
  
  .nav-link-mobile.active {
    @apply text-primary bg-gray-50;
  }
  
  /* 按钮样式 */
  .btn {
    @apply px-6 py-2 rounded-md font-medium transition-all duration-300;
  }
  
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-dark;
  }
  
  .btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary-dark;
  }
  
  .btn-outline {
    @apply border border-primary text-primary hover:bg-primary hover:text-white;
  }
  
  /* 卡片样式 */
  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-lg hover:-translate-y-1;
  }
  
  /* 标题样式 */
  .section-title {
    @apply text-3xl font-bold text-secondary mb-6 relative inline-block;
  }
  
  .section-title::after {
    @apply content-[''] absolute left-0 -bottom-2 w-1/2 h-1 bg-primary rounded-full;
  }
  
  /* 动画效果 */
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* 粒子背景 */
  .particles-bg {
    @apply relative overflow-hidden;
  }
  
  /* 页面过渡动画 */
  .page-enter {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .page-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s;
  }
  
  /* 灯箱画廊 */
  .gallery-item {
    @apply cursor-pointer overflow-hidden rounded-lg relative;
  }
  
  .gallery-item img {
    @apply transition-transform duration-500;
  }
  
  .gallery-item:hover img {
    @apply scale-110;
  }
  
  .gallery-item .overlay {
    @apply absolute inset-0 bg-gradient-to-t from-secondary/80 to-transparent opacity-0 transition-opacity duration-300 flex flex-col justify-end p-4 text-white;
  }
  
  .gallery-item:hover .overlay {
    @apply opacity-100;
  }
  
  /* 时间轴 */
  .timeline {
    @apply relative border-l-2 border-primary-light ml-6 pl-8 py-4;
  }
  
  .timeline-item {
    @apply relative mb-8;
  }
  
  .timeline-item::before {
    @apply content-[''] absolute -left-[42px] top-1 w-4 h-4 rounded-full bg-primary border-4 border-white;
  }
  
  /* 表单样式 */
  .form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
  }
  
  .form-label {
    @apply block text-sm font-medium text-secondary mb-1;
  }
  
  /* 案例筛选器 */
  .filter-btn {
    @apply px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 mr-2 mb-2;
  }
  
  .filter-btn.active {
    @apply bg-primary text-white;
  }
  
  .filter-btn:not(.active) {
    @apply bg-gray-100 text-secondary hover:bg-gray-200;
  }
  
  /* 案例卡片 */
  .case-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300;
  }
  
  .case-card:hover {
    @apply shadow-lg -translate-y-1;
  }
  
  .case-card .case-image {
    @apply h-48 w-full object-cover;
  }
  
  .case-card .case-content {
    @apply p-4;
  }
  
  /* 联系表单 */
  .contact-form {
    @apply bg-white rounded-lg shadow-md p-6;
  }
  
  .contact-form .form-group {
    @apply mb-4;
  }
  
  .contact-form .submit-btn {
    @apply w-full bg-primary text-white py-3 rounded-md font-medium hover:bg-primary-dark transition-colors duration-200;
  }
  
  /* FAQ 手风琴 */
  .faq-item {
    @apply border-b border-gray-200 py-4;
  }
  
  .faq-question {
    @apply flex justify-between items-center w-full text-left font-medium text-secondary hover:text-primary cursor-pointer transition-colors duration-200;
  }
  
  .faq-answer {
    @apply mt-2 text-gray-600 hidden;
  }
  
  .faq-answer.open {
    @apply block;
  }
  
  /* 证书展示 */
  .certificate-card {
    @apply bg-white rounded-lg shadow-md p-4 text-center transition-all duration-300;
  }
  
  .certificate-card:hover {
    @apply shadow-lg -translate-y-1;
  }
  
  .certificate-card img {
    @apply mx-auto mb-4 h-32 object-contain;
  }
  
  /* 加载动画 */
  .loading {
    @apply overflow-hidden;
  }
  
  #loading-overlay {
    @apply fixed inset-0 bg-white z-50 flex items-center justify-center;
  }
  
  .loading-spinner {
    @apply animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary;
  }
}

/* 自定义工具类 */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #2B6CB0, #4299E1);
  }
  
  .bg-pattern {
    background-color: #f7fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232B6CB0' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  
  .bg-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
  }
  
  .bg-about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('/images/about-bg.jpg');
    background-size: cover;
    background-position: center;
  }
  
  .bg-contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)), url('/images/contact-bg.jpg');
    background-size: cover;
    background-position: center;
  }
  
  .hidden-item {
    display: none !important;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .section-title {
    @apply text-2xl;
  }
  
  .section-title::after {
    @apply w-24;
  }
  
  .case-card .case-image {
    @apply h-36;
  }
}

/* 打印样式 */
@media print {
  header, footer, .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  a {
    text-decoration: none;
    color: #000;
  }
  
  .container {
    max-width: 100%;
    padding: 0;
  }
}