/**
 * Before/After Image Carousel Styles
 *
 * Aanvullende styling voor het carousel component.
 * Meeste styling wordt gedaan via Tailwind in de template.
 */

/* Smooth cursor transitions tijdens drag */
.before-after-carousel .slider-handle {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Prevent text selection tijdens drag */
.before-after-carousel.dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* Zorg dat images niet geselecteerd kunnen worden */
.before-after-carousel img {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Handle hover effect - subtiele highlight */
.before-after-carousel .slider-handle:hover .bg-white {
    box-shadow: 0 0 0 4px rgba(242, 121, 38, 0.3);
    transition: box-shadow 0.2s ease;
}

/* Touch feedback voor mobile */
@media (hover: none) and (pointer: coarse) {
    .before-after-carousel .slider-handle {
        /* Groter touch target voor mobile */
        width: 4px;
    }

    .before-after-carousel .slider-handle > div {
        width: 3rem;
        height: 3rem;
    }
}

/* Responsive image loading optimization */
.before-after-carousel img {
    will-change: transform;
}

/* Accessibility: Focus states */
.carousel-indicator:focus-visible {
    outline: 2px solid #F27926;
    outline-offset: 2px;
}

/* Prevent layout shift tijdens loading */
.before-after-carousel {
    contain: layout;
}

/* Performance optimization: GPU acceleration voor smooth animaties */
.after-image-container,
.slider-handle {
    transform: translateZ(0);
    will-change: clip-path, left;
}

.carousel-set {
    will-change: opacity;
}

/* Reduce motion voor gebruikers met motion sensitivity */
@media (prefers-reduced-motion: reduce) {
    .before-after-carousel * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .carousel-hint {
        opacity: 0 !important;
    }
}