/*
 * Forklift 3D Carousel Styles
 * 叉车3D轮播专用样式
 */

/* 产品项激活状态 */
.rotation3D__item.active .product-img {
    /* filter: drop-shadow(0 15px 30px rgba(196, 30, 58, 0.2)); */
}

.rotation3D__item.active .product-name {
    color: #c41e3a;
    font-weight: 600;
}

/* 产品名称悬停效果 */
.rotation3D__item .product-name {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.rotation3D__item:hover .product-name,
.rotation3D__item.active .product-name {
    opacity: 1;
}

/* 弧线动画增强 */
.rotation3D__line svg path {
    animation: dash-animation 20s linear infinite;
}

@keyframes dash-animation {
    to {
        stroke-dashoffset: -100;
    }
}

/* 导航按钮激活状态 */
.nav-arrow:active {
    transform: scale(0.95);
}

/* 产品信息淡入动画 */
.product-info {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 响应式优化 */
@media (max-width: 1200px) {
    .carousel-container {
        min-height: 500px;
    }

    .nav-arrows {
        bottom: 120px;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        min-height: 400px;
    }

    .rotation3D {
        height: 350px;
    }

    .rotation3D__item {
        width: 150px;
        height: 150px;
    }

    /* .rotation3D__item .product-img {
        max-width: 120px;
    } */

    .rotation3D__item .product-name {
        font-size: 14px;
        margin-top: 10px;
    }

    .nav-arrows {
        bottom: 100px;
    }

    .nav-arrow {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .product-title {
        font-size: 16px;
    }

    .product-description {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .view-details-btn {
        padding: 10px 25px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .rotation3D {
        height: 300px;
    }

    .rotation3D__item {
        width: 120px;
        height: 120px;
    }

    .rotation3D__item .product-img {
        max-width: 100px;
    }

    .product-info {
        padding: 0 15px;
    }

    .product-title {
        font-size: 14px;
    }

    .product-description {
        display: none; /* 小屏幕隐藏描述 */
    }
}