/* our-products.css */
.our-products-section {
    position: relative;
    overflow: hidden;
    background-image: url('/plugins/kaqidun/assets/images/home/our-products/our-products-bg.jpg');
}

/* 添加模糊效果层 */
.our-products-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(33, 143, 254, 0.9);
    z-index: 0;
}

.carousel-3d-container {
    perspective: 1200px;
    overflow: hidden;
    touch-action: pan-y; /* 允许垂直滚动 */
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4/3;
    min-height: 300px; /* 确保容器有最小高度，避免加载时塌陷 */
}

.carousel-3d-track {
    position: relative;
    width: 100%;
    height: 80%;
    min-height: 240px; /* 确保轨道有最小高度 */
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
    cursor: grab;
}

.carousel-3d-track.grabbing {
    cursor: grabbing;
    transition: none;
}

.carousel-3d-slide {
    position: absolute;
    width: 55%;
    left: 22.5%;
    top: 50%;
    transition: transform 0.8s ease, opacity 0.8s ease, z-index 0.8s ease;
    transform-origin: center;
    user-select: none;
}

.carousel-3d-content {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    min-height: 200px; /* 确保内容区域有最小高度 */
}

/* 图片4:3比例 */
.carousel-3d-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    background-color: #e5e7eb; /* 加载时的占位背景色 */
    background-image: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

/* 图片加载动画 */
@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 图片加载完成后移除动画 */
.carousel-3d-image.loaded {
    animation: none;
    background-image: none;
}

.carousel-3d-caption {
    padding: 12px;
    text-align: center;
}

/* 移动端3D效果调整 */
.carousel-3d-slide[data-index="0"] {
    transform: translateX(-80%) scale(0.75);
    opacity: 0.5;
    z-index: 1;
}
.carousel-3d-slide[data-index="1"] {
    transform: translateX(-40%) scale(0.85);
    opacity: 0.75;
    z-index: 2;
}
.carousel-3d-slide[data-index="2"] {
    transform: translateX(0) scale(0.95);
    opacity: 1;
    z-index: 3;
}
.carousel-3d-slide[data-index="3"] {
    transform: translateX(40%) scale(0.85);
    opacity: 0.75;
    z-index: 2;
}
.carousel-3d-slide[data-index="4"] {
    transform: translateX(80%) scale(0.75);
    opacity: 0.5;
    z-index: 1;
}
.carousel-3d-slide[data-index="5"] {
    transform: translateX(80%) scale(0.75);
    opacity: 0.5;
    z-index: 1;
}

/* 移动端简化布局 */
@media (max-width: 767px) {
    .carousel-3d-slide {
        width: 70%; /* 移动端宽度更大 */
    }

    .carousel-3d-slide[data-index="0"] {
        transform: translateX(-90%) scale(0.7);
    }
    .carousel-3d-slide[data-index="1"] {
        transform: translateX(-45%) scale(0.8);
    }
    .carousel-3d-slide[data-index="2"] {
        transform: translateX(0) scale(0.9);
    }
    .carousel-3d-slide[data-index="3"] {
        transform: translateX(45%) scale(0.8);
    }
    .carousel-3d-slide[data-index="4"] {
        transform: translateX(90%) scale(0.7);
    }
    .carousel-3d-slide[data-index="5"] {
        opacity: 0;
        z-index: 0;
        transform: translateX(135%) scale(0.6);
    }
}

.carousel-3d-slide {
    transition: transform 0.8s ease, opacity 0.8s ease, z-index 0.8s ease;
    cursor: pointer;
}

.carousel-3d-content {
    transition: transform 0.3s ease;
}

/* 移动端触摸指示器 */
.mobile-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.mobile-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.mobile-indicator.active {
    background-color: white;
    width: 20px;
    border-radius: 3px;
}