/* ==========================================================================
   Messages — a carta dos noivos aos convidados.

   Sem card, sem borda, sem fundo próprio: a mensagem é impressa sobre a
   superfície da seção, que é a mesma do resto do site. O que dá forma à
   carta é a medida curta, a troca entre a serifa e a sem-serifa e o espaço
   em volta. Todas as classes são próprias desta seção.
   ========================================================================== */

.messages {
  /* A composição é um pouco mais larga que a coluna de leitura, para as
     frases grandes respirarem sem alargar a linha do texto corrente. */
  --carta-largura: 44rem;
  --carta-medida: 37rem;

  position: relative;
  max-width: var(--carta-largura);
  margin-inline: auto;
  text-align: center;
}

/* --- Iniciais ao fundo ---------------------------------------------------
   Marca d'água: existe para dar profundidade ao papel, não para ser lida.
   Se alguém enxergar o monograma antes da primeira frase, está forte demais.
   Fica atrás de tudo, não recebe clique e não entra em seleção de texto. */
.messages__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(9rem, 22vw, 17rem);
  line-height: 1;
  letter-spacing: 0.02em;
  /* Tom claro e não o escuro: o mesmo alfa com o azul escuro deixava o
     monograma legível por cima do texto, e o que se quer aqui é papel, não
     assinatura. */
  color: var(--serenity);
  opacity: var(--watermark);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

/* --- Abertura ------------------------------------------------------------
   A voz que começa a carta: serifa, maior que o texto e menor que o título
   da seção. A medida em `ch` faz a quebra em duas linhas sozinha. */
.messages__abertura {
  --carta-atraso: 0ms;
  max-width: 32ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.2rem);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  text-wrap: balance;
}

/* --- Corpo --------------------------------------------------------------- */
.messages__texto {
  --carta-atraso: 90ms;
  max-width: var(--carta-medida);
  margin: var(--space-6) auto 0;
  line-height: 1.8;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.messages__abertura + .messages__texto {
  margin-top: var(--space-7);
}

/* --- A frase que a carta veio dizer -------------------------------------- */
.messages__destaque {
  --carta-atraso: 180ms;
  max-width: 36ch;
  margin: var(--space-8) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem);
  line-height: var(--lh-snug);
  color: var(--serenity-dark);
  text-wrap: balance;
}

/* --- Fecho ---------------------------------------------------------------
   Depois do destaque a voz baixa: agradecimento discreto, assinatura em
   serifa e a data em corpo pequeno, como no pé de uma carta. */
.messages__agradecimento {
  --carta-atraso: 240ms;
  margin-top: var(--space-7);
  color: var(--text-secondary);
}

.messages__assinatura {
  --carta-atraso: 300ms;
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.8rem);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.messages__data {
  --carta-atraso: 340ms;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--serenity-medium);
}

/* --- Entrada em cena -----------------------------------------------------
   Reaproveita o `.reveal` do projeto; a folha só escalona o atraso para a
   carta aparecer na ordem em que se lê. A marca d'água não anima. */
.js-reveal .messages .reveal {
  transition-delay: var(--carta-atraso, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .messages .reveal {
    transition-delay: 0ms;
  }
}

/* --- Celular -------------------------------------------------------------
   A carta continua carta: mesma composição centrada, só com margem lateral
   extra, respiro menor e a marca d'água ainda mais apagada — numa tela
   estreita ela ocupa proporcionalmente muito mais espaço. */
@media (max-width: 640px) {
  .messages {
    padding-inline: var(--space-1);
  }

  .messages__texto {
    margin-top: var(--space-5);
  }

  .messages__destaque {
    margin-top: var(--space-7);
  }

  .messages__agradecimento {
    margin-top: var(--space-6);
  }

  .messages__marca {
    font-size: clamp(7rem, 34vw, 11rem);
    /* Numa tela estreita o monograma ocupa proporcionalmente mais lugar. */
    opacity: calc(var(--watermark) * 0.72);
  }
}