/* Página "Embaixadores" — composição editorial dirigida pela rolagem.

   Referência: skiper-ui.com/v1/skiper79. Medi a demo no navegador antes de
   escrever: 17 retratos 3:4, ~3.700px de percurso numa viewport de 900, de 3
   a 5 fotos em cena por vez, muita sangria pelas bordas e o título sempre no
   centro exato, invertendo sobre as fotos por `mix-blend-mode: difference`.

   O palco é `position: sticky`, não `ScrollTrigger.pin`. Essa é regra do
   projeto: o `pin` cria espaçadores e briga com o Lenis, e
   não há uma única ocorrência dele no site. O resultado visual é o mesmo — a
   cena fica parada enquanto a seção alta rola por baixo.

   Cada foto tem posição, tamanho e recorte próprios, escritos aqui em
   `--x/--y/--w`. O JavaScript nunca toca em left/top/width: só em
   transform e opacity.

   Estado base = sem JavaScript: as fotos viram uma galeria em coluna,
   legível e no fluxo. É `.is-live` que liga o palco preso. */

.embaixadores {
  --emb-percurso: 580svh;     /* rolagem gasta pela cena, além da 1ª tela */
  position: relative;
  z-index: 1;
  background: var(--calone-white);
  color: var(--calone-black);
}

.embaixadores.is-live {
  height: calc(100svh + var(--emb-percurso));
}

.embaixadores__palco {
  position: relative;
  width: 100%;
  padding-block: clamp(90px, 13vh, 150px);
  /* No HTML as fotos vêm antes do título, porque a mescla exige o título
     pintado por último. Na versão estática isso deixaria o título embaixo da
     grade, então quem manda na ordem visual aqui é o `order`. No palco preso
     os dois são absolutos e o `order` não tem efeito nenhum. */
  display: flex;
  flex-direction: column;
}

.embaixadores__marco {
  order: -1;
}

.embaixadores.is-live .embaixadores__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-block: 0;
  overflow: hidden;
  /* `isolation` e o branco NÃO moram mais aqui — foram para
     `.embaixadores__mescla`. Este elemento é o `sticky`, e no WebKit do iPhone
     um `sticky` vira camada própria durante a rolagem: o `background` dele
     deixava de entrar no que o título enxerga para mesclar, e as letras saíam
     brancas sobre branco. O grupo de mescla precisa ser um elemento comum. */
}

/* ---------- o grupo da mescla ---------- */
/* Prende a mescla do título a esta caixa. Sem isto o `difference` sairia
   misturando com o cabeçalho fixo e com o resto da página.
   O branco precisa ser pintado AQUI DENTRO, não só na seção: o grupo isolado
   nasce transparente, e `difference` contra transparente devolve a própria cor
   da fonte — o título branco sumia no fundo branco. */
.embaixadores__mescla {
  /* Sem `.is-live` esta div não existe para o layout: o palco é um flex e o
     `order: -1` do marco precisa vê-lo como filho direto. */
  display: contents;
}

.embaixadores.is-live .embaixadores__mescla {
  display: block;
  position: absolute;
  inset: 0;
  isolation: isolate;
  background: var(--calone-white);
}


/* ---------- o título ---------- */
/* Sem `z-index` de propósito. Qualquer valor aqui cria um contexto de
   empilhamento, e um contexto de empilhamento isola o filho da mescla: o
   `difference` do título passava a ver um fundo transparente e as letras
   sumiam no branco. A ordem no HTML (fotos, depois título) já põe o título
   por cima. */
.embaixadores__marco {
  position: relative;
  text-align: center;
  pointer-events: none;
}

/* Centralizado por grid, e não por `translate(-50%,-50%)`: transform também
   cria contexto de empilhamento, e era ele que estava matando a mescla — o
   título saía branco chapado, invisível sobre o fundo branco. Pelo mesmo
   motivo nada aqui dentro pode ganhar transform, opacity, filter ou
   will-change. */
.embaixadores.is-live .embaixadores__marco {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  width: 100%;
}

/* Branco + `difference` sobre fundo branco dá preto; sobre uma foto escura
   inverte para claro. É exatamente o comportamento da referência — conferido
   quadro a quadro contra a demo, inclusive no meio-tom, onde as letras viram
   cinza-claro em vez de branco. `exclusion` foi testado e achata demais o
   meio-tom: as letras somem sobre pele clara. */
.embaixadores__marco h1 {
  margin: 0;
  color: var(--calone-white);
  mix-blend-mode: difference;
  font-size: clamp(2.6rem, 8.6vw, 8.6rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.06em;     /* display grande: entreletra negativa */
}

.embaixadores__linha {
  margin: clamp(10px, 1.4vh, 18px) 0 0;
  color: var(--calone-white);
  mix-blend-mode: difference;
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 400;
  letter-spacing: .03em;      /* caixa alta pequena pede entreletra positiva */
  text-transform: uppercase;
}

/* ---------- iOS: sem mescla ---------- */
/* O WebKit do iPhone não aplica o `difference` desta composição — o título
   saía branco sobre branco, invisível. Duas correções tentaram salvar o
   efeito (branco pintado como conteúdo no grupo; `isolation` fora do elemento
   `sticky`) e nenhuma funcionou no aparelho, em vários iPhones e navegadores.
   Aqui a mescla é desligada e o contraste passa a ser garantido, não
   calculado pelo navegador. Quem põe a classe é o embaixadores.js.

   Por que preto COM halo, e não preto sozinho: medido atrás do título ao
   longo da cena, o fundo tem mediana 218 e é claro na maior parte — mas 16%
   dos pixels ficam abaixo de 110 e, aos 30% da rolagem, a mediana cai para
   94. Nesse trecho o preto sumiria dentro das fotos.

   O halo é branco, então ele é invisível justamente onde o fundo já é branco
   (a maior parte do tempo) e só aparece quando uma foto escura passa por
   trás. Não é contorno: é difuso de propósito, para não endurecer o desenho
   da letra num display deste tamanho.

   Isto é a rede, não o desenho: onde a mescla funciona ela continua valendo,
   e o efeito de inversão sobre as fotos segue intacto. */
.embaixadores.sem-mescla .embaixadores__marco h1,
.embaixadores.sem-mescla .embaixadores__linha {
  mix-blend-mode: normal;
  color: var(--calone-black);
}

.embaixadores.sem-mescla .embaixadores__marco h1 {
  text-shadow:
    0 0 4px rgba(255, 255, 255, .95),
    0 0 18px rgba(255, 255, 255, .9),
    0 0 38px rgba(255, 255, 255, .75);
}

.embaixadores.sem-mescla .embaixadores__linha {
  text-shadow:
    0 0 3px rgba(255, 255, 255, .95),
    0 0 10px rgba(255, 255, 255, .9);
}

/* ---------- a dica de rolagem ---------- */
.embaixadores__dica {
  display: none;
  margin: 0;
}

.embaixadores.is-live .embaixadores__dica {
  position: absolute;
  top: clamp(96px, 13vh, 130px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: grid;
  justify-items: center;
  gap: 14px;
  color: var(--calone-on-light-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

.embaixadores__risco {
  width: 1px;
  height: 46px;
  background: currentColor;
  opacity: .45;
}

/* ---------- as fotos ---------- */
.embaixadores__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  width: min(1280px, 100%);
  margin: clamp(48px, 7vh, 90px) auto 0;
  padding-inline: clamp(22px, 6vw, 80px);
}

.embaixadores.is-live .embaixadores__fotos {
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  padding: 0;
}

.embaixadores__foto {
  margin: 0;
}

.embaixadores.is-live .embaixadores__foto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Uma largura só para as dezesseis: é o tamanho de pico, por onde todo
     retrato passa uma vez. A variedade de tamanho na composição vem das
     escalas do JS, que são relativas a este valor — assim ninguém atravessa
     a cena inteira miúdo enquanto outro aparece enorme. */
  width: var(--w-pico);
  /* Escondida até o GSAP assumir. `visibility` junto com a opacidade porque
     a figura invisível continuaria capturando o ponteiro e roubando o hover
     da foto que está em cena — o `autoAlpha` do JS mexe nas duas. */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.embaixadores__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Os retratos chegam coloridos; a direção de arte é monocromática. */
  filter: grayscale(100%);
  transition: filter var(--motion-standard) var(--ease-calone);
}

/* A cor volta no hover — a pessoa por trás do preto e branco. Só onde há
   ponteiro de verdade: no toque o `:hover` gruda depois do tap e a foto
   ficaria colorida para sempre. */
@media (hover: hover) and (pointer: fine) {
  .embaixadores__foto:hover img,
  .embaixadores__link:focus-visible img {
    filter: grayscale(0);
  }
}

/* Nome à esquerda, categoria à direita — as duas pontas da legenda, como na
   referência, onde o lado direito levava o cargo. */
.embaixadores__foto figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: .55em;
  color: var(--calone-on-light-muted);
  /* Todas as fotos partilham a mesma largura de pico, então a legenda é uma
     medida só — ela escala junto porque vive dentro do `scale` da figura. */
  font-size: clamp(9px, .78vw, 13px);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* A foto inteira é o link para o Instagram da pessoa — sem @ escrito em
   lugar nenhum. O destino fica no `aria-label` da âncora, que leitor de tela
   anuncia e ninguém vê. Alvo do tamanho do retrato, muito melhor que os 35px
   que o @ ocupava numa cena que se move. */
/* A categoria é classificação, não nome: fica em cinza para o nome continuar
   sendo a primeira coisa que se lê na legenda. */
.embaixadores__papel {
  color: var(--calone-gray-500);
  white-space: nowrap;
}

.embaixadores__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.embaixadores__link:focus-visible {
  outline: 2px solid var(--calone-black);
  outline-offset: 4px;
}

/* ---------- posições, uma a uma ----------
   `--x/--y` são o centro da foto; o JS parte de xPercent/yPercent -50.
   `--w` é a largura em vw. Nada disto é animado. */
.embaixadores.is-live {
  --w-pico: 20vw;
}

/* Duas regras governam estas coordenadas, e as duas existem porque aqui são
   pessoas, não imagens decorativas:

   `--y` respeita a base do cabeçalho fixo (100px). No pico o retrato tem
   metade da altura acima do centro, e o rosto é o terço de cima. Quem mora na
   faixa superior desce um pouco no instante do pico (o `meio` do roteiro), em
   vez de crescer parado e sumir atrás do menu.

   `--x` fica entre metade da largura de pico e o complemento dela — com
   --w-pico de 20vw, entre 10% e 90%. Assim, no instante do pico, o retrato
   cabe inteiro na tela e o nome embaixo dele fica legível. Sangrar pelas
   bordas continua acontecendo na entrada e na saída, pelo xPercent; o que não
   pode é alguém atravessar a cena inteira pela metade, com o nome cortado.

   A referência não tinha cabeçalho nem nomes de gente de verdade, e podia
   encostar as fotos em qualquer borda. */
.embaixadores__foto--01 { --x: 19%; --y: 34%; }
.embaixadores__foto--02 { --x: 80%; --y: 36%; }
.embaixadores__foto--03 { --x: 49%; --y: 78%; }

.embaixadores__foto--04 { --x: 12%; --y: 52%; }
.embaixadores__foto--05 { --x: 88%; --y: 47%; }
.embaixadores__foto--06 { --x: 31%; --y: 25%; }
.embaixadores__foto--07 { --x: 70%; --y: 24%; }

.embaixadores__foto--08 { --x: 23%; --y: 36%; }
.embaixadores__foto--09 { --x: 69%; --y: 54%; }
.embaixadores__foto--10 { --x: 43%; --y: 82%; }

.embaixadores__foto--11 { --x: 16%; --y: 22%; }
.embaixadores__foto--12 { --x: 85%; --y: 25%; }
.embaixadores__foto--13 { --x: 53%; --y: 80%; }

.embaixadores__foto--14 { --x: 36%; --y: 50%; }
.embaixadores__foto--15 { --x: 73%; --y: 45%; }

.embaixadores__foto--16 { --x: 13%; --y: 53%; }

/* Seis retratos que entraram depois, encaixados nos vãos da narrativa em vez
   de empilhados no fim — ver os `em` do roteiro. As mesmas duas regras valem:
   --x entre 10% e 90% (metade da largura de pico) e --y a partir de 33%, que
   é onde o rosto passa a nascer abaixo do cabeçalho fixo. */
.embaixadores__foto--17 { --x: 28%; --y: 62%; }
.embaixadores__foto--18 { --x: 66%; --y: 36%; }
.embaixadores__foto--19 { --x: 46%; --y: 84%; }
.embaixadores__foto--20 { --x: 82%; --y: 58%; }
.embaixadores__foto--21 { --x: 20%; --y: 40%; }
.embaixadores__foto--22 { --x: 58%; --y: 70%; }

/* ---------- tablet ---------- */
/* Não é a versão desktop encolhida: as fotos engordam em vw para não sumirem
   e as colunas extremas entram mais, senão sangram até desaparecer. */
@media (min-width: 768px) and (max-width: 1199px) {
  .embaixadores {
    --emb-percurso: 480svh;
  }

  .embaixadores.is-live {
    --w-pico: 30vw;
  }

  /* As colunas extremas entram: com o pico maior, sangrariam até sumir. */
  .embaixadores__foto--02 { --x: 77%; }
  .embaixadores__foto--04 { --x: 17%; }
  .embaixadores__foto--05 { --x: 83%; }
  .embaixadores__foto--06 { --x: 28%; }
  .embaixadores__foto--07 { --x: 73%; }
  .embaixadores__foto--09 { --x: 66%; }
  .embaixadores__foto--12 { --x: 82%; }
  .embaixadores__foto--14 { --x: 40%; }
  .embaixadores__foto--15 { --x: 68%; }
  .embaixadores__foto--16 { --x: 20%; }
}

/* ---------- mobile ---------- */
/* Aqui a narrativa é a mesma, mas com menos gente em cena: sete retratos, no
   máximo dois por vez. O JS esconde os outros nove — amontoar dezesseis numa
   coluna de 390px vira ruído, não composição. */
@media (max-width: 767px) {
  .embaixadores {
    --emb-percurso: 300svh;
  }

  .embaixadores__marco h1 {
    font-size: clamp(2.1rem, 11.5vw, 4.4rem);
  }

  .embaixadores.is-live .embaixadores__foto--movel-oculta {
    display: none;
  }

  .embaixadores.is-live {
    --w-pico: 52vw;
  }

  /* Onze retratos, escolhidos pelos `em` do roteiro para cobrirem o percurso
     de ponta a ponta. Com sete o celular passava dois terços da rolagem em
     tela branca — eles se concentravam na primeira metade e a seção ficou
     mais longa quando entraram seis embaixadores novos.

     --x entre 26% e 74% (metade da largura de pico, 52vw) e --y a partir de
     36%, que é onde o rosto nasce abaixo do cabeçalho. */
  .embaixadores__foto--01 { --x: 32%; --y: 38%; }
  .embaixadores__foto--17 { --x: 62%; --y: 62%; }
  .embaixadores__foto--05 { --x: 70%; --y: 45%; }
  .embaixadores__foto--18 { --x: 40%; --y: 36%; }
  .embaixadores__foto--09 { --x: 58%; --y: 55%; }
  .embaixadores__foto--19 { --x: 44%; --y: 72%; }
  .embaixadores__foto--12 { --x: 66%; --y: 40%; }
  .embaixadores__foto--20 { --x: 34%; --y: 58%; }
  .embaixadores__foto--15 { --x: 60%; --y: 48%; }
  .embaixadores__foto--21 { --x: 30%; --y: 44%; }
  .embaixadores__foto--22 { --x: 52%; --y: 66%; }

  .embaixadores__foto figcaption {
    font-size: 9px;
    letter-spacing: .02em;
  }
}

/* ---------- movimento reduzido ---------- */
/* Sem palco preso e sem trajetória: as dezesseis viram a galeria em coluna,
   que é o mesmo conteúdo em repouso. */
@media (prefers-reduced-motion: reduce) {
  .embaixadores.is-live {
    height: auto;
  }

  /* O grupo da mescla também sai do layout aqui: em movimento reduzido o
     palco volta a ser uma coluna no fluxo, e uma div absoluta por cima
     quebraria a galeria. */
  .embaixadores.is-live .embaixadores__mescla {
    display: contents;
  }

  .embaixadores.is-live .embaixadores__palco {
    position: relative;
    height: auto;
    padding-block: clamp(90px, 13vh, 150px);
    overflow: visible;
  }

  .embaixadores.is-live .embaixadores__marco {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .embaixadores.is-live .embaixadores__fotos {
    display: grid;
    position: static;
    width: min(1280px, 100%);
    margin: clamp(48px, 7vh, 90px) auto 0;
    padding-inline: clamp(22px, 6vw, 80px);
  }

  .embaixadores.is-live .embaixadores__foto {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    opacity: 1;
    transform: none;
  }

  .embaixadores.is-live .embaixadores__dica {
    display: none;
  }
}