/* ==========================================================================
   SOBRE — segunda dobra.

   Composição: retrato à esquerda (fixo pelo scroll da seção) e narrativa à
   direita em três capítulos. O travamento é `position: sticky`, não pin de
   biblioteca: sem pin-spacer, sem recálculo no resize e sem salto ao entrar
   ou sair da seção. O ScrollTrigger entra apenas como camada de animação.

   Peças reaproveitadas de outras folhas:
     - .portrait / .portrait-photo / .portrait-empty ... (hero.css)
     - .name-plate (components.css)
   ========================================================================== */

.about {
  position: relative;
  padding-block: clamp(96px, 11vw, 160px);
  background: var(--c-pearl);
  isolation: isolate;
  scroll-margin-top: 88px;
}

/* Mesma atmosfera das seções do design system: um halo prateado difuso,
   atrás de tudo e fora do fluxo.

   O recorte vive num invólucro próprio, e não na seção: `overflow: hidden`
   em qualquer ancestral de `.about-visual` cancelaria o `position: sticky`.
   Como `.about-visual` está fora deste invólucro, o halo pode extrapolar a
   largura da tela sem criar rolagem horizontal. */
.about-aura-wrap {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-aura {
  position: absolute;
  top: 8%;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
  background: var(--c-silver);
  animation: auraDrift 22s ease-in-out infinite alternate;
}

/* ==========================================================================
   1. TÍTULO DA SEÇÃO

   Um único rótulo técnico, no formato do índice de seção do design system:
   régua de 38px + texto em Space Grotesk. Ele apenas nomeia a dobra — a
   manchete de fato é a do capítulo 01, na coluna de texto. Por isso o
   espaço abaixo é curto: o rótulo é legenda da composição, não um bloco
   independente que precise de respiro próprio.
   ========================================================================== */
.about-heading { margin-bottom: clamp(40px, 5vw, 68px); }

.about-index {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.about-index::before {
  content: '';
  flex: none;
  width: 38px;
  height: 1px;
  background: currentColor;
}

/* ==========================================================================
   2. GRADE DA COMPOSIÇÃO

   `align-items: start` é o que permite o sticky: sem ele o item da coluna
   esquerda seria esticado até a altura da linha e não teria para onde correr.
   ========================================================================== */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(48px, 5.4vw, 88px);
  align-items: start;
}

/* ==========================================================================
   3. COLUNA VISUAL
   ========================================================================== */
.about-visual {
  position: sticky;
  top: clamp(92px, 10vh, 124px);
  align-self: start;
}

.about-frame {
  position: relative;
  height: min(74vh, 660px);
  height: min(74svh, 660px);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
  background: var(--c-graphite-deep);
  box-shadow: var(--shadow-lg);
}

/* Véu inferior: garante leitura da placa sobre qualquer fotografia. */
.about-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(35, 33, 34, .58), transparent 46%);
}

/* Duas camadas para não disputar `transform`: a entrada anima .about-media,
   o parallax de scroll anima .portrait. */
.about-media {
  position: absolute;
  inset: 0;
}

.about-frame:hover .portrait-photo { transform: scale(1.035); }

/* A foto histórica cruza suavemente durante o capítulo Formação. */
.about .portrait-empty,
.about .portrait-photo--formacao {
  transition:
    opacity .55s var(--ease-out),
    transform 1.2s var(--ease-out);
}

.about .portrait-photo--formacao {
  display: block;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  z-index: 1;
}

.about .portrait.is-formacao .portrait-photo--formacao { opacity: 1; }
.about .portrait.is-formacao .portrait-empty { opacity: 0; }

/* --------------------------------------------------------------------------
   Indicador de progresso — capítulo atual dentro da composição
   -------------------------------------------------------------------------- */
.about-progress {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 8px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-pill);
  background: rgba(35, 33, 34, .38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* Só faz sentido quando o scroll o alimenta; o JS libera a exibição. */
  opacity: 0;
  transition: opacity var(--speed-mid) var(--ease-out);
}

.about-scroll-on .about-progress { opacity: 1; }

.about-progress-ticks {
  display: flex;
  align-items: center;
  gap: 5px;
}

.about-progress-tick {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  transition:
    width var(--speed-mid) var(--ease-out),
    background var(--speed-mid) var(--ease-out);
}

.about-progress-tick.is-on { background: var(--c-vital); }
.about-progress-tick.is-current { width: 24px; }

.about-progress-count {
  color: rgba(255, 255, 255, .58);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}

.about-progress-count b {
  display: inline-block;
  color: #fff;
  font-weight: 400;
}

/* ==========================================================================
   4. COLUNA DOS CAPÍTULOS
   ========================================================================== */
.about-chapters {
  display: flex;
  flex-direction: column;
}

/* A altura mínima é o que dá a cada capítulo o comportamento de página: um de
   cada vez ocupa a faixa de leitura enquanto o retrato fica parado. Ela fica
   deliberadamente próxima da altura do conteúdo — blocos muito mais altos que
   o texto fazem a manchete ativa sair do enquadramento antes da troca. */
.about-chapter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(68vh, 580px);
  min-height: min(68svh, 580px);
  padding-block: clamp(36px, 4.5vh, 56px);
  transition: opacity .6s var(--ease-out);
}

/* Estado de foco: só existe quando o JS assume o scroll. Sem ele, todos os
   capítulos ficam legíveis em opacidade cheia. */
.about-scroll-on .about-chapter { opacity: .32; }
.about-scroll-on .about-chapter.is-active { opacity: 1; }

/* Divisor entre capítulos — revelado da esquerda para a direita. */
.about-rule {
  display: block;
  flex: none;
  height: 1px;
  background: var(--c-border);
  transform-origin: left center;
}

.about-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.about-eyebrow::before {
  content: '';
  flex: none;
  width: 38px;
  height: 1px;
  background: currentColor;
}

.about-chapter-title {
  max-width: 17ch;
  margin-bottom: 24px;
  font-size: clamp(27px, 2.5vw, 38px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.about-text p {
  max-width: 46ch;
  color: var(--c-graphite-medium);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
}

.about-text p + p { margin-top: 18px; }

.about-text p strong {
  color: var(--c-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Formação — linhas com régua, no ritmo da escala tipográfica do sistema
   -------------------------------------------------------------------------- */
.about-records {
  margin-top: 14px;
  border-top: 1px solid var(--c-border);
}

.about-record {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--c-border);
}

.about-record-year {
  grid-row: 1 / span 2;
  padding-top: 2px;
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
}

.about-record-name {
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.about-record-org {
  color: var(--c-muted);
  font-family: var(--font-tech);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.5;
}

/* Marcação neutra para o que ainda depende de confirmação do cliente. */
.about-record.is-pending .about-record-name { color: var(--c-silver); }

.about-record-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px 1px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* --------------------------------------------------------------------------
   Abordagem — três princípios em régua, não em cartões
   -------------------------------------------------------------------------- */
.about-pillars { margin-top: 30px; }

.about-pillar {
  display: grid;
  grid-template-columns: minmax(96px, .34fr) minmax(0, 1fr);
  gap: 8px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--c-border);
  align-items: start;
}

.about-pillar b {
  padding-top: 2px;
  color: var(--c-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.about-pillar span {
  color: var(--c-soft-text);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Fecho da narrativa
   -------------------------------------------------------------------------- */
.about-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: border-color var(--speed-fast) ease;
}

.about-link:hover,
.about-link:focus-visible { border-bottom-color: var(--c-ink); }

.about-link svg {
  width: 15px;
  height: 15px;
  transition: transform .3s var(--ease-out);
}

.about-link:hover svg,
.about-link:focus-visible svg { transform: translate(2px, -2px); }

/* ==========================================================================
   5. RESPONSIVO
   ========================================================================== */
@media (max-width: 1120px) {
  .about-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 40px;
  }

  .about-frame {
    height: min(68vh, 560px);
    height: min(68svh, 560px);
  }

  .about-chapter {
    min-height: min(64vh, 500px);
    min-height: min(64svh, 500px);
  }

  .about-chapter-title { font-size: clamp(26px, 3.1vw, 34px); }
}

/* Abaixo de 900px a experiência muda de natureza: nada de sticky, nada de
   foco por scroll. O retrato passa a abrir a seção e os capítulos viram
   leitura contínua, separada por réguas. */
@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 56px);
  }

  .about-visual {
    position: static;
    width: min(100%, 520px);
    margin-inline: auto;
  }

  .about-frame {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .about-progress { display: none; }

  .about-chapter {
    display: block;
    min-height: 0;
    padding-block: clamp(34px, 6vw, 48px);
  }

  /* Mesma especificidade da regra de foco, declarada depois: no empilhado
     todo capítulo fica em opacidade cheia, com ou sem JS. */
  .about-scroll-on .about-chapter,
  .about-scroll-on .about-chapter.is-active { opacity: 1; }

  .about-chapter-title { max-width: 20ch; }
  .about-text p { max-width: 58ch; }
}

@media (max-width: 640px) {
  .about { padding-block: clamp(80px, 16vw, 104px); }

  .about-chapter-title {
    font-size: clamp(24px, 6.4vw, 30px);
    margin-bottom: 20px;
  }

  .about-text p { font-size: 15px; line-height: 1.75; }

  .about-record {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .about-record-year { grid-row: auto; padding-top: 0; }

  .about-pillar {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .about-pillar b { padding-top: 0; }

  .about-link { width: 100%; justify-content: space-between; }
}

/* Notebooks baixos e largos (1366 x 768): o retrato encolhe junto com a
   faixa de leitura para que ambos caibam sob o cabeçalho fixo. */
@media (min-width: 901px) and (max-height: 760px) {
  .about-frame {
    height: min(72vh, 500px);
    height: min(72svh, 500px);
  }

  .about-chapter {
    min-height: min(70vh, 440px);
    min-height: min(70svh, 440px);
  }
}

/* ==========================================================================
   6. MOVIMENTO REDUZIDO

   O JS já desiste de animar nesse modo (nada fica em opacity 0). Aqui só
   desligamos o halo ambiente e o hover da fotografia.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .about-aura { animation: none; }
  .about-frame:hover .portrait-photo { transform: none; }
}