/* ========================================
   高级视觉效果
   ======================================== */

/* 为服务卡片添加3D效果 */
.service-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.service-card:hover {
    transform: translateY(-15px) scale(1.02) rotateX(5deg);
}

/* 添加玻璃态效果 */
.image-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(2px);
}

/* 图片悬浮时的光晕效果 */
.service-card:hover .service-image {
    filter: brightness(1.1) saturate(1.3) contrast(1.1);
    box-shadow: 0 0 40px rgba(233, 69, 96, 0.3);
}

/* 添加数字编号效果 */
.service-card {
    counter-increment: service-counter;
}

.service-card::before {
    counter-reset: service-counter;
}

/* 动态背景图案 */
.service-card:nth-child(1)::after {
    content: '01';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(233, 69, 96, 0.1);
    z-index: 0;
}

.service-card:nth-child(2)::after {
    content: '02';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(102, 126, 234, 0.1);
    z-index: 0;
}

.service-card:nth-child(3)::after {
    content: '03';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(79, 172, 254, 0.1);
    z-index: 0;
}

.service-card:nth-child(4)::after {
    content: '04';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(244, 162, 97, 0.1);
    z-index: 0;
}

/* 移动端优化 */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-image {
        height: 280px;
    }

    .image-title {
        font-size: 1.6rem;
    }

    .image-desc {
        font-size: 0.95rem;
        max-width: 220px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-image {
        height: 250px;
    }

    .image-title {
        font-size: 1.5rem;
    }

    .image-desc {
        font-size: 0.9rem;
        max-width: 200px;
    }

    .card-body {
        padding: 15px;
    }
}

/* 添加加载动画 */
.service-card {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 为不同的卡片设置不同的动画延迟 */
.service-card:nth-child(1) {
    animation-delay: 0.1s;
}

.service-card:nth-child(2) {
    animation-delay: 0.2s;
}

.service-card:nth-child(3) {
    animation-delay: 0.3s;
}

.service-card:nth-child(4) {
    animation-delay: 0.4s;
}