/* ============================================================
   ANIMAÇÕES E CAIXA DE CONFIRMAÇÃO (arquivo só disso)
   ============================================================ */

@keyframes vizzo-sobe {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vizzo-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vizzo-brilho {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}
@keyframes vizzo-pulsa {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* O conteúdo aparece de uma vez, já visível.
   Antes cada parte da tela começava invisível e ia surgindo em fila —
   isso dava a impressão de que a tela "piscava" ao abrir. */
.container > * { animation: none; opacity: 1; }

/* A barra de baixo nunca desaparece nem fica transparente. */
.tabbar { opacity: 1 !important; visibility: visible !important; }

.card, .menu-item { transition: transform .18s ease, box-shadow .18s ease; }
.card:active, .menu-item:active { transform: scale(.985); }

/* Esqueleto de carregamento (enquanto os dados chegam) */
.esqueleto {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(128,128,128,.12) 25%, rgba(128,128,128,.22) 37%, rgba(128,128,128,.12) 63%);
  background-size: 840px 100%;
  animation: vizzo-brilho 1.25s linear infinite;
}
.carregando-texto { animation: vizzo-pulsa 1.2s ease-in-out infinite; }

/* ---------- Caixa de confirmação ---------- */
.confirmacao {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
.confirmacao.aberta { opacity: 1; }
.confirmacao.saindo { opacity: 0; }

.confirmacao-painel {
  width: 100%;
  max-width: 380px;
  background: var(--card, #fff);
  color: var(--text, #16202b);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  transform: translateY(14px) scale(.97);
  transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
.confirmacao.aberta .confirmacao-painel { transform: translateY(0) scale(1); }

.confirmacao-titulo { margin: 0 0 6px; font-size: 1.05rem; }
.confirmacao-texto { margin: 0 0 16px; }
.confirmacao-botoes { display: flex; gap: 10px; }
.confirmacao-botoes .btn { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .container > *, .esqueleto, .carregando-texto, .confirmacao-painel { animation: none !important; transition: none !important; }
}

/* ============================================================
   VIRAR PÁGINA COMO UM LIVRO (deslizar com o dedo)
   ============================================================ */
@keyframes vizzo-folha-dir {
  from { transform: translate3d(100%,0,0); }
  to   { transform: translate3d(0,0,0); }
}
@keyframes vizzo-folha-esq {
  from { transform: translate3d(-100%,0,0); }
  to   { transform: translate3d(0,0,0); }
}

body.livro { overflow-x: hidden; }
main.container.livro-entra-direita { animation: vizzo-folha-dir .28s cubic-bezier(.32,.72,0,1) both; }
main.container.livro-entra-esquerda { animation: vizzo-folha-esq .28s cubic-bezier(.32,.72,0,1) both; }

/* Enquanto o dedo arrasta, a folha ganha só uma sombrinha nas bordas. */
main.container.livro-arrasta {
  box-shadow: 0 10px 40px rgba(0,0,0,.14);
}


/* Sombra da dobra, do lado para onde a página está virando */
.livro-sombra {
  position: fixed;
  top: 0; bottom: 0;
  width: 46px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .28s ease;
  will-change: opacity;
}
.livro-sombra.on { opacity: 1; }
.livro-sombra.esquerda { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent); }
.livro-sombra.direita { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.25), transparent); }

/* ============================================================
   ANIMAÇÃO DA BUSCA E DAS CATEGORIAS
   ============================================================ */
@keyframes vizzo-lupa {
  0%, 100% { transform: translateX(0) rotate(0); }
  50%      { transform: translateX(3px) rotate(12deg); }
}
@keyframes vizzo-barra {
  from { transform: translateX(-100%); }
  to   { transform: translateX(320%); }
}

/* Barrinha correndo em cima da lista enquanto a busca filtra */
.busca-bar { position: relative; }
.busca-bar.buscando::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--brand, #1fc27a), transparent);
  animation: vizzo-barra .9s linear infinite;
}
.busca-bar.buscando .icone-busca,
.busca-bar.buscando::before { animation: vizzo-lupa .7s ease-in-out infinite; }

/* Lista "respirando" enquanto o filtro é aplicado */
#lista.filtrando { opacity: .45; transition: opacity .12s ease; }
#lista { transition: opacity .18s ease; }

/* Categorias: o atalho escolhido cresce e ganha brilho */
.chip { transition: transform .18s cubic-bezier(.2,.9,.3,1.3), background-color .18s ease, color .18s ease; }
.chip:active { transform: scale(.93); }
.chip.on { animation: vizzo-chip-pop .28s cubic-bezier(.2,.9,.3,1.4); }
@keyframes vizzo-chip-pop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.menu-desliza.trocando .chip:not(.on) { opacity: .55; transition: opacity .2s ease; }

/* Campo do CEP: resultado verde quando encontra, vermelho quando não */
.cep-ok { color: var(--brand, #1fc27a); font-weight: 600; }
.cep-erro { color: #d84545; }

/* Confirmação com palavra-chave */
.confirmacao-campo { display: block; margin: 0 0 16px; font-size: .9rem; }
.confirmacao-campo input {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(128,128,128,.35);
  background: transparent;
  color: inherit;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.confirmacao-botoes .btn[disabled] { opacity: .45; }

/* Aviso de conta marcada para exclusão (fica junto do botão excluir) */
.aviso-exclusao {
  border: 1px solid rgba(216,69,69,.4);
  background: rgba(216,69,69,.08);
  border-radius: 14px;
  padding: 14px;
  margin-top: 10px;
  animation: vizzo-sobe .3s ease both;
}
.aviso-exclusao strong { display: block; margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  main.container.livro-entra-direita,
  main.container.livro-entra-esquerda,
  .chip.on,
  .busca-bar.buscando::after { animation: none !important; }
}

/* ============================================================
   FIM DO "PISCA-PISCA" AO ABRIR A PÁGINA
   ------------------------------------------------------------
   Antes o conteúdo nascia invisível (opacity 0) e ia aparecendo:
   isso dava a sensação de a tela inteira piscar toda vez que
   carregava. Agora tudo já nasce visível e no lugar certo.
   ============================================================ */
main.container,
.panel, .item, .card, .grid > *, .container > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none;
}
body.chegando main.container { animation: none !important; }
html, body { background: var(--bg); }