/**
 * Enhanced Image Compare Styles for BusPatrol
 * Hand icon swipe animation to indicate draggability
 */

/* Pristine state - labels visible */
.twentytwenty-container.twentytwenty-pristine .twentytwenty-overlay {
    background: rgba(0, 0, 0, 0.15) !important;
}

.twentytwenty-container.twentytwenty-pristine .twentytwenty-before-label,
.twentytwenty-container.twentytwenty-pristine .twentytwenty-after-label {
    opacity: 1 !important;
}

/* Ensure labels have good contrast */
.twentytwenty-container.twentytwenty-pristine .twentytwenty-before-label:before,
.twentytwenty-container.twentytwenty-pristine .twentytwenty-after-label:before {
    background: rgba(26, 53, 128, 0.85);
    padding: 8px 16px;
}

/* Hand icon base styles */
.twentytwenty-hand-icon {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 20px));
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show hand icon in pristine state */
.twentytwenty-hand-icon.visible {
    opacity: 1;
}

/* Swipe animation - hand moves left to right */
@keyframes hand-swipe {
    0% {
        transform: translate(-50%, calc(-50% + 20px)) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        transform: translate(-50%, calc(-50% + 20px)) translateX(-60px);
    }
    50% {
        transform: translate(-50%, calc(-50% + 20px)) translateX(60px);
    }
    80% {
        transform: translate(-50%, calc(-50% + 20px)) translateX(0);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, calc(-50% + 20px)) translateX(0);
        opacity: 0;
    }
}

.twentytwenty-hand-icon.animating {
    animation: hand-swipe 2.5s ease-in-out forwards;
}

/* Subtle pulse on handle in pristine state */
.twentytwenty-container.twentytwenty-pristine .twentytwenty-handle {
    box-shadow:
        0px 0px 12px rgba(51, 51, 51, 0.5),
        0 0 0 0 rgba(42, 186, 222, 0.5);
    animation: handle-pulse 2s ease-in-out infinite;
}

@keyframes handle-pulse {
    0%, 100% {
        box-shadow:
            0px 0px 12px rgba(51, 51, 51, 0.5),
            0 0 0 0 rgba(42, 186, 222, 0.5);
    }
    50% {
        box-shadow:
            0px 0px 12px rgba(51, 51, 51, 0.5),
            0 0 0 10px rgba(42, 186, 222, 0);
    }
}

/* Stop pulse when not pristine */
.twentytwenty-container:not(.twentytwenty-pristine) .twentytwenty-handle {
    animation: none !important;
}

/* Hide hand icon when not pristine */
.twentytwenty-container:not(.twentytwenty-pristine) .twentytwenty-hand-icon {
    display: none;
}

/* Hide arrows on handle */
.twentytwenty-left-arrow,
.twentytwenty-right-arrow,
.twentytwenty-up-arrow,
.twentytwenty-down-arrow {
    display: none !important;
}

/* Grab cursor on handle */
.twentytwenty-handle {
    cursor: grab !important;
}

.twentytwenty-handle:active,
.twentytwenty-container.active .twentytwenty-handle {
    cursor: grabbing !important;
}

/* Grip icon (6 dots) in the center of handle */
.twentytwenty-grip-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(2, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 3px;
    pointer-events: none;
}

.twentytwenty-grip-icon span {
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.8;
}