/**
 * Image Comparison Slider - Modern Vanilla JS Version
 * A handy draggable slider to quickly compare 2 images, powered by modern CSS.
 * Based on: https://github.com/CodyHouse/image-comparison-slider
 *
 * Original Copyright: CodyHouse - https://codyhouse.co
 * Modernized for Joomla 6+ by Joomla!LABS
 * 
 * @license     Released under the MIT License
 * 
 * @version 2.0.0
 * @since   2.0.0
 */

/* -------------------------------- 
   Base Styles
-------------------------------- */
.compare-slider {
    position: relative;
    overflow: hidden;
    /* Enable GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.compare-slider img {
    display: block;
    width: 100%;
    pointer-events: none;
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.compare-slider__inner {
    position: relative;
}

.compare-slider__img {
    position: relative;
    user-select: none;
    overflow: hidden;
    margin: 0;
}

/* -------------------------------- 
   Captions
-------------------------------- */
.compare-slider__caption {
    position: absolute;
    bottom: 0;
    font-size: 0.875rem;
    padding: 0.75rem;
    background-color: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    backdrop-filter: blur(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.compare-slider__img--original .compare-slider__caption {
    right: 0;
}

.compare-slider__img--modified .compare-slider__caption {
    left: 0;
}

/* -------------------------------- 
   Handle
-------------------------------- */
.compare-slider__handle {
    display: flex !important;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 44px;
    width: 44px;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: grab;
    will-change: left;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) translateX(-50%) scale(0);
    margin-left: -1px;
    /* Optimize for touch */
    touch-action: none;
    /* GPU acceleration */
    backface-visibility: hidden;
    opacity: 0;
}

/* Increase touch target on mobile */
@media (max-width: 768px) {
    .compare-slider__handle {
        height: 54px;
        width: 54px;
    }
}

.compare-slider--is-dragging .compare-slider__handle {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(26, 26, 26, 0.5);
}

/* Icon inside handle */
.compare-slider__icon {
    display: block;
    width: 24px;
    height: 24px;
    /* Use mask to allow color inheritance from parent */
    mask: url(../images/slide-h.svg) no-repeat center;
    -webkit-mask: url(../images/slide-h.svg) no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: currentColor;
    /* GPU acceleration */
    transform: translateZ(0);
    flex-shrink: 0;
}

/* -------------------------------- 
   Input Handle (Hidden)
-------------------------------- */
.compare-slider__input-handle {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
}

.compare-slider__input-handle:focus + .compare-slider__handle {
    color: #0056b3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 4px rgba(26, 26, 26, 0.5);
}

/* -------------------------------- 
   Modified Image
-------------------------------- */
.compare-slider__img--modified {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    transform: translateZ(0);
    border-right: 2px solid #ffffff;
    will-change: width;
    /* Optimize for 60fps */
    contain: layout style paint;
}

.compare-slider__img--modified img {
    height: 100%;
    width: auto;
    max-width: none;
    /* GPU acceleration for images */
    transform: translateZ(0);
}

/* -------------------------------- 
   In Viewport Animation
-------------------------------- */
.compare-slider--in-viewport .compare-slider__img--modified {
    width: 50%;
    animation: compare-slider-bounce-in 0.7s;
}

.compare-slider__caption {
    opacity: 0;
    transform: translateY(20px);
}

.compare-slider--in-viewport .compare-slider__caption {
    opacity: 1;
    transform: translateY(0);
}

.compare-slider--in-viewport .compare-slider__caption--hide {
    opacity: 0;
    visibility: hidden;
}

.compare-slider__img--original .compare-slider__caption--hide {
    transform: translateX(30px);
}

.compare-slider__img--modified .compare-slider__caption--hide {
    transform: translateX(-30px);
}

.compare-slider--in-viewport .compare-slider__handle {
    transition: transform 0.3s 0.7s, opacity 0s 0.7s;
    transform: translateY(-50%) translateX(-50%) scale(1);
    opacity: 1;
}

.compare-slider__input-handle {
    display: block;
}

/* -------------------------------- 
   Reduced Motion
-------------------------------- */
.compare-slider--reduced-motion .compare-slider__img--modified {
    animation: none;
}

.compare-slider--reduced-motion .compare-slider__handle,
.compare-slider--reduced-motion .compare-slider__caption {
    transition: none;
}

/* -------------------------------- 
   Animations
-------------------------------- */
@keyframes compare-slider-bounce-in {
    0% {
        width: 0%;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
}