/* Native dialog keeps its layout and focus behavior; motion is decorative. */
#lightbox > img {
    opacity: 1;
    transform-origin: center;
    transition: opacity 160ms ease;
}

#lightbox.is-opening {
    animation: gallery-dialog-enter 240ms ease-out both;
}

#lightbox.is-opening::backdrop {
    animation: gallery-backdrop-enter 240ms ease-out both;
}

#lightbox.is-opening > img {
    animation: gallery-image-enter 260ms cubic-bezier(.22, 1, .36, 1) both;
}

#lightbox.is-switching > img {
    opacity: .28;
}

#lightbox.is-closing,
#lightbox.is-closing::backdrop {
    animation: gallery-dialog-exit 180ms ease-in both;
}

@keyframes gallery-dialog-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gallery-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gallery-image-enter {
    from { opacity: .35; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes gallery-dialog-exit {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #lightbox,
    #lightbox::backdrop,
    #lightbox > img {
        animation: none !important;
        transition: none !important;
    }

    #lightbox.is-switching > img {
        opacity: 1;
    }
}