/* 图片容器样式 */
.image-container {
    position: relative;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    margin-bottom: 0;
    border-radius: var(--cx-border-radius);
}

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

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

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

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

/* 进场动画 - 从上方 */
@keyframes slideFromTop {
    0% {
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
    }
    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* 进场动画 - 从左侧 */
@keyframes slideFromLeft {
    0% {
        left: -100%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }
    100% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* 进场动画 - 从下方 */
@keyframes slideFromBottom {
    0% {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
    }
    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* 进场动画 - 从右侧 */
@keyframes slideFromRight {
    0% {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }
    100% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

/* 离场动画 - 到上方 */
@keyframes slideToTop {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        top: -100%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
    }
}

/* 离场动画 - 到左侧 */
@keyframes slideToLeft {
    0% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        left: -100%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }
}

/* 离场动画 - 到下方 */
@keyframes slideToBottom {
    0% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
    }
}

/* 离场动画 - 到右侧 */
@keyframes slideToRight {
    0% {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
    }
}

/* 离场动画 - 淡出缩小 */
@keyframes fadeShrink {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0;
    }
}

/* 标识图片样式 */
.cntg-logo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 12px;
    width: auto;
    z-index: 3;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .transparent-image {
        height: 50%;
    }
    .cntg-logo {
        height: 8px;
        bottom: 5px;
        right: 5px;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .transparent-image {
        height: 60%;
    }
    .cntg-logo {
        height: 10px;
    }
}