/* Image Scroller Gallery - Frontend Styles */

.img-scroller-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.img-scroller-gallery {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Alignment */
.img-scroller-gallery.align-left .img-scroller-track {
    justify-content: flex-start;
}

.img-scroller-gallery.align-center .img-scroller-track {
    justify-content: center;
}

.img-scroller-gallery.align-right .img-scroller-track {
    justify-content: flex-end;
}

/* Track */
.img-scroller-track {
    display: flex;
    align-items: center;
    position: relative;
}

/* No scroll - static display */
.img-scroller-gallery.scroll-none .img-scroller-track {
    flex-wrap: nowrap;
}

/* Scrolling galleries */
.img-scroller-gallery.scroll-left .img-scroller-track,
.img-scroller-gallery.scroll-right .img-scroller-track {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Scroll Left Animation */
.img-scroller-gallery.scroll-left .img-scroller-track {
    animation-name: scrollLeft;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Scroll Right Animation */
.img-scroller-gallery.scroll-right .img-scroller-track {
    animation-name: scrollRight;
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Scroll Speeds */
.img-scroller-gallery.speed-slow .img-scroller-track {
    animation-duration: 60s;
}

.img-scroller-gallery.speed-medium .img-scroller-track {
    animation-duration: 30s;
}

.img-scroller-gallery.speed-fast .img-scroller-track {
    animation-duration: 15s;
}

/* Image Items */
.img-scroller-item {
    flex-shrink: 0;
    display: inline-block;
}

.img-scroller-image {
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Lazy Load */
.img-scroller-image.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.img-scroller-image.lazy-load.loaded {
    opacity: 1;
}

/* Hover pause for scrolling galleries */
.img-scroller-gallery.scroll-left .img-scroller-track:hover,
.img-scroller-gallery.scroll-right .img-scroller-track:hover {
    animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .img-scroller-gallery {
        -webkit-overflow-scrolling: touch;
    }
}

/* Fade edges using mask (modern browsers) */
.img-scroller-gallery.scroll-left,
.img-scroller-gallery.scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent);
    mask-image: linear-gradient(to right, transparent, black 50px, black calc(100% - 50px), transparent);
}

/* Accessibility */
.img-scroller-image:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .img-scroller-gallery.scroll-left .img-scroller-track,
    .img-scroller-gallery.scroll-right .img-scroller-track {
        animation: none !important;
    }
}