/* bloco ecossistema: secao fixada. Enquanto a pagina rola dentro dela,
   os fios se desenham e as quatro empresas entram uma a uma.
   Todo o movimento vem de --p, escrito por js/lib/progresso.js. */
.ecossistema { position: relative; background: #fff; padding-top: var(--pad-secao); }

/* o trilho e a distancia que a pagina percorre com o mapa preso na tela */
.ecossistema__trilho { position: relative; height: 200vh; }

.ecossistema__palco {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  padding-block: calc(var(--h-cabecalho-solido) + 16px) 32px;
  overflow: hidden;
}

/* a palavra no vao da esquerda, fora da area de texto */
.ecossistema__vertical {
  position: absolute; left: 4px; top: 50%; z-index: 0;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-size: calc(min(3.4vw, 42px) * var(--escala-texto, 1)); line-height: 1; font-weight: 700; letter-spacing: .16em;
  color: rgba(32, 41, 42, .07);
  pointer-events: none;
}
@media (max-width: 1200px) { .ecossistema__vertical { display: none; } }

.ecossistema__cabeca { margin-bottom: clamp(-40px, -3vw, -8px); }
.ecossistema__titulo { margin: clamp(30px, 3.2vw, 48px) 0 20px; font-size: var(--t-secao); }

/* ---------- o mapa, agora na grade ---------- */
.ecossistema__mapa { position: relative; align-items: center; row-gap: clamp(28px, 4vw, 56px); }

.ecossistema__fios { position: absolute; inset: 0; width: 100%; height: 100%; color: #cfd2d6; pointer-events: none; }
.ecossistema__fios path {
  stroke-width: 2;
  stroke-dasharray: var(--traco);
  /* o traco avanca junto com a rolagem, sem transicao */
  stroke-dashoffset: calc(var(--traco) * (1 - clamp(0, calc((var(--p, 0) - .04) * 2.4), 1)));
  transition: none;
}

.ecossistema__nucleo {
  grid-column: 5 / span 4; grid-row: 1 / span 2;
  justify-self: center; align-self: center;
  position: relative;
  width: clamp(150px, 15vw, 210px); aspect-ratio: 1;
  border-radius: 50%; background: var(--dark);
  display: grid; place-items: center;
  scale: clamp(.82, calc(.82 + var(--p, 0) * .28), 1);
}
.ecossistema__nucleo img { width: 62%; }
.ecossistema__anel { position: absolute; inset: -26px; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal) 34%, transparent); animation: gira-anel 26s linear infinite; }
.ecossistema__anel::after { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
@keyframes gira-anel { to { transform: rotate(360deg); } }

/* ---------- cartoes das empresas ---------- */
.empresa {
  --t: clamp(0, calc((var(--p, 0) - .10 - var(--ordem) * .12) * 4.5), 1);
  opacity: var(--t);
  translate: 0 calc((1 - var(--t)) * 30px);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--mola);
}
.empresa--alelo  { grid-column: 1 / span 4; grid-row: 1; }
.empresa--livelo { grid-column: 1 / span 4; grid-row: 2; }
.empresa--veloe  { grid-column: 9 / span 4; grid-row: 1; }
.empresa--pede   { grid-column: 9 / span 4; grid-row: 2; }

.empresa__rotulo { display: block; color: var(--muted); font-size: var(--t-mini); letter-spacing: .14em; text-transform: uppercase; }
.empresa > img { width: clamp(118px, 11.5vw, 158px); height: clamp(46px, 4.6vw, 60px); object-fit: contain; object-position: left center; margin: 12px 0 14px; }
.empresa p { color: var(--muted); font-size: calc(15px * var(--escala-texto, 1)); line-height: 1.55; max-width: 34ch; }
.empresa > a { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--teal); font-size: calc(13px * var(--escala-texto, 1)); font-weight: 600; transition: gap .4s var(--mola); }
.empresa > a:hover { gap: 14px; }

/* ponto colorido de cada marca, virado para o nucleo */
.empresa::after { content: ""; position: absolute; top: 46%; width: 11px; height: 11px; border-radius: 50%; }
.empresa--alelo::after  { right: -30px; background: #00866c; }
.empresa--livelo::after { right: -30px; background: #ff008a; }
.empresa--veloe::after  { left: -30px; background: #302a7a; }
.empresa--pede::after   { left: -30px; background: #de467e; }
.empresa--veloe, .empresa--pede { text-align: right; }
.empresa--veloe > img, .empresa--pede > img { object-position: right center; margin-left: auto; }
.empresa--veloe p, .empresa--pede p { margin-left: auto; }
.empresa--veloe > a, .empresa--pede > a { flex-direction: row-reverse; }

/* Abaixo de 1080px o pin sai de cena: a secao volta a rolar normalmente
   e as empresas viram uma lista simples, sempre visiveis. */
@media (max-width: 1080px) {
  .ecossistema { padding-block: var(--pad-secao); }
  .ecossistema__trilho { height: auto; }
  .ecossistema__palco { position: static; height: auto; padding-block: 0; display: block; }
  .ecossistema__cabeca { margin-bottom: 44px; }
  .ecossistema__mapa { row-gap: 44px; }
  .ecossistema__fios { display: none; }
  .ecossistema__nucleo { display: none; }
  .empresa { opacity: 1; translate: none; text-align: left; }
  .empresa--alelo  { grid-column: 1 / span 6; grid-row: auto; }
  .empresa--livelo { grid-column: 7 / span 6; grid-row: auto; }
  .empresa--veloe  { grid-column: 1 / span 6; grid-row: auto; text-align: left; }
  .empresa--pede   { grid-column: 7 / span 6; grid-row: auto; text-align: left; }
  .empresa::after { display: none; }
  .empresa--veloe > img, .empresa--pede > img { object-position: left center; margin-left: 0; }
  .empresa--veloe p, .empresa--pede p { margin-left: 0; }
  .empresa--veloe > a, .empresa--pede > a { flex-direction: row; }
}

@media (max-width: 680px) {
  .empresa--alelo, .empresa--livelo, .empresa--veloe, .empresa--pede { grid-column: 1 / -1; }
}