/* 细胞修复动画样式 - Section 3 Stage 2 */

/* 主容器样式 */
.section3-stage2 .repair-animation-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* 修复细胞容器 - 初始位置在上方 */
.section3-stage2 .repair-cell-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    z-index: 100;
    transform: translate(-50%, calc(-50% - 300px));
    offset-path: path('M 0 0 A 200 300 0 0 1 200 300');
    offset-distance: 0%;
    offset-rotate: 0deg;
    pointer-events: none;
}

.section3-stage2 .repair-cell-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: none;
}

.section3-stage2 .repair-cell-container .inactive-cell {
    opacity: 1;
}

.section3-stage2 .repair-cell-container .active-cell {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* 阶段1:细胞移动 (0-1.8s) */
.section3-stage2.repair-phase-1 .repair-cell-container {
    animation: repairMoveAlongPath 1.8s ease-in-out forwards;
}

/* 阶段2:保持移动终点位置 + 灯亮起 (1.8s-2.3s) */
.section3-stage2.repair-phase-2 .repair-cell-container {
    offset-distance: 100%;
}

/* 阶段3:保持细胞移动位置 + 细胞激活(图片切换) (2.3s-2.9s) */
.section3-stage2.repair-phase-3 .repair-cell-container {
    offset-distance: 100%;
}

.section3-stage2.repair-phase-3 .repair-cell-container .inactive-cell {
    animation: repairFadeOut 0.6s ease-in-out forwards;
}

.section3-stage2.repair-phase-3 .repair-cell-container .active-cell {
    animation: repairFadeIn 0.6s ease-in-out forwards;
}

/* 阶段4:保持细胞激活状态 + 其他元素变化 (2.9s-3.4s) */
.section3-stage2.repair-phase-4 .repair-cell-container {
    offset-distance: 100%;
}

.section3-stage2.repair-phase-4 .repair-cell-container .inactive-cell {
    opacity: 0;
}

.section3-stage2.repair-phase-4 .repair-cell-container .active-cell {
    opacity: 1;
}

/* 动画完成后保持状态 */
.section3-stage2.repair-completed .repair-cell-container .inactive-cell {
    opacity: 0;
}

.section3-stage2.repair-completed .repair-cell-container .active-cell {
    opacity: 1;
}

.section3-stage2.repair-completed .repair-cell-container {
    offset-distance: 100%;
}

@keyframes repairFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes repairFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes repairMoveAlongPath {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

/* 电脑容器内的图片切换 */
.section3-stage2 .computer-screen .broken-computer {
    opacity: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section3-stage2 .computer-screen .normal-computer {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 阶段4:电脑切换动画 */
.section3-stage2.repair-phase-4 .computer-screen .broken-computer {
    animation: repairFadeOut 0.5s ease-in-out forwards;
}

.section3-stage2.repair-phase-4 .computer-screen .normal-computer {
    animation: repairFadeIn 0.5s ease-in-out forwards;
}

/* 动画完成后保持状态 */
.section3-stage2.repair-completed .computer-screen .broken-computer {
    opacity: 0;
}

.section3-stage2.repair-completed .computer-screen .normal-computer {
    opacity: 1;
}

/* 指示灯容器 */
.section3-stage2 .indicator-container {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.section3-stage2 .indicator-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: none;
}

.section3-stage2 .indicator-container .light-off {
    opacity: 1;
}

.section3-stage2 .indicator-container .light-on {
    opacity: 0;
    position: absolute;
}

/* 阶段2:指示灯切换动画 */
.section3-stage2.repair-phase-2 .indicator-container .light-off {
    animation: repairFadeOut 0.5s ease-in-out forwards;
}

.section3-stage2.repair-phase-2 .indicator-container .light-on {
    animation: repairFadeIn 0.5s ease-in-out forwards;
}

/* 阶段3及之后:保持指示灯亮起状态 */
.section3-stage2.repair-phase-3 .indicator-container .light-off,
.section3-stage2.repair-phase-4 .indicator-container .light-off {
    opacity: 0;
}

.section3-stage2.repair-phase-3 .indicator-container .light-on,
.section3-stage2.repair-phase-4 .indicator-container .light-on {
    opacity: 1;
}

/* 动画完成后保持状态 */
.section3-stage2.repair-completed .indicator-container .light-off {
    opacity: 0;
}

.section3-stage2.repair-completed .indicator-container .light-on {
    opacity: 1;
}

/* 蓝光效果 */
.section3-stage2 .indicator-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.0) 0%, rgba(33, 150, 243, 0) 70%);
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.5);
}

.section3-stage2.repair-phase-2 .indicator-container::after {
    animation: repairFadeIn 0.5s ease-in-out forwards, repairBluePulse 2s ease-in-out 0.5s infinite;
}

/* 阶段3及之后:保持蓝光脉冲效果 */
.section3-stage2.repair-phase-3 .indicator-container::after,
.section3-stage2.repair-phase-4 .indicator-container::after {
    animation: repairBluePulse 2s ease-in-out infinite;
    opacity: 0.8;
}

/* 动画完成后保持蓝光脉冲效果 */
.section3-stage2.repair-completed .indicator-container::after {
    animation: repairBluePulse 2s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes repairBluePulse {

    0%,
    100% {
        transform: scale(1.5);
        opacity: 0.8;
    }

    50% {
        transform: scale(2);
        opacity: 0.4;
    }
}

/* 培养皿容器 - 重新设计以适配bio-computer */
.section3-stage2 .bio-computer {
    position: relative;
    width: 40%;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section3-stage2 .bio-computer .petri-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section3-stage2 .bio-computer .petri-dish {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/petri-dish.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    scale: 1.282;
}

.section3-stage2 .bio-computer .demo-area {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(4, 50px);
    gap: 20px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 190px;
    height: 260px;
}

.section3-stage2 .bio-computer .petri-node {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0.9);
}

/* 节点图片 */
.section3-stage2 .bio-computer .input-node.node-a {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/a.webp');
}

.section3-stage2 .bio-computer .input-node.node-b {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/b.webp');
}

.section3-stage2 .bio-computer .input-node.node-c {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/c.webp');
}

.section3-stage2 .bio-computer .input-node.node-d {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/d.webp');
}

.section3-stage2 .bio-computer .output-node.node-alpha {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/alpha.webp');
}

.section3-stage2 .bio-computer .output-node.node-beta {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/beta.webp');
}

.section3-stage2 .bio-computer .output-node.node-gamma {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/gamma.webp');
}

.section3-stage2 .bio-computer .processor-node.node-half {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/half-adder.webp');
}

.section3-stage2 .bio-computer .processor-node.node-amp {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/amplifier.webp');
}

.section3-stage2 .bio-computer .processor-node.node-full {
    background-image: url('https://static.igem.wiki/teams/5646/images/section3/full-adder.webp');
}

/* 涟漪效果 */
.section3-stage2 .bio-computer .petri-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
}

.section3-stage2 .bio-computer .processor-node .petri-ripple:nth-child(1) {
    border: 3px solid #2196f3;
    animation: petriRippleExpand 1.5s ease-out infinite;
}

.section3-stage2 .bio-computer .processor-node .petri-ripple:nth-child(2) {
    border: 3px solid #03a9f4;
    animation: petriRippleExpand 1.5s ease-out 0.3s infinite;
}

.section3-stage2 .bio-computer .processor-node .petri-ripple:nth-child(3) {
    border: 3px solid #00bcd4;
    animation: petriRippleExpand 1.5s ease-out 0.6s infinite;
}

@keyframes petriRippleExpand {
    0% {
        width: 40px;
        height: 40px;
        top: 0;
        left: 0;
        opacity: 0.8;
        border-width: 3px;
    }

    50% {
        opacity: 0.4;
        border-width: 2px;
    }

    100% {
        width: 160px;
        height: 160px;
        top: -60px;
        left: -60px;
        opacity: 0;
        border-width: 1px;
    }
}

/* 阶段4:停止涟漪 */
.section3-stage2.repair-phase-4 .bio-computer .petri-node .petri-ripple {
    animation: none;
    opacity: 0;
}

/* 动画完成后保持涟漪停止 */
.section3-stage2.repair-completed .bio-computer .petri-node .petri-ripple {
    animation: none;
    opacity: 0;
}

/* 网格位置 */
.section3-stage2 .bio-computer .node-1-1 {
    grid-column: 1;
    grid-row: 1;
}

.section3-stage2 .bio-computer .node-3-1 {
    grid-column: 3;
    grid-row: 1;
}

.section3-stage2 .bio-computer .node-2-1 {
    grid-column: 2;
    grid-row: 1;
}

.section3-stage2 .bio-computer .node-1-2 {
    grid-column: 1;
    grid-row: 2;
}

.section3-stage2 .bio-computer .node-2-2 {
    grid-column: 2;
    grid-row: 2;
}

.section3-stage2 .bio-computer .node-1-3 {
    grid-column: 1;
    grid-row: 3;
}

.section3-stage2 .bio-computer .node-2-3 {
    grid-column: 2;
    grid-row: 3;
}

.section3-stage2 .bio-computer .node-3-3 {
    grid-column: 3;
    grid-row: 4;
}

.section3-stage2 .bio-computer .node-1-4 {
    grid-column: 1;
    grid-row: 4;
}

.section3-stage2 .bio-computer .node-2-4 {
    grid-column: 2;
    grid-row: 4;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .section3-stage2 .bio-computer .petri-container {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .section3-stage2 .repair-cell-container {
        width: 80px;
        height: 80px;
    }

    .section3-stage2 .indicator-container {
        width: 40px;
        height: 40px;
    }
}