/* ============================================================================
   Matteo & Lorena — 20.02.2027
   Estilos do site. As cores e fontes ficam todas em :root, logo abaixo.
   ========================================================================= */

:root {
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;

  --paper: #f7f3ee;   /* o papel da aquarela, bem clareado */
  --ink: #2b2722;
  --ink-soft: #6d665d;
  --hairline: #e4ddd0;

  /* Paleta — quatro cores, cada uma num tom fechado e num tom claro.
     Os fechados carregam texto e estrutura; os claros, a decoração. */
  --wine: #4f151d;   --wine-soft: #8e5763;   /* vinho    · rosa velho  */
  --moss: #49543c;   --moss-soft: #929882;   /* musgo    · sage        */
  --navy: #011d3f;   --navy-soft: #9dafbb;   /* marinho  · azul claro  */
  --rust: #9e4201;   --rust-soft: #e0c7bb;   /* ferrugem · blush       */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* A textura é um trecho do papel da própria aquarela, espelhado em quatro
     para o ladrilho fechar sem emenda e clareado até quase sumir. */
  background-color: var(--paper);
  background-image: url("../papel.jpg");
  background-repeat: repeat;
  background-size: 300px 300px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  text-align: center;
}

a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
a:hover { color: var(--wine); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- animações ----------------------------------------------------------- */

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ==========================================================================
   Cabeçalho
   ========================================================================= */

.masthead {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  /* O respiro de cima é o da margem de um convite; o de baixo é curto,
     para o seletor de idioma não ficar solto da seção seguinte. */
  padding: calc(env(safe-area-inset-top) + clamp(64px, 13vh, 116px)) 20px 16px;
}

/* confete flutuante */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.confetti span { position: absolute; }
.confetti .dot  { width: 7px;  height: 7px;  border-radius: 50%; }
.confetti .dot--lg { width: 9px; height: 9px; }
.confetti .dash { width: 14px; height: 3px;  border-radius: 2px; }
.confetti .star { font-family: var(--serif); line-height: 1; }

.masthead__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
}

.kicker {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.names {
  margin: 2px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  font-size: clamp(30px, 9.5vw, 54px);
  letter-spacing: 0.01em;
}
.names em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}

.daterule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.daterule span:first-child,
.daterule span:last-child {
  width: 26px;
  height: 1px;
  background: var(--hairline);
}
.daterule time {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.masthead__place {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}

/* --- bloco das fotos ----------------------------------------------------- */

.media-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* encurta o vão até a seção seguinte */
  margin-bottom: -14px;
}

/* seta · moldura · seta */
.gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 2vw, 14px);
  width: 100%;
}

/* --- setas ---------------------------------------------------------------- */

.nav {
  appearance: none;
  flex: none;
  position: relative;
  background: transparent;
  border: 0;
  padding: 8px 2px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  touch-action: manipulation;
  transition: color 160ms ease, transform 160ms ease;
}
.nav:hover { color: var(--wine); }
.nav--prev:hover { transform: translateX(-2px); }
.nav--next:hover { transform: translateX(2px); }
.nav svg {
  width: 13px;
  height: 26px;
  display: block;
}
/* A área de toque cresce para os 44px recomendados sem ocupar espaço no
   layout — assim a moldura fica com quase toda a largura do celular. */
.nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* --- a moldura ------------------------------------------------------------
   Três camadas: as fotos na janela vazada, a polaroid por cima (é ela que
   traz a fita adesiva e a textura do papel), e a legenda na tarja branca.
   As medidas em % vêm da própria imagem da moldura — se ela for trocada,
   basta remedir e atualizar estas quatro linhas.                          */

.frame {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 340px;
  aspect-ratio: 681 / 880;

  /* Medidas do buraco da moldura, varrido coluna a coluna (a fita adesiva
     desce sobre a janela no meio e engana uma leitura só pelo centro).
     A foto avança 2px por baixo da borda de papel dos quatro lados, para
     não sobrar nenhuma fresta clara entre uma coisa e outra.            */
  --win-left: 4.243%;
  --win-top: 10.648%;
  --win-width: 90.367%;
  --win-height: 66.726%;

  /* A tarja branca vai de --band-top até a base do cartão. A legenda é
     centralizada numa faixa mais curta que isso, para o conjunto das duas
     linhas subir um pouco — é onde a mão escreveria numa polaroid.      */
  --band-top: 77.196%;
  --band-height: 17%;

  filter: drop-shadow(0 14px 26px rgba(43, 39, 34, 0.16));
}

.frame__box {
  position: absolute;
  left: var(--win-left);
  top: var(--win-top);
  width: var(--win-width);
  height: var(--win-height);
  background: #e6e0d4;
  overflow: hidden;
}
.frame__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}
.frame__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, center);
  display: block;
}

/* a polaroid propriamente dita, por cima das fotos */
.frame__paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.frame__paper img {
  width: 100%;
  height: 100%;
  display: block;
}

/* a legenda, escrita na tarja branca de baixo */
.caption {
  position: absolute;
  left: var(--win-left);
  top: var(--band-top);
  width: var(--win-width);
  height: var(--band-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 6px;
  text-align: center;
}
.caption__note {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 4.6vw, 19px);
  line-height: 1.2;
  color: var(--ink);
}
.caption__place {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}

/* ==========================================================================
   02 — informações
   ========================================================================= */

.info {
  padding: 20px 0 72px;
}
/* O contêiner é largo de propósito: a margem lateral vive em cada bloco,
   e é isso que deixa a cena do envelope sangrar de ponta a ponta sem
   precisar de 100vw — que quebraria com a barra de rolagem do computador. */
.info__inner {
  width: 100%;
}
.body > .block,
.body > .media-block,
.body > .notes,
.body > .dots,
.body > .closing {
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding-inline: 20px;
}
/* A divisória virou um bloco de largura cheia, então precisa centralizar
   as bolinhas por conta própria — antes quem fazia isso era o contêiner. */
.body > .dots { justify-content: center; }

/* seletor de idioma */
.langs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.langs__sep { color: var(--hairline); }
.langs button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  touch-action: manipulation;
}
.langs button[aria-pressed="true"] {
  color: var(--wine);
  border-bottom-color: var(--wine);
}

/* corpo traduzível */
.body {
  transition: opacity 150ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.block__kicker {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent, var(--ink-soft));
}
.block__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 8vw, 38px);
  line-height: 1.12;
}
/* título desenhado à mão, uma imagem por idioma */
.block__title--lettering {
  display: block;
  width: min(100%, 430px);
  margin: 0 auto;
}
.block__title--lettering img {
  display: block;
  width: 100%;
  height: auto;
}

.block__body {
  margin: 0;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  white-space: pre-line;
  text-wrap: pretty;
}

/* divisória de bolinhas */
.dots {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* bloco de dados (data / horário / local) */
.facts {
  gap: 20px;
}
.facts__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
}
.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.fact__label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fact__value {
  font-family: var(--serif);
  font-size: 24px;
}
.fact__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.fact__address {
  /* Sem rótulo e sem valor acima dele, o endereço virou o conteúdo
     principal do bloco — por isso o corpo maior e a cor cheia. */
  font-size: clamp(18px, 5vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-line;
}
.fact__link {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* bloco com botão — usado pelo RSVP quando chegar a hora */
.cta {
  margin-top: 6px;
  display: inline-block;
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, var(--wine));
  color: #fff;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(43, 39, 34, 0.16);
}
.cta:hover { color: #fff; opacity: 0.9; }

/* perguntas frequentes */
.faq {
  width: min(100%, 460px);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 14px 0;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--accent, var(--wine));
}
.faq details[open] summary::after { content: "–"; }
.faq p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
}

/* a aquarela, entre a despedida e o aviso do convite */
.closing__art {
  display: block;
  width: 104px;       /* a ilustração é mais estreita sem o papel em volta */
  height: auto;
  margin: 14px auto 8px;
}

/* fechamento */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  width: min(100%, 360px);
}
.closing__kicker {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.closing__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 9vw, 44px);
  line-height: 1.05;
}
.closing__names em {
  font-style: italic;
  font-weight: 400;
  color: var(--rust);
}
.closing__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.closing__wink {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wine);
}

/* --- notas práticas -------------------------------------------------------
   Textos longos, de informação. São os únicos alinhados à esquerda do site:
   parágrafo de 600 caracteres centralizado fica desconfortável de ler.    */

/* No celular: lettering em cima, tudo centralizado. */
.notes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  margin-inline: auto;
}
.notes > .block__kicker { text-align: center; }
.notes__art { width: min(64%, 215px); }
.notes__art picture { display: block; }
.notes__art img { display: block; width: 100%; height: auto; }
.note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* No desktop: duas colunas, um terço e dois terços. O lettering ocupa a
   primeira inteira, alinhado ao topo; o texto vai para a segunda.
   O seletor precisa ser `.body > .notes` para vencer a regra de margem
   lateral dos blocos, que também limita a largura.                      */
@media (min-width: 760px) {
  .body > .notes {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 52px;
    row-gap: 34px;
    align-items: start;
    text-align: left;
    max-width: 820px;
  }
  .notes__art {
    grid-column: 1;
    grid-row: 1 / -1;
    width: min(100%, 230px);
  }
  .note { grid-column: 2; }
  .notes > .block__kicker { grid-column: 1 / -1; }
}
.note__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 5.4vw, 27px);
  line-height: 1.2;
  color: var(--accent, var(--ink));
}
.note__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- sem JavaScript ------------------------------------------------------ */

.noscript {
  max-width: 44ch;
  margin: 0 auto;
  padding: 24px 20px 40px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ==========================================================================
   Cena do envelope
   Faixa de ponta a ponta com a Praça da Liberdade ao fundo. Ao entrar na
   tela: o envelope chega voando pela esquerda, a foto desce de cima para
   dentro dele, o papel de recado desliza por trás para a direita, e o texto
   do recado aparece linha a linha.

   As peças são posicionadas em % dentro de .cena, que tem proporção fixa —
   assim a composição inteira escala junta, do celular ao desktop.
   ========================================================================= */

.envelope-scene {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #2b2722;
}
.envelope-scene__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A foto de origem é pequena (679px). Dessaturar e escurecer disfarça a
     ampliação e faz as peças creme saltarem — a referência faz o mesmo. */
  filter: saturate(0.55) brightness(0.72);
}
.envelope-scene__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,39,34,0.25), rgba(43,39,34,0.45));
}

.cena {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  /* Referência de tamanho para tudo que está dentro: 1cqw = 1% da largura
     da cena. É isso que faz o texto do recado escalar junto com o papel em
     vez de seguir a largura da janela. */
  container-type: inline-size;
}
.cena > * {
  position: absolute;
  will-change: transform, opacity;
}
/* <picture> é inline por padrão: sem isto a largura em % não pega e cada
   peça renderiza no tamanho natural do arquivo. */
.cena picture { display: block; }
.cena picture img { display: block; width: 100%; height: auto; }

/* --- o envelope, peça inteira -------------------------------------------- */
/* As posições vêm do vídeo de referência: medi ali onde cada mancha creme
   começa e termina, em % do quadro. */
.cena__envelope {
  left: 23.5%;
  top: 10%;
  width: 54%;
  z-index: 1;
}

/* --- a foto, com a margem branca da referência ---------------------------- */
.cena__foto {
  left: 12%;
  top: 9%;
  width: 32%;
  z-index: 2;
  background: #fbf9f4;
  padding: 3.2% 3.2% 3.2%;
  box-shadow: 0 10px 26px rgba(20, 17, 14, 0.4);
  --rot: -6deg;
  transform: rotate(var(--rot));
}
.cena__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- o papel de recado ---------------------------------------------------- */
.cena__recado {
  left: 54%;
  top: 13%;
  width: 33.6%;
  z-index: 3;
}
.cena__recado img {
  display: block;
  width: 100%;
  filter: drop-shadow(0 10px 22px rgba(20, 17, 14, 0.38));
}

/* O texto acompanha a inclinação que já vem desenhada no papel (11,23°),
   medida no próprio arquivo. */
.cena__texto {
  position: absolute;
  left: 48.2%;
  top: 50.2%;
  width: 42%;
  transform: translate(-50%, -50%) rotate(11.23deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6%;
  text-align: center;
  color: var(--ink);
}
.recado__data {
  font-family: var(--sans);
  font-size: 1.02cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: pre-line;
  line-height: 1.5;
}
.recado__corpo {
  white-space: pre-line;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.656cqw;
  line-height: 1.5;
  text-wrap: pretty;
}
.recado__assina {
  font-family: var(--sans);
  font-size: 1.02cqw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- a coreografia --------------------------------------------------------
   Estado inicial: cada peça fora do lugar. A classe .is-in, posta pelo
   JavaScript quando a cena entra na tela, leva todas ao lugar.           */

.cena__envelope,
.cena__foto,
.cena__recado,
.cena__texto > * {
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.18, 0.74, 0.25, 1);
}

.cena__envelope { transition-duration: 620ms; }
.cena__foto     { transition-duration: 680ms; transition-delay: 300ms; }
.cena__recado   { transition-duration: 640ms; transition-delay: 620ms; }
.cena__texto > * {
  transition-duration: 520ms;
  transition-timing-function: ease;
  transition-delay: calc(980ms + var(--i, 0) * 150ms);
}

.cena:not(.is-in) .cena__envelope {
  opacity: 0;
  transform: translate(-58%, -34%) rotate(-14deg) scale(1.08);
}
.cena:not(.is-in) .cena__foto {
  opacity: 0;
  transform: translate(14%, -128%) rotate(9deg);
}
.cena:not(.is-in) .cena__recado {
  opacity: 0;
  transform: translate(-26%, 34%) scale(0.94);
}
.cena:not(.is-in) .cena__texto > * {
  opacity: 0;
  transform: translateY(8px);
}

.cena.is-in .cena__envelope { opacity: 1; transform: none; }
.cena.is-in .cena__foto     { opacity: 1; transform: rotate(var(--rot)); }
.cena.is-in .cena__recado   { opacity: 1; transform: none; }
.cena.is-in .cena__texto > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cena__envelope, .cena__foto, .cena__recado, .cena__texto > * {
    opacity: 1 !important;
    transition: none !important;
  }
  .cena:not(.is-in) .cena__envelope,
  .cena:not(.is-in) .cena__recado { transform: none !important; }
  .cena:not(.is-in) .cena__foto { transform: rotate(var(--rot)) !important; }
  .cena:not(.is-in) .cena__texto > * { transform: none !important; }
}

/* --- a cena no celular ----------------------------------------------------
   Numa tela estreita a composição larga não cabe: a cena fica com 234px de
   altura e o texto do recado sairia com 5px. Aqui ela vira retrato, as peças
   crescem e o texto ganha um corpo legível.                              */

@media (max-width: 720px) {
  .cena { aspect-ratio: 3 / 4; }

  .cena__foto     { left: 4%;  top: 6%;  width: 54%; }
  .cena__envelope { left: 7%;  top: 19%; width: 81.6%; }
  .cena__recado   { left: 36%; top: 30%; width: 62%; }

  .cena__texto { width: 46%; }
  .recado__data,
  .recado__assina { font-size: 1.9cqw; }
  .recado__corpo  { font-size: 2.7cqw; }

  /* entradas mais curtas: a tela é menor, o percurso também */
  .cena:not(.is-in) .cena__envelope { transform: translate(-44%, -26%) rotate(-12deg) scale(1.06); }
  .cena:not(.is-in) .cena__foto     { transform: translate(10%, -96%) rotate(8deg); }
  .cena:not(.is-in) .cena__recado   { transform: translate(-18%, 26%) scale(0.95); }
}