/* O realce do item ativo (16/10, pedido do Maicon: "não quero esses traços").
   No lugar do filete à esquerda, do fio em cima, da barra de progresso e do fio entre etapas:
   uma superfície que desliza até o item aceso, e os outros itens esmaecem por opacidade.
   Vale para as listas que acompanham uma tela viva: o rito, a certidão, o painel, o cuidado e a
   legenda da página da cidadã. O site.js mede o item aceso e passa --realce-y e --realce-h à lista.
   Carrega depois de todos os arquivos de seção. */

:root {
  --desliza: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 1. sem traços ---------- */
.fatos-ligados li,
.fatos-ligados li.aceso,
.painel-momentos li,
.painel-momentos li.aceso,
.cuidado-lista li,
.cuidado-lista li.aceso,
.modelo-legenda li,
.modelo-legenda li.ativo {
  border: 0;
  box-shadow: none;
  background: none;
}
.fatos-ligados li::before,
.painel-momentos li::before {
  content: none;
}
.passos li:not(:last-child)::after {
  content: none;
}
.rito-preso .rito-palco::after {
  content: none;
}
.trecho-botoes.ativo {
  box-shadow: none;
}
.carta-passo i {
  display: none;
}

/* ---------- 2. os números das etapas, em mono, como no resto do site ---------- */
.passos li::before {
  content: counter(passo, decimal-leading-zero);
  top: 0;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 500 13px/25px var(--mono);
  letter-spacing: 0.04em;
  opacity: 0.72;
}
.rito-preso .passos li:not(.depois):not(.feito)::before,
.rito-cel .passos li.atual::before {
  background: none;
  color: inherit;
  box-shadow: none;
  opacity: 1;
}
.painel-momentos li.aceso i,
.cuidado-lista li.aceso button::before {
  color: var(--tinta);
}

/* ---------- 3. a superfície que desliza ---------- */
.fatos-ligados,
.painel-momentos,
.cuidado-lista,
.modelo-legenda,
.rito .passos {
  position: relative;
  isolation: isolate;
}
.fatos-ligados,
.painel-momentos {
  --realce-sangra: 20px;
}
.fatos-ligados::before,
.painel-momentos::before,
.cuidado-lista::before,
.modelo-legenda::before,
.rito .passos::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--realce-sangra-y, 0px));
  left: calc(-1 * var(--realce-sangra, 0px));
  right: calc(-1 * var(--realce-sangra, 0px));
  height: calc(var(--realce-h, 0px) + 2 * var(--realce-sangra-y, 0px));
  transform: translateY(var(--realce-y, 0px));
  border-radius: 16px;
  background: var(--branco);
  box-shadow:
    0 1px 2px rgba(20, 21, 19, 0.04),
    0 16px 36px -20px rgba(20, 21, 19, 0.3);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.55s var(--desliza),
    height 0.55s var(--desliza),
    opacity 0.3s var(--curva);
}
/* no rito, sobre a foto: vidro escuro, para a letra branca ganhar contraste sobre o bokeh claro.
   As etapas não têm padding próprio: o vidro sangra 18 px em cima e embaixo e 24 px dos lados. */
.rito .passos {
  --realce-sangra: 24px;
  --realce-sangra-y: 18px;
}
.rito .passos::before {
  background: rgba(12, 10, 8, 0.58);
  -webkit-backdrop-filter: blur(22px) saturate(1.1) brightness(0.85);
  backdrop-filter: blur(22px) saturate(1.1) brightness(0.85);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}
/* :is() leva a especificidade do seletor mais forte da lista (.rito .passos), para valer em todas */
:is(.fatos-ligados, .painel-momentos, .cuidado-lista, .modelo-legenda, .rito .passos).tem-realce::before {
  opacity: 1;
}
/* a primeira vez aparece no lugar, sem deslizar do topo */
:is(.fatos-ligados, .painel-momentos, .cuidado-lista, .modelo-legenda, .rito .passos).realce-pula::before {
  transition: opacity 0.3s var(--curva);
}

/* ---------- 4. os outros itens esmaecem; a cor do texto não muda ---------- */
.fatos-ligados li,
.painel-momentos li {
  transition: opacity 0.4s var(--curva);
}
.fatos-ligados.ligado li:not(.aceso),
.painel-momentos.ligado li:not(.aceso),
.cuidado-corpo.ligado .cuidado-lista li:not(.aceso) {
  opacity: 0.6;
}
.fatos-ligados.ligado li:not(.aceso) b,
.painel-momentos.ligado li:not(.aceso) b,
.cuidado-corpo.ligado .cuidado-lista li:not(.aceso) b {
  color: var(--tinta);
}

/* ---------- 5. a página da cidadã: o trecho dos botões acende como o trecho de texto ---------- */
.trecho-botoes span {
  transition: background-color 0.25s var(--curva);
}
.trecho-botoes.ativo span {
  background: #dcf1e4;
}

@media (prefers-reduced-motion: reduce) {
  .fatos-ligados::before,
  .painel-momentos::before,
  .cuidado-lista::before,
  .modelo-legenda::before,
  .rito .passos::before {
    transition: opacity 0.2s linear;
  }
}
html.parado :is(.fatos-ligados, .painel-momentos, .cuidado-lista, .modelo-legenda, .rito .passos)::before {
  transition: opacity 0.2s linear;
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .fatos-ligados,
  .painel-momentos {
    --realce-sangra: 12px;
  }
  /* a legenda fica entre os trechos da mensagem (display: contents): o número liga uma ao outro */
  .modelo-legenda::before {
    content: none;
  }
  .trecho-botoes.ativo {
    box-shadow: 0 0 0 8px var(--chat);
  }
  /* o rito no celular: cada etapa ocupa uma altura de rolagem; basta esmaecer as outras */
  .rito-cel .passos::before {
    content: none;
  }
}