/* =====================================================================
   ANIMAÇÕES & MICROINTERAÇÕES
   Transições de tela, entradas escalonadas e feedback de toque.
   Respeita prefers-reduced-motion.
   ===================================================================== */

/* ---------- Transição de troca de tela ---------- */
.route-transition {
    animation: page-enter .38s ease both;
    will-change: opacity;
}
@keyframes page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Entradas escalonadas (stagger) ---------- */
@keyframes item-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pop-in {
    0%   { opacity: 0; transform: scale(.85); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes slide-up-panel {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header desce suavemente */
.menu-header,
.order-header,
.summary-header,
.product-detail-header,
.categorias-container .titulo,
.app-topbar {
    animation: fade-down .4s ease both;
}
@keyframes fade-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Barra de busca / chips de categoria */
.menu-search { animation: item-rise .45s ease both .05s; }
.category-bar { animation: item-rise .45s ease both .1s; }
.section-title { animation: fade-in .5s ease both .15s; }

/* Cards de produto entram em cascata */
.produtos-grid .menu-product {
    animation: item-rise .45s cubic-bezier(.22, 1, .36, 1) both;
}
.produtos-grid .menu-product:nth-child(1) { animation-delay: .06s; }
.produtos-grid .menu-product:nth-child(2) { animation-delay: .10s; }
.produtos-grid .menu-product:nth-child(3) { animation-delay: .14s; }
.produtos-grid .menu-product:nth-child(4) { animation-delay: .18s; }
.produtos-grid .menu-product:nth-child(5) { animation-delay: .22s; }
.produtos-grid .menu-product:nth-child(6) { animation-delay: .26s; }
.produtos-grid .menu-product:nth-child(7) { animation-delay: .30s; }
.produtos-grid .menu-product:nth-child(8) { animation-delay: .34s; }
.produtos-grid .menu-product:nth-child(n+9) { animation-delay: .38s; }

/* Cards de categoria em cascata */
.categorias-list .categoria-hero {
    animation: item-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
.categorias-list .categoria-hero:nth-child(1) { animation-delay: .08s; }
.categorias-list .categoria-hero:nth-child(2) { animation-delay: .16s; }
.categorias-list .categoria-hero:nth-child(3) { animation-delay: .24s; }
.categorias-list .categoria-hero:nth-child(4) { animation-delay: .32s; }
.categorias-list .categoria-hero:nth-child(n+5) { animation-delay: .40s; }

/* Itens do carrinho / resumo */
.order-items .order-item,
.summary-items .summary-item {
    animation: item-rise .4s ease both;
}
.order-items .order-item:nth-child(1),
.summary-items .summary-item:nth-child(1) { animation-delay: .05s; }
.order-items .order-item:nth-child(2),
.summary-items .summary-item:nth-child(2) { animation-delay: .1s; }
.order-items .order-item:nth-child(3),
.summary-items .summary-item:nth-child(3) { animation-delay: .15s; }
.order-items .order-item:nth-child(n+4),
.summary-items .summary-item:nth-child(n+4) { animation-delay: .2s; }

.order-summary,
.summary-info,
.summary-total,
.order-details,
.tracking-summary,
.tracking-timeline { animation: item-rise .45s ease both .18s; }

/* Itens do drawer do carrinho */
.cart-preview.open .cart-item { animation: item-rise .35s ease both; }
.cart-preview.open .cart-item:nth-child(1) { animation-delay: .04s; }
.cart-preview.open .cart-item:nth-child(2) { animation-delay: .08s; }
.cart-preview.open .cart-item:nth-child(3) { animation-delay: .12s; }
.cart-preview.open .cart-item:nth-child(n+4) { animation-delay: .16s; }
.cart-preview.open .cart-empty { animation: pop-in .4s ease both; }

/* Detalhe do produto */
.product-detail-image { animation: pop-in .5s cubic-bezier(.22, 1, .36, 1) both .05s; }
.product-detail-info { animation: item-rise .45s ease both .15s; }
.product-detail-purchase { animation: item-rise .45s ease both .22s; }
.product-detail-footer { animation: slide-up-centered .4s ease both .28s; }

/* CTA flutuante do carrinho — preserva a centralização horizontal (translateX(-50%)) */
.figma-cart-cta { animation: slide-up-centered .45s cubic-bezier(.22, 1, .36, 1) both .3s; }

/* Footer fixo da tela de pedido/resumo */
.order-footer { animation: slide-up-centered .4s cubic-bezier(.22, 1, .36, 1) both .2s; }

/* Keyframes que mantêm o elemento centralizado no eixo X enquanto sobe */
@keyframes slide-up-centered {
    from { opacity: 0; transform: translateX(-50%) translateY(24px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Pagamento / QR */
.payment-box { animation: pop-in .5s cubic-bezier(.22, 1, .36, 1) both .1s; }
.payment-title { animation: fade-in .5s ease both; }

/* Sucesso */
.success-icon { animation: success-pop .6s cubic-bezier(.34, 1.56, .64, 1) both .1s; }
@keyframes success-pop {
    0%   { opacity: 0; transform: scale(0) rotate(-25deg); }
    60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}
.success-screen h2 { animation: item-rise .5s ease both .25s; }
.success-screen > p:not(.welcome-kicker) { animation: item-rise .5s ease both .32s; }
.order-details { animation-delay: .4s; }

/* ---------- Feedback de toque nos botões ---------- */
.btn,
.btn-adicionar,
.wide,
.summary-confirm,
.summary-back,
.product-detail-add,
.cart-checkout,
.welcome-button,
.pix-actions .btn-adicionar,
.pix-cancelar,
.cat-chip,
.tb-icon,
.back-btn,
.order-trash {
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn-adicionar:active,
.wide:active,
.summary-confirm:active,
.product-detail-add:active,
.cart-checkout:active,
.pix-actions .btn-adicionar:active { transform: scale(.96); }

.back-btn:active,
.tb-icon:active,
.order-trash:active,
.summary-header .icon-button:active { transform: scale(.9); }

/* Ripple genérico em botões principais */
.btn-adicionar,
.wide,
.summary-confirm,
.product-detail-add,
.cart-checkout,
.welcome-button,
.figma-cart-cta {
    position: relative;
    overflow: hidden;
}
.btn-adicionar::after,
.wide::after,
.summary-confirm::after,
.product-detail-add::after,
.cart-checkout::after,
.welcome-button::after,
.figma-cart-cta::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .4);
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.btn-adicionar:active::after,
.wide:active::after,
.summary-confirm:active::after,
.product-detail-add:active::after,
.cart-checkout:active::after,
.welcome-button:active::after,
.figma-cart-cta:active::after {
    animation: ripple .5s ease-out;
}
@keyframes ripple {
    0%   { width: 0; height: 0; opacity: .5; }
    100% { width: 260px; height: 260px; opacity: 0; }
}

/* Stepper de quantidade — pop no clique */
.qty-controls.compact .qty-btn:active,
.order-quantity button:active,
.product-detail-quantity button:active,
.cart-item-qty button:active,
.modal-actions .quant button:active { transform: scale(.85); }

/* Valor da quantidade pulsa quando muda (via animação de key) */
.qty-value,
.order-quantity strong,
.product-detail-quantity span { transition: transform .15s ease; display: inline-block; }

/* Bump ao trocar de valor (elemento recriado via @key) */
.qty-bump { animation: qty-bump .28s cubic-bezier(.34, 1.56, .64, 1) both; display: inline-block; }
@keyframes qty-bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); color: var(--brand); }
    100% { transform: scale(1); }
}

/* Hover mais vivo nos cards */
.menu-product,
.categoria-hero { transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease; }
.menu-product:hover { transform: translateY(-3px); }
.menu-product:active { transform: translateY(-1px) scale(.99); }
.categoria-hero:active { transform: translateY(-1px) scale(.995); }

/* Imagem do produto com leve zoom no hover do card */
.menu-product .produto-image img { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.menu-product:hover .produto-image img { transform: scale(1.06); }

/* Chips: leve subida ao ativar */
.cat-chip:active { transform: scale(.94); }

/* Badge do carrinho já tem pulse; realçamos */
.cart-count { transition: transform .2s ease; }

/* Skeleton shimmer (para estados de carregamento) */
.skeleton {
    position: relative;
    overflow: hidden;
    background: #e9e9ee;
    border-radius: var(--r-sm);
}
.skeleton::after {
    content: '';
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Spinner reutilizável */
.spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast com leve bounce */
.toast { animation: toast-bounce .35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes toast-bounce {
    0%   { opacity: 0; transform: translate(-50%, 16px); }
    70%  { opacity: 1; transform: translate(-50%, -3px); }
    100% { transform: translate(-50%, 0); }
}

/* ---------- Acessibilidade: reduzir movimento ----------
   Reduz animações decorativas, MAS preserva os indicadores de
   carregamento (spinners/barras), que são funcionais. */
@media (prefers-reduced-motion: reduce) {
    *:not(.spinner):not(.boot-spinner):not(.loading-cup),
    *:not(.spinner):not(.boot-spinner):not(.loading-cup)::before,
    *:not(.spinner):not(.boot-spinner):not(.loading-cup)::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    /* Indicadores de carregamento continuam girando/animando */
    .spinner { animation: spin .8s linear infinite !important; }
    .boot-spinner { animation: boot-spin .8s linear infinite !important; }
    .loading-cup { animation: loading-cup-pulse 1.4s ease-in-out infinite !important; }
    .loading-line::after { animation: loading-progress 1.4s ease-in-out infinite !important; }
}