/* bloco manifesto: copy nas colunas 1 a 5, foto nas 7 a 12 */
.manifesto { background: var(--paper); overflow: hidden; }

/* a palavra ELO em contorno, atras de tudo, com parallax.
   Fica na metade direita para nunca encostar na coluna de texto. */
.manifesto__marca {
  position: absolute; z-index: 0;
  top: 6%; right: -3%;
  font-family: var(--display); font-weight: 900; font-size: calc(clamp(200px, 27vw, 440px) * var(--escala-texto, 1)); line-height: .78;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px #d9dce0;
  pointer-events: none;
  /* anda no sentido oposto ao da foto */
  translate: 0 calc((var(--p, .5) - .5) * 150px);
}

.manifesto .grade { position: relative; z-index: 1; align-items: center; }

.manifesto__copy { grid-column: 1 / span 5; }
.manifesto__titulo { margin: clamp(30px, 3.2vw, 48px) 0 clamp(20px, 2vw, 30px); font-size: var(--t-secao); }
.manifesto__texto { color: var(--muted); max-width: 42ch; }
.manifesto__link { margin-top: 26px; }

.manifesto__figura {
  grid-column: 7 / -1;
  position: relative;
  aspect-ratio: 4 / 3.4;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 7% 78%, 9% 44%);
}
.manifesto__figura img {
  position: absolute; inset: -9% 0; width: 100%; height: 118%;
  object-fit: cover;
  /* a foto e mais alta que a moldura de proposito: sobra para passear */
  translate: 0 calc((var(--p, .5) - .5) * -84px);
}
.manifesto__figura:hover img { scale: 1.035; }
.manifesto__figura figcaption {
  position: absolute; z-index: 3; top: 22px; left: 30px;
  background: rgba(37, 42, 46, .84); color: #fff;
  border-radius: 999px; padding: 10px 18px;
  font-size: var(--t-mini); letter-spacing: .15em; text-transform: uppercase;
}

.manifesto__elo { position: absolute; z-index: 0; right: 0; top: 0; width: 16%; height: 100%; color: var(--teal); opacity: .5; }
.manifesto__elo path { stroke-width: 3; }

@media (max-width: 1080px) {
  .manifesto__copy { grid-column: 1 / -1; }
  .manifesto__figura { grid-column: 1 / -1; margin-top: 56px; aspect-ratio: 16 / 9; }
  .manifesto__marca { top: 2%; font-size: 34vw; }
}

@media (max-width: 680px) {
  .manifesto__figura { clip-path: none; }
  .manifesto__elo { display: none; }
}

/* luz correndo pelo fio da marca. E o unico movimento que nao depende de
   scroll nem de ponteiro: mantem a secao viva depois que tudo ja entrou. */
.manifesto__faisca { position: absolute; z-index: 0; right: 0; top: 0; width: 16%; height: 100%; pointer-events: none; }
.manifesto__faisca path { stroke: var(--teal); stroke-width: 4; stroke-dasharray: 46 1000; animation: corre-fio 7s linear infinite; }
@keyframes corre-fio { from { stroke-dashoffset: 1046; } to { stroke-dashoffset: 0; } }

/* a legenda entra deslizando, depois da cortina */
.manifesto__figura figcaption {
  opacity: 0; translate: -14px 0;
  transition: opacity .8s var(--suave) .75s, translate .9s var(--mola) .75s;
}
.manifesto__figura.visivel figcaption { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .manifesto__faisca { display: none; }
  .manifesto__figura figcaption { opacity: 1; translate: 0 0; }
}