/* ==========================================================
   CIUTEK - CONTORNO POR NIVEL

   Uma regra so, valendo em toda a plataforma: quem tem selo
   recebe o contorno da cor do selo, e quem nao tem recebe um
   aro roxo claro e fino. Selo azul, contorno azul. Selo roxo,
   contorno roxo. Selo dourado, contorno dourado.

   O anel e desenhado FORA da foto, num ::before com mascara:
   o fundo pinta o circulo cheio e a mascara recorta o miolo,
   sobrando so a borda. E o unico jeito de por um degrade em
   volta de uma foto sem mexer no tamanho dela - o que importa
   aqui, porque a mesma classe cai em foto de 28px do comentario
   e na de 150px do perfil.

   As cores e as medidas saem de variaveis para o painel do
   administrador poder mudar tudo sem tocar neste arquivo.
   ========================================================== */

:root{
  --ck-ct-traco: 2px;
  --ck-ct-respiro: 2px;
  --ck-ct-tempo: 6s;

  --ck-ct-azul: conic-gradient(from 0deg, #1f4fd8, #4aa8ff, #a8e0ff, #6fc4ff, #4aa8ff, #1f4fd8);
  --ck-ct-roxo: conic-gradient(from 0deg, #6d21db, #b98cff, #ffffff, #c9a5ff, #9a5cf5, #f3ecff, #7a41f0, #6d21db);
  --ck-ct-ouro: conic-gradient(from 0deg, #7d5606, #e8bd52, #fff3c4, #ffd97a, #bd8a14, #fff8dd, #e8bd52, #7d5606);

  /* usuario comum: roxo mais claro, fino, parado */
  --ck-ct-comum: rgba(154, 107, 255, .38);
  --ck-ct-comum-traco: 1.5px;
  --ck-ct-comum-respiro: 1.5px;
}

/* ---------- o aro ---------- */
.ctk-app .ck-ct{ position: relative; }

.ctk-app .ck-ct::before{
  content: "";
  position: absolute;
  inset: calc(-1 * (var(--ck-ct-respiro) + var(--ck-ct-traco)));
  border-radius: 50%;
  padding: var(--ck-ct-traco);
  background: var(--ck-ct-cor, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* ---------- os quatro niveis ---------- */
.ctk-app .ck-ct--azul{ --ck-ct-cor: var(--ck-ct-azul); }
.ctk-app .ck-ct--roxo{ --ck-ct-cor: var(--ck-ct-roxo); }
.ctk-app .ck-ct--ouro{ --ck-ct-cor: var(--ck-ct-ouro); }

/* sem selo: aro parado, sem brilho e sem giro - de proposito.
   O contorno com efeito e o que distingue quem tem selo. */
.ctk-app .ck-ct--comum{
  --ck-ct-cor: var(--ck-ct-comum);
  --ck-ct-traco: var(--ck-ct-comum-traco);
  --ck-ct-respiro: var(--ck-ct-comum-respiro);
}

/* ---------- o efeito circular ----------
   So os tres niveis com selo giram. O degrade e conico, entao
   girar o proprio aro faz a luz correr em volta da foto. */
@keyframes ck-ct-gira{ to{ transform: rotate(360deg); } }

.ctk-app .ck-ct--azul::before,
.ctk-app .ck-ct--roxo::before,
.ctk-app .ck-ct--ouro::before{
  animation: ck-ct-gira var(--ck-ct-tempo) linear infinite;
}
.ctk-app .ck-ct--roxo{ --ck-ct-tempo: 5s; }
.ctk-app .ck-ct--ouro{ --ck-ct-tempo: 4.2s; }

/* o administrador pode desligar o giro no painel */
.ctk-app.ck-ct-parado .ck-ct::before{ animation: none !important; }

/* quem pediu menos movimento no aparelho tem o pedido respeitado */
@media (prefers-reduced-motion: reduce){
  .ctk-app .ck-ct::before{ animation: none !important; }
}

/* ---------- tamanhos ----------
   A mesma classe cai em foto de 28px e em foto de 150px. Um traco
   de 2px some numa e engorda a outra, entao o JS mede a foto e
   marca a faixa. */
.ctk-app .ck-ct--mini{ --ck-ct-traco: 1.5px; --ck-ct-respiro: 1.5px; }
.ctk-app .ck-ct--mini.ck-ct--comum{ --ck-ct-traco: 1px; --ck-ct-respiro: 1px; }
.ctk-app .ck-ct--grande{ --ck-ct-traco: 3px; --ck-ct-respiro: 4px; }
.ctk-app .ck-ct--grande.ck-ct--comum{ --ck-ct-traco: 2px; --ck-ct-respiro: 3px; }

@media (max-width: 767px){
  .ctk-app .ck-ct--grande{ --ck-ct-traco: 2px; --ck-ct-respiro: 3px; }
}

/* ---------- convivencia ----------
   1. O anel do Story ja desenha o proprio aro na mesma foto. Onde
      ele estiver, o contorno de nivel sai de cena para nao virar
      dois circulos concentricos disputando a mesma borda.
   2. O feed tem um anel proprio, mais antigo e afinado ao pixel
      (.ck-anel, no ciutek-visor.css). Onde ele age, este aqui nao
      entra - quem manda la continua sendo aquele.
   3. Fotos dentro de um bloco que corta o que passa da borda nao
      recebem aro: ele seria cortado pela metade. */
.ctk-app .wow_post_usr_ava_active .ck-ct::before,
.ctk-app .ck-ct.wow_post_usr_ava_active::before,
.ctk-app .ck-ct.ck-anel::before{ display: none !important; }

/* ---------- modo claro ----------
   No bege o roxo translucido do usuario comum quase some. */
html[data-ck-tema~="claro"] .ctk-app .ck-ct--comum,
html.ck-claro .ctk-app .ck-ct--comum{
  --ck-ct-cor: rgba(101, 40, 212, .34);
}