/* =========================================================================
 * WML Multi Image Show
 * A native-image-like element that cross-fades through multiple images.
 * ========================================================================= */

.wml-multi-image-show {
    --wml-mis-fade: 1s;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.wml-multi-image-show .wml-mis-stage {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: transparent;
}

/* ---- Width modes ---- */

/* Original: stage shrink-wraps to the natural size of the first image. */
.wml-mis-width-original .wml-mis-stage {
    width: auto;
    max-width: 100%;
}
.wml-mis-width-original .wml-mis-slide:first-child .wml-mis-img {
    width: auto;
    max-width: 100%;
}

/* Custom: stage uses the inline width (set in PHP), capped to the container. */
.wml-mis-width-custom .wml-mis-stage {
    max-width: 100%;
}

.wml-multi-image-show .wml-mis-link {
    display: block;
    width: 100%;
    height: 100%;
}

.wml-multi-image-show .wml-mis-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Each slide stacks on top of the others. Only the active / leaving slides
 * are painted; everything else is fully hidden so nothing bleeds through. */
.wml-multi-image-show .wml-mis-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* When height mode is "auto" the first slide drives the height. */
.wml-multi-image-show .wml-mis-slide:first-child {
    position: relative;
}

/* Resting state of the visible image. */
.wml-multi-image-show .wml-mis-slide.is-active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/* The outgoing image stays painted underneath while it animates out. */
.wml-multi-image-show .wml-mis-slide.is-leaving {
    opacity: 0;
    z-index: 1;
}

.wml-multi-image-show .wml-mis-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Auto height: let the image define its natural height. */
.wml-multi-image-show .wml-mis-slide:first-child .wml-mis-img {
    height: auto;
}

/* ---- Captions ---- */
.wml-multi-image-show .wml-mis-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 28px 18px 14px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    z-index: 3;
}

/* ---- Optional overlay tint ---- */
.wml-multi-image-show .wml-mis-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: transparent;
    z-index: 3;
}

/* =========================================================================
 * Transition effect variants
 *
 * The incoming slide (.is-active) plays an "in" animation; the outgoing
 * slide (.is-leaving) plays an "out" animation. The outgoing slide only ever
 * fades / drifts — it never snaps back to an offset — which is what makes the
 * change feel smooth and intentional rather than mechanical.
 * ========================================================================= */

.wml-multi-image-show {
    /* Refined easing curves used across the effects. */
    --wml-mis-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --wml-mis-ease-slide: cubic-bezier(0.76, 0, 0.24, 1);
    --wml-mis-interval: 6s;
}

/* Animations are applied while a slide carries .is-active / .is-leaving and
 * fill 'both' so the final frame holds until the class is cleared. */
.wml-multi-image-show .wml-mis-slide.is-active {
    animation-duration: var(--wml-mis-fade);
    animation-timing-function: var(--wml-mis-ease);
    animation-fill-mode: both;
}
.wml-multi-image-show .wml-mis-slide.is-leaving {
    animation-duration: var(--wml-mis-fade);
    animation-timing-function: var(--wml-mis-ease);
    animation-fill-mode: both;
}

/* ---- Fade (pure crossfade) ---- */
.wml-mis-effect-fade .wml-mis-slide.is-active  { animation-name: wml-mis-fade-in; }
.wml-mis-effect-fade .wml-mis-slide.is-leaving { animation-name: wml-mis-fade-out; }

/* ---- Fade + Zoom ---- */
.wml-mis-effect-fade-scale .wml-mis-slide.is-active  { animation-name: wml-mis-zoom-in; }
.wml-mis-effect-fade-scale .wml-mis-slide.is-leaving { animation-name: wml-mis-zoom-out; }

/* ---- Blur Fade ---- */
.wml-mis-effect-blur .wml-mis-slide.is-active  { animation-name: wml-mis-blur-in; }
.wml-mis-effect-blur .wml-mis-slide.is-leaving { animation-name: wml-mis-blur-out; }

/* ---- Slide (left) ---- */
.wml-mis-effect-slide-left .wml-mis-slide.is-active {
    animation-name: wml-mis-slide-left-in;
    animation-timing-function: var(--wml-mis-ease-slide);
}
.wml-mis-effect-slide-left .wml-mis-slide.is-leaving {
    animation-name: wml-mis-slide-left-out;
    animation-timing-function: var(--wml-mis-ease-slide);
}

/* ---- Slide (up) ---- */
.wml-mis-effect-slide-up .wml-mis-slide.is-active {
    animation-name: wml-mis-slide-up-in;
    animation-timing-function: var(--wml-mis-ease-slide);
}
.wml-mis-effect-slide-up .wml-mis-slide.is-leaving {
    animation-name: wml-mis-slide-up-out;
    animation-timing-function: var(--wml-mis-ease-slide);
}

/* ---- Ken Burns: crossfade + a continuous slow pan/zoom on the image,
 * lasting the whole time the slide is on screen. ---- */
.wml-mis-effect-kenburns .wml-mis-slide.is-active  { animation-name: wml-mis-fade-in; }
.wml-mis-effect-kenburns .wml-mis-slide.is-leaving { animation-name: wml-mis-fade-out; }
.wml-mis-effect-kenburns .wml-mis-slide.is-active .wml-mis-img {
    animation: wml-mis-kenburns var(--wml-mis-interval) ease-out both;
}
/* Alternate the pan direction on every other slide for variety. */
.wml-mis-effect-kenburns .wml-mis-slide.is-active:nth-child(even) .wml-mis-img {
    animation-name: wml-mis-kenburns-alt;
}

@keyframes wml-mis-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes wml-mis-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes wml-mis-zoom-in {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes wml-mis-zoom-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.05); }
}

@keyframes wml-mis-blur-in {
    from { opacity: 0; filter: blur(18px); transform: scale(1.06); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
@keyframes wml-mis-blur-out {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(18px); }
}

@keyframes wml-mis-slide-left-in {
    from { opacity: 0; transform: translate3d(6%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wml-mis-slide-left-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-6%, 0, 0); }
}

@keyframes wml-mis-slide-up-in {
    from { opacity: 0; transform: translate3d(0, 6%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes wml-mis-slide-up-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, -6%, 0); }
}

@keyframes wml-mis-kenburns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-2%, -1.5%, 0); }
}
@keyframes wml-mis-kenburns-alt {
    from { transform: scale(1.14) translate3d(-2%, 0, 0); }
    to   { transform: scale(1.02) translate3d(0, -1.5%, 0); }
}

/* =========================================================================
 * Navigation: arrows + dots
 * ========================================================================= */

.wml-multi-image-show .wml-mis-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
}

.wml-multi-image-show .wml-mis-stage:hover .wml-mis-arrow {
    opacity: 1;
}

.wml-multi-image-show .wml-mis-arrow:hover {
    background: rgba(0, 0, 0, 0.65);
}

.wml-multi-image-show .wml-mis-prev { left: 12px; }
.wml-multi-image-show .wml-mis-next { right: 12px; }

.wml-multi-image-show .wml-mis-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.wml-multi-image-show .wml-mis-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.wml-multi-image-show .wml-mis-dot.is-active {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.25);
}

/* Lightbox affordance */
.wml-multi-image-show[data-mis-lightbox] .wml-mis-stage { cursor: zoom-in; }

/* =========================================================================
 * Lightbox modal
 * ========================================================================= */
.wml-mis-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.wml-mis-lightbox.is-open { opacity: 1; }
.wml-mis-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 4px;
}
.wml-mis-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .wml-multi-image-show .wml-mis-slide.is-active,
    .wml-multi-image-show .wml-mis-slide.is-leaving,
    .wml-multi-image-show .wml-mis-slide.is-active .wml-mis-img {
        animation-name: wml-mis-fade-in;
        animation-duration: 0.2s;
        transform: none !important;
        filter: none !important;
    }
    .wml-multi-image-show .wml-mis-slide.is-leaving {
        animation-name: wml-mis-fade-out;
    }
}