/* Página Manifesto: as categorias do painel "Promessa", uma por seção.
   Tokens, header e seleção vêm do styles.css. */
.mf {
  --grafite: #3A3A3A;
  --display: "Cal Sans", "Be Vietnam Pro", sans-serif;
  --texto: "Be Vietnam Pro", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  height: auto;
  background: var(--branco);
  color: var(--preto);
}

/* ── abertura: degradê rosa da arte "Untitled Project" (Artboard 3, sem o texto),
   com a tipografia da Artboard 7: Instrument Serif branca ── */
.mf-abertura {
  position: relative;
  display: grid;
  place-items: center;
  /* a primeira dobra inteira */
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  background: #FF2F6E url("assets/manifesto/abertura-rosa.webp") center / cover no-repeat;
  color: var(--branco);
}

.mf-abertura .site-header {
  position: absolute;
  inset: 0 0 auto;
}

/* O h1 enche a dobra: uma linha no desktop, empilhado no celular em pé.
   Entra com um fade de 0,8s ao carregar, como o título do wabi.ai. */
.mf-abertura__tagline {
  display: flex;
  align-items: center;
  gap: 0.22em;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: min(11.5vw, 24svh);
  line-height: 0.95;
  letter-spacing: -0.04em;
  white-space: nowrap;
  animation: mf-fade 800ms var(--ease-out) 150ms both;
}

/* símbolo em branco, mais alto que as maiúsculas (passa do N e do D) */
.mf-abertura__tagline img {
  width: 0.8em;
  height: 1em;
  filter: brightness(0) invert(1);
}

@media (max-aspect-ratio: 4/5) {
  .mf-abertura__tagline {
    flex-direction: column;
    gap: 0.12em;
    font-size: min(22vw, 13svh);
    text-align: center;
  }
  .mf-abertura__tagline img { width: 0.72em; height: 0.9em; }
}

@keyframes mf-fade { from { opacity: 0; } }

/* header claro: símbolo e link em branco sobre a arte */
.site-header--claro .site-header__mark img { filter: brightness(0) invert(1); }
.site-header--claro .site-header__link { color: var(--branco); opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .site-header--claro .site-header__link:hover { color: var(--branco); opacity: .75; }
}

.site-header--claro .site-header__link:focus-visible { outline-color: var(--branco); }

.mf-h2 {
  margin: 0 0 0.6em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.mf-lines {
  margin: 0;
  font-family: var(--texto);
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.04em;
}

/* ── 1. Acreditamos: coluna de leitura no estilo do manifesto do wabi.ai ── */
.mf-leitura {
  position: relative;
  overflow: hidden;
  background: var(--cinza);
  padding: clamp(96px, 14vw, 180px) var(--gutter);
}

.mf-leitura__col {
  display: grid;
  gap: clamp(56px, 7vw, 104px);
  max-width: 34rem;
  margin: 0 auto;
  font-family: var(--texto);
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.33;
  letter-spacing: -0.03em;
  color: var(--grafite);
}

.mf-leitura__col p { margin: 0; }

/* Os traços são desenhados da esquerda para a direita (0,5s), quando o parágrafo entra */
.mf-risco,
.mf-marca,
.mf-sublinha {
  --tinta: var(--rosa);
  color: inherit;
  background-color: transparent;
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 500ms cubic-bezier(.4, 0, .2, 1) 200ms;
}

/* marca-texto rosa translúcido, um pouco mais baixo que a linha, como caneta */
.mf-marca {
  background-image: linear-gradient(rgb(255 0 76 / .22), rgb(255 0 76 / .22));
  background-position: 0 85%;
  background-size: 0% 62%;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  border-radius: 0.2em;
}

/* risco atravessando a frase */
.mf-risco {
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-position: 0 58%;
  background-size: 0% 2px;
}

/* sublinhado grosso */
.mf-sublinha {
  background-image: linear-gradient(var(--tinta), var(--tinta));
  background-position: 0 100%;
  background-size: 0% 3px;
  padding-bottom: 2px;
}

.is-visible .mf-marca { background-size: 100% 62%; }
.is-visible .mf-risco { background-size: 100% 2px; color: rgb(58 58 58 / .55); }
.is-visible .mf-sublinha { background-size: 100% 3px; }

/* parágrafos e mãos surgem suavemente ao entrar na tela */
.reveal-pronto .mf-leitura [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out);
}

.reveal-pronto .mf-leitura [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* mãos em Libras nas margens, como os ícones soltos do wabi.ai */
.mf-leitura__mao {
  position: absolute;
  height: clamp(64px, 7vw, 112px);
  width: auto;
  rotate: var(--giro, 0deg);
}

.mf-leitura__mao--n  { left: 12%; top: 18%; --giro: -8deg; }
.mf-leitura__mao--d  { right: 13%; top: 34%; --giro: 6deg; }
.mf-leitura__mao--n2 { left: 16%; top: 58%; --giro: 5deg; }
.mf-leitura__mao--a  { right: 15%; top: 76%; --giro: -6deg; }

/* no celular não há margem: as quatro mãos vão numa linha acima do texto, soletrando NDNA */
@media (max-width: 900px) {
  .mf-leitura {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 20px 18px;
  }
  .mf-leitura__mao { position: static; height: 64px; }
  .mf-leitura__mao--a { height: 52px; }
  .mf-leitura__col { flex-basis: 100%; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-abertura__tagline { animation: mf-fade 300ms ease both; }
  .reveal-pronto .mf-leitura [data-reveal] { translate: none; transition: opacity 300ms ease; }
  .mf-risco, .mf-marca, .mf-sublinha { transition: none; }
}

/* ── 2. Nasce p/ mundo ── */
.mf-nasce {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(64px, 8vw, 120px) var(--gutter);
}

.mf-nasce__map { width: 100%; height: auto; }

.mf-nasce__title {
  margin: 0 0 0.5em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  /* o degradê do preto para o cinza, como no painel */
  background: linear-gradient(180deg, var(--preto) 35%, #B5B5B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mf-nasce__langs {
  display: grid;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.05em;
}

.mf-nasce__langs li { display: flex; align-items: center; gap: 0.3em; white-space: nowrap; }

/* o símbolo em preto, como no painel */
.mf-nasce__langs img { width: 0.8em; height: 1em; filter: brightness(0); }

/* ── 3. Filosofia ── */
.mf-filosofia {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  min-height: min(56vw, 900px);
  background: var(--preto);
  color: var(--branco);
}

.mf-filosofia__copy { padding: clamp(56px, 7vw, 112px) var(--gutter); }

.mf-filosofia__photo {
  position: relative;
  margin: 0;
  min-height: 100%;
}

/* a foto preenche a coluna inteira, sem ditar a altura da seção */
.mf-filosofia__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mf-filosofia__photo figcaption {
  position: absolute;
  left: 10%;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* ── 4. Novo DNA: foto inteira ao fundo ── */
.mf-dna {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: min(56vw, 900px);
  padding: clamp(56px, 7vw, 112px) var(--gutter);
  color: var(--branco);
}

.mf-dna__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* a frase longa quebra sozinha, as curtas seguem uma por linha */
.mf-dna__lead { display: inline-block; max-width: 30ch; text-wrap: balance; }

/* escurece só o bastante para o texto branco ler bem sobre a foto */
.mf-dna::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(15 15 15 / .55), rgb(15 15 15 / 0) 70%);
}

/* ── 5. Somos / Não Somos ── */
.mf-somos {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: clamp(64px, 10vw, 160px);
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  color: var(--rosa);
}

.mf-somos__yes { justify-self: end; text-align: right; max-width: 34ch; }
.mf-somos__no { justify-self: start; }

/* o símbolo apagado no canto, quase do tom do fundo */
.mf-somos__symbol {
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -18%;
  height: 80%;
  width: auto;
  filter: brightness(0);
  opacity: .05;
}

/* ── 6. Princípios ── */
.mf-principios {
  display: grid;
  justify-items: center;
  padding: clamp(64px, 8vw, 120px) var(--gutter);
  background: #E8E8E8;
}

.mf-principios__symbol { width: 72px; height: 90px; filter: brightness(0); }

.mf-principios__title {
  margin: 16px 0 clamp(24px, 3vw, 40px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.04em;
}

.mf-principios__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: principio;
  display: grid;
  gap: 0.25em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.mf-principios__list li {
  counter-increment: principio;
  display: grid;
  grid-template-columns: 1.2em 1fr;
  align-items: baseline;
}

.mf-principios__list li::before {
  content: counter(principio);
  font-style: normal;
  font-weight: 400;
}

/* ── celular: colunas viram pilha ── */
@media (max-width: 800px) {
  .mf-nasce,
  .mf-filosofia { grid-template-columns: 1fr; }

  .mf-filosofia__photo { aspect-ratio: 4 / 5; }
  .mf-nasce__langs { font-size: clamp(26px, 8vw, 40px); }
  .mf-dna { min-height: 120vw; }
  .mf-dna::after { background: linear-gradient(0deg, rgb(15 15 15 / .6), rgb(15 15 15 / .15)); }
  .mf-somos__yes { justify-self: start; text-align: left; }
}

@media (max-width: 400px) {
  .mf-nasce__langs li { white-space: normal; flex-wrap: wrap; }
}