/**
 * Custom PhotoSwipe CSS - Slide Animations
 * Adds smooth slide transitions between images
 */

/* Prevent scrollbar layout shift when lightbox opens */
html {
    scrollbar-gutter: stable;
}

/* Prevent body scroll when lightbox is open */
.pswp--open {
    overflow: hidden !important;
}

body.pswp--open {
    overflow: hidden !important;
}

html:has(.pswp--open) {
    overflow: hidden !important;
}

/* CRITICAL: Enable slide transitions for the scroll container */
.pswp__scroll-wrap {
    transition: none !important; /* PhotoSwipe controls this via JS */
}

/* Enable slide transitions for content wrapper - this is the key! */
.pswp__container {
    will-change: transform;
    transition: transform 350ms cubic-bezier(0.4, 0, 0.22, 1) !important;
}

/* Individual slides should also transition */
.pswp__item {
    will-change: transform, opacity;
}

/* During actual sliding, use transition */
.pswp--dragging .pswp__container,
.pswp--animated .pswp__container {
    transition: transform 350ms cubic-bezier(0.4, 0, 0.22, 1) !important;
}

/* Smooth zoom transitions */
.pswp__zoom-wrap {
    will-change: transform;
}

/* Custom class for our galleries */
.pswp--custom-slide-animation .pswp__container {
    transition: transform 350ms cubic-bezier(0.4, 0, 0.22, 1) !important;
}

/* Ensure smooth transitions when changing slides */
.pswp--custom-slide-animation.pswp--animated .pswp__container {
    transition-duration: 350ms !important;
}

.pswp--custom-slide-animation.pswp--animated .pswp__item {
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.22, 1) !important;
}

/* Caption styling */
.pswp__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.pswp__caption:empty {
    display: none;
}