/*
 * Yorlinq Sublayout Slideshow
 * Column background Ken Burns enhancement.
 *
 * YOOtheme's Column background image is also the content wrapper. A pseudo
 * element duplicates only the computed background layer, so the nested
 * Builder content itself never scales or moves.
 */
.ylss-kenburns-column > * > [class*="uk-background-"],
.uk-background-kenburns {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ylss-kenburns-column > * > [class*="uk-background-"]::before,
.uk-background-kenburns::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -4%;
    pointer-events: none;

    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    background-repeat: inherit;
    background-attachment: scroll;
    background-color: transparent;

    transform: scale(1);
    transform-origin: center center;
    animation: ylss-kenburns var(--ylss-kenburns-duration, 20s) ease-in-out infinite alternate;
    will-change: transform;
}

/* Keep every real child above the animated background copy. DOM order keeps
 * YOOtheme overlays below the later content container at the same z-index. */
.ylss-kenburns-column > * > [class*="uk-background-"] > *,
.uk-background-kenburns > * {
    position: relative;
    z-index: 1;
}

/* YOOtheme updates the native background effect class immediately in the
 * Builder preview, without running PHP render transforms. Target its generated
 * `uk-background-kenburns` class directly so selecting Ken Burns starts the
 * animation instantly. Saved/frontend output still receives the richer
 * ylss-* classes from the PHP render transform for origin and duration. */
.uk-background-kenburns::before {
    transform-origin: center center;
    animation-duration: var(--ylss-kenburns-duration, 20s);
}

.ylss-kb-origin-top-left > * > [class*="uk-background-"]::before { transform-origin: top left; }
.ylss-kb-origin-top-center > * > [class*="uk-background-"]::before { transform-origin: top center; }
.ylss-kb-origin-top-right > * > [class*="uk-background-"]::before { transform-origin: top right; }
.ylss-kb-origin-center-left > * > [class*="uk-background-"]::before { transform-origin: center left; }
.ylss-kb-origin-center-center > * > [class*="uk-background-"]::before { transform-origin: center center; }
.ylss-kb-origin-center-right > * > [class*="uk-background-"]::before { transform-origin: center right; }
.ylss-kb-origin-bottom-left > * > [class*="uk-background-"]::before { transform-origin: bottom left; }
.ylss-kb-origin-bottom-center > * > [class*="uk-background-"]::before { transform-origin: bottom center; }
.ylss-kb-origin-bottom-right > * > [class*="uk-background-"]::before { transform-origin: bottom right; }

/* Auto adds a tiny directional drift as well as zoom, giving a more cinematic
 * movement without requiring a direction choice for every slide. */
.ylss-kb-origin-auto > * > [class*="uk-background-"]::before {
    animation-name: ylss-kenburns-auto;
}

/* Hidden slideshow items do not need to spend animation frames. The animation
 * starts/resumes when UIkit marks the slide active. Outside a slideshow the
 * effect simply runs continuously. */
.uk-slideshow-items > *:not(.uk-active) .ylss-kenburns-column > * > [class*="uk-background-"]::before,
.uk-slideshow-items > *:not(.uk-active) .uk-background-kenburns::before {
    animation-play-state: paused;
}

@keyframes ylss-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.13); }
}

@keyframes ylss-kenburns-auto {
    from { transform: scale(1.01) translate3d(-0.5%, -0.25%, 0); }
    to   { transform: scale(1.14) translate3d(0.75%, 0.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ylss-kenburns-column > * > [class*="uk-background-"]::before,
    .uk-background-kenburns::before {
        animation: none !important;
        transform: none !important;
    }
}