/*
==================================================
XOA SITE — ANIMAÇÕES
==================================================
*/

/*
==================================================
DESIGN TOKENS
==================================================
*/

:root{

    /* Duração */

    --animation-fast: .18s;
    --animation-duration: .25s;
    --animation-slow: .45s;

    /* Curvas */

    --animation-easing: ease;
    --animation-easing-smooth: cubic-bezier(.22,.61,.36,1);

    /* Distâncias */

    --fade-distance: 6px;
    --modal-distance: 8px;
    --drawer-distance: 24px;
    --cart-shake-distance: 3px;

    /* Loading */

    --loading-size: 16px;
    --loading-border: 2px;
    --loading-speed: .8s;

}

/*
==================================================
KEYFRAMES
==================================================
*/

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(var(--fade-distance));

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes slideUp{

    from{

        opacity:0;
        transform:translateY(var(--modal-distance));

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes slideInRight{

    from{

        opacity:0;
        transform:translateX(var(--drawer-distance));

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes pop{

    0%{

        opacity:0;
        transform:scale(.92);

    }

    70%{

        opacity:1;
        transform:scale(1.03);

    }

    100%{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes cartAttention{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(calc(var(--cart-shake-distance) * -1));

    }

    40%{

        transform:translateX(var(--cart-shake-distance));

    }

    60%{

        transform:translateX(calc(var(--cart-shake-distance) * -.6));

    }

    80%{

        transform:translateX(calc(var(--cart-shake-distance) * .6));

    }

    100%{

        transform:translateX(0);

    }

}

/*
==================================================
COMPONENTES
==================================================
*/

/* Cards */

.product-card,
.category-item{

    animation:
        fadeIn
        var(--animation-duration)
        var(--animation-easing-smooth)
        both;

    will-change:
        opacity,
        transform;

}

/* Modal */

.modal.open .modal-box{

    animation:
        slideUp
        var(--animation-duration)
        var(--animation-easing-smooth)
        both;

    will-change:
        opacity,
        transform;

}

/* Carrinho */

.cart.open{

    animation:
        slideInRight
        var(--animation-duration)
        var(--animation-easing-smooth)
        both;

    will-change:
        opacity,
        transform;

}

/* Loading */

.loading::after{

    content:"";

    display:inline-block;

    width:var(--loading-size);

    height:var(--loading-size);

    margin-left:8px;

    border:var(--loading-border) solid var(--border);

    border-top-color:var(--primary);

    border-radius:50%;

    vertical-align:middle;

    animation:
        spin
        var(--loading-speed)
        linear
        infinite;

}

/* Contador do carrinho */

.cart-count{

    transition:
        transform
        var(--animation-fast)
        var(--animation-easing);

}

.cart-count.bump{

    animation:
        pulse
        var(--animation-duration)
        var(--animation-easing);

}

/* Chamar atenção */

.cart-attention{

    animation:
        cartAttention
        var(--animation-slow)
        var(--animation-easing);

}

/* Entrada genérica */

.pop{

    animation:
        pop
        var(--animation-duration)
        var(--animation-easing-smooth)
        both;

}

/*
==================================================
ACESSIBILIDADE
==================================================
*/

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}