/* ==========================================================================
   Empresa — a secao 01 da home, em tres tempos:
   manifesto (a frase que se acende na rolagem) → direcao (o palco com o
   retrato e a lista dos diretores) → o que vem junto (os diferenciais,
   marcados um a um).

   A gramatica e a da referencia (Looper): frase em dois tons, lista em que
   so o item atual fica em preto e painel cinza-claro dentro do cartao
   branco. O vermelho aparece so no ponto final, no fio da linha aberta e
   no cargo de quem esta no palco.
   ========================================================================== */

.empresa__card {
  display: grid;
  gap: var(--section-gap);
}

/* --------------------------------------------------------------------------
   Manifesto — a frase sozinha, sem botao: a acao fecha a secao, no painel
   de diferenciais. O efeito de acender e o componente .lit (components.css);
   aqui vive so a escala.
   -------------------------------------------------------------------------- */
.empresa__intro {
  display: grid;
  justify-items: start;
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

/* Entre o titulo de secao e o display da hero: grande o bastante para ser
   o titulo, e com medida para caber em quatro linhas no desktop. */
.empresa__statement {
  max-width: 21em;
  margin-left: -0.03em; /* alinhamento optico da haste */
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 0.9rem + 3vw, 3.625rem);
  font-weight: var(--fw-display);
  line-height: 1.06;
  letter-spacing: calc(-0.032em * var(--track-display));
}

/* --------------------------------------------------------------------------
   Direcao — a trilha e o quadro.

   .board e a trilha: alta de proposito, um trecho de rolagem por diretor.
   .board__frame e o quadro (palco + lista) que fica fixo na tela enquanto
   a pagina desce pela trilha; o JavaScript troca quem esta em cena
   conforme o trecho. Sem JavaScript, ou numa janela baixa demais para
   fixar, a trilha tem a altura do quadro e tudo fica a vista.

   Cadencia de lista aprovada pelo cliente: as linhas entram uma a uma,
   devagar, de cima para baixo.
   -------------------------------------------------------------------------- */
.board {
  --reveal-stagger: var(--row-stagger);
  --dur-reveal-scroll: var(--dur-row);

  /* O quadro fixa logo abaixo do header e ocupa a altura que sobra na
     janela, com teto: num monitor alto ele nao vira uma coluna estreita. */
  --board-top: var(--hero-top);
  --board-frame: min(calc(100svh - var(--board-top) - 2 * var(--shell-pad)), 46rem);
  /* Quanto se rola com cada diretor em cena. */
  --board-step: 55svh;
}

.board__frame {
  display: grid;
  gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
}

.board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  flex-wrap: wrap;
}

.board__title,
.perks__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: var(--fw-display);
  line-height: 1.2;
  letter-spacing: calc(-0.028em * var(--track-display));
}

.board__note {
  font-size: var(--fs-micro);
  color: var(--ink-50);
}

/* Progresso da trilha: um traco por diretor, o atual em vermelho. So
   aparece no quadro fixo do celular, onde a lista mostra uma pessoa. */
.board__marks {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.board__mark {
  width: 0.875rem;
  height: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition:
    width var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.board__mark.is-current {
  width: 1.5rem;
  background: var(--brand);
}

/* Palco: a moldura .media (raio, recorte, fundo afundado). O zoom de
   entrada da moldura e trocado pelo `photo-settle` de cada retrato, que
   roda a cada troca, e nao so na revelacao. O rosto fica no terco de cima
   em qualquer recorte (--focus vem do config). */
.board__stage {
  --img-scale: 1;

  aspect-ratio: 1;
  isolation: isolate;
}

/* Os retratos empilhados. So o atual e o que acabou de sair sao pintados:
   nenhum outro custa composicao. */
.board__photo {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

/* O que acabou de sair fica embaixo, parado, ate a cortina do novo cobri-lo. */
.board__photo.is-previous {
  z-index: 1;
  visibility: visible;
}

.board__photo.is-current {
  z-index: 2;
  visibility: visible;
  animation: curtain-down var(--dur-reveal) var(--ease-out) both;
}

.board__photo.is-current .board__img {
  animation: photo-settle var(--dur-reveal) var(--ease-out) both;
}

/* A primeira cortina espera a direcao entrar em cena: desce junto com a
   revelacao, e nao escondida na carga da pagina. */
.js .board:not(.is-revealed) .board__photo,
.js .board:not(.is-revealed) .board__img {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   Lista de diretores — so quem esta em cena fica em preto, com as
   credenciais abertas
   -------------------------------------------------------------------------- */
.board__list {
  display: grid;
  align-content: start;
  min-width: 0;
}

.director {
  position: relative;
  border-top: 1px solid var(--line);
}

.director:last-child {
  border-bottom: 1px solid var(--line);
}

/* O fio de quem esta em cena fica vermelho, crescendo da esquerda: o mesmo
   gesto do acordeao de perguntas. */
.director::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

.director.is-open::after {
  transform: scaleX(1);
}

.director__heading {
  font: inherit;
}

/* Tamanhos limitados tambem pela ALTURA da janela: o quadro fixo precisa
   caber inteiro numa tela de notebook baixa. Abaixo de ~770px de altura o
   respiro encolhe mais depressa (o termo 4.4vh - 17px): e ele que paga a
   terceira linha de credenciais num 1366x768 com barra de favoritos. */
.director__trigger {
  display: grid;
  gap: 0.3125rem;
  width: 100%;
  padding-block: clamp(0.5rem, min(0.7rem + 0.8vw, 2.2vh, 4.4vh - 1.0625rem), 1.375rem);
  text-align: left;
}

.director__trigger[aria-current="true"] {
  cursor: default;
}

.director__trigger:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 4px;
}

.director__name {
  font-family: var(--font-display);
  font-size: clamp(1.3125rem, min(1rem + 1.3vw, 4.4vh), 2.25rem);
  font-weight: var(--fw-display);
  line-height: 1.08;
  letter-spacing: calc(-0.03em * var(--track-display));
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-out);
}

.director__role {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-50);
  transition: color var(--dur-base) var(--ease-out);
}

.director.is-open .director__role {
  color: var(--brand-strong);
}

/* So com JavaScript existe alguem "em cena": os outros recuam para o tom
   apagado, como a segunda voz dos titulos. Sem ele, todos ficam pretos. */
.js .director:not(.is-open) .director__name {
  color: var(--ink-30);
}

@media (hover: hover) {
  .js .director:not(.is-open):hover .director__name {
    color: var(--ink-70);
  }

  .director:not(.is-open):hover::after {
    transform: scaleX(1);
  }
}

/* Credenciais. Sem JavaScript ficam todas abertas: o recolhimento e regra
   `.js`, aplicada no <head>, entao nao ha piscada de conteudo. Fechadas,
   continuam no documento: o leitor de tela le todas. */
.director__body {
  display: grid;
}

.js .director__body {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-svc-panel) var(--ease-out);
}

.js .director.is-open .director__body {
  grid-template-rows: 1fr;
}

/* O recorte nao pode ter padding proprio: numa faixa 0fr o padding nao e
   absorvido e a linha fechada vazaria a altura dele. */
.director__panel {
  min-height: 0;
  overflow: hidden;
}

.director__facts {
  display: grid;
  gap: clamp(0.125rem, 0.5vh, 0.25rem);
  padding-bottom: clamp(1rem, min(0.8rem + 0.9vw, 2.4vh), 1.625rem);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-50);
}

.director__fact--since {
  font-weight: 700;
  color: var(--ink);
}

/* Ao entrar em cena, as linhas sobem uma a uma. */
.js .director__fact {
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js .director.is-open .director__fact {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(120ms + var(--j, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   O que vem junto — painel cinza-claro, um check por diferencial, e a acao
   que fecha a secao. O check e o do painel da hero (.check, components.css),
   marcado pela revelacao.
   -------------------------------------------------------------------------- */
.perks {
  --reveal-stagger: var(--row-stagger);
  --dur-reveal-scroll: var(--dur-row);

  display: grid;
  grid-template-areas:
    "title"
    "list"
    "action";
  gap: clamp(0.5rem, 0.3rem + 1vw, 1.25rem);
  padding: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
}

.perks__title {
  grid-area: title;
}

.perks__list {
  grid-area: list;
  display: grid;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

.perks__actions {
  grid-area: action;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
}

.perk {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: clamp(0.875rem, 0.7rem + 0.6vw, 1.125rem);
  border-top: 1px solid var(--line);
}

/* A primeira linha dispensa o fio: o titulo ja separa. */
.perk:first-child {
  border-top: 0;
}

.perk__text {
  display: grid;
  gap: 0.1875rem;
  min-width: 0;
}

.perk__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.perk__note {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   Tablet — sem fixar, o palco ganha a coluna da esquerda, em retrato; os
   diferenciais ganham duas colunas.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .board__frame {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 4vw, 5rem);
  }

  .board__stage {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 5;
  }

  .board__head,
  .board__list {
    grid-column: 2;
  }

  .perks__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .perk:nth-child(2) {
    border-top: 0;
  }
}

/* --------------------------------------------------------------------------
   Desktop — o painel repete a divisao da direcao: titulo em cima e acao
   embaixo na coluna do palco, lista na coluna dos nomes.
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .perks {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title  list"
      "action list";
    column-gap: clamp(1.5rem, 4vw, 5rem);
  }

  /* Titulo e acao alinham pelo texto da primeira e da ultima linha da
     lista, e nao pela borda dela: o mesmo respiro vertical da .perk. */
  .perks__title {
    padding-top: clamp(0.875rem, 0.7rem + 0.6vw, 1.125rem);
  }

  .perks__actions {
    align-self: end;
    padding-block: 0 clamp(0.875rem, 0.7rem + 0.6vw, 1.125rem);
  }
}

/* --------------------------------------------------------------------------
   Quadro fixo — com JavaScript e numa janela com altura para isso. A trilha
   cresce um trecho por diretor e o quadro para logo abaixo do header.
   -------------------------------------------------------------------------- */
@media (min-height: 32rem) {
  .js .board {
    height: calc(var(--board-frame) + var(--count, 4) * var(--board-step));
  }

  .js .board__frame {
    position: sticky;
    top: var(--board-top);
    height: var(--board-frame);
  }
}

/* Celular e tablet: o palco ocupa a altura que sobra e, embaixo, fica so
   quem esta em cena. Todos os diretores dividem a mesma celula da grade:
   a altura e a do maior, entao o palco nao muda de tamanho na troca. Os
   de fora ficam transparentes, e nao escondidos: continuam no documento
   e alcancaveis pelo teclado e pelo leitor de tela (o foco os poe em cena,
   ver js/sections/empresa.js). */
@media (min-height: 32rem) and (max-width: 63.99rem) {
  /* Aqui o quadro nao tem teto: o palco e largo, e a altura toda e dele. */
  .js .board {
    --board-frame: calc(100svh - var(--board-top) - 2 * var(--shell-pad));
  }

  .js .board__frame {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2.2vh, 1.25rem);
  }

  .js .board__head {
    align-items: center;
  }

  .js .board__note {
    display: none;
  }

  .js .board__marks {
    display: flex;
  }

  .js .board__stage {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .js .board__list {
    grid-template-areas: "director";
  }

  .js .director {
    grid-area: director;
    border: 0;
  }

  .js .director::after {
    display: none;
  }

  .js .director > * {
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .js .director:not(.is-open) {
    pointer-events: none;
  }

  .js .director:not(.is-open) > * {
    opacity: 0;
  }

  .js .director__body {
    grid-template-rows: 1fr;
  }

  .js .director__trigger {
    padding-block: 0 0.5rem;
  }

  .js .director__facts {
    padding-bottom: 0;
  }
}

/* Desktop: o palco guarda o retrato em 4:5 enquanto couber e encolhe na
   altura quando a janela e baixa. O respiro entre o titulo e a lista
   tambem cede numa janela baixa (abaixo de ~730px). */
@media (min-height: 32rem) and (min-width: 64rem) {
  .js .board__frame {
    row-gap: clamp(1.25rem, min(0.9rem + 1.6vw, 4.4vh), 2rem);
  }

  .js .board__stage {
    align-self: start;
    max-height: 100%;
  }
}