/*
 * 简化版CSS主文件 - Tailwind CSS优先
 * 仅保留必要的交互逻辑和动画效果
 */

/* ==================== 搜索图标动态效果 ==================== */

/* 搜索图标脉冲效果 */
.search-pulse {
    animation: searchPulse 1.5s ease-in-out infinite;
}

@keyframes searchPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* 搜索图标呼吸效果 */
.fa-search {
    animation: searchBreath 2s ease-in-out infinite;
}

@keyframes searchBreath {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* 搜索图标悬停时的额外动画 */
.group:hover .fa-search {
    animation: searchRotate 0.5s ease-in-out, searchBreath 2s ease-in-out infinite;
}

@keyframes searchRotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* ==================== 图片轮播样式 ==================== */
.carousel-slide {
    transition: opacity 0.5s ease-in-out;
}

/* 三级下拉菜单过渡动画 */
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:visible {
    visibility: visible;
}

.group/submenu:hover .group-hover\/submenu\:opacity-100 {
    opacity: 1;
}

.group/submenu:hover .group-hover\/submenu\:visible {
    visibility: visible;
}

/* 导航栏阴影过渡 */
header {
    transition: box-shadow 0.3s ease-in-out;
}

/* 筛选标签样式 */
.filter-chip {
    transition: all 0.2s;
}

.filter-chip.active {
    background-color: #2563eb;
    /* blue-600 */
    color: white;
    font-weight: 500;
}

.filter-chip:not(.active):hover {
    color: #2563eb;
    background-color: #eff6ff;
    /* blue-50 */
}

/* ==================== 页面级样式 ==================== */

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