/* ============================================================================
   VERTEX CRM — animations.css
   Camada de movimento. Carregada DEPOIS de style.css.

   Regras da casa:
   - Só animamos `transform`, `opacity` e `filter`. Nada de width/top/left.
   - Os tokens (--dur-1/2/3, --ease-spring, --ease-out) vivem em style.css.
     Aqui só os consumimos, com fallback caso o arquivo seja carregado sozinho.
   - As entradas disparam sozinhas quando o elemento entra no DOM. Como o
     main.js redesenha a página inteira a cada rota, isso já dá o stagger sem
     precisar de JS nenhum observando nada.
   - Tudo é desligado em `prefers-reduced-motion` no fim do arquivo.
   ========================================================================== */

:root{
  --dur-0:90ms;
  --ease-spring-out:cubic-bezier(.34,1.42,.64,1);
  --lift-1:-2px;
  --lift-2:-4px;
}

/* ---------------------------------------------------------------------------
   1. KEYFRAMES
   (modalIn / toastIn / toastOut já existem em style.css — não repetir)
   ------------------------------------------------------------------------ */

@keyframes heliosRise{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}
  to  {opacity:1;transform:none}
}

@keyframes heliosFade{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to  {opacity:1;transform:none}
}

@keyframes heliosSlideIn{
  from{opacity:0;transform:translate3d(-10px,0,0)}
  to  {opacity:1;transform:none}
}

/* Sobe girando levemente no eixo X — é o que dá a leitura de profundidade
   nos cards de KPI sem custar nada de GPU. */
@keyframes heliosTilt3D{
  from{opacity:0;transform:perspective(900px) translate3d(0,18px,-40px) rotateX(7deg)}
  to  {opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0)}
}

@keyframes heliosPop{
  0%  {opacity:0;transform:scale(.9)}
  60% {opacity:1;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}
}

@keyframes heliosShimmer{
  from{transform:translate3d(-100%,0,0)}
  to  {transform:translate3d(100%,0,0)}
}

@keyframes heliosPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%    {opacity:1;  transform:scale(1.12)}
}

@keyframes heliosSpin{ to{transform:rotate(360deg)} }

@keyframes heliosShake{
  0%,100%{transform:translate3d(0,0,0)}
  20%    {transform:translate3d(-6px,0,0)}
  40%    {transform:translate3d(5px,0,0)}
  60%    {transform:translate3d(-3px,0,0)}
  80%    {transform:translate3d(2px,0,0)}
}

/* Halo violeta respirando atrás do card de login. */
@keyframes heliosBreathe{
  0%,100%{opacity:.5;  transform:translate3d(0,0,0) scale(1)}
  50%    {opacity:.85; transform:translate3d(0,-12px,0) scale(1.06)}
}

/* ---------------------------------------------------------------------------
   2. ENTRADA DAS PÁGINAS
   ------------------------------------------------------------------------ */

.page-title,
.panel,
.chart,
.table-wrap{
  animation:heliosFade var(--dur-3,520ms) var(--ease-out,cubic-bezier(.16,1,.3,1)) both;
}

/* KPIs sobem em cascata, com a inclinação 3D. */
.kpis > .kpi{
  animation:heliosTilt3D var(--dur-3,520ms) var(--ease-spring,cubic-bezier(.32,.72,0,1)) both;
  transform-origin:50% 100%;
}
.kpis > .kpi:nth-child(1){animation-delay:40ms}
.kpis > .kpi:nth-child(2){animation-delay:90ms}
.kpis > .kpi:nth-child(3){animation-delay:140ms}
.kpis > .kpi:nth-child(4){animation-delay:190ms}
.kpis > .kpi:nth-child(n+5){animation-delay:240ms}

/* Painéis entram depois dos KPIs, para a leitura ir de cima para baixo. */
.panel:nth-of-type(1){animation-delay:120ms}
.panel:nth-of-type(2){animation-delay:180ms}
.panel:nth-of-type(3){animation-delay:240ms}
.panel:nth-of-type(n+4){animation-delay:300ms}

/* Linhas de tabela: escalonadas só nas primeiras — depois disso o atraso
   acumulado viraria espera. */
.table tbody tr{animation:heliosFade var(--dur-2,280ms) var(--ease-out) both}
.table tbody tr:nth-child(1){animation-delay:30ms}
.table tbody tr:nth-child(2){animation-delay:60ms}
.table tbody tr:nth-child(3){animation-delay:90ms}
.table tbody tr:nth-child(4){animation-delay:120ms}
.table tbody tr:nth-child(5){animation-delay:150ms}
.table tbody tr:nth-child(n+6){animation-delay:170ms}

/* Menu lateral entra da esquerda, um item por vez. */
.nav a,.nav button,.nav__item{
  animation:heliosSlideIn var(--dur-2,280ms) var(--ease-out) both;
}
.nav :nth-child(1){animation-delay:60ms}
.nav :nth-child(2){animation-delay:100ms}
.nav :nth-child(3){animation-delay:140ms}
.nav :nth-child(4){animation-delay:180ms}
.nav :nth-child(5){animation-delay:220ms}

/* ---------------------------------------------------------------------------
   3. LOGIN
   ------------------------------------------------------------------------ */

.auth__card{
  animation:heliosRise 620ms var(--ease-spring,cubic-bezier(.32,.72,0,1)) both;
}
.auth__brand  {animation:heliosFade 500ms var(--ease-out) 120ms both}
.auth__title  {animation:heliosFade 500ms var(--ease-out) 180ms both}
.auth__sub    {animation:heliosFade 500ms var(--ease-out) 240ms both}
.auth__card form,
.auth__card-in > *:nth-child(n+4){animation:heliosFade 500ms var(--ease-out) 300ms both}

/* Halo por trás do card. Fica atrás de tudo e não intercepta clique. */
.auth__wrap::before{
  content:'';position:absolute;inset:-18% -12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 40% at 28% 22%, rgba(168,85,247,.34), transparent 70%),
    radial-gradient(42% 38% at 76% 78%, rgba(232,121,249,.26), transparent 72%);
  filter:blur(28px);
  animation:heliosBreathe 9s ease-in-out infinite;
}

/* Erro de credencial: o card treme uma vez. O JS só precisa pôr a classe. */
.auth__card.is-error,
.is-shake{animation:heliosShake 420ms var(--ease-out) both}

/* ---------------------------------------------------------------------------
   4. HOVER / INTERAÇÃO
   ------------------------------------------------------------------------ */

/* Elevação com brilho especular acompanhando o topo do card. */
.kpi,.panel{
  transition:transform var(--dur-2,280ms) var(--ease-spring),
             box-shadow var(--dur-2,280ms) var(--ease-out),
             border-color var(--dur-2,280ms) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .kpi:hover,.panel:hover{
    transform:translate3d(0,var(--lift-2),0);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 28px 56px -18px rgba(0,0,0,.72),
      0 0 0 1px rgba(168,85,247,.16);
  }
  .kpi:hover .kpi__badge{
    transform:translate3d(0,-1px,0) scale(1.06);
    transition:transform var(--dur-2) var(--ease-spring-out);
  }

  /* Botões e itens de menu: leve avanço, sem exagero. */
  .btn:hover,.nav__item:hover{transform:translate3d(0,var(--lift-1),0)}
  .btn:active,.nav__item:active{transform:translate3d(0,0,0) scale(.985)}
}

/* Foco sempre visível — teclado tem que ver onde está. */
:focus-visible{
  outline:2px solid var(--accent,#A855F7);
  outline-offset:2px;
  transition:outline-offset var(--dur-0) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   5. KANBAN (arraste)
   ------------------------------------------------------------------------ */

.kanban-card,.kanban__card{
  transition:transform var(--dur-1,160ms) var(--ease-spring),
             box-shadow var(--dur-2,280ms) var(--ease-out),
             opacity var(--dur-2,280ms) var(--ease-out);
  animation:heliosFade var(--dur-2,280ms) var(--ease-out) both;
}
@media (hover:hover) and (pointer:fine){
  .kanban-card:hover,.kanban__card:hover{transform:translate3d(0,-3px,0)}
}
/* Card levantando da mesa enquanto é arrastado. O `dragend` do main.js tira a
   classe — o app antigo esquecia disso e o card ficava fantasma para sempre. */
.kanban-card.is-dragging,.kanban__card.is-dragging,.dragging{
  opacity:.55;
  transform:perspective(700px) translate3d(0,-6px,26px) rotate(1.6deg) scale(1.02);
  box-shadow:0 26px 46px -14px rgba(0,0,0,.8);
  cursor:grabbing;
}
.kanban-col.is-over,.kanban__col.is-over,.drag-over{
  transition:background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
  box-shadow:inset 0 0 0 1px var(--accent,#A855F7),0 0 28px -8px rgba(168,85,247,.5);
}

/* ---------------------------------------------------------------------------
   6. ESTADOS: carregando, vazio, badges
   ------------------------------------------------------------------------ */

.skeleton{position:relative;overflow:hidden}
.skeleton::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  animation:heliosShimmer 1.25s linear infinite;
}

.spinner,.is-loading::after{animation:heliosSpin .8s linear infinite}

.empty,.empty-state{animation:heliosFade var(--dur-3,520ms) var(--ease-out) both}
.empty svg,.empty-state svg{animation:heliosPulse 3.4s ease-in-out infinite}

.badge,.status-badge{animation:heliosPop var(--dur-2,280ms) var(--ease-spring-out) both}

/* Contador de KPI: leve escala ao assentar o número final. */
.kpi__value.is-settled{animation:heliosPop 340ms var(--ease-spring-out) both}

/* ---------------------------------------------------------------------------
   7. FUNDO WEBGL (scene.js)
   Aparece por fade quando o canvas monta, para não "piscar" na tela.
   ------------------------------------------------------------------------ */

.auth__scene canvas,.app__scene canvas{
  display:block;width:100%;height:100%;
  opacity:0;
  transition:opacity 900ms var(--ease-out);
}
.auth__scene.is-ready canvas,.app__scene.is-ready canvas{opacity:1}

/* ---------------------------------------------------------------------------
   8. MOVIMENTO REDUZIDO
   Respeita a configuração do sistema. O app continua 100% utilizável:
   nada some, tudo apenas aparece no estado final.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .auth__wrap::before{animation:none;opacity:.6}
  .skeleton::after,.empty svg,.empty-state svg{animation:none}
  .kpis > .kpi,.panel,.chart,.table tbody tr,.nav :nth-child(n){
    opacity:1 !important;transform:none !important;
  }
  @media (hover:hover){
    .kpi:hover,.panel:hover,.btn:hover,.nav__item:hover,
    .kanban-card:hover,.kanban__card:hover{transform:none}
  }
  .auth__scene canvas,.app__scene canvas{opacity:1;transition:none}
}