.image-transition-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2; /* Make sure it's above the original background but below hotspots */
    pointer-events: none; /* Allow mouse events to pass through */
}

.transition-panel {
    position: absolute;
    top: 0;
    width: 20%; /* 100% / 5 panels */
    height: 100%;
    background-image: url('images/about-after.png');
    background-size: cover; /* Match the 'before' image size */
    background-position: center; /* Center the background for all panels */
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.transition-panel-1 {
    left: 0;
    transition-delay: 0s;
}

.transition-panel-2 {
    left: 20%;
    transition-delay: 0.6s;
}

.transition-panel-3 {
    left: 40%;
    transition-delay: 0.2s;
}

.transition-panel-4 {
    left: 60%;
    transition-delay: 0.8s;
}

.transition-panel-5 {
    left: 80%;
    transition-delay: 0.4s;
}

.image-transition-container.animate .transition-panel {
    opacity: 1;
}