/* ============================================================================
   animacoes.css — Animações compartilhadas do painel Impulso.

   Base: técnica "Upload File Animations" —
   1) A prévia do arquivo É a barra de progresso: uma cópia "fantasma"
      escurecida fica por baixo e a cópia real é descoberta por clip-path
      exatamente até onde os bytes chegaram (variável --p, de 0 a 1).
   2) Cada arquivo solto VOA do ponto do drop até seu lugar na fila
      (Web Animations API com easing de mola — ver animacoes.js).

   Tudo aqui respeita prefers-reduced-motion e usa somente CSS/JS nativos.
   ========================================================================= */

/* registrada -> INTERPOLA (permite transição suave do progresso) */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* --------------------------------------------------------------------------
   1. A prévia É a barra (imagens: miniatura fantasma + real por clip-path)
   ------------------------------------------------------------------------- */
.file-preview {
  position: relative;
  width: 39px;
  height: 39px;
  overflow: hidden;
  border-radius: 10px;
  background: #1c2740;
  transition: --p .25s linear;
}
.file-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a escura, que "ainda não chegou" */
.file__img--ghost {
  filter: grayscale(1) brightness(.32);
}

/* ...e a real, descoberta exatamente até onde os bytes chegaram */
.file__img--live {
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0);
}

/* --------------------------------------------------------------------------
   2. Variante para linhas sem miniatura (PDFs): um véu cobre a parte que
      ainda não subiu e encolhe da esquerda para a direita conforme --p.
   ------------------------------------------------------------------------- */
.file-row--enviando {
  position: relative;
  transition: --p .2s linear;
}
.file-row--enviando::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(247, 248, 251, .78);
  backdrop-filter: grayscale(1);
  clip-path: inset(0 0 0 calc(var(--p) * 100%));
  pointer-events: none;
}
.file-row--enviando .file-type {
  transition: filter .2s;
}

/* --------------------------------------------------------------------------
   3. Entradas em cascata (derivadas do mesmo movimento de "chegada")
   ------------------------------------------------------------------------- */
@keyframes anim-surgir {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
}

/* Painel analítico: KPIs e cartões de gráfico surgem escalonados no load */
.analytics-kpis article,
.analytics-grid > article,
.operation-grid .operation-card,
.metrics article,
.summary-grid article,
.files-hero-badges span {
  animation: anim-surgir .5s cubic-bezier(.22, 1, .36, 1) backwards;
}
.analytics-kpis article:nth-child(1), .analytics-grid > article:nth-child(1),
.operation-grid .operation-card:nth-child(1), .metrics article:nth-child(1),
.summary-grid article:nth-child(1), .files-hero-badges span:nth-child(1) { animation-delay: .03s; }
.analytics-kpis article:nth-child(2), .analytics-grid > article:nth-child(2),
.operation-grid .operation-card:nth-child(2), .metrics article:nth-child(2),
.summary-grid article:nth-child(2), .files-hero-badges span:nth-child(2) { animation-delay: .07s; }
.analytics-kpis article:nth-child(3), .analytics-grid > article:nth-child(3),
.operation-grid .operation-card:nth-child(3), .metrics article:nth-child(3),
.summary-grid article:nth-child(3), .files-hero-badges span:nth-child(3) { animation-delay: .11s; }
.analytics-kpis article:nth-child(4), .analytics-grid > article:nth-child(4),
.operation-grid .operation-card:nth-child(4), .metrics article:nth-child(4),
.summary-grid article:nth-child(4) { animation-delay: .15s; }
.analytics-kpis article:nth-child(5), .analytics-grid > article:nth-child(5),
.operation-grid .operation-card:nth-child(5) { animation-delay: .19s; }
.analytics-kpis article:nth-child(6), .analytics-grid > article:nth-child(6),
.operation-grid .operation-card:nth-child(6) { animation-delay: .23s; }
.analytics-kpis article:nth-child(7), .analytics-grid > article:nth-child(7),
.operation-grid .operation-card:nth-child(7) { animation-delay: .27s; }
.analytics-kpis article:nth-child(8), .analytics-grid > article:nth-child(8),
.operation-grid .operation-card:nth-child(8) { animation-delay: .31s; }
.analytics-grid > article:nth-child(9),
.operation-grid .operation-card:nth-child(9) { animation-delay: .35s; }
.operation-grid .operation-card:nth-child(10) { animation-delay: .39s; }
.operation-grid .operation-card:nth-child(11) { animation-delay: .43s; }

/* Cartão de conclusão da central de arquivos "pousa" ao aparecer */
.completion-card {
  animation: anim-surgir .55s cubic-bezier(.22, 1.25, .36, 1) backwards;
}

/* --------------------------------------------------------------------------
   4. Microinterações globais (mesma família de movimento)
   ------------------------------------------------------------------------- */
/* pressionar botões dá resposta física imediata */
.button:active:not(:disabled),
.process-button:active:not(:disabled),
.operation-card:active,
.file-actions button:active,
button.primary:active:not(:disabled),
button.secondary:active:not(:disabled) {
  transform: scale(.97);
}

/* chips de filtro pulam para dentro */
@keyframes anim-chip {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.9);
  }
  60% {
    transform: translateY(-1px) scale(1.02);
  }
}
.filter-chip {
  animation: anim-chip .3s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* toast entra com a mesma mola (sobrepõe a transição linear anterior) */
#tool-toast {
  transition: opacity .22s, transform .38s cubic-bezier(.34, 1.45, .5, 1);
}
#tool-toast.show {
  transform: translateY(0) scale(1);
}

/* zona de soltura reage ao arrasto com pulso convidativo */
@keyframes anim-pulso {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(var(--brand-secondary-rgb), .16);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--brand-secondary-rgb), .07);
  }
}
.file-dropzone.dragging,
.project-dropzone.arrastando {
  animation: anim-pulso 1.1s ease-in-out infinite;
}
.file-dropzone.dragging .dropzone-symbol,
.project-dropzone.arrastando .project-drop-icon {
  transform: translateY(-3px) scale(1.08);
  transition: transform .25s cubic-bezier(.34, 1.45, .5, 1);
}

/* anexos genéricos (avatar, logomarca, documentos): reconhece a escolha */
@keyframes anim-confirmar {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
.anim-arquivo-escolhido {
  animation: anim-confirmar .4s cubic-bezier(.34, 1.45, .5, 1);
}

/* prévia de foto/logomarca revelada conforme a leitura local dos bytes */
.anim-revelar-imagem {
  position: relative;
  transition: --p .2s linear;
}
.anim-revelar-imagem img {
  clip-path: inset(0 0 calc((1 - var(--p)) * 100%) 0);
}

/* a prévia do avatar ocupa o círculo inteiro do perfil */
#profile-preview .file-preview {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   5. Acessibilidade: com movimento reduzido, nada voa nem pulsa
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .analytics-kpis article,
  .analytics-grid > article,
  .operation-grid .operation-card,
  .metrics article,
  .summary-grid article,
  .files-hero-badges span,
  .completion-card,
  .filter-chip,
  .file-dropzone.dragging,
  .project-dropzone.arrastando,
  .anim-arquivo-escolhido {
    animation: none;
  }
  .file-preview,
  .file-row--enviando,
  .anim-revelar-imagem {
    transition: none;
  }
  #tool-toast {
    transition: opacity .2s;
  }
  .button:active:not(:disabled),
  .process-button:active:not(:disabled),
  .operation-card:active,
  .file-actions button:active,
  button.primary:active:not(:disabled),
  button.secondary:active:not(:disabled) {
    transform: none;
  }
}