/**
 * Calonder Slideshow - Frontend Styles v2.0.1
 * - Added @keyframes animations for first slide Ken Burns
 *   (CSS animations define their own start/end state,
 *    so they fire reliably regardless of DOM manipulation)
 */

/* ==========================================================================
   Container & Layout
   ========================================================================== */

.calonder-slideshow {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.c-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.c-swiper-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

.c-swiper-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.c-swiper-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Ken Burns — CSS Transitions (for slide changes, Elementor pattern)
   ========================================================================== */

.c-ken-burns {
    transition-property: transform;
    transition-timing-function: linear;
    transition-duration: var(--kb-duration-base, 2.5s);
}

.c-ken-burns--active {
    transition-duration: var(--kb-duration-active, 6s);
}

/* Zoom In */
.c-ken-burns--in {}
.c-ken-burns--active.c-ken-burns--in {
    transform: scale(var(--zoom-scale, 1.3));
}

/* Zoom Out */
.c-ken-burns--out {
    transform: scale(var(--zoom-scale, 1.3));
}
.c-ken-burns--active.c-ken-burns--out {
    transform: scale(1);
}

/* Zoom In + Pan Right */
.c-ken-burns--in-pan-right {}
.c-ken-burns--active.c-ken-burns--in-pan-right {
    transform: scale(var(--zoom-scale, 1.3)) translateX(5%);
}

/* Zoom In + Pan Left */
.c-ken-burns--in-pan-left {}
.c-ken-burns--active.c-ken-burns--in-pan-left {
    transform: scale(var(--zoom-scale, 1.3)) translateX(-5%);
}

/* Pan Right */
.c-ken-burns--pan-right {
    transform: translateX(-5%);
}
.c-ken-burns--active.c-ken-burns--pan-right {
    transform: translateX(5%);
}

/* Pan Left */
.c-ken-burns--pan-left {
    transform: translateX(5%);
}
.c-ken-burns--active.c-ken-burns--pan-left {
    transform: translateX(-5%);
}

/* ==========================================================================
   Ken Burns — CSS Animations (for FIRST slide only)
   
   CSS animations define their own from/to state in keyframes,
   so they fire reliably regardless of Swiper's DOM cloning.
   Applied via .c-ken-burns--first class, removed after first transition.
   ========================================================================== */

.c-ken-burns--first {
    /* Override transition with animation — set by JS with correct duration */
    transition: none !important;
}

/* Zoom In: scale(1) → scale(zoom) */
@keyframes c-kb-in {
    from { transform: scale(1); }
    to { transform: scale(var(--zoom-scale, 1.3)); }
}

/* Zoom Out: scale(zoom) → scale(1) */
@keyframes c-kb-out {
    from { transform: scale(var(--zoom-scale, 1.3)); }
    to { transform: scale(1); }
}

/* Zoom In + Pan Right */
@keyframes c-kb-in-pan-right {
    from { transform: scale(1) translateX(0); }
    to { transform: scale(var(--zoom-scale, 1.3)) translateX(5%); }
}

/* Zoom In + Pan Left */
@keyframes c-kb-in-pan-left {
    from { transform: scale(1) translateX(0); }
    to { transform: scale(var(--zoom-scale, 1.3)) translateX(-5%); }
}

/* Pan Right */
@keyframes c-kb-pan-right {
    from { transform: translateX(-5%); }
    to { transform: translateX(5%); }
}

/* Pan Left */
@keyframes c-kb-pan-left {
    from { transform: translateX(5%); }
    to { transform: translateX(-5%); }
}