/* =====================================================================
   Anel de retratos da equipe — abre o perfil ao clicar
   Progresso vem do scroll da própria seção (ver team-ring.js)
   ===================================================================== */

.team-ring {
  --team-ring-pad: 3vw;      /* distância dos rótulos do topo até a borda */
  --team-ring-text-k: 1;     /* escala do bloco de texto central */
  --team-ring-invite: 0;     /* opacidade do convite ao clique */
  --team-ring-drop: 0px;     /* descida da cena, calculada em team-ring.js */
  position: relative;
  z-index: 1;
  height: 460vh;
  background: #13161f;
  color: #fff;
  font-family: var(--calone-font-sans, "Inter", sans-serif);
}

.team-ring__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}

/* camadas: vídeo → véu de cor → texto → canvas → chrome */
.team-ring__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #13161f;
}

/* o véu mantém a progressão de paleta e escurece o vídeo o bastante
   para os retratos e o título continuarem legíveis por cima */
.team-ring__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #13161f;
  opacity: .68;
}

.team-ring__headline {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(var(--team-ring-drop));
  pointer-events: none;
}

.team-ring__lines {
  text-align: center;
  transform: scale(var(--team-ring-text-k));
  transform-origin: center center;
  will-change: transform;
}

.team-ring__line {
  display: block;
  overflow: hidden;
}

.team-ring__line > span {
  display: block;
  font-size: clamp(28px, 5.4vw, 77px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  will-change: transform;
}

/* linha descritiva: no mesmo corpo da principal ela não caberia no vão
   interno do anel, então entra menor e com mais espaçamento */
.team-ring__line--sub > span {
  margin-top: .5em;
  font-size: clamp(11px, 2.1vw, 30px);
  font-weight: 600;
  letter-spacing: .1em;
}

/* canvas é elemento substituído: inset:0 não estica, precisa de width/height */
.team-ring__stage canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.team-ring__stage canvas.is-pickable {
  cursor: pointer;
}

/* ---------- chrome ---------- */
.team-ring__chrome {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* O cabeçalho do site é fixo, opaco e fica em z-index 1000: em 18–34px do
   topo do palco estas duas palavras ficavam inteiramente atrás dele. O
   deslocamento acompanha a largura porque é dela que vem a altura do
   cabeçalho (padding em 2.5vw), não da altura da janela. */
.team-ring__topbar {
  top: clamp(116px, 8vw, 144px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding-inline: var(--team-ring-pad);
  font-size: clamp(10px, 1.15vw, 18px);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .72;
}

/* máscara da entrada: o miolo sobe de baixo, como as linhas do título.
   Quem move o transform é o loop de team-ring.js, junto com o resto da cena. */
.team-ring__word {
  display: block;
  overflow: hidden;
}

.team-ring__word > span {
  display: block;
  will-change: transform;
}

/* convite ao clique — aparece quando o anel fecha, no vão abaixo do título */
.team-ring__invite {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translateY(calc(var(--team-ring-drop) + clamp(64px, 8.4vh, 104px)));
  font-size: clamp(9px, .76vw, 11px);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: calc(var(--team-ring-invite) * .62);
}

.team-ring__bar {
  position: relative;
  flex: none;
  width: 34px;
  height: 1px;
  overflow: hidden;
  background: currentColor;
}

.team-ring__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #13161f;
  animation: team-ring-sweep 2.2s linear infinite;
}

@keyframes team-ring-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.team-ring__loading {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(18px, 3.5vh, 34px);
  margin: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .55;
  transition: opacity .6s ease;
}

.team-ring__loading[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
}

/* =====================================================================
   Perfil em tela cheia — injetado no <body> por team-ring.js para
   escapar do stacking context da seção (o cabeçalho fica em z-index 1100).
   O conteúdo reaproveita as classes .team-profile de team-scene.css;
   aqui só neutralizamos a pista de scroll que aquele layout pressupõe.
   ===================================================================== */
.team-ring-profile {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #030303;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}

.team-ring-profile.is-open {
  opacity: 1;
  visibility: visible;
}

.team-profile--overlay {
  min-height: 0;
  height: 100%;
}

.team-profile--overlay .team-profile__sticky {
  position: relative;
  height: 100%;
  min-height: 0;
}

/* sem scrubbing por scroll: o vídeo de fundo fica sempre visível */
.team-profile--overlay .team-profile__scroll-video {
  opacity: 1;
}

/* Quem não tem vídeo entra com o retrato. São fotos verticais (718x1152):
   sangrar em `cover` num viewport horizontal ampliaria demais e cobriria a
   coluna de texto, então o retrato é ancorado à esquerda mantendo proporção
   e esmaece para o fundo, deixando a direita livre para a leitura. */
.team-ring-profile__photo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: auto;
  max-width: 68%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  -webkit-mask-image: linear-gradient(90deg, #000 56%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 56%, transparent 100%);
}

/* redes sociais do perfil — ícones brancos, herdam a cor via currentColor */
.team-ring-profile__social {
  display: flex;
  gap: clamp(14px, 1.4vw, 20px);
  margin: clamp(22px, 2.4vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.team-ring-profile__social[hidden] {
  display: none;
}

.team-ring-profile__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  opacity: .8;
  transition: opacity 240ms ease, border-color 240ms ease, transform 240ms ease;
}

.team-ring-profile__social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.team-ring-profile__social a:hover,
.team-ring-profile__social a:focus-visible {
  opacity: 1;
  border-color: rgba(255, 255, 255, .75);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .team-ring-profile__social a {
    transition: none;
  }
}

.team-ring-profile__close {
  position: absolute;
  z-index: 4;
  top: clamp(14px, 2.4vh, 26px);
  right: clamp(14px, 2.4vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
  transition: opacity .25s ease, transform .25s ease;
}

.team-ring-profile__close:hover,
.team-ring-profile__close:focus-visible {
  opacity: 1;
  transform: rotate(90deg);
}

html.is-team-ring-locked,
html.is-team-ring-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* no mobile o texto vai para a faixa inferior, então o retrato sangra
   na largura toda e esmaece para baixo em vez de para o lado */
/* cabeçalho mais baixo no telefone: as palavras sobem junto para não sobrar
   um vão morto entre ele e a moldura da cena */
@media (max-width: 640px) {
  /* 41vw de recuo de cada lado deixa ~70px de vão numa tela de 390px, e as
     duas palavras juntas ocupam exatamente isso: encostam. O `min` faz a
     convergência para o centro parar antes, sem mexer na coreografia das
     telas maiores. */
  .team-ring__topbar {
    top: clamp(88px, 22vw, 104px);
    padding-inline: min(var(--team-ring-pad), 26vw);
  }
}

/* No retrato quem limita a câmera é a largura (`max(dH, dW)` em fitCamera),
   então o anel escala com vw: o vão interno encolhe junto e, num telefone,
   o convite deixa de caber nele e assenta sobre os retratos de baixo. Aqui
   ele desce para fora do anel, na mesma unidade que dita o raio — a borda
   externa fica a 4.1 unidades 3D do centro, o que dá 37.3vw na tela.
   Só no retrato: deitado o anel volta a ser limitado pela altura e a regra
   base já acerta. */
@media (max-width: 640px) and (orientation: portrait) {
  .team-ring__invite {
    transform: translateY(calc(var(--team-ring-drop) + 38vw + 55px));
  }
}

@media (max-width: 640px) {
  .team-ring-profile__photo {
    width: 100%;
    max-width: none;
    object-position: 50% 6%;
    -webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 46%, transparent 92%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-ring__bar::after {
    animation: none;
  }

  .team-ring-profile {
    transition-duration: .01ms;
  }
}

/* =====================================================================
   Lista da equipe em texto — fonte dos dados que team-ring.js lê para
   montar o anel, e o que se vê quando o anel não sobe (sem JavaScript ou
   se o three.js falhar). Some assim que as texturas carregam.
   ===================================================================== */
.team-roster {
  padding: clamp(64px, 9vw, 120px) clamp(22px, 5vw, 80px);
  background: #13161f;
  color: #fff;
}

.team-roster[hidden] {
  display: none;
}

.team-roster__title {
  margin: 0;
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.team-roster__intro {
  margin: .6em 0 0;
  color: var(--calone-on-dark-muted, rgba(255, 255, 255, .68));
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: .04em;
}

.team-roster__list {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: auctor;
}

.team-roster__person {
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--calone-on-dark-border, rgba(255, 255, 255, .14));
}

.team-roster__name {
  margin: 0;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.team-roster__role {
  margin: .35em 0 0;
  color: var(--calone-on-dark-muted, rgba(255, 255, 255, .68));
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.team-roster__bio p {
  max-width: 68ch;
  margin: 1em 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.58;
}

.team-roster__social {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(12px, 1.1vw, 14px);
}

.team-roster__social a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .3em;
}

/* =====================================================================
   Bios longas — o texto rola, o nome e as redes ficam parados
   ---------------------------------------------------------------------
   Antes a coluna inteira rolava, e os ícones de rede subiam junto com o
   texto. Aqui a coluna vira flex e só o miolo tem barra: cabeçalho no
   topo e redes no rodapé, sempre no mesmo lugar.
   Vale só no overlay do anel; o perfil da outra seção fica como está.
   ===================================================================== */
.team-ring-profile .team-profile__content {
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* quem rola agora é o miolo */
}

.team-ring-profile .team-profile__header,
.team-ring-profile .team-ring-profile__social {
  flex: none;
}

.team-ring-profile .team-profile__bio {
  flex: 1 1 auto;
  min-height: 0;                 /* sem isto o item de flex não encolhe e não rola */
  overflow-y: auto;
  overscroll-behavior: contain;  /* ao chegar ao fim, não empurra a página atrás */
  padding-right: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.team-ring-profile .team-profile__bio::-webkit-scrollbar { width: 4px; }
.team-ring-profile .team-profile__bio::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

/* dica de que há mais texto: o fim esmaece em vez de cortar seco */
.team-ring-profile .team-profile__bio {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
}

/* o véu só faz sentido enquanto sobra texto para rolar */
.team-ring-profile .team-profile__bio.is-fim {
  -webkit-mask-image: none;
          mask-image: none;
}