/* ===========================
   Photo Stack Widget
=========================== */

@keyframes ha_rotating {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ha_rotating_inverse {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes ha_bounce_sm {
    0%, to {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10%);
    }
}

@keyframes ha_bounce_md {
    0%, to {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20%);
    }
}

@keyframes ha_bounce_lg {
    0%, to {
        transform: translateY(0);
    }
    50% {
        transform: translateY(40%);
    }
}

@keyframes ha_fade {
    0%, to {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes ha_scale_sm {
    0%, to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes ha_scale_md {
    0%, to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
}

@keyframes ha_scale_lg {
    0%, to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.8);
    }
}

.ekl-photo-stack-container {
    width: 100%;
}

.ha-photo-stack-wrapper,
.ekl-photo-stack-wrapper {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    --animation_speed: 6s;
}

.ha-photo-stack-wrapper .ha-photo-stack-item,
.ekl-photo-stack-wrapper .ekl-photo-stack-item {
    position: absolute;
    display: inline-block;
}

.ha-photo-stack-item img,
.ekl-photo-stack-item img,
.ha-photo-stack-img,
.ekl-photo-stack-img {
    display: block;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Infinite animations */
.ha-rotating,
.ha-rotating-inverse,
.ekl-rotating,
.ekl-rotating-inverse {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

.ha-rotating,
.ekl-rotating {
    animation-name: ha_rotating;
}

.ha-rotating-inverse,
.ekl-rotating-inverse {
    animation-name: ha_rotating_inverse;
}

.ha-bounce-sm,
.ekl-bounce-sm {
    animation-name: ha_bounce_sm;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

.ha-bounce-md,
.ekl-bounce-md {
    animation-name: ha_bounce_md;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

.ha-bounce-lg,
.ekl-bounce-lg {
    animation-name: ha_bounce_lg;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

.ha-fade,
.ekl-fade {
    animation-name: ha_fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
}

.ha-scale-sm,
.ekl-scale-sm {
    animation-name: ha_scale_sm;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

.ha-scale-md,
.ekl-scale-md {
    animation-name: ha_scale_md;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

.ha-scale-lg,
.ekl-scale-lg {
    animation-name: ha_scale_lg;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: var(--animation_speed, 6s);
    will-change: transform;
}

/* Hover animations */
.scale,
.scale-inverse,
.scale-inverse-lg,
.scale-inverse-sm,
.scale-lg,
.scale-sm,
.fly,
.fly-lg,
.fly-sm {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    backface-visibility: hidden;
}

.scale-sm:hover {
    z-index: 999;
    transform: scale(1.05) !important;
}

.scale:hover {
    z-index: 999;
    transform: scale(1.1) !important;
}

.scale-lg:hover {
    z-index: 999;
    transform: scale(1.15) !important;
}

.scale-inverse-sm:hover {
    transform: scale(0.95) !important;
}

.scale-inverse:hover {
    transform: scale(0.925) !important;
}

.scale-inverse-lg:hover {
    transform: scale(0.9) !important;
}

.fly-sm:hover {
    transform: translate(0, -3px) !important;
}

.fly:hover {
    transform: translate(0, -6px) !important;
}

.fly-lg:hover {
    transform: translate(0, -9px) !important;
}