/*
 * A virada e as quatro frentes, na pagina de contato (build/contato.py).
 * O movimento mora no /contato-animacoes.js; aqui ficam a forma e os estados.
 */

/* ------------------------------------------------------------ a virada --- */

.virada-cena {
  margin: -30px -30px 26px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #e4dfec;
  background: #faf8fc;
}
.virada-cena svg { display: block; width: 100%; height: auto; overflow: visible }
.virada-cena svg text { font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif }
.virada-cena.escura {
  background: #241240;
  border-bottom-color: rgba(255, 255, 255, .12);
}

/* os ramos de "Com o Linte" nascem quando a secao entra na tela */
.virada-ramo {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms cubic-bezier(.2, 0, .2, 1);
}
.virada-area { opacity: 0; transition: opacity 500ms ease }
.virada.ativo .virada-ramo { stroke-dashoffset: 0 }
.virada.ativo .virada-area { opacity: 1 }

/* -------------------------------------------------------- as frentes --- */

/* indigo, nao roxo: no #6c2bea o texto lilas ficava em 4.9:1 e as etapas
   ainda apagadas caiam para 2.6:1. Aqui o mesmo texto da 13.5:1 */
.frentes { position: relative; background: #1b0d35; padding: 104px 0 112px }
.frentes-topo { position: relative; max-width: 46rem; margin: 0 auto; text-align: center }
.frentes-topo h2 {
  margin: 20px 0 0;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.06;
  color: #ffffff;
  text-wrap: balance;
}
.frentes-topo h2 span { color: #c7f04a }
.frentes-topo p { margin: 20px auto 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: #e4d9fb }

.frentes-trilho {
  position: relative;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 36px;
}
/* o fio de fundo; o trecho ja percorrido e o .frentes-progresso, por cima */
.frentes-trilho::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
}
.frentes-progresso {
  position: absolute;
  z-index: 1;
  background: #c7f04a;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.frentes-marca {
  position: absolute;
  z-index: 1;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: #c7f04a;
  box-shadow: 0 0 0 5px rgba(199, 240, 74, .28);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.frente { position: relative; transition: opacity 400ms ease }
.frente-no {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: #ffffff;
  color: #6c2bea;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 0 0 8px #1b0d35;
  transition: background 300ms ease, color 300ms ease;
}
.frente h3 { margin: 28px 0 0; font-size: 1.22rem; line-height: 1.28; color: #ffffff }
.frente p { margin: 12px 0 0; font-size: 14px; line-height: 1.62; color: #e4d9fb }

/* com o script ligado, a etapa ainda nao alcancada fica em segundo plano */
.frentes-trilho:has(.frentes-marca) .frente:not(.acesa) { opacity: .72 }
.frente.acesa .frente-no { background: #c7f04a; color: #211a2b }

@media (max-width: 900px) {
  .frentes { padding: 80px 0 88px }
  .frentes-trilho { grid-template-columns: 1fr; gap: 36px; margin-top: 56px }
  /* de pe, o fio sai de cada etapa ate a seguinte e para na ultima. E
     last-of-type, nao last-child: o script poe a marca e a linha dentro do <ol> */
  .frentes-trilho::before { display: none }
  .frente { padding-left: 64px }
  .frente:not(:last-of-type)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: -36px;
    width: 1px;
    background: rgba(255, 255, 255, .3);
  }
  .frente-no { position: absolute; left: 0; top: 0 }
  .frente h3 { margin-top: 8px }
}

@media (max-width: 640px) {
  .virada-cena { margin: -30px -30px 22px; padding: 18px 16px 14px }
}