/* ==========================================
   WP24 BY WAVE
   COMPARISON MICRO INTERACTIONS
   Version : 1.1
   ========================================== */

@media (hover: hover) and (pointer: fine) {

    /* BASE */
    #wp24-compare-wave,
    #wp24-compare-no-1,
    #wp24-compare-no-2 {
        position: relative;
        transform: translate3d(0, 0, 0);
        transform-origin: center center;
        backface-visibility: hidden;
        transition:
            transform 650ms cubic-bezier(.22, 1, .36, 1),
            box-shadow 650ms cubic-bezier(.22, 1, .36, 1);
    }

    /* WAVE — PREMIUM HOVER */
    #wp24-compare-wave:hover {
        transform: translate3d(0, -7px, 0)
                   scale(1.035);

        box-shadow:
            0 24px 65px rgba(4, 29, 44, .20),
            0 0 0 1px rgba(130, 184, 255, .25);

        z-index: 3;
    }

    /* ALTERNATIVES */
    #wp24-compare-no-1:hover,
    #wp24-compare-no-2:hover {
        z-index: 2;
    }

    #wp24-compare-no-1.wp24-is-shaking,
    #wp24-compare-no-2.wp24-is-shaking {
        animation: wp24-no-shake 480ms
            cubic-bezier(.36, .07, .19, .97) both;
    }

    /* CUSTOM CURSOR */
    .wp24-compare-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 42px;
        height: 42px;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #041D2C;
        color: #FFFFFF;

        font-family: Arial, sans-serif;
        font-size: 23px;
        font-weight: 400;
        line-height: 1;

        pointer-events: none;
        z-index: 999999;

        opacity: 0;
        scale: .65;

        transform:
            translate3d(-100px, -100px, 0)
            translate(-50%, -50%);

        transition:
            opacity 180ms ease,
            scale 250ms cubic-bezier(.22, 1, .36, 1),
            background-color 200ms ease,
            color 200ms ease;

        box-shadow:
            0 5px 20px rgba(4, 29, 44, .18);
    }

    .wp24-compare-cursor.is-visible {
        opacity: 1;
        scale: 1;
    }

    .wp24-compare-cursor.is-positive {
        background: #83B7FF;
        color: #041D2C;
    }

    /* HIDE NATIVE CURSOR */
    #wp24-compare-wave,
    #wp24-compare-no-1,
    #wp24-compare-no-2,
    #wp24-compare-wave *,
    #wp24-compare-no-1 *,
    #wp24-compare-no-2 * {
        cursor: none;
    }
}

/* SHAKE ANIMATION */
@keyframes wp24-no-shake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px) rotate(-.25deg);
    }

    40% {
        transform: translateX(3px) rotate(.25deg);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(1px);
    }
}

/* MOBILE / TOUCH */
@media (hover: none), (pointer: coarse) {
    #wp24-compare-wave,
    #wp24-compare-no-1,
    #wp24-compare-no-2 {
        transform: none;
        animation: none;
    }

    .wp24-compare-cursor {
        display: none;
    }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    #wp24-compare-wave,
    #wp24-compare-no-1,
    #wp24-compare-no-2 {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .wp24-compare-cursor {
        display: none !important;
    }

    #wp24-compare-wave,
    #wp24-compare-no-1,
    #wp24-compare-no-2,
    #wp24-compare-wave *,
    #wp24-compare-no-1 *,
    #wp24-compare-no-2 * {
        cursor: auto !important;
    }
}