/* animation.css - 通用动画样式 */

/* === 基础动画类 === */
.fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease-out;
}
.fade-in-down.active {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease-out;
}

.fade-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease-out;
}

.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.6s ease-out;
}

.scale-in.active {
    opacity: 1;
    transform: scale(1);
}

.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }
.stagger-delay-4 { transition-delay: 0.4s; }
.stagger-delay-5 { transition-delay: 0.5s; }

/* === 头部导航动画 === */
#header {
    transition: all 0.3s ease;
}

#header.scrolled {
    background: var(--color-primary-card);
    box-shadow: 0 2px 20px rgba(255, 255, 255, 0.1);
}

.nav .a {
    position: relative;
    transition: color 0.3s ease;
}

.nav .a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav .a.active::after {
    width: 80%;
}

.nav .a:hover:after,
.nav-sub .a:hover:after {
    width: 80%;
}


/*.nav .a:not(.select):hover::after,*/
/*.nav .a:not(.select).active::after {*/
/*    width: 80%;*/
/*}*/

/* === Banner动画 === */
.banner-slider .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    opacity: 0;
    transition: opacity 1s ease;
}

.banner-slider .swiper-slide-active::after {
    opacity: 1;
}

/* === 标签和卡片动画 === */
.tag, .card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.tag:hover, .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* === 图片悬浮动画 === */
.hover-lift {
    transition: transform 0.6s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
}

/* === 数字计数动画 === */
.count-up {
    opacity: 0;
    transform: translateY(20px);
}

.count-up.animated {
    opacity: 1;
    transform: translateY(0);
}

/* === 返回顶部按钮 === */
.footer-anchor {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.footer-anchor.visible {
    opacity: 1;
    visibility: visible;
}

.footer-anchor:hover {
    transform: translateY(-3px);
}

/* === 表单动画 === */
.form-item {
    transition: all 0.3s ease;
}

.form-item.highlight {
    transform: translateX(5px);
}

.input-highlight {
    transition: all 0.3s ease;
    border-color: transparent;
}

.input-highlight:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* === 加载动画 === */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spin {
    animation: spin 1s linear infinite;
}




/*--------------------------------------------------------------------------------------------------------------------*/



/* Products页面专用动画 */
.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease-out;
}

.slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease-out;
}

.slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
}