/* =========================================================
   Convite Fernanda & Matheus — estilos
   ========================================================= */
:root {
  --papel: #dacdbe;
  --papel-claro: #EEE5D7;
  --marinho: #1F2E4D;
  --marinho-escuro: #17233D;
  --texto: #2A3654;
  --dourado: #B8955A;
  --dourado-claro: #D9BF8A;
  --dourado-escuro: #957140;
  --champanhe: #D8C7A8;

  --f-script: "Great Vibes", "Pinyon Script", cursive;
  --f-mono: "Pinyon Script", "Great Vibes", cursive;
  --f-serif: "Cormorant Garamond", "Times New Roman", serif;

  --largura: 480px;
  --borda: 7px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: #dacdbe;
  color: var(--texto);
  font-family: var(--f-serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: none; }

/* ---------- Convite (folha contínua) ---------- */
.convite {
  position: relative;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  box-shadow: 0 0 40px rgba(60, 45, 25, .18);
  z-index: 1;
}

.painel {
  position: relative;
  overflow: hidden;
  background-color: var(--papel);
  isolation: isolate;
}
/* fundo do painel */
.painel::before {
  content: "";
  position: absolute; inset: 0;
  background-color: #dacdbe;
  z-index: -1;
  pointer-events: none;
}
/* bordas douradas laterais */
.painel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(180deg,
      #a8823f 0%, #e2c88f 7%, #b48d4c 13%, #d8bc80 21%, #9d7739 29%,
      #e6cf98 36%, #b38c4b 44%, #d4b67a 52%, #a37d3e 60%, #e0c58b 68%,
      #b08847 76%, #dcc086 85%, #a27b3c 93%, #d9bd82 100%) left top / var(--borda) 100% no-repeat,
    linear-gradient(180deg,
      #d9bd82 0%, #a27b3c 8%, #dcc086 15%, #b08847 24%, #e0c58b 32%,
      #a37d3e 40%, #d4b67a 48%, #b38c4b 56%, #e6cf98 64%, #9d7739 71%,
      #d8bc80 79%, #b48d4c 87%, #e2c88f 93%, #a8823f 100%) right top / var(--borda) 100% no-repeat;
}
/* filete fino interno + emenda sutil entre os painéis */
.painel > .conteudo::before,
.painel > .conteudo::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184,149,90,.55) 8%, rgba(184,149,90,.55) 92%, transparent);
}
.painel > .conteudo::before { left: calc(var(--borda) + 5px); }
.painel > .conteudo::after { right: calc(var(--borda) + 5px); }

.painel + .painel { border-top: 1px solid rgba(150, 125, 85, .22); }
.painel + .painel::before { box-shadow: inset 0 6px 10px -8px rgba(80, 60, 30, .35); }

.conteudo {
  position: static;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(28px, 9vw, 46px);
}
.conteudo > * { position: relative; z-index: 2; }

/* ---------- Folhagens em relevo ---------- */
.folha {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
  opacity: .92;
}
.folha--topo-esq {
  width: 68%;
  top: -16%;
  left: -20%;
  transform: scaleY(-1) rotate(8deg);
}
.folha--base-dir {
  width: 66%;
  bottom: -14%;
  right: -22%;
  transform: scaleX(-1) rotate(-6deg);
}
.folha--suave { opacity: .7; width: 56%; }
.folha--dir-baixo {
  width: 46%;
  right: -16%;
  bottom: -6%;
  transform: rotate(-12deg);
  opacity: .85;
}
.folha--esq-baixo {
  width: 74%;
  left: -26%;
  bottom: -18%;
  transform: rotate(-4deg);
}
.folha--dir-meio {
  width: 44%;
  right: -18%;
  top: 30%;
  transform: rotate(-18deg);
  opacity: .8;
}

/* ---------- Painéis com fundo ilustrado (Fundo 01 / Fundo 02 / Fundo 03) ---------- */
.painel--fundo01,
.painel--fundo02,
.painel--fundo03 {
  background: var(--papel) url("assets/Fundo 01.png") center / 100% 100% no-repeat;
  aspect-ratio: 9 / 16;
  overflow: visible; /* permite crescer se o conteúdo passar da proporção */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.painel--fundo02 { background-image: url("assets/Fundo 02.png"); }
.painel--fundo03 { background-image: url("assets/Fundo 03.png"); }
[class*="painel--fundo"]::before,
[class*="painel--fundo"]::after,
[class*="painel--fundo"] > .conteudo::before,
[class*="painel--fundo"] > .conteudo::after,
[class*="painel--fundo"] .folha {
  display: none;
}
[class*="painel--fundo"] .conteudo { width: 100%; }

/* ---------- Painel 1 ---------- */
.painel--abertura .conteudo {
  padding-top: clamp(20px, 5vw, 36px);
  padding-bottom: clamp(30px, 7vw, 48px);
}

.monograma {
  display: block;
  width: clamp(105px, 28vw, 130px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 10px;
  object-fit: contain;
}

.nomes {
  margin: 4px 0 22px;
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(17px, 5vw, 22px);
  letter-spacing: .24em;
  color: var(--marinho);
  white-space: nowrap;
  padding-left: .24em; /* compensa o letter-spacing */
}
.e-comercial { font-style: italic; letter-spacing: 0; margin: 0 .2em; font-weight: 400; }

.texto {
  margin: 0 0 18px;
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.5;
  color: var(--texto);
}
.texto strong { font-weight: 600; color: var(--marinho); }
.texto--pequeno { font-size: clamp(14px, 3.9vw, 15.5px); margin-top: 4px; margin-bottom: 10px; }

.ramo-mini {
  width: 14px; height: 14px;
  color: var(--dourado);
  margin: 0 auto 14px;
  display: block;
}
.ramo {
  width: 56px; height: 22px;
  color: var(--dourado);
  display: block;
  margin: 2px auto 16px;
}

.data-destaque {
  margin: 0;
  font-size: clamp(15.5px, 4.4vw, 18px);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--marinho);
}
.hora-destaque {
  margin: 4px 0 26px;
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--marinho);
}

.versiculo { margin: 0 0 22px; }
.versiculo p {
  margin: 0 0 6px;
  font-style: italic;
  font-size: clamp(14px, 3.9vw, 15.5px);
  line-height: 1.5;
}
.versiculo cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--dourado-escuro);
}

.cursiva {
  margin: 6px 0 0;
  font-family: var(--f-script);
  font-size: clamp(26px, 7.4vw, 32px);
  line-height: 1.15;
  color: var(--marinho);
}
.cursiva--final { font-size: clamp(24px, 6.6vw, 29px); }
.cursiva--grande { font-size: clamp(32px, 9vw, 40px); }

/* ---------- Títulos cursivos ---------- */
.titulo-cursivo {
  margin: 0;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(36px, 10.4vw, 46px);
  line-height: 1.1;
  color: var(--marinho);
}

/* ---------- Painel 2 ---------- */
.painel--jantar .conteudo { padding-top: 62px; padding-bottom: 66px; }

.info-lista {
  list-style: none;
  margin: 8px auto 28px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.info-lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(14px, 3.9vw, 15.5px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.35;
  color: var(--marinho);
}
.icone { width: 24px; height: 24px; flex: 0 0 24px; color: var(--marinho); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 28px;
  border-radius: 999px;
  background: var(--marinho);
  border: 1px solid var(--dourado);
  box-shadow: inset 0 0 0 2px var(--marinho), inset 0 0 0 3px rgba(217,191,138,.55), 0 2px 6px rgba(30, 30, 50, .18);
  color: #F3EBDD;
  font-family: var(--f-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-decoration: none;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:hover, .botao:focus-visible {
  background: var(--marinho-escuro);
  transform: translateY(-1px);
}
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 1px solid var(--dourado); outline-offset: 3px; }
.botao__icone { width: 17px; height: 17px; color: var(--dourado-claro); flex: 0 0 17px; }
.botao--menor { min-height: 42px; padding: 9px 24px; font-size: 13px; }

/* ---------- Separadores ---------- */
.separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 34px auto 18px;
  max-width: 260px;
  color: var(--dourado);
}
.separador span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dourado) 40%, var(--dourado));
}
.separador span:last-child { background: linear-gradient(90deg, var(--dourado), var(--dourado) 60%, transparent); }
.separador svg { width: 46px; height: 18px; flex: 0 0 46px; }
.separador--curto { max-width: 200px; margin: 26px auto 22px; }

/* ---------- Painel 3 ---------- */
.painel--rsvp .conteudo { padding-top: 62px; padding-bottom: 80px; }
.painel--rsvp .ramo-mini { margin-top: 10px; }
.painel--rsvp .botao { margin: 6px 0 22px; }

.caixa-mensagem {
  max-width: 320px;
  margin: 0 auto;
  padding: 16px 18px;
  border: 1px solid rgba(149, 113, 64, .6);
  border-radius: 14px;
  background: rgba(238, 229, 215, .55);
}
.caixa-mensagem p {
  margin: 0;
  font-size: clamp(14px, 3.9vw, 15.5px);
  line-height: 1.5;
  color: var(--texto);
}
.caixa-mensagem em { font-style: italic; color: var(--marinho); font-weight: 500; }

/* ---------- Painel 4 ---------- */
.painel--info .conteudo { padding-top: 62px; padding-bottom: 70px; }

.bloco {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 330px;
  margin: 6px auto 16px;
  text-align: left;
}
.bloco__icone {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border: 1px solid var(--marinho);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--marinho);
}
.bloco__icone svg { width: 26px; height: 26px; }
.bloco__texto h3 {
  margin: 2px 0 4px;
  font-family: var(--f-serif);
  font-size: clamp(17px, 4.8vw, 19px);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--marinho);
}
.bloco__texto p {
  margin: 0;
  font-size: clamp(14px, 3.9vw, 15.5px);
  line-height: 1.45;
}
.bloco__texto .obs { margin-top: 6px; font-style: italic; font-size: clamp(13.5px, 3.7vw, 14.5px); }

/* ---------- Painel 5 ---------- */
.painel--encerramento .conteudo { padding-top: clamp(60px, 16vw, 96px); padding-bottom: clamp(64px, 18vw, 110px); }
.painel--encerramento .nomes { margin-bottom: 10px; }
.data-final {
  margin: 0;
  font-size: clamp(16px, 4.6vw, 19px);
  font-weight: 500;
  letter-spacing: .3em;
  padding-left: .3em;
  color: var(--marinho);
}

/* ---------- Animação de revelação (sutil) ---------- */
.revelar { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
}
.no-js .revelar { opacity: 1; transform: none; }

/* ---------- Telas muito pequenas ---------- */
@media (max-width: 350px) {
  .nomes { letter-spacing: .16em; }
  .botao { padding: 10px 18px; letter-spacing: .1em; font-size: 13px; }
  .info-lista li { letter-spacing: .05em; }
}

/* ---------- Telas maiores ---------- */
@media (min-width: 520px) {
  .convite { margin: 0 auto 28px; }
}

/* =========================================================
   INTRO — vídeo do envelope (isolada, antes da seção 01)
   ========================================================= */
body.intro-ativa { overflow: hidden; height: 100vh; height: 100dvh; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.intro__palco {
  position: relative;
  width: 100%;
  max-width: var(--largura);
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(60, 45, 25, .18);
}
.intro__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--papel);
  opacity: 0;
  transition: opacity .5s ease, transform 1.6s ease, filter 1.6s ease;
}
.intro__video.pronto { opacity: 1; }

/* dica "toque para abrir" */
.intro__dica {
  position: absolute;
  left: 50%;
  bottom: max(9vh, calc(env(safe-area-inset-bottom) + 40px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.intro__pulso {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dourado);
  box-shadow: 0 0 0 0 rgba(184, 149, 90, .6);
  animation: intro-pulso 2s ease-out infinite;
}
@keyframes intro-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(184, 149, 90, .55); }
  100% { box-shadow: 0 0 0 22px rgba(184, 149, 90, 0); }
}

/* estado: tocando */
.intro.tocando { cursor: default; }
.intro.tocando .intro__dica { opacity: 0; transform: translate(-50%, 10px); }

/* estado: saindo (transição leve para a seção 01) */
.intro.saindo { opacity: 0; visibility: hidden; pointer-events: none; }
.intro.saindo .intro__video { transform: scale(1.06); filter: blur(3px) brightness(1.08); }

/* convite surge suavemente por baixo */
body.intro-ativa .convite { opacity: 0; }
.convite { transition: opacity 1.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro__video, .convite { transition-duration: .4s; }
  .intro__pulso { animation: none; }
}

/* ---------- Botão de música ---------- */
.btn-musica {
  position: fixed;
  right: max(16px, calc((100vw - var(--largura)) / 2 + 18px));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: 50;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(184, 149, 90, .7);
  background: rgba(238, 229, 215, .85);
  color: var(--dourado-escuro);
  box-shadow: 0 6px 18px rgba(60, 45, 25, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.9);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s, background .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-musica.visivel {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s ease, transform .6s ease, visibility 0s, background .3s ease;
}
.btn-musica:hover { background: var(--papel-claro); }
.btn-musica:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.btn-musica svg { width: 22px; height: 22px; grid-area: 1 / 1; transition: opacity .3s ease; }
.btn-musica .btn-musica__off { opacity: 0; }
.btn-musica.pausado .btn-musica__on { opacity: 0; }
.btn-musica.pausado .btn-musica__off { opacity: 1; }
.btn-musica:not(.pausado) .btn-musica__on { animation: musica-pulsa 2.2s ease-in-out infinite; }
@keyframes musica-pulsa {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}