body {
    margin: 0;
    padding: 0;
}

.image-stack {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

/* 为Award组添加透视效果，使z轴运动可见 */
.image-stack-award {
    perspective: 1000px;
}

/* 为Description组添加透视效果，增强星星闪烁的3D效果 */
.image-stack-description {
    perspective: 800px;
}

/* 为Engineering组添加透视效果，使z轴运动可见 */
.image-stack-engineering {
    perspective: 1000px;
}

.stacked-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Award组图片特殊样式 - 减小尺寸并居中 */
.image-stack-award .stacked-image {
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}

/* Engineering组图片特殊样式 - 减小尺寸并居中 */
.image-stack-engineering .stacked-image {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

/* 层级设置：hp-1在最下面，hp-4在最上面 */
.hp-1 {
    z-index: 1;
    pointer-events: auto;
    transform-origin: 52.3% 41.1%;
}

.hp-2 {
    z-index: 2;
    pointer-events: none;
    transform-origin: 52.3% 41.1%;
}

.hp-3 {
    z-index: 3;
    pointer-events: none;
}

.hp-4 {
    z-index: 4;
    pointer-events: none;
}

/* 只在hover时添加transition */
.image-stack-hp:hover .hp-1,
.image-stack-hp:hover .hp-2,
.image-stack-hp:hover .hp-3,
.image-stack-hp:hover .hp-4 {
    transition: transform 0.3s ease-in-out;
}

/* Human Practices组悬停动画效果 */
.image-stack-hp:hover .hp-1 {
    animation: rotateSlow 4s ease-in-out 1;
}

.image-stack-hp:hover .hp-2 {
    animation: rotateFast 5s ease-in-out 1;
}

.image-stack-hp:hover .hp-3 {
    transform: scale(1.05);
}

.image-stack-hp:hover .hp-4 {
    animation: floatUpDown 1.5s ease-in-out infinite;
}

/* Design组图片样式 */
.design-1,
.design-2,
.design-3,
.design-4 {
    pointer-events: none;
}

/* 只在hover时添加transition */
.image-stack-design:hover .design-1,
.image-stack-design:hover .design-2,
.image-stack-design:hover .design-3,
.image-stack-design:hover .design-4 {
    transition: transform 0.3s ease-in-out;
}

/* Design组悬停动画效果 */
.image-stack-design:hover .design-1 {
    transform: scale(1.05);
}

.image-stack-design:hover .design-2 {
    animation: floatUpDown 1.5s ease-in-out infinite;
}

.image-stack-design:hover .design-3 {
    transform: translate(10px, -10px);
}

.image-stack-design:hover .design-4 {
    transform: translateY(-10px);
}

/* Team组图片样式 */
.team-1,
.team-2,
.team-3 {
    pointer-events: none;
}

/* 只在hover时添加transition */
.image-stack-team:hover .team-1,
.image-stack-team:hover .team-2,
.image-stack-team:hover .team-3 {
    transition: transform 0.3s ease-in-out;
}

/* team-2 特殊样式：默认隐藏 */
.team-2 {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* team-3 特殊样式：默认隐藏 */
.team-3 {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

/* Award组图片样式 */
.award-1,
.award-2,
.award-3 {
    pointer-events: none;
}

/* 只在hover时添加transition */
.image-stack-award:hover .award-1,
.image-stack-award:hover .award-2,
.image-stack-award:hover .award-3 {
    transition: transform 0.3s ease-in-out;
}

/* Team组悬停动画效果 */
.image-stack-team:hover .team-1 {
    transform: scale(1.05);
}

.image-stack-team:hover .team-2 {
    animation: messageSend 0.3s ease-out forwards;
}

/* team-2 和 team-3 鼠标移开时的反向动画 */
.image-stack-team .team-2 {
    animation: messageReceiveDelayed 0.4s ease-out forwards;
}

.image-stack-team .team-3 {
    animation: messageReceive 0.2s ease-out forwards;
}

.image-stack-team:hover .team-3 {
    animation: messageSend 0.3s ease-out 0.3s forwards;
}

/* Award组悬停动画效果 */
.image-stack-award:hover .award-2 {
    animation: zAxisHarmonic 2s ease-in-out infinite;
}

.image-stack-award:hover .award-3 {
    transform: scale(1.05);
}

.image-stack-award:hover .award-4 {
    animation: floatUpDown 1.5s ease-in-out infinite;
}

.image-stack-team:hover .team-4 {
    animation: randomShake 2.5s ease-in-out infinite;
}

.image-stack-award:hover .award-1 {
    animation: randomShake 2.5s ease-in-out infinite;
}

/* Description组图片样式 - 星星闪烁动画 */
.image-stack-description:hover .star-1 {
    animation: starTwinkle 2s ease-in-out infinite;
}

.image-stack-description:hover .star-3 {
    animation: starTwinkle 1.8s ease-in-out infinite 0.6s;
}

.image-stack-description:hover .star-4 {
    animation: starTwinkle 2.2s ease-in-out infinite 0.9s;
}

.image-stack-description:hover .star-5 {
    animation: starTwinkle 2.8s ease-in-out infinite 1.2s;
}

/* lightline和lightshadow默认隐藏 */
.lightline,
.lightshadow {
    opacity: 0;
    /* 移除默认动画和transition，只在hover时激活 */
}

/* sheet默认样式 */
.sheet {
    /* 静态状态，无transition */
}

/* 只在hover时添加transition */
.image-stack-description:hover .sheet {
    transition: transform 0.3s ease-in-out;
}

/* lightline和lightshadow悬停时的渐入动画 */
.image-stack-description:hover .lightline {
    animation: lightFadeIn 0.3s ease-out forwards;
}

.image-stack-description:hover .lightshadow {
    animation: lightFadeIn 0.3s ease-out forwards;
}

/* sheet悬停时小幅度放大 */
.image-stack-description:hover .sheet {
    transform: scale(1.05);
}

/* 齿轮默认样式 - 设置旋转中心为图片中心 */
.gear-1 {
    transform-origin: 27% 37.3%;
}

.gear-2 {
    transform-origin: 17% 45%;
}

/* 齿轮悬停时自转 */
.image-stack-description:hover .gear-1 {
    animation: gearRotate 3.4s linear infinite;
}

.image-stack-description:hover .gear-2 {
    animation: gearRotate 3s linear infinite reverse;
}

/* Model组图片样式 */
/* IC悬停时小幅度放大 */
.image-stack-model:hover .IC {
    transform: scale(1.05);
}

/* IC默认样式 */
.IC {
    /* 静态状态，无transition */
}

/* 只在hover时添加transition */
.image-stack-model:hover .IC {
    transition: transform 0.3s ease-in-out;
}

/* Model组星星闪烁动画 */
.image-stack-model:hover .star-1 {
    animation: starTwinkle 2s ease-in-out infinite;
}

.image-stack-model:hover .star-2 {
    animation: starTwinkle 2.5s ease-in-out infinite 0.3s;
}

.image-stack-model:hover .star-3 {
    animation: starTwinkle 1.8s ease-in-out infinite 0.6s;
}

/* Model组齿轮默认样式 - 设置旋转中心为图片中心 */
.image-stack-model .gear-1 {
    transform-origin: 16.2% 40.1%;
}

.image-stack-model .gear-2 {
    transform-origin: 78.8% 77.1%;
}

/* Model组齿轮悬停时自转 */
.image-stack-model:hover .gear-1 {
    animation: gearRotate 3s linear infinite;
}

.image-stack-model:hover .gear-2 {
    animation: gearRotate 4s linear infinite reverse;
}

/* Engineering组图片样式 */
/* DNA悬停时z轴简谐运动 */
.image-stack-engineering:hover .DNA {
    animation: zAxisHarmonic 2s ease-in-out infinite;
}

/* yellowpuzzle悬停时瞬间向上移动 */
.image-stack-engineering:hover .yellowpuzzle {
    animation: yellowMoveUp 0.3s ease-out forwards;
}

/* purplepuzzle悬停后0.2秒向左移动 */
.image-stack-engineering:hover .purplepuzzle {
    animation: purpleMoveLeft 0.3s ease-out 0.2s forwards;
}

/* bluepuzzle悬停后0.4秒向右移动 */
.image-stack-engineering:hover .bluepuzzle {
    animation: blueMoveRight 0.3s ease-out 0.4s forwards;
}

.image-stack-engineering:hover .bluebacterium {
    animation: blueMoveRight 0.3s ease-out 0.4s forwards,
        blueBacteriumSwim 2s ease-in-out infinite 0.7s;
}

.image-stack-engineering:hover .purplebacterium {
    animation: purpleMoveLeft 0.3s ease-out 0.2s forwards,
        purpleBacteriumSwim 2.5s ease-in-out infinite 0.5s;
}

/* 拼图默认样式 */
.purplepuzzle {
    /* 静态状态，无transition */
}

.bluepuzzle {
    /* 静态状态，无transition */
}

/* 只在hover时添加transition */
.image-stack-engineering:hover .purplepuzzle,
.image-stack-engineering:hover .bluepuzzle {
    transition: transform 0.3s ease-in-out;
}

/* Engineering组鼠标移开时的反向动画 */
.image-stack-engineering .yellowpuzzle {
    animation: yellowReturnToOrigin 0.3s ease-out forwards;
}

.image-stack-engineering .purplepuzzle {
    animation: purpleReturnToOrigin 0.3s ease-out forwards;
}

.image-stack-engineering .bluepuzzle {
    animation: blueReturnToOrigin 0.3s ease-out forwards;
}

.image-stack-engineering .bluebacterium {
    animation: blueReturnToOrigin 0.3s ease-out forwards;
}

.image-stack-engineering .purplebacterium {
    animation: purpleReturnToOrigin 0.3s ease-out forwards;
}

/* 移除默认的回位动画，保持静态状态直到hover */

/* Result组图片样式 */

.image-stack-results .culturedish {
    /* 静态状态，无transition */
}

.image-stack-results .barcode {
    /* 静态状态，无transition */
}

.image-stack-results .brokenline {
    clip-path: inset(0 100% 0 0);
    /* 静态状态，无transition和动画 */
}

.image-stack-results .axis {
    /* 静态状态，无transition */
}

.image-stack-results .waterdrop {
    /* 静态状态，无transition */
}

/* Results组鼠标移开时的反向动画 */
.image-stack-results .brokenline {
    animation: brokenlineErase 1s ease-out forwards;
}

/* 只在hover时添加transition */
.image-stack-results:hover .culturedish,
.image-stack-results:hover .barcode,
.image-stack-results:hover .brokenline,
.image-stack-results:hover .axis,
.image-stack-results:hover .waterdrop {
    transition: transform 0.3s ease-in-out;
}

.image-stack-results:hover .culturedish {
    transform: scale(1.05);
}

.image-stack-results:hover .barcode {
    transform: scale(1.05);
}

.image-stack-results:hover .brokenline {
    clip-path: inset(0 0 0 0);
    animation: brokenlineReveal 1s ease-out forwards;
}

.image-stack-results:hover .axis {
    transform: scale(1.05);
}

.image-stack-results:hover .waterdrop {
    transform: scale(1.05);
    animation: floatUpDown 1.5s ease-in-out infinite;
}

.image-stack-results:hover .star-1 {
    animation: starTwinkle 2s ease-in-out infinite;
}

.image-stack-results:hover .star-2 {
    animation: starTwinkle 2.5s ease-in-out infinite 0.3s;
}

.image-stack-results:hover .star-3 {
    animation: starTwinkle 1.8s ease-in-out infinite 0.6s;
}

/* 上下浮动动画关键帧 */
@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* 随机抖动动画关键帧 */
@keyframes randomShake {
    0% {
        transform: translate(0px, 0px);
    }

    10% {
        transform: translate(-2px, 1px);
    }

    20% {
        transform: translate(1px, -2px);
    }

    30% {
        transform: translate(2px, 1px);
    }

    40% {
        transform: translate(-1px, -1px);
    }

    50% {
        transform: translate(1px, 2px);
    }

    60% {
        transform: translate(-2px, -1px);
    }

    70% {
        transform: translate(2px, -2px);
    }

    80% {
        transform: translate(-1px, 1px);
    }

    90% {
        transform: translate(1px, -1px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

/* 慢速旋转动画关键帧 */
@keyframes rotateSlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 快速旋转动画关键帧 */
@keyframes rotateFast {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 消息发送动画关键帧 */
@keyframes messageSend {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

/* 消息接收动画关键帧（鼠标移开时的反向效果） */
@keyframes messageReceive {
    0% {
        opacity: 1;
        transform: translateY(-10px);
    }

    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* 消息接收延迟动画关键帧（保持可见0.3秒后消失） */
@keyframes messageReceiveDelayed {

    0%,
    50% {
        opacity: 1;
        transform: translateY(-10px);
    }

    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* z轴简谐运动动画关键帧 */
@keyframes zAxisHarmonic {

    0%,
    100% {
        transform: translateZ(0px);
    }

    50% {
        transform: translateZ(30px);
    }
}

/* 星星闪烁动画关键帧 */
@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0.6;
    }

    60% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.4;
    }
}

/* 光线渐入动画关键帧 */
@keyframes lightFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* 光线渐出动画关键帧 */
@keyframes lightFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* 齿轮自转动画关键帧 */
@keyframes gearRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* yellowpuzzle向上移动动画关键帧 */
@keyframes yellowMoveUp {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-15px);
    }
}

/* purplepuzzle向左移动动画关键帧 */
@keyframes purpleMoveLeft {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(15px) translateX(-15px);
    }
}

/* bluepuzzle向右移动动画关键帧 */
@keyframes blueMoveRight {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(15px) translateY(15px);
    }
}

/* 细菌游动动画关键帧 */
@keyframes bacteriaSwim {

    0%,
    100% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateX(5px) translateY(-3px) rotate(2deg);
    }

    50% {
        transform: translateX(-2px) translateY(4px) rotate(-1deg);
    }

    75% {
        transform: translateX(3px) translateY(-2px) rotate(1deg);
    }
}

/* 蓝色细菌移动+游动复合动画 */
@keyframes blueBacteriumMoveAndSwim {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
    }

    30% {
        transform: translateX(15px) translateY(15px) rotate(0deg);
    }

    50% {
        transform: translateX(15px) translateY(15px) rotate(2deg);
    }

    70% {
        transform: translateX(15px) translateY(15px) rotate(-1deg);
    }

    100% {
        transform: translateX(15px) translateY(15px) rotate(1deg);
    }
}

/* 紫色细菌移动+游动复合动画 */
@keyframes purpleBacteriumMoveAndSwim {
    0% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
    }

    30% {
        transform: translateY(15px) translateX(-15px) rotate(0deg);
    }

    50% {
        transform: translateY(15px) translateX(-15px) rotate(2deg);
    }

    70% {
        transform: translateY(15px) translateX(-15px) rotate(-1deg);
    }

    100% {
        transform: translateY(15px) translateX(-15px) rotate(1deg);
    }
}

/* 蓝色细菌在新位置游动动画 */
@keyframes blueBacteriumSwim {

    0%,
    100% {
        transform: translateX(15px) translateY(15px) rotate(0deg);
    }

    25% {
        transform: translateX(15px) translateY(15px) rotate(2deg);
    }

    50% {
        transform: translateX(15px) translateY(15px) rotate(-1deg);
    }

    75% {
        transform: translateX(15px) translateY(15px) rotate(1deg);
    }
}

/* 紫色细菌在新位置游动动画 */
@keyframes purpleBacteriumSwim {

    0%,
    100% {
        transform: translateY(15px) translateX(-15px) rotate(0deg);
    }

    25% {
        transform: translateY(15px) translateX(-15px) rotate(2deg);
    }

    50% {
        transform: translateY(15px) translateX(-15px) rotate(-1deg);
    }

    75% {
        transform: translateY(15px) translateX(-15px) rotate(1deg);
    }
}

/* 拼图回位动画关键帧 */
@keyframes blueReturnToOrigin {
    0% {
        transform: translateX(15px) translateY(15px);
    }

    100% {
        transform: translateX(0px) translateY(0px);
    }
}

@keyframes purpleReturnToOrigin {

    0%,
    40% {
        transform: translateY(15px) translateX(-15px);
    }

    100% {
        transform: translateX(0px) translateY(0px);
    }
}

@keyframes yellowReturnToOrigin {

    0%,
    57.1% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* brokenline从左至右展开动画关键帧 */
@keyframes brokenlineReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* brokenline从右至左擦除动画关键帧 */
@keyframes brokenlineErase {
    0% {
        clip-path: inset(0 0 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}

@media (max-width: 1200px) {
    .section-team .content-placeholder {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .section-team .content-placeholder {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .section-team .image-stack {
        width: 250px;
        height: 250px;
    }
}