/* ====== Magic Slide 5 (3D Infinite Carousel) Styling ====== */

.gdk-ms-motion-scene {
    position: relative;
    width: 100%;
    height: var(--scene-h, 100vh);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Variables are inherited from {{WRAPPER}}. Defaults are handled in var() calls below. */
}

.carousel-track {
    position: relative;
    width: 100%;
    height: var(--img-height, 30rem);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.carousel-item {
    position: absolute;
    width: var(--img-width, 30rem);
    height: var(--img-height, 30rem);
    left: 100%;
    display: flex;
    justify-content: center;
    perspective: var(--img-perspective, 1000px);
    transform-style: preserve-3d;

    /* Animation Properties */
    animation: gdk-scroll-left var(--time, 60s) linear infinite;
    animation-delay: calc(var(--time, 60s) / var(--total, 1) * (var(--i, 1) - 1) - var(--time, 60s) + var(--time-offset, 0s));
    animation-direction: var(--anim-direction, normal);
    animation-play-state: var(--anim-state, paused);

    will-change: left;
    transition: perspective 0.3s ease;
    cursor: pointer;
    transform: rotate(var(--card_rotate, 0deg));
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: rotateY(var(--img_rotation, -45deg)) scale(var(--img_scale, 1));
    filter: brightness(var(--img_brightness, 100%)) saturate(var(--img_saturation, 100%)) blur(var(--img_blur, 0px));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.3s ease;

    /* Gradient Mask */
    mask: linear-gradient(black var(--mask_intensity, 70%), transparent 100%);
    -webkit-mask: linear-gradient(black var(--mask_intensity, 70%), transparent 100%);
}

.carousel-item:hover img {
    transform:
        rotateY(var(--img_hover_rotation, 0deg)) translateY(var(--img_hover_lift, -2rem)) scale(calc(var(--img_scale, 1) * 1.05));
    filter:
        brightness(var(--img_brightness_hover, 110%)) saturate(var(--img_saturation_hover, 110%)) blur(var(--img_blur_hover, 0px));
    mask: linear-gradient(black var(--mask_intensity_hover, 70%), transparent 100%);
    -webkit-mask: linear-gradient(black var(--mask_intensity_hover, 70%), transparent 100%);
}

@keyframes gdk-scroll-left {
    from {
        left: 100%;
    }

    to {
        left: calc(var(--left_end, -300rem) - var(--slide-gap, 0rem));
    }
}

/* Ensure images don't overflow on small screens if not intended */
.gdk-ms-motion-scene img {
    max-width: none !important;
}

@media (max-width: 768px) {
    /* Optional: Small screen defaults if not overridden by Elementor */
}