/* 图片衔接过渡动画样式 - 滑块模式 */
.image-transition-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

/* 高级滑块式过渡覆盖层 */
.transition-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.8) 15%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0.4) 45%,
        rgba(0, 0, 0, 0.2) 65%,
        rgba(0, 0, 0, 0.1) 80%,
        transparent 100%
    );
    z-index: 2;
    transform: translateY(-100%) scale(1.1);
    opacity: 0;
    animation: 
        advancedSlideDown 3s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        overlayFadeIn 2.5s ease-out forwards;
    filter: blur(0px);
}

/* B1图片容器 - 高级全屏模式 */
.b1-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(120%) rotateY(15deg) scale(0.8);
    opacity: 0;
    animation: 
        advancedSlideIn 3.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards,
        containerFadeIn 2.8s ease-out 0.8s forwards;
    z-index: 1;
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* B1图片样式 - 高级全屏模式 */
.b1-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.2) rotateZ(-2deg);
    opacity: 0;
    filter: brightness(1.0) contrast(1.0) blur(8px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation: 
        imageReveal 4s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards,
        imageFocus 3s ease-out 2s forwards;
    transform-origin: center center;
}

/* 高级悬停效果 */
.b1-image:hover {
    transform: scale(1.05) rotateZ(0.5deg);
    filter: brightness(1.08) contrast(1.12) saturate(1.1);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    animation: hoverPulse 2s ease-in-out infinite;
}

@keyframes hoverPulse {
    0%, 100% {
        filter: brightness(1.08) contrast(1.12) saturate(1.1);
    }
    50% {
        filter: brightness(1.12) contrast(1.15) saturate(1.15);
    }
}

/* 高级关键帧动画 */
@keyframes advancedSlideDown {
    0% {
        transform: translateY(-120%) scale(1.2) rotateX(15deg);
        opacity: 0;
        filter: blur(20px) brightness(0.5);
    }
    30% {
        opacity: 0.6;
        filter: blur(10px) brightness(0.8);
        transform: translateY(-20%) scale(1.05) rotateX(5deg);
    }
    70% {
        opacity: 0.9;
        filter: blur(3px) brightness(0.95);
        transform: translateY(5%) scale(0.98) rotateX(-2deg);
    }
    100% {
        transform: translateY(0) scale(1) rotateX(0deg);
        opacity: 1;
        filter: blur(0px) brightness(1);
    }
}

@keyframes overlayFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes advancedSlideIn {
    0% {
        transform: translateX(120%) rotateY(15deg) scale(0.8);
        opacity: 0;
    }
    25% {
        transform: translateX(80%) rotateY(10deg) scale(0.9);
        opacity: 0.3;
    }
    60% {
        transform: translateX(-8%) rotateY(-3deg) scale(1.05);
        opacity: 0.8;
    }
    85% {
        transform: translateX(2%) rotateY(1deg) scale(0.98);
        opacity: 0.95;
    }
    100% {
        transform: translateX(0) rotateY(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes containerFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes imageReveal {
    0% {
        transform: scale(1.2) rotateZ(-2deg);
        opacity: 0;
        filter: brightness(1.0) contrast(1.0) blur(8px);
    }
    30% {
        transform: scale(1.1) rotateZ(-1deg);
        opacity: 0.4;
        filter: brightness(1.05) contrast(1.1) blur(4px);
    }
    70% {
        transform: scale(1.02) rotateZ(0.5deg);
        opacity: 0.8;
        filter: brightness(1.02) contrast(1.05) blur(1px);
    }
    100% {
        transform: scale(1) rotateZ(0deg);
        opacity: 1;
        filter: brightness(1.0) contrast(1.0) blur(0px);
    }
}

@keyframes imageFocus {
    0% {
        filter: brightness(1.0) contrast(1.0) blur(0px);
    }
    50% {
        filter: brightness(1.03) contrast(1.08) blur(0px);
    }
    100% {
        filter: brightness(1.0) contrast(1.0) blur(0px);
    }
}



/* 高级响应式设计 */
@media (max-width: 1024px) {
    .b1-image-container {
        animation: 
            advancedSlideIn 3s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards,
            containerFadeIn 2.5s ease-out 0.6s forwards;
    }
    
    .transition-overlay {
        animation: 
            advancedSlideDown 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
            overlayFadeIn 2s ease-out forwards;
    }
    
    .b1-image {
        animation: 
            imageReveal 3.5s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards,
            imageFocus 2.5s ease-out 1.8s forwards;
    }
}

@media (max-width: 768px) {
    .image-transition-section {
        height: 100vh;
    }
    
    .b1-image {
        object-position: center;
        animation: 
            imageReveal 3s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards,
            imageFocus 2s ease-out 1.5s forwards;
        transform: scale(1.15) rotateZ(-1.5deg);
    }
    
    .b1-image-container {
        animation: 
            advancedSlideIn 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards,
            containerFadeIn 2s ease-out 0.5s forwards;
        transform: translateX(100%) rotateY(10deg) scale(0.85);
    }
    
    .transition-overlay {
        animation: 
            advancedSlideDown 2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
            overlayFadeIn 1.8s ease-out forwards;
    }
}

@media (max-width: 480px) {
    .image-transition-section {
        height: 100vh;
    }
    
    .b1-image-container {
        animation: 
            advancedSlideIn 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards,
            containerFadeIn 1.8s ease-out 0.4s forwards;
        transform: translateX(100%) rotateY(8deg) scale(0.9);
    }
    
    .transition-overlay {
        animation: 
            advancedSlideDown 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
            overlayFadeIn 1.5s ease-out forwards;
    }
    
    .b1-image {
        animation: 
            imageReveal 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards,
            imageFocus 1.8s ease-out 1.2s forwards;
        transform: scale(1.1) rotateZ(-1deg);
    }
    
    .b1-image:hover {
        transform: scale(1.03) rotateZ(0.3deg);
        filter: brightness(1.05) contrast(1.08) saturate(1.05);
    }
}

/* 滚动触发动画 */
@media (prefers-reduced-motion: no-preference) {
    .image-transition-section {
        animation: sectionFadeIn 1.5s ease-out;
    }
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}