:root {
    /* swap these for your images */

    /* timing */
    --reveal-duration: 2200ms;
    --reveal-ease: cubic-bezier(.2, .8, .2, 1);
    --fade-duration: 2000ms;
}

/* ===== Overlay “doors” ===== */
.door-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: auto;
    cursor: pointer;
}

/* prevent background scroll while overlay is present */
.has-door-overlay {
    overflow: hidden;
}

.door {
    position: fixed; /* fixed so they stay pinned to viewport */
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(calc(-50% + var(--x, 0px)), -50%); /* centered + animatable offset */
    will-change: transform, opacity;
    transition: transform var(--reveal-duration) var(--reveal-ease), opacity var(--fade-duration) var(--reveal-ease);
    pointer-events: none; /* clicks go to overlay container */
    backface-visibility: hidden;
    isolation: isolate;
}

/* The actual images: centered, shrink-to-fit, never upscale */
.door > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* keep centered */
    display: block;
    user-select: none;
    pointer-events: none;
}

.door.door-left {
    z-index: 0;
}

.door.door-right {
    z-index: 1;
}

/* ON OPEN: slide doors away and fade a bit */
.door-overlay.door-open .door.door-left {
    transform: translateY(-140%) translateX(-50%) scale(140%);
    opacity: 0.2;
}

.door-overlay.door-open .door.door-right {
    transform: translateY(140%) translateX(-50%) scale(140%);
    opacity: 0.2;
}

.door-overlay.door-open .door::after {
    opacity: 0; /* remove darkening as they leave */
}

/* Make overlay clickable even if children stop propagation, etc. */
.door-overlay,
.door {
    cursor: pointer;
}