/* ============================================================
   CIUTEK - MOVIMENTO
   ------------------------------------------------------------
   O tema ja tinha uma escala de movimento escrita em
   ciutek-tokens.css - duracoes de 100ms a 420ms e tres curvas
   proprias. So que quase ninguem usava: das 109 transicoes do
   tema, 159 pedacos pediam a curva "ease" padrao do navegador e
   havia 16 duracoes diferentes espalhadas.

   Este arquivo nao inventa um sistema novo. Ele faz o sistema
   que ja existia valer em todo lugar, e acrescenta o movimento
   que faltava: resposta ao toque, elevacao no cartao, entrada
   dos menus e um anel de foco unico.

   Carregado por ultimo, so acrescenta. Quem pede menos
   movimento no sistema operacional recebe tudo parado.
   ============================================================ */

/* ------------------------------------------------------------
   1. A CURVA DA CASA EM TUDO

   Mudar so a curva nao mexe em tamanho, posicao nem cor de
   nada: muda apenas o jeito de chegar. E o passo de maior
   efeito e menor risco do refino inteiro.
   ------------------------------------------------------------ */
body.ctk-app *,
body.ctk-app *::before,
body.ctk-app *::after {
  transition-timing-function: var(--ck-curva, cubic-bezier(.22, .61, .36, 1)) !important;
}

/* o que entra em cena usa a curva de entrada */
body.ctk-app .dropdown-menu,
body.ctk-app .ck-janela__caixa,
body.ctk-app .ck-abre__caixa,
body.ctk-app .ck-partilha,
body.ctk-app .modal-content,
body.ctk-app .popover {
  transition-timing-function: var(--ck-curva-entrada, cubic-bezier(.16, .84, .44, 1)) !important;
}

/* ------------------------------------------------------------
   2. RESPOSTA AO TOQUE

   Todo botao afunda de leve quando pressionado. E o retorno
   que faltava: hoje o clique nao devolve nada ao dedo.
   ------------------------------------------------------------ */
body.ctk-app button,
body.ctk-app .btn,
body.ctk-app .ck-pub__acao,
body.ctk-app .ck-pub__icone,
body.ctk-app .ck-lado,
body.ctk-app .ck-menu__link,
body.ctk-app .ck-carrossel__seta,
body.ctk-app .ck-carrossel__ponto {
  transition-property: transform, opacity, background-color, color, box-shadow, border-color;
  transition-duration: var(--ck-mov-rapido, 160ms);
}
body.ctk-app button:active,
body.ctk-app .btn:active,
body.ctk-app .ck-pub__acao:active,
body.ctk-app .ck-lado:active,
body.ctk-app .ck-menu__link:active {
  transform: scale(.972);
  transition-duration: var(--ck-mov-instante, 100ms);
}
body.ctk-app .ck-carrossel__seta:active { transform: translateY(-50%) scale(.9); }

/* ------------------------------------------------------------
   3. ELEVACAO NO CARTAO

   So onde existe ponteiro. No celular nao ha "passar por cima",
   e uma sombra que nunca aparece so pesa.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  body.ctk-app .ck-lado,
  body.ctk-app .ck-grade__celula {
    transition-property: transform, box-shadow, background-color, border-color;
    transition-duration: var(--ck-mov-padrao, 220ms);
  }
  body.ctk-app .ck-lado:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(60, 24, 140, .18);
  }
  body.ctk-app .ck-grade__celula:hover { transform: scale(1.015); }
  body.ctk-app .ck-top10__item:hover { transform: translateY(-2px); }
}

/* ------------------------------------------------------------
   4. UM UNICO ANEL DE FOCO

   Quem navega pelo teclado precisa ver onde esta. Hoje cada
   canto mostra uma coisa diferente, ou nada.
   ------------------------------------------------------------ */
body.ctk-app a:focus-visible,
body.ctk-app button:focus-visible,
body.ctk-app input:focus-visible,
body.ctk-app textarea:focus-visible,
body.ctk-app select:focus-visible,
body.ctk-app [tabindex]:focus-visible {
  outline: 2px solid rgba(154, 107, 255, .9);
  outline-offset: 2px;
  border-radius: var(--ck-r-int, 10px);
}

/* ------------------------------------------------------------
   5. ENTRADA DOS MENUS

   Menu que aparece de estalo parece defeito. Este sobe 6px e
   revela, no tempo padrao da casa.
   ------------------------------------------------------------ */
@keyframes ck-mov-sobe {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ck-mov-revela {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.ctk-app .dropdown.open > .dropdown-menu,
body.ctk-app .dropdown-menu.open,
body.ctk-app .notifications-dropdown[style*="block"] {
  animation: ck-mov-sobe var(--ck-mov-padrao, 220ms) var(--ck-curva-entrada, cubic-bezier(.16, .84, .44, 1)) both;
  transform-origin: top center;
}

/* ------------------------------------------------------------
   6. A JANELA DA PUBLICACAO

   O fundo escurece antes; a caixa chega logo depois. Duas
   camadas com tempos proprios dao a sensacao de profundidade
   que uma animacao unica nao da.
   ------------------------------------------------------------ */
body.ctk-app .ck-janela__fundo,
body.ctk-app .ck-abre__fundo {
  animation: ck-mov-revela var(--ck-mov-rapido, 160ms) var(--ck-curva, cubic-bezier(.22, .61, .36, 1)) both;
}
@keyframes ck-mov-caixa {
  from { opacity: 0; transform: translateY(12px) scale(.986); }
  to   { opacity: 1; transform: none; }
}
body.ctk-app .ck-janela__caixa,
body.ctk-app .ck-abre__caixa {
  animation: ck-mov-caixa var(--ck-mov-painel, 300ms) var(--ck-curva-entrada, cubic-bezier(.16, .84, .44, 1)) 40ms both;
}
body.ctk-app .ck-janela__fechar,
body.ctk-app .ck-abre__fechar {
  transition-duration: var(--ck-mov-rapido, 160ms);
}
body.ctk-app .ck-janela__fechar:hover,
body.ctk-app .ck-abre__fechar:hover { transform: rotate(90deg); }

/* ------------------------------------------------------------
   7. ACOES DA PUBLICACAO

   O icone cresce um fio ao passar e afunda ao tocar. Nada de
   salto: e uma publicacao, nao um brinquedo.
   ------------------------------------------------------------ */
body.ctk-app .ck-pub__icone {
  transition-property: transform, color, background-color, opacity;
  transition-duration: var(--ck-mov-rapido, 160ms);
}
@media (hover: hover) and (pointer: fine) {
  body.ctk-app .ck-pub__acao:hover .ck-pub__icone { transform: scale(1.09); }
}
body.ctk-app .ck-pub__acao:active .ck-pub__icone { transform: scale(.9); }

body.ctk-app .ck-pub__num {
  transition: opacity var(--ck-mov-rapido, 160ms), transform var(--ck-mov-rapido, 160ms);
}

/* ------------------------------------------------------------
   8. PONTOS DO CARROSSEL

   O ponto ativo estica em vez de so mudar de cor: mostra a
   posicao sem precisar contar.
   ------------------------------------------------------------ */
body.ctk-app .ck-carrossel__ponto {
  transition-property: width, background-color, transform, opacity;
  transition-duration: var(--ck-mov-padrao, 220ms);
}
body.ctk-app .ck-carrossel__ponto--ativo {
  width: 18px !important;
  border-radius: 999px !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   9. CAMPOS DE TEXTO

   O contorno acende no tempo rapido, sem piscar.
   ------------------------------------------------------------ */
body.ctk-app input,
body.ctk-app textarea,
body.ctk-app select {
  transition-property: border-color, background-color, box-shadow, color;
  transition-duration: var(--ck-mov-rapido, 160ms);
}

/* ------------------------------------------------------------
   10. QUEM PEDE MENOS MOVIMENTO

   Uma guarda para toda a plataforma. O conteudo continua
   inteiro: so as animacoes param.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.ctk-app *,
  body.ctk-app *::before,
  body.ctk-app *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  body.ctk-app button:active,
  body.ctk-app .btn:active,
  body.ctk-app .ck-lado:hover,
  body.ctk-app .ck-grade__celula:hover,
  body.ctk-app .ck-pub__acao:active .ck-pub__icone { transform: none !important; }
}