/* 图片容器样式 */
.image-container {
    position: relative;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: var(--cx-border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

.image-container:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

/* 主图片样式 */
.main-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-container:hover .main-image {
    transform: scale(1.02);
}

/* 透明动画图片基础样式 */
.transparent-image {
    position: absolute;
    height: 66%;
    width: auto;
    opacity: 0;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 激活状态（进场） */
.transparent-image.active {
    z-index: 1;
}

/* 非激活状态（离场） */
.transparent-image.inactive {
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 进场动画 - 从上方 */
@keyframes slideFromTop {
    0% {
        top: -100%;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
    }
    70% {
        top: 48%;
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
}

/* 进场动画 - 从左侧 */
@keyframes slideFromLeft {
    0% {
        left: -100%;
        top: 50%;
        transform: translateY(-50%) scale(0.8);
        opacity: 0;
    }
    70% {
        left: 52%;
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
}

/* 进场动画 - 从下方 */
@keyframes slideFromBottom {
    0% {
        top: 100%;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
    }
    70% {
        top: 52%;
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
}

/* 进场动画 - 从右侧 */
@keyframes slideFromRight {
    0% {
        left: 100%;
        top: 50%;
        transform: translateY(-50%) scale(0.8);
        opacity: 0;
    }
    70% {
        left: 48%;
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
}

/* 离场动画 - 到上方 */
@keyframes slideToTop {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
    30% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        top: -100%;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
        filter: none;
    }
}

/* 离场动画 - 到左侧（已修正） */
@keyframes slideToLeft {
    0% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
    30% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        left: -100%;
        top: 50%;
        transform: translateY(-50%) scale(0.8);
        opacity: 0;
        filter: none;
    }
}

/* 离场动画 - 到下方 */
@keyframes slideToBottom {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
    30% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
        filter: none;
    }
}

/* 离场动画 - 到右侧 */
@keyframes slideToRight {
    0% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
    30% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
    100% {
        left: 100%;
        top: 50%;
        transform: translateY(-50%) scale(0.8);
        opacity: 0;
        filter: none;
    }
}

/* 离场动画 - 淡出缩小 */
@keyframes fadeShrink {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.1));
    }
    40% {
        transform: translate(-50%, -50%) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 0;
        filter: none;
    }
}

/* 标识图片样式 */
.cntg-logo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 12px;
    width: auto;
    z-index: 1;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.image-container:hover .cntg-logo {
    opacity: 1;
    transform: scale(1.1);
}

/* 响应式调整 - 与JS配置同步 */
@media (max-width: 480px) {
    .transparent-image {
        height: 50%;
        animation-duration: 700ms; /* 与JS mobile.enterDuration匹配 */
    }
    
    .transparent-image.inactive {
        animation-duration: 500ms; /* 与JS mobile.exitDuration匹配 */
    }
    
    .cntg-logo {
        height: 8px;
        bottom: 5px;
        right: 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .transparent-image {
        height: 60%;
        animation-duration: 750ms; /* 与JS tablet.enterDuration匹配 */
    }
    
    .transparent-image.inactive {
        animation-duration: 550ms; /* 与JS tablet.exitDuration匹配 */
    }
    
    .cntg-logo {
        height: 10px;
    }
}

@media (min-width: 769px) {
    .transparent-image {
        animation-duration: 800ms; /* 与JS desktop.enterDuration匹配 */
    }
    
    .transparent-image.inactive {
        animation-duration: 600ms; /* 与JS desktop.exitDuration匹配 */
    }
}

/* 深色模式适配 - 与JS的isDarkMode协同 */
@media (prefers-color-scheme: dark) {
    .transparent-image {
        filter: brightness(0.9) contrast(1.1);
    }
    
    .image-container {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    
    .image-container:hover {
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    }
}