/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

/* 动画类 */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-slide-in-up {
    animation: slideInUp 0.6s ease-out forwards;
}

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

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

/* 动画延迟 */
.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}

.animation-delay-800 {
    animation-delay: 0.8s;
}

/* 滚动动画 */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 导航栏滚动效果 */
header.sticky {
    transition: all 0.3s ease;
}

header.sticky.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* 按钮悬停效果 */
.btn-primary {
    @apply bg-indigo-600 text-white font-medium py-3 px-8 rounded-full hover:bg-indigo-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1;
}

.btn-secondary {
    @apply bg-transparent border-2 border-indigo-600 text-indigo-600 font-medium py-3 px-8 rounded-full hover:bg-indigo-600 hover:text-white transition-all duration-300;
}

/* 卡片悬停效果 */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-2;
}

/* 产品卡片 */
.product-card {
    @apply bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-2;
}

.product-card .product-image {
    @apply relative overflow-hidden;
}

.product-card .product-image img {
    @apply w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110;
}

.product-card .product-info {
    @apply p-6;
}

/* 分类卡片 */
.category-card {
    @apply group;
}

.category-card .category-content {
    @apply bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg p-6 text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-2;
}

/* 评价卡片 */
.testimonial-card {
    @apply bg-white rounded-lg shadow-sm p-8 transition-all duration-300 hover:shadow-lg hover:-translate-y-2;
}

/* 标签样式 */
.badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-indigo-100 text-indigo-800;
}

.badge-secondary {
    @apply bg-green-100 text-green-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

/* 表单样式 */
.form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300;
}

.form-textarea {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300 resize-y;
}

.form-select {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all duration-300;
}

/* 加载动画 */
.loader {
    @apply border-4 border-gray-200 border-t-indigo-600 h-8 w-8 rounded-full animate-spin;
}

/* 模态框 */
.modal {
    @apply fixed inset-0 z-50 overflow-y-auto flex items-center justify-center bg-black bg-opacity-50;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6 animate-fade-in-up;
}

/* 标签页 */
.tabs {
    @apply border-b border-gray-200;
}

.tab {
    @apply px-4 py-3 text-gray-500 font-medium cursor-pointer transition-colors duration-300 border-b-2 border-transparent hover:text-indigo-600;
}

.tab.active {
    @apply text-indigo-600 border-indigo-600;
}

/* 响应式设计 */
@media (max-width: 767px) {
    .container {
        @apply px-4;
    }
    
    h1 {
        @apply text-3xl;
    }
    
    h2 {
        @apply text-2xl;
    }
    
    .grid-cols-4 {
        @apply grid-cols-1;
    }
    
    .grid-cols-3 {
        @apply grid-cols-1;
    }
    
    .grid-cols-2 {
        @apply grid-cols-1;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        @apply px-6;
    }
    
    .grid-cols-4 {
        @apply grid-cols-2;
    }
    
    .grid-cols-3 {
        @apply grid-cols-2;
    }
}

/* 背景渐变 */
.bg-gradient-primary {
    @apply bg-gradient-to-r from-indigo-600 to-purple-600;
}

.bg-gradient-secondary {
    @apply bg-gradient-to-r from-blue-600 to-cyan-600;
}

.bg-gradient-tertiary {
    @apply bg-gradient-to-r from-pink-600 to-red-600;
}

/* 文本渐变 */
.text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600;
}

/* 阴影效果 */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 过渡效果 */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* 悬停缩放 */
.hover-scale {
    @apply transition-transform duration-300 hover:scale-105;
}

/* 隐藏滚动条 */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* 粘性定位 */
.sticky-top {
    @apply sticky top-0 z-50;
}

/* 全屏高度 */
.min-h-screen {
    min-height: 100vh;
}

/* 弹性布局 */
.flex-center {
    @apply flex items-center justify-center;
}

.flex-between {
    @apply flex items-center justify-between;
}

.flex-column {
    @apply flex flex-col;
}

/* 间距工具类 */
.mt-1 { @apply mt-1; }
.mt-2 { @apply mt-2; }
.mt-3 { @apply mt-3; }
.mt-4 { @apply mt-4; }
.mt-5 { @apply mt-5; }
.mt-6 { @apply mt-6; }
.mt-8 { @apply mt-8; }
.mt-10 { @apply mt-10; }
.mt-12 { @apply mt-12; }
.mt-16 { @apply mt-16; }
.mt-20 { @apply mt-20; }

.mb-1 { @apply mb-1; }
.mb-2 { @apply mb-2; }
.mb-3 { @apply mb-3; }
.mb-4 { @apply mb-4; }
.mb-5 { @apply mb-5; }
.mb-6 { @apply mb-6; }
.mb-8 { @apply mb-8; }
.mb-10 { @apply mb-10; }
.mb-12 { @apply mb-12; }
.mb-16 { @apply mb-16; }
.mb-20 { @apply mb-20; }

.p-1 { @apply p-1; }
.p-2 { @apply p-2; }
.p-3 { @apply p-3; }
.p-4 { @apply p-4; }
.p-5 { @apply p-5; }
.p-6 { @apply p-6; }
.p-8 { @apply p-8; }
.p-10 { @apply p-10; }
.p-12 { @apply p-12; }

.px-1 { @apply px-1; }
.px-2 { @apply px-2; }
.px-3 { @apply px-3; }
.px-4 { @apply px-4; }
.px-5 { @apply px-5; }
.px-6 { @apply px-6; }
.px-8 { @apply px-8; }
.px-10 { @apply px-10; }
.px-12 { @apply px-12; }

.py-1 { @apply py-1; }
.py-2 { @apply py-2; }
.py-3 { @apply py-3; }
.py-4 { @apply py-4; }
.py-5 { @apply py-5; }
.py-6 { @apply py-6; }
.py-8 { @apply py-8; }
.py-10 { @apply py-10; }
.py-12 { @apply py-12; }
.py-16 { @apply py-16; }
.py-20 { @apply py-20; }

/* 文本样式 */
.text-primary { @apply text-indigo-600; }
.text-secondary { @apply text-gray-600; }
.text-success { @apply text-green-600; }
.text-danger { @apply text-red-600; }
.text-warning { @apply text-yellow-600; }

/* 标题样式 */
.title {
    @apply text-3xl md:text-4xl font-bold mb-6;
}

.subtitle {
    @apply text-xl md:text-2xl font-semibold mb-4;
}

/* 段落样式 */
.paragraph {
    @apply text-gray-600 mb-6 leading-relaxed;
}

/* 链接样式 */
.link {
    @apply text-indigo-600 hover:text-indigo-800 transition-colors duration-300;
}

/* 列表样式 */
.list-disc {
    @apply list-disc pl-5 mb-6 space-y-2 text-gray-600;
}

.list-number {
    @apply list-decimal pl-5 mb-6 space-y-2 text-gray-600;
}

/* 表格样式 */
.table {
    @apply w-full border-collapse;
}

.table th {
    @apply bg-gray-50 px-4 py-3 text-left text-sm font-semibold text-gray-900 border-b border-gray-200;
}

.table td {
    @apply px-4 py-3 text-sm text-gray-700 border-b border-gray-200;
}

/* 表单验证 */
.form-input.error {
    @apply border-red-500 focus:ring-red-500;
}

.form-input.success {
    @apply border-green-500 focus:ring-green-500;
}

/* 进度条 */
.progress {
    @apply w-full bg-gray-200 rounded-full h-2.5;
}

.progress-bar {
    @apply bg-indigo-600 h-2.5 rounded-full transition-all duration-300;
}

/* 加载状态 */
.loading {
    @apply opacity-50 pointer-events-none;
}

/* 隐藏元素 */
.hidden {
    @apply hidden;
}

/* 显示元素 */
.block {
    @apply block;
}

/* 定位 */
.absolute-center {
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
}

/* Z-index */
.z-10 { @apply z-10; }
.z-20 { @apply z-20; }
.z-30 { @apply z-30; }
.z-40 { @apply z-40; }
.z-50 { @apply z-50; }

/* 过渡动画 */
.transition {
    @apply transition-all duration-300;
}

/* 变换 */
.transform {
    @apply transform;
}

/* 圆角 */
.rounded-full { @apply rounded-full; }
.rounded-lg { @apply rounded-lg; }
.rounded-md { @apply rounded-md; }
.rounded-sm { @apply rounded-sm; }

/* 阴影 */
.shadow {
    @apply shadow;
}

.shadow-md {
    @apply shadow-md;
}

.shadow-lg {
    @apply shadow-lg;
}

.shadow-xl {
    @apply shadow-xl;
}

/* 边框 */
.border {
    @apply border;
}

.border-t {
    @apply border-t;
}

.border-b {
    @apply border-b;
}

.border-l {
    @apply border-l;
}

.border-r {
    @apply border-r;
}

/* 边框颜色 */
.border-gray-200 {
    @apply border-gray-200;
}

.border-gray-300 {
    @apply border-gray-300;
}

.border-gray-400 {
    @apply border-gray-400;
}

.border-gray-500 {
    @apply border-gray-500;
}

/* 背景颜色 */
.bg-white {
    @apply bg-white;
}

.bg-gray-50 {
    @apply bg-gray-50;
}

.bg-gray-100 {
    @apply bg-gray-100;
}

.bg-gray-200 {
    @apply bg-gray-200;
}

.bg-gray-300 {
    @apply bg-gray-300;
}

/* 文本颜色 */
.text-white {
    @apply text-white;
}

.text-gray-900 {
    @apply text-gray-900;
}

.text-gray-800 {
    @apply text-gray-800;
}

.text-gray-700 {
    @apply text-gray-700;
}

.text-gray-600 {
    @apply text-gray-600;
}

.text-gray-500 {
    @apply text-gray-500;
}

.text-gray-400 {
    @apply text-gray-400;
}

.text-gray-300 {
    @apply text-gray-300;
}

/* 字体粗细 */
.font-thin {
    @apply font-thin;
}

.font-extralight {
    @apply font-extralight;
}

.font-light {
    @apply font-light;
}

.font-normal {
    @apply font-normal;
}

.font-medium {
    @apply font-medium;
}

.font-semibold {
    @apply font-semibold;
}

.font-bold {
    @apply font-bold;
}

.font-extrabold {
    @apply font-extrabold;
}

/* 字体大小 */
.text-xs {
    @apply text-xs;
}

.text-sm {
    @apply text-sm;
}

.text-base {
    @apply text-base;
}

.text-lg {
    @apply text-lg;
}

.text-xl {
    @apply text-xl;
}

.text-2xl {
    @apply text-2xl;
}

.text-3xl {
    @apply text-3xl;
}

.text-4xl {
    @apply text-4xl;
}

.text-5xl {
    @apply text-5xl;
}

.text-6xl {
    @apply text-6xl;
}