/* ============================================================
   site_v4_animacoes.css
   ------------------------------------------------------------
   Animações (keyframes) e transições do site v4.
   Todas as transições suaves e efeitos visuais centralizados
   aqui para facilitar manutenção (mantém o `site_v4.css` apenas
   com a estrutura visual).
   ============================================================ */

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

/* Fade-in suave (entrada de cards/elementos) */
@keyframes v4FadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade-in com escala (uso em badges e botões pop) */
@keyframes v4FadeInScale {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Spin (loaders) */
@keyframes v4Spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pulse (textos discretos de loading) */
@keyframes v4Pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Slide down (dropdowns, faixas) */
@keyframes v4SlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide up (modais aparecem por baixo em mobile) */
@keyframes v4SlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Status "Aberto" — bolinha verde piscando suavemente */
@keyframes v4StatusBlink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Banner do hero — fade entre slides em loop */
@keyframes v4HeroFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Tooltip do WhatsApp (entra suavemente da direita) */
@keyframes v4WppTooltipIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Anel pulsante do botão WhatsApp (efeito "ping" do Tailwind) */
@keyframes v4WppPing {
    0%   { transform: scale(1);    opacity: 0.65; }
    75%  { transform: scale(1.8);  opacity: 0;    }
    100% { transform: scale(1.8);  opacity: 0;    }
}

/* Entrada do botão WhatsApp com bounce (cubic-bezier "elástico") */
@keyframes v4WppBounceIn {
    0%   { transform: scale(0)  translateY(20px); opacity: 0; }
    60%  { transform: scale(1.1) translateY(0);   opacity: 1; }
    100% { transform: scale(1)   translateY(0);   opacity: 1; }
}

/* ============================================================
   CLASSES UTILITÁRIAS (animações reutilizáveis)
   ============================================================ */

.v4-animate-fade-in       { animation: v4FadeIn       0.35s ease forwards; }
.v4-animate-fade-in-scale { animation: v4FadeInScale  0.30s ease forwards; }
.v4-animate-spin          { animation: v4Spin         1s linear infinite; }
.v4-animate-pulse         { animation: v4Pulse        2s ease-in-out infinite; }
.v4-animate-slide-down    { animation: v4SlideDown    0.25s ease forwards; }

/* ============================================================
   TRANSIÇÕES BASE DOS COMPONENTES
   ------------------------------------------------------------
   Cada componente possui sua transição centralizada aqui para
   manter o site_v4.css focado em layout/cores.
   ============================================================ */

/* Links genéricos */
.v4-body a {
    transition: opacity 0.2s ease, color 0.2s ease;
}

/* Botão de quantidade */
.v4-qtd-btn {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.v4-qtd-btn:active:not(:disabled) {
    transform: scale(0.92);
}

/* Pills de categoria */
.v4-cat-pill {
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease,
                box-shadow 0.25s ease, border-color 0.25s ease;
}
.v4-cat-pill.active {
    transform: scale(1.05);
}

/* Cards de produto: hover com elevação */
.v4-produto-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    animation: v4FadeIn 0.4s ease forwards;
}
.v4-produto-card:hover {
    transform: translateY(-3px);
}
.v4-produto-card .v4-produto-img-link img {
    transition: transform 0.5s ease;
}
.v4-produto-card:hover .v4-produto-img-link img {
    transform: scale(1.06);
}

/* Badge do carrinho aparece com pop */
.v4-badge-carrinho {
    animation: v4FadeInScale 0.25s ease forwards;
}

/* Botão "Adicionar" tem leve scale ao clicar */
.v4-btn-adicionar,
.v4-btn-detalhe-adicionar {
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.v4-btn-adicionar:active,
.v4-btn-detalhe-adicionar:active {
    transform: scale(0.96);
}

/* Hover com escala (utilitário aplicado em botões importantes) */
.v4-scale-hover {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.2s ease;
}
.v4-scale-hover:hover {
    transform: scale(1.02);
}
.v4-scale-hover:active {
    transform: scale(0.97);
}

/* Botão Visualizar */
.v4-btn-visualizar {
    transition: background 0.15s ease, color 0.15s ease;
}

/* Hero — slides com transição de opacidade (fade em loop) */
.v4-hero-slide {
    transition: opacity 1.2s ease-in-out;
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.v4-hero-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Dots do hero */
.v4-hero-dot {
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}

/* Status da loja (Aberto pisca discretamente) */
.v4-loja-aberto .v4-status-dot {
    animation: v4StatusBlink 2.4s ease-in-out infinite;
}

/* Loader spinner (dual ring) — herda animação base */
.v4-spinner::before { animation: v4Spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.v4-spinner::after  { animation: v4Spin 1.2s linear infinite reverse; }

/* WhatsApp flutuante: hover faz pop, tooltip entra suave */
.v4-whatsapp-btn {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.v4-whatsapp-btn:hover {
    transform: scale(1.1);
}
.v4-whatsapp-tooltip {
    animation: v4WppTooltipIn 0.3s ease forwards;
}

/* Botões de paginação */
.v4-paginacao-btn {
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease;
}
.v4-paginacao-btn:active:not(:disabled):not(.active) {
    transform: scale(0.95);
}

/* Galeria de detalhe: troca de imagem por opacidade */
.v4-detalhe-img {
    transition: opacity 0.4s ease;
    opacity: 0;
    position: absolute;
    inset: 0;
}
.v4-detalhe-img.active {
    opacity: 1;
}

/* Botão "Voltar" tem leve translate à esquerda no hover */
.v4-btn-voltar,
.v4-carrinho-voltar {
    transition: color 0.2s ease, gap 0.2s ease, transform 0.2s ease;
}
.v4-btn-voltar:hover,
.v4-carrinho-voltar:hover {
    transform: translateX(-4px);
}

/* Item do carrinho aparece com fade */
.v4-carrinho-item {
    animation: v4FadeIn 0.3s ease forwards;
    transition: box-shadow 0.25s ease;
}

/* SweetAlert customizado */
.v4-swal { border-radius: 1rem !important; }