/**
 * Touch-Friendly Cascading Carousel for Swiper/Elementor
 *
 * Enhances Swiper carousels with touch-friendly interactions:
 * - Initial touch brings cover to front (like hover on desktop)
 * - Dragging works naturally with Swiper
 * - Covers that slide under finger during drag pop up
 * - Long press opens the item
 * - Double tap opens the item
 */

/* Cascading effect - staggered z-index for depth */
.swiper-slide,
.e-loop-item {
    position: relative;
    transition: transform 0.3s ease, z-index 0s 0.3s;
}

/* Desktop hover state - bring item to front */
@media (hover: hover) and (pointer: fine) {
    .swiper-slide:hover,
    .e-loop-item:hover {
        transform: scale(1.05) translateZ(0);
        z-index: 100 !important;
        transition: transform 0.3s ease, z-index 0s 0s;
    }
}

/* Touch active state - item is being touched */
.swiper-slide.touch-active,
.e-loop-item.touch-active {
    transform: scale(1.05) translateZ(0);
    z-index: 100 !important;
    transition: transform 0.3s ease, z-index 0s 0s;
}

/* Touch hover state - item was touched and brought forward */
.swiper-slide.touch-hover,
.e-loop-item.touch-hover {
    transform: scale(1.03) translateZ(0);
    z-index: 90 !important;
    transition: transform 0.3s ease, z-index 0s 0s;
}

/* Long press feedback - slight pulse */
.swiper-slide.long-press-active,
.e-loop-item.long-press-active {
    animation: longPressPulse 0.6s ease-in-out;
}

@keyframes longPressPulse {
    0%, 100% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(1.08);
    }
}

/* Double tap feedback - quick flash */
.swiper-slide.double-tap-active,
.e-loop-item.double-tap-active {
    animation: doubleTapFlash 0.3s ease;
}

@keyframes doubleTapFlash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* Prevent text selection during touch interactions */
.swiper-slide,
.e-loop-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure links inside carousel items are still tappable */
.swiper-slide a,
.e-loop-item a {
    pointer-events: auto;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .swiper-slide,
    .e-loop-item {
        /* Larger tap target for touch */
        min-height: 44px;
        min-width: 44px;
    }

    /* Faster transitions on touch devices */
    .swiper-slide.touch-active,
    .swiper-slide.touch-hover,
    .e-loop-item.touch-active,
    .e-loop-item.touch-hover {
        transition: transform 0.2s ease, z-index 0s 0s;
    }
}

/* Accessibility - focus state similar to hover/touch */
.swiper-slide:focus-within,
.e-loop-item:focus-within {
    transform: scale(1.05) translateZ(0);
    z-index: 100 !important;
    outline: 3px solid rgba(0, 115, 170, 0.5);
    outline-offset: 4px;
    transition: transform 0.3s ease, z-index 0s 0s;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .swiper-slide,
    .swiper-slide.touch-active,
    .swiper-slide.touch-hover,
    .swiper-slide:hover,
    .swiper-slide:focus-within,
    .e-loop-item,
    .e-loop-item.touch-active,
    .e-loop-item.touch-hover,
    .e-loop-item:hover,
    .e-loop-item:focus-within {
        transition: none;
        animation: none;
    }
}

/* Loading/skeleton state for carousel items */
.swiper-slide.loading,
.e-loop-item.loading {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}