/* =========================================================
   PRIME VAPE — ANIMAÇÕES E INTERAÇÕES
========================================================= */

/* =========================================================
   BOTÕES GERAIS
========================================================= */

.button-primary,
.button-secondary,
.button-danger,
.text-button,
.product-details-button,
.search-trigger-button,
.collapsed-cart-button,
.category-button,
.choice-card,
.modal-thumbnail {
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease,
        opacity 150ms ease,
        box-shadow 150ms ease;
}

.button-primary:hover,
.product-details-button:hover,
.collapsed-cart-button:hover {
    transform: translateY(-1px);
}

.button-primary:active,
.product-details-button:active,
.collapsed-cart-button:active {
    transform: translateY(0);
}

/* =========================================================
   CARDS DE PRODUTO
========================================================= */

.product-card {
    transform: translateZ(0);

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease,
        opacity 170ms ease;
}

.product-card:hover {
    transform: translateY(-3px);
}

.product-card:active {
    transform: translateY(-1px);
}

.product-image {
    transform: translateZ(0);

    transition:
        transform 190ms ease,
        filter 190ms ease;
}

.product-card:hover .product-image {
    transform: scale(1.025);
}

/* =========================================================
   CARDS E OPÇÕES
========================================================= */

.choice-card,
.modal-related-button,
.storefront-notice-card {
    transform: translateZ(0);

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.choice-card:hover,
.modal-related-button:hover {
    transform: translateY(-1px);
}

.choice-card:active,
.modal-related-button:active {
    transform: translateY(0);
}

/* =========================================================
   CATEGORIAS
========================================================= */

.category-button {
    transition:
        padding-left 140ms ease,
        color 140ms ease,
        background 140ms ease,
        border-color 140ms ease;
}

.category-button::before {
    transition:
        height 140ms ease,
        opacity 140ms ease,
        transform 140ms ease;
}

/* =========================================================
   MINIATURAS DO MODAL
========================================================= */

.modal-thumbnail:hover {
    transform: translateY(-1px);
}

.modal-thumbnail:active {
    transform: translateY(0);
}

/* =========================================================
   ABERTURA DOS MODAIS
========================================================= */

.modal:not(.hidden) .modal-backdrop {
    animation: modalBackdropEnter 180ms ease both;
}

.modal:not(.hidden) .modal-card {
    animation: modalCardEnter 210ms ease both;
}

@keyframes modalBackdropEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalCardEnter {
    from {
        opacity: 0;
        transform:
            translateY(10px)
            scale(0.985);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* =========================================================
   BUSCA DE PRODUTOS
========================================================= */

#search-modal:not(.hidden) .search-modal-card {
    animation: searchModalEnter 210ms ease both;
}

@keyframes searchModalEnter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   INDICADOR DE STATUS
========================================================= */

.status-dot.is-online {
    animation: statusPulse 2.4s ease-in-out infinite;
}

@keyframes statusPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* =========================================================
   BANNER ATIVO
========================================================= */

.hero-banner-card.is-active {
    animation: heroBannerEnter 260ms ease both;
}

@keyframes heroBannerEnter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   PONTOS DO BANNER
========================================================= */

.hero-banner-dot {
    transition:
        width 160ms ease,
        background 160ms ease,
        opacity 160ms ease;
}

/* =========================================================
   CARRINHO
========================================================= */

.cart-panel {
    transition:
        width 250ms ease,
        padding 250ms ease,
        transform 250ms ease,
        box-shadow 250ms ease;
}

.cart-item {
    animation: cartItemEnter 180ms ease both;
}

@keyframes cartItemEnter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   MENSAGENS E ESTADOS
========================================================= */

.empty-card,
.empty-cart {
    animation: emptyStateEnter 180ms ease both;
}

@keyframes emptyStateEnter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================================================
   FOCO DO TECLADO
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    transition:
        outline-color 120ms ease,
        outline-offset 120ms ease;
}

/* =========================================================
   MOVIMENTO REDUZIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}