/*
  Origem — seção clara (fundo Areia, vindo do body — ver bg-swap.js). A
  imagem entra em largura total (100%, 100vh); depois de rolar um pouco, a
  classe .is-shrunk é ligada (ver assets/js/sections/origem.js) e ela
  encolhe pra 60% de uma vez só (transition no CSS, não amarrado contínuo ao
  scroll) — sempre CENTRALIZADA. O texto + botão aparecem junto, alinhados à
  base da imagem já encolhida.

  .origem-pin é o wrapper alto (mesma técnica do hero): mantém a seção
  PINADA (position: sticky) na tela por 100vh extras de scroll, tempo
  suficiente pra animação de encolher terminar — só depois disso a página
  volta a rolar normalmente e a seção sai de vista.
*/
.origem-pin {
  position: relative;
  height: 200vh;
  margin-bottom: var(--sp-16);   /* respiro antes da próxima seção */
}
.origem {
  position: sticky;
  top: 0;
  /* âncora da imagem/texto absolutos e do watermark */
  height: 100vh;
  overflow: hidden;   /* clip o texto enquanto a imagem ainda cobre 100% */
}

.origem__paragraph {
  margin: 0;
}

/* Contorno quadrado (mesmo padrão do newsletter__submit) — cor via
   currentColor, pra acompanhar o texto dinâmico da seção (ver bg-swap.js);
   no hover, preenche fixo em dark/areia (a seção é sempre clara). */
.origem__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid currentColor;
  font-weight: var(--weight-subtitle-strong);
  font-size: 0.625rem;   /* um degrau abaixo do ui-centi, igual ao footer__col-title */
  text-transform: uppercase;
  transition: background-color var(--t), color var(--t);
}
.origem__cta:hover,
.origem__cta:focus-visible {
  background-color: var(--color-dark);
  color: var(--color-areia);
}

.origem__media {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;   /* por cima do texto, enquanto cobre a área dele */
  width: 100%;
  height: 100%;
  transform: translateX(-50%);   /* sempre centralizada */
  transition: width 0.9s var(--ease);
}
.origem.is-shrunk .origem__media {
  width: 60%;
}
.origem__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Segunda foto, escondida — crossfade no hover da imagem (puro CSS, sem JS). */
.origem__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
/* Só ativa depois de encolhida — antes disso a foto cobre a tela toda e
   qualquer ponto do mouse dispararia o crossfade. */
.origem.is-shrunk .origem__media:hover .origem__img--hover {
  opacity: 1;
}

/* Texto + botão — posição já calculada pro estado final (imagem em 60%,
   centralizada: borda direita em 80%) + 40px de gap fixo, flush com a base
   da imagem (bottom: 0). Escondido (opacity) até a imagem encolher, com um
   pequeno delay pra entrar só depois que ela já andou boa parte do
   caminho. */
.origem__text {
  position: absolute;
  left: calc(80% + 40px);
  right: var(--grid-margin);
  bottom: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease) 0.4s;
}
.origem.is-shrunk .origem__text {
  opacity: 1;
  pointer-events: auto;
}

/* Palavra grande em watermark — duas cópias sobrepostas, cada uma com o
   tratamento certo pro fundo que cruza: a de baixo (--bg) usa o mesmo
   recurso do .manifesto__watermark (blend "difference"), que funciona bem
   sobre o Areia liso; a de cima (--photo) é recortada só na área da própria
   foto (.origem__watermark-clip) e usa cor sólida, porque o blend fica
   difícil de ler numa foto com tanta variação de tom. Ambas vivem DENTRO de
   .origem__media (mesmo contexto da <img>) e usam left negativo pra começar
   fora da foto, na coluna de texto — valor aproximado, igual ao -2.5vw do
   manifesto. */
.origem__watermark {
  display: none;   /* ocultado a pedido — marcação/estilo mantidos, só escondidos */
  position: absolute;
  left: -38vw;
  bottom: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-title);
  font-size: 15vw;
  line-height: 1;
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.origem__watermark--bg {
  z-index: 1;
  color: color-mix(in srgb, white, black);
  mix-blend-mode: difference;
  opacity: 0.18;
}

/* Recorte exatamente do tamanho da foto (mesma caixa de .origem__media) —
   fora dele a segunda cópia simplesmente não existe visualmente. */
.origem__watermark-clip {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.origem__watermark--photo {
  color: var(--color-areia);
  opacity: 0.02;
  text-shadow: 0 4px 20px rgba(32, 26, 24, 0.5);
}

@media (max-width: 1024px) {
  .origem__watermark,
  .origem__watermark-clip {
    display: none;   /* layout empilhado — o transbordo sobre a coluna de texto não existe mais */
  }

  /* Empilhado — sem pin/sticky, sem o encolher/revelar/centralizar, que só
     fazem sentido lado a lado. Imagem normal no topo, texto normal (em
     fluxo) embaixo. */
  .origem-pin {
    height: auto;
    margin-bottom: calc(var(--sp-16) + var(--sp-12));
  }
  .origem {
    position: static;
    height: auto;
    overflow: visible;
  }
  .origem__media {
    position: static;
    transform: none;
    width: 100%;
    height: 60vh;
  }
  .origem__text {
    position: static;
    opacity: 1;
    pointer-events: auto;
    padding: var(--sp-8) var(--grid-margin) 0;
  }
}