/* Restaurant Carousel - CSS-only infinite scroll */
.restaurant-carousel {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

/* Pause animation on hover */
.restaurant-carousel:hover .carousel-group {
    animation-play-state: paused;
}

.carousel-slider {
    display: flex;
}

/* Ensure each group takes full width */
.carousel-slider > * {
    flex: 0 0 100%;
}

/* Group for better structure and animation */
.carousel-group {
    display: flex;
    gap: var(--s3);
    padding-right: var(--s3);
    will-change: transform;
}

/* Apply animation to groups in right-moving carousel */
.carousel-slider.right .carousel-group {
    animation: scrollingRight 30s linear infinite;
}

/* Apply animation to groups in left-moving carousel */
.carousel-slider.left .carousel-group {
    animation: scrollingLeft 30s linear infinite;
}

.carousel-group ul {
    display: flex;
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    gap: var(--s3);
}

.carousel-group li {
    flex-shrink: 0;
}

.carousel-group img {
    display: block;
    height: 77px;  /* Adjust this value to change carousel height on desktop */
    width: auto;
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    object-fit: cover;
    transition: transform 0.2s ease;
}

.carousel-group img:hover {
    transform: translateY(-5px);
    box-shadow: 5px 10px 0 var(--ink);
}

/* Keyframes for infinite scrolling */
@keyframes scrollingRight {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes scrollingLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .carousel-group img {
        height: 65px;  /* Adjust this value to change carousel height on mobile */
    }
    
    /* Faster animation on mobile for better visual effect */
    .carousel-slider.right .carousel-group {
        animation: scrollingRight 25s linear infinite;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
    
    .carousel-slider.left .carousel-group {
        animation: scrollingLeft 25s linear infinite;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}