/* Unscoped slideshow transition keyframes (Blazor CSS isolation breaks @keyframes references). */

@keyframes kelli-slideshow-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kelli-slideshow-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes kelli-slideshow-slide-in {
    from {
        transform: translateX(8%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes kelli-slideshow-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-8%);
        opacity: 0;
    }
}

.slideshow-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slideshow-layer {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    background-color: #000;
}

.slideshow-layer--stacked {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.slideshow-layer--enter.transition-fade {
    animation: kelli-slideshow-fade-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.slideshow-layer--exit.transition-fade {
    animation: kelli-slideshow-fade-out 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.slideshow-layer--enter.transition-slide {
    animation: kelli-slideshow-slide-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slideshow-layer--exit.transition-slide {
    animation: kelli-slideshow-slide-out 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.slideshow-layer--enter.transition-none,
.slideshow-layer--exit.transition-none {
    animation: none;
}

/* Immersive / browser fullscreen: fill viewport, preserve aspect ratio, no crop */
.slideshow-overlay.is-immersive .slideshow-close,
.slideshow-overlay.is-immersive .slideshow-counter,
.slideshow-overlay.is-immersive .slideshow-controls,
.slideshow-overlay.is-immersive .slideshow-settings-panel,
.slideshow-overlay.is-immersive .slideshow-nav-arrow {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease;
}

/* Brief reveal of chrome on cursor move while immersive */
.slideshow-overlay.is-immersive.show-chrome .slideshow-close,
.slideshow-overlay.is-immersive.show-chrome .slideshow-counter,
.slideshow-overlay.is-immersive.show-chrome .slideshow-controls,
.slideshow-overlay.is-immersive.show-chrome .slideshow-nav-arrow {
    opacity: 0.85 !important;
    pointer-events: auto !important;
}

.slideshow-overlay.is-immersive.show-chrome .slideshow-settings-panel {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.slideshow-overlay.is-immersive .slideshow-image-wrapper {
    padding: 0;
    width: 100vw;
    height: 100vh;
}

.slideshow-overlay.is-immersive .slideshow-layer {
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: none;
}