/* Convite de noivado — Mariana & Diogo
   Paleta tirada da foto do ensaio; monograma em serenity #92A8D1 */

:root {
  /* cor */
  --serenity:    #92A8D1;
  --azul-fundo:  #6D86B2;
  --azul-escuro: #4A5F85;
  --ceu:         #DFE6E8;
  --papel:       #F4F7FA;
  --folha:       #FDFCFA;
  --areia-clara: #EDE0CE;
  --areia:       #D5B48C;
  --dourado:     #9A7848;
  --tinta:       #2B3850;
  --tinta-suave: #6B7A94;
  --creme:       #F4F1E8;

  /* tipo */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --corpo: "Karla", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ritmo */
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --largura: 1080px;
  --leitura: 62ch;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* precisa vir antes das classes com display, senão o atributo hidden perde */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }

.display {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: .005em;
}
.amp { font-style: italic; color: var(--dourado); }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--serenity);
  margin: 0;
}

.secao {
  padding-inline: var(--gutter);
  padding-block: clamp(64px, 11vw, 128px);
}
.limite { max-width: var(--largura); margin-inline: auto; }
.prosa { max-width: var(--leitura); }

/* ---------------- abertura ----------------
   O convite é um cartão. No celular ele ocupa a tela inteira; no desktop
   ele aparece centralizado, no mesmo formato retrato da foto. Assim a
   composição é idêntica em qualquer largura e nada é recortado. */

.abertura {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--papel);
}

.abertura__cartao {
  position: relative;
  container-type: inline-size;
  width: 100%;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.abertura__foto { position: absolute; inset: 0; z-index: -2; background: var(--ceu); }
.abertura__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  display: block;
}

/* A foto de capa é clara (areia e céu), então o texto branco se perdia. O véu
   agora é mais fechado nas pontas — onde ficam o selo/nomes no topo e a data
   embaixo — e mantém o meio mais aberto para a foto respirar. */
.abertura__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(18, 32, 52, .62) 0%,
      rgba(18, 32, 52, .34) 30%,
      rgba(18, 32, 52, .30) 52%,
      rgba(18, 32, 52, .74) 100%);
}

.abertura__conteudo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2cqw;
  padding-inline: 7cqw;
  padding-block:
    calc(8cqw + env(safe-area-inset-top, 0px))
    calc(6cqw + env(safe-area-inset-bottom, 0px));
  color: var(--folha);
  /* rede de segurança de contraste onde a foto clareia atrás do texto */
  text-shadow: 0 1px 18px rgba(18, 32, 52, .55);
}

/* tudo em cqw: o cartão se redesenha igual em 390px ou em 600px */
.abertura__mono { width: min(21cqw, 128px); height: auto; fill: var(--folha); }

.abertura__nomes { font-size: min(10.4cqw, 4.1rem); margin-top: 1cqw; }
.abertura__nomes .amp { color: var(--areia-clara); }

.abertura__frase {
  font-family: var(--display);
  font-style: italic;
  font-size: min(4.2cqw, 1.5rem);
  color: #F1EEE7;
}

.abertura__rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqw;
}
.abertura__dados {
  font-size: min(2.9cqw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* No celular a linha quebrava em "TABOÃO DA / SERRA". Equilibrada e com menos
   espaçamento, ela parte num ponto que faz sentido — ou nem parte. */
@media (max-width: 560px) {
  .abertura__dados { letter-spacing: .12em; text-wrap: balance; }
}
.abertura__dados span { color: var(--areia); padding-inline: .5em; }

/* O selo que resolve a confusão na primeira olhada: é noivado, não casamento.
   Fica acima do monograma, pequeno, sem disputar com os nomes. */
.abertura__selo {
  font-size: min(2.4cqw, 11px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, .78);
  margin-bottom: min(3cqw, 18px);
}

.abertura .btn { font-size: min(2.9cqw, 13px); padding: min(3.8cqw, 16px) min(7.5cqw, 32px); }

.rolar {
  font-size: min(2.4cqw, 10px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, .8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rolar::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(253,252,250,.9), transparent);
  animation: descer 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes descer {
  0%, 100% { transform: scaleY(.45); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .rolar::after { animation: none; } }

/* No desktop a foto sangra de ponta a ponta. Como ela é retrato, o cover
   corta em cima e embaixo — por isso o enquadramento desce para 80%, que é
   onde o casal está. O celular continua mostrando a foto inteira. */
@media (min-width: 860px) {
  .abertura__cartao { width: 100%; height: 100svh; }
  .abertura__foto img { object-position: center 80%; }
  .abertura__conteudo { padding-inline: 6vw; padding-block: 8vh 6vh; }
  .abertura__mono { width: min(9vw, 132px); }
  .abertura__nomes { font-size: min(6.2vw, 5rem); }
  .abertura__frase { font-size: min(2vw, 1.6rem); }
  .abertura__dados { font-size: 13px; }
  .abertura .btn { font-size: 13px; padding: 17px 34px; }
  .abertura__rodape { gap: 22px; }
  .rolar { font-size: 10px; }
}

/* ---------------- botões ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--claro { background: var(--folha); color: var(--tinta); }
.btn--claro:hover { background: var(--creme); }
.btn--azul { background: var(--azul-fundo); color: var(--folha); }
.btn--azul:hover { background: var(--azul-escuro); }
.btn--linha { background: transparent; color: var(--azul-escuro); border-color: var(--serenity); }
.btn--linha:hover { background: var(--ceu); }
.btn:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------- história ---------------- */

.historia { background: var(--folha); }
.historia__intro { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(40px, 7vw, 72px); }
.historia__titulo { font-size: clamp(1.9rem, 5vw, 3rem); }

/* Sem aspect-ratio fixo e sem cover: cada foto entra na proporção dela.
   São três: duas paisagens (foto2, foto3) lado a lado na primeira linha, e a
   retrato (foto4) centralizada embaixo numa coluna mais estreita, para não
   esticar e não deixar vão ao lado. */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 28px);
  align-items: start;
}
.galeria .quadro--c {
  grid-column: 1 / -1;
  width: min(100%, 420px);
  margin-inline: auto;
}
@media (max-width: 720px) {
  .galeria { grid-template-columns: minmax(0, 1fr); }
  .galeria .quadro--c { width: 100%; }
}

.quadro {
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ceu);
}
.quadro img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity .6s ease;
}
.quadro img.carregada { opacity: 1; }

.legenda {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tinta-suave);
  margin-top: 10px;
}

/* ---------------- contagem ---------------- */

.contagem { background: var(--ceu); text-align: center; }
.contagem__frase { font-family: var(--display); font-size: clamp(1.4rem, 4vw, 2.1rem); color: var(--tinta); }
.contagem__numeros {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 5vw, 48px);
  margin-top: 28px;
  font-variant-numeric: tabular-nums;
}
.contagem__bloco { display: flex; flex-direction: column; gap: 6px; min-width: 72px; }
/* Os números são o acontecimento desta faixa; estavam tímidos no meio de
   tanto espaço. Em tamanho de cartela eles passam a sustentar a seção. */
.contagem__n { font-family: var(--display); font-size: clamp(3rem, 10vw, 5.4rem); line-height: .96; color: var(--azul-escuro); }
.contagem__r { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------------- informações ---------------- */

.info { background: var(--papel); }
.info__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(32px, 5vw, 52px);
}
.cartao {
  background: var(--folha);
  border: 1px solid var(--ceu);
  border-radius: 2px;
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cartao__rotulo { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--serenity); }
.cartao__valor { font-family: var(--display); font-size: 1.6rem; line-height: 1.2; }
.cartao__nota { font-size: 14.5px; color: var(--tinta-suave); line-height: 1.55; }
.cartao__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cartao__acoes .btn { padding: 11px 16px; font-size: 11px; letter-spacing: .1em; }

.mapa {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid var(--ceu);
  border-radius: 2px;
  background: var(--folha);
  padding: clamp(24px, 4vw, 40px);
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
@media (max-width: 640px) { .mapa { grid-template-columns: minmax(0, 1fr); } }
.mapa__endereco { font-family: var(--display); font-size: 1.35rem; line-height: 1.35; }
.mapa__ref { font-size: 14px; color: var(--tinta-suave); margin-top: 6px; }

/* ---------------- rsvp ---------------- */

.rsvp { background: var(--areia-clara); }
.rsvp__caixa {
  max-width: 620px;
  margin-inline: auto;
  background: var(--folha);
  border: 1px solid var(--areia);
  border-radius: 2px;
  padding: clamp(28px, 5vw, 48px);
}
.rsvp__titulo { font-size: clamp(1.8rem, 5vw, 2.6rem); text-align: center; }
.rsvp__sub { text-align: center; color: var(--tinta-suave); font-size: 15px; margin-top: 10px; }

.campo { display: flex; flex-direction: column; gap: 7px; margin-top: 22px; }
.campo label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.campo input, .campo select {
  font-family: var(--corpo);
  font-size: 16px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--ceu);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--serenity); outline-offset: 1px; border-color: transparent; }
.campo__dica { font-size: 13px; color: var(--tinta-suave); }

.acompanhantes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.acompanhantes:empty { margin-top: 0; }

.rsvp__erro {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 2px;
  background: #FBEAE7;
  border: 1px solid #E8BDB4;
  color: #8C3B28;
  font-size: 14.5px;
}
.rsvp__acao { margin-top: 26px; display: flex; justify-content: center; }
.rsvp__acao .btn { width: 100%; max-width: 320px; }

.rsvp__ok { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rsvp__ok h3 { font-family: var(--display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 300; }
.rsvp__ok p { color: var(--tinta-suave); margin: 0; max-width: 46ch; }
.rsvp__mono { width: 86px; fill: var(--serenity); }

.contador-presentes {
  text-align: center;
  font-size: 14px;
  color: var(--tinta-suave);
  margin-top: 22px;
}
.contador-presentes strong { color: var(--azul-escuro); font-variant-numeric: tabular-nums; }

/* ---------------- rodapé ---------------- */

.rodape {
  background: var(--azul-escuro);
  color: var(--creme);
  text-align: center;
  padding-inline: var(--gutter);
  padding-block: clamp(48px, 8vw, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rodape__mono { width: 72px; fill: var(--creme); opacity: .9; }
.rodape__nomes { font-family: var(--display); font-size: 1.7rem; }
.rodape__nomes .amp { color: var(--areia); }
.rodape__data { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .78; }

/* ---------------- revelar no scroll ---------------- */

/* Visível por padrão. O JS esconde apenas o que começa abaixo da dobra,
   e devolve tudo se algo der errado — convite em branco não é opção. */
.revelar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .revelar { transition: opacity .7s ease, transform .7s ease; }
  .js .revelar[data-oculto="sim"] { opacity: 0; transform: translateY(18px); }
}

/* ---------------- o filme do pedido ---------------- */

/* No desktop o vídeo é vertical: sozinho no meio de uma seção larga ele virava
   uma tira solta cercada de vazio, e o texto que o explica já tinha saído da
   tela. Em duas colunas o texto fica ao lado dele e os dois se seguram. */
.filme { background: var(--papel); }
.filme__intro { margin-bottom: clamp(28px, 5vw, 48px); }

@media (min-width: 861px) {
  .filme .limite {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 400px);
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
  }
  .filme__intro { margin-bottom: 0; }
  .filme__quadro { margin: 0; width: 100%; }
}

.filme__quadro {
  position: relative;
  margin: 0 auto;
  width: min(100%, 420px);
  aspect-ratio: 9 / 16;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ceu);
  box-shadow: 0 2px 4px rgba(43, 56, 80, .06), 0 28px 64px -40px rgba(43, 56, 80, .5);
}
.filme__video { width: 100%; height: 100%; object-fit: cover; display: block; }

.filme__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 0;
  cursor: pointer;
  color: var(--folha);
  font-family: var(--corpo);
  background: linear-gradient(to bottom, rgba(20,34,54,.18), rgba(20,34,54,.46));
  transition: background .2s ease, opacity .25s ease;
}
.filme__play:hover { background: linear-gradient(to bottom, rgba(20,34,54,.10), rgba(20,34,54,.38)); }
.filme__play:focus-visible { outline: 2px solid var(--folha); outline-offset: -4px; }
.filme__play[hidden] { display: none; }

.filme__play-icone {
  width: 66px; height: 66px;
  border-radius: 50%;
  border: 1px solid rgba(253, 252, 250, .85);
  display: grid;
  place-items: center;
}
.filme__play-icone::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 17px solid var(--folha);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.filme__play-texto {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ---------------- faixa do drone ---------------- */

.faixa {
  position: relative;
  min-height: clamp(380px, 62svh, 620px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ceu);
}
.faixa__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.faixa__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(18,32,52,.34), rgba(18,32,52,.18) 45%, rgba(18,32,52,.44));
}
.faixa__texto {
  margin: 0;
  padding-inline: var(--gutter);
  text-align: center;
  color: var(--folha);
  font-size: clamp(1.6rem, 4.6vw, 3rem);
  line-height: 1.22;
  text-shadow: 0 1px 24px rgba(18, 32, 52, .3);
}

/* ================= rolagem narrativa =================
   O JS só escreve --p (avanço pela tela) e --e (avanço da entrada).
   Todo o movimento é decidido aqui. Sem a classe .cinema no html — que só
   entra quando o motor liga — nada disso vale, e a página fica estática e
   inteira. É assim que `prefers-reduced-motion` é respeitado. */

.cinema .abertura,
.cinema .historia__intro,
.cinema .quadro,
.cinema .filme__intro,
.cinema .filme__quadro,
.cinema .faixa,
.cinema .contagem .limite,
.cinema .cartao,
.cinema .mapa,
.cinema .rsvp__caixa { --p: 0; --e: 1; }

/* a abertura fica presa enquanto a história sobe por cima dela */
/* o trilho é 1,6 tela: a abertura fica presa por 0,6 enquanto a foto se
   abre e o texto se despede, e só então a história sobe por cima */
.cinema .abertura {
  height: 160svh;
  display: block;      /* sem o grid centralizado, o cartão nasce colado no topo */
  padding-block: 0;
}
.cinema .abertura__cartao {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  aspect-ratio: auto;  /* no celular o cartão deixa de seguir a proporção da foto */
  min-height: 0;
}
.cinema .abertura__foto img {
  transform: scale(calc(1.07 - 0.07 * var(--p)));
  transform-origin: center 70%;
}
.cinema .abertura__veu { opacity: calc(1 + var(--p) * 0.5); }
.cinema .abertura__conteudo {
  opacity: clamp(0, calc(1 - (var(--p) - 0.52) * 5), 1);
  transform: translate3d(0, calc(var(--p) * -5svh), 0);
}

/* a história entra por cima da abertura */
.cinema .historia { position: relative; z-index: 1; }

.cinema .historia__intro {
  transform: translate3d(0, calc((1 - var(--e)) * 28px), 0);
  opacity: var(--e);
}

/* cada foto anda numa velocidade — é daí que vem a profundidade */
.cinema .quadro {
  --desloc: 40px;
  transform: translate3d(0, calc((0.5 - var(--p)) * var(--desloc)), 0);
}
.cinema .quadro img { transform: scale(calc(1.03 - 0.03 * var(--e))); }

.cinema .filme__intro {
  transform: translate3d(0, calc((1 - var(--e)) * 26px), 0);
  opacity: var(--e);
}
.cinema .filme__quadro {
  transform: scale(calc(0.94 + 0.06 * var(--e)));
  opacity: calc(0.35 + 0.65 * var(--e));
}

/* a faixa aérea anda mais devagar que a página, o texto vai contra */
.cinema .faixa__video {
  transform: scale(1.16) translate3d(0, calc((var(--p) - 0.5) * 7svh), 0);
}
.cinema .faixa__texto {
  transform: translate3d(0, calc((0.5 - var(--p)) * 6svh), 0);
  opacity: clamp(0, calc(1 - abs(var(--p) - 0.5) * 1.7), 1);
}

.cinema .contagem .limite {
  transform: translate3d(0, calc((1 - var(--e)) * 24px), 0);
  opacity: var(--e);
}

/* os cartões sobem em escada */
.cinema .cartao {
  --atraso: 0;
  transform: translate3d(0, calc(clamp(0, 1 - (var(--e) - var(--atraso)) * 1.6, 1) * 30px), 0);
  opacity: clamp(0, calc((var(--e) - var(--atraso)) * 2), 1);
}
.cinema .mapa {
  transform: translate3d(0, calc((1 - var(--e)) * 28px), 0);
  opacity: var(--e);
}

.cinema .rsvp__caixa {
  transform: translate3d(0, calc((1 - var(--e)) * 32px), 0) scale(calc(0.985 + 0.015 * var(--e)));
  opacity: var(--e);
}

/* o .revelar vira redundante quando o motor está ligado */
.cinema .revelar { opacity: 1 !important; transform: none !important; }

/* fio de progresso do convite inteiro */
.progresso {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progresso__fio {
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--avanco, 0));
  background: linear-gradient(to right, var(--serenity), var(--dourado));
}
@media (prefers-reduced-motion: reduce) { .progresso { display: none; } }