/* O painel vivo no site (dentro do shadow DOM, depois do painel.css).
 * 1. O pedaço do produto fora da tela cheia: sem moldura, nada fixo, nada com a altura da janela.
 * 2. Os estados que o site.js liga em loop: rolo de número, troca deslizando, realce, cursor, campo em
 *    foco, linhas que saem da fila, etapas do rito que acendem.
 * Sem JavaScript ou com movimento reduzido, o pedaço aparece parado, no estado real da vitrine.
 * Vocabulário (o mesmo do vídeo): uma curva, cascata, número que rola, valor que troca deslizando para
 * cima, cursor de seta preta com contorno branco. */

:host {
  display: block;
  --c: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- 1. fora da tela cheia ---------- */
.mk-root {
  position: relative;
  min-height: 0;
  background: transparent;
}
.so-pedaco {
  position: relative;
  min-height: 0;
  background: transparent;
  transition:
    transform 0.55s var(--c),
    opacity 0.3s var(--c);
}
.so-pedaco .mk-content {
  padding: 0;
}
.so-pedaco .mk-form {
  margin: 0;
  max-width: none;
}
:host(.reinicia) .so-pedaco {
  opacity: 0;
}

/* ---------- 2. a entrada do Início (primeira vez) ---------- */
@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
:host(.espera:not(.anima)) :is(.mk-page-head, .mk-inicio-aguardam, .mk-inicio-familias, .mk-inicio-ultimos, .mk-inicio-ato) {
  opacity: 0;
}
:host(.anima) :is(.mk-page-head, .mk-inicio-aguardam, .mk-inicio-familias, .mk-inicio-ultimos, .mk-inicio-ato) {
  animation: sobe 0.6s var(--c) var(--t, 0s) both;
}
.mk-inicio-aguardam {
  --t: 0.15s;
}
.mk-inicio-familias {
  --t: 0.3s;
}
.mk-inicio-ultimos {
  --t: 0.45s;
}
.mk-inicio-ato {
  --t: 0.6s;
}
.mk-inicio-ato + .mk-inicio-ato {
  --t: 0.68s;
}
.mk-inicio-ato + .mk-inicio-ato + .mk-inicio-ato {
  --t: 0.76s;
}
.mk-inicio-ato + .mk-inicio-ato + .mk-inicio-ato + .mk-inicio-ato {
  --t: 0.84s;
}
.mk-inicio-ato + .mk-inicio-ato + .mk-inicio-ato + .mk-inicio-ato + .mk-inicio-ato {
  --t: 0.92s;
}

/* ---------- o número rola até o valor e volta a rolar quando muda ---------- */
.rolos {
  display: none;
}
:host(.espera) .rolo-valor {
  display: none;
}
:host(.espera) .rolos {
  display: inline-flex;
}
.rolo {
  display: inline-block;
  height: 1.1em;
  line-height: 1.1em;
  overflow: hidden;
  vertical-align: top;
}
.rolo-faixa {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--d) * -1.1em));
  transition: transform 0.6s var(--c);
}
.rolo-faixa span {
  height: 1.1em;
}
:host(.espera:not(.anima)) .rolo-faixa {
  transform: none;
}

/* ---------- a troca deslizando para cima (selo, texto do botão) ---------- */
@keyframes anel {
  from {
    box-shadow: 0 0 0 0 rgba(29, 92, 59, 0.35);
  }
  to {
    box-shadow: 0 0 0 10px rgba(29, 92, 59, 0);
  }
}
.troca {
  display: inline-grid;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 999px;
}
.troca > * {
  grid-area: 1 / 1;
  transition:
    transform 0.3s var(--c),
    opacity 0.3s var(--c);
}
.troca-depois {
  transform: translateY(110%);
  opacity: 0;
}
.troca.trocado .troca-antes {
  transform: translateY(-110%);
  opacity: 0;
}
.troca.trocado .troca-depois {
  transform: none;
  opacity: 1;
}
.troca.anel .troca-depois {
  animation: anel 0.8s var(--c) 0.25s;
}

/* ---------- realce, cursor, foco e clique ---------- */
.realcado {
  background-color: var(--muted) !important;
}
.mk-inicio-aguarda,
.mk-inicio-ato,
.mk-tabela tr {
  transition: background-color 0.3s var(--c);
}
@keyframes onda {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}
.cursor-site {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.55s var(--c),
    opacity 0.25s var(--c);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l13 8.2-5.6 1.2 3.3 6.3-2.6 1.4-3.3-6.3L5 18z' fill='%23141513' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.cursor-site.ve {
  opacity: 1;
}
.cursor-site.parado {
  transition: none;
}
.cursor-site::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(29, 92, 59, 0.3);
  opacity: 0;
}
.cursor-site.clica::before {
  animation: onda 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.mk-field :is(input, select).foco,
.mk-busca.foco {
  outline: 3px solid var(--mk-verde);
  outline-offset: 0;
  border-color: var(--mk-verde);
}
.apertado {
  transform: scale(0.96);
}
.mk-btn {
  transition: transform 0.15s var(--c);
}

/* ---------- a fila no cartão ---------- */
/* A tabela de sete colunas do painel recortada no destinatário, no processo, na situação e na
   ação (o próximo passo). O cartão é estreito em qualquer largura de tela, então os arranjos de 4 colunas e de
   cartões, pensados para a página inteira, não entram aqui. */
@media (min-width: 721px) {
  .so-pedaco .mk-tabela-wrap {
    overflow: hidden;
  }
  .so-pedaco .mk-tabela {
    display: table !important;
    width: 100%;
  }
  .so-pedaco .mk-tabela thead {
    display: table-header-group !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
  }
  .so-pedaco .mk-tabela tbody {
    display: table-row-group !important;
  }
  .so-pedaco .mk-tabela tr {
    display: table-row !important;
  }
  .so-pedaco .mk-tabela :is(td, th) {
    display: table-cell !important;
  }
  .so-pedaco .mk-tabela :is(td, th):is([data-col='numero'], [data-col='ato'], [data-col='criado']) {
    display: none !important;
  }
}
.so-pedaco .mk-tabela tr.sumiu {
  display: none !important;
}
.so-pedaco .mk-tabela tr {
  transition:
    opacity 0.25s var(--c),
    background-color 0.3s var(--c);
}
.so-pedaco .mk-tabela tr {
  transition:
    opacity 0.2s var(--c),
    transform 0.2s var(--c),
    background-color 0.3s var(--c);
}
.so-pedaco .mk-tabela tr.fora {
  opacity: 0;
  transform: translateY(-4px);
}
.mk-chip {
  transition:
    background-color 0.25s var(--c),
    color 0.25s var(--c),
    border-color 0.25s var(--c);
}

/* ---------- o rito e a certidão ---------- */
.mk-no,
.mk-no-marca,
.mk-no-titulo {
  transition:
    background-color 0.35s var(--c),
    border-color 0.35s var(--c),
    color 0.35s var(--c),
    box-shadow 0.35s var(--c);
}
.so-pedaco .mk-certidao {
  margin-top: 16px;
  transition:
    opacity 0.5s var(--c),
    transform 0.5s var(--c);
}
.so-pedaco .mk-certidao.escondida {
  opacity: 0;
  transform: translateY(14px);
}

/* ---------- a verificação: parte por parte ---------- */
[data-bloco] {
  transition:
    opacity 0.45s var(--c),
    transform 0.45s var(--c),
    clip-path 0.6s var(--c);
}
[data-bloco].oculto {
  opacity: 0;
  transform: translateY(10px);
}
.mk-verificacao-foto[data-bloco].oculto {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}
.mk-verificacao-foto[data-bloco] {
  clip-path: inset(0 0 0 0);
}

/* ---------- a certidão: a parte que o fato prova, acesa ---------- */
[data-fato] {
  transition:
    box-shadow 0.4s var(--c),
    background-color 0.4s var(--c);
  border-radius: 8px;
}
/* a parte que o fato prova fica inteira e sobe um pouco; as outras partes esmaecem (sem anel, 16/10) */
article > section,
.mk-certidao-tempo :is(.mk-tabela-wrap, tbody tr),
[data-fato] {
  transition:
    filter 0.45s var(--c),
    box-shadow 0.45s var(--c);
}
.mk-root:has(.marcado) article > section:not(.marcado):not(:has(.marcado)),
.mk-certidao-tempo:has(tr.marcado) tbody tr:not(.marcado),
.mk-certidao-tempo:has(> .marcado) .mk-tabela-wrap {
  filter: opacity(0.42) saturate(0.5);
}
[data-fato].marcado {
  box-shadow: 0 18px 40px -22px rgba(20, 21, 19, 0.35);
}
tr[data-fato].marcado {
  box-shadow: none;
}
tr[data-fato].marcado td {
  background-color: rgba(90, 208, 172, 0.16);
}

/* ---------- a conta de quem usa o painel ---------- */
.so-conta.mk-shell {
  display: block;
  padding: 0;
}
.so-conta .mk-sidebar {
  display: block !important;
  position: static;
  height: auto;
  padding: 10px 12px;
  border-radius: 12px;
}
.so-conta .mk-sidebar-rodape {
  position: static !important;
}
.so-conta .mk-conta-painel {
  display: block !important;
}
.so-conta .mk-conta-botao,
.so-conta .mk-conta-sair {
  display: none !important;
}

/* ---------- a certidão do ato: do despacho à folha ---------- */
.ato-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}
.ato-passos {
  display: grid;
}
.ato-passos > * {
  grid-area: 1 / 1;
  margin: 0;
  transition:
    opacity 0.35s var(--c),
    transform 0.35s var(--c);
}
[data-passo-ato].fora-de-cena {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.ato-rito {
  margin: 0;
}
.folha-certidao {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 18px 20px;
  background: var(--background, #fbfbf8);
  border-radius: 12px;
  box-shadow: 0 -18px 40px -20px rgba(20, 21, 19, 0.35);
  transform: translateY(105%);
  transition: transform 0.6s var(--c);
}
.folha-certidao.aberta {
  transform: none;
}
@media (max-width: 720px) {
  .ato-corpo {
    grid-template-columns: 1fr;
  }
}

/* ---------- o recomeço do laço: zera sem mostrar o rebobinar ---------- */
:host(.zerando) .so-pedaco,
:host(.zerando) .so-pedaco * {
  transition: none !important;
}

/* a fila no cartão: os filtros numa linha só, com a borda direita esmaecida quando sobram */
.so-pedaco .mk-chips {
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  mask-image: linear-gradient(to right, #000 88%, transparent);
}
.so-pedaco .mk-chip {
  flex: none;
}

/* a certidão do ato: o pedaço ocupa o cartão inteiro (a folha sobe de baixo dele) e, parado,
   mostra o estado real do ato do João: concluído, com a certidão */
.so-pedaco:has(.ato-corpo) {
  min-height: 420px;
  overflow: hidden;
}
:host(:not(.espera)) .so-pedaco:has(.ato-corpo) .mk-page-head .troca-antes {
  opacity: 0;
}
:host(:not(.espera)) .so-pedaco:has(.ato-corpo) .mk-page-head .troca-depois {
  opacity: 1;
  transform: none;
}
:host(:not(.espera)) [data-passo-ato='antes'] {
  display: none;
}

[data-fim] {
  transition: opacity 0.3s var(--c);
}
:host(.espera) [data-fim].oculto {
  opacity: 0;
}

/* a conta no celular: no produto ela abre como menu; no recorte fica parada, no lugar */
.so-conta .mk-conta-painel,
.so-conta .mk-cabecalho-painel {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  background: transparent !important;
  width: auto !important;
  margin: 0 !important;
}
.so-conta .mk-conta-painel,
.so-conta .mk-conta {
  border: 0 !important;
  padding: 0 !important;
}
.so-conta .mk-conta-info,
.so-conta .mk-cabecalho-email {
  display: block !important;
}
.so-conta .mk-conta-painel *:not(.mk-avatar) {
  color: #f4f4f0 !important;
}