/* =============================================================
   Convite Ricardo & Jamilly
   Layout em "prancheta": todo o conteúdo é posicionado em uma
   tela de 360 px de largura (a mesma do design original) e o
   JavaScript aplica um `scale` para preencher a tela do visitante.
   ============================================================= */

/* ---------- fontes ---------- */
@font-face {
  font-family: 'RJ Sans';
  src: url('../fonts/sans-100.woff') format('woff');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'RJ Sans';
  src: url('../fonts/sans-400.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RJ Sans';
  src: url('../fonts/sans-600.woff') format('woff');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'RJ Serif';
  src: url('../fonts/serif.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'RJ Display';
  src: url('../fonts/display.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

/* ---------- paleta ---------- */
:root {
  --azul: #5e709d;
  --grafite: #4c4c4c;
  --gelo: #f4faff;
  --cinza: #dbdfe6;
  --areia: #afbfcb;

  --sans: 'RJ Sans', 'Segoe UI', system-ui, sans-serif;
  --serif: 'RJ Serif', Georgia, 'Times New Roman', serif;
  --display: 'RJ Display', Georgia, serif;

  /* largura máxima da prancheta em telas grandes */
  --largura-max: 460px;
}

/* ---------- reset enxuto ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cinza);
  color: var(--grafite);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img { display: block; border: 0; }
a { text-decoration: none; color: inherit; }

/* =============================================================
   Prancheta
   ============================================================= */
.moldura {
  position: relative;
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  overflow: hidden;
  background: var(--cinza);
}

.palco {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* o JS ajusta `transform: scale(...)`; o valor abaixo é só o
     ponto de partida antes do script rodar */
  transform: scale(1);
}

/* a capa ocupa a tela inteira, centralizada, e nunca rola */
.pagina-capa { overflow: hidden; }
.moldura--capa {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--cinza);
}

/* =============================================================
   Elemento genérico da prancheta
   `--x --y` posição, `--w --h` tamanho, `--r` rotação em graus
   ============================================================= */
.el {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  /* --pos guarda a posicao de projeto do elemento; as animacoes de
     abertura reaproveitam esse valor para nao perder o lugar */
  --pos: translate(calc(var(--x) * 1px), calc(var(--y) * 1px))
         rotate(calc(var(--r, 0) * 1deg));
  transform: var(--pos);
}

/* imagem posicionada dentro do elemento (permite recorte/deslocamento) */
.el > img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--iw) * 1px);
  height: calc(var(--ih) * 1px);
  transform: translate(calc(var(--ix, 0) * 1px), calc(var(--iy, 0) * 1px))
             scale(var(--sx, 1), var(--sy, 1));
}

.recorte { overflow: hidden; }

/* ramos de gipsofila usados como marca d'água */
.ramo { opacity: .32; }

.espelha-x  { --sx: -1; }
.espelha-y  { --sy: -1; }
.espelha-xy { --sx: -1; --sy: -1; }

/* faixas de fundo que ocupam a largura toda */
.faixa {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--y) * 1px);
  height: calc(var(--h) * 1px);
}
.degrade-baixo { background: linear-gradient(to bottom, var(--gelo), rgba(244, 250, 255, 0)); }
.degrade-cima  { background: linear-gradient(to top,    var(--gelo), rgba(244, 250, 255, 0)); }

/* =============================================================
   Textos
   `--fs` tamanho, `--lh` entrelinha, `--ls` espaçamento,
   `--dx --dy` ajuste fino, `--col` cor
   ============================================================= */
.texto p {
  margin: 0;
  font-family: var(--sans);
  font-weight: var(--fw, 400);
  text-align: center;
  color: var(--col, var(--grafite));
  font-size: calc(var(--fs, 12) * 1px);
  line-height: calc(var(--lh, 16) * 1px);
  letter-spacing: calc(var(--ls, 0) * 1px);
  transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px));
}
.texto p.serif { font-family: var(--serif); }

/* caixa auxiliar: o original desenha o texto maior e depois reduz */
.caixa {
  width: calc(var(--cw) * 1px);
  height: calc(var(--ch) * 1px);
  transform: scale(var(--k));
  transform-origin: 0 0;
}

/* textos em arco */
.arco { width: 100%; height: 100%; overflow: visible; }
.arco-txt {
  font-family: var(--sans);
  fill: var(--grafite);
}
.arco-txt--display {
  font-family: var(--display);
  fill: var(--azul);
}

/* =============================================================
   Capa
   ============================================================= */
.fundo-capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.elipse {
  background: var(--areia);
  border-radius: 50%;
}

.lacre {
  display: block;
  cursor: pointer;
  transition: transform .35s ease;
}
.lacre:hover,
.lacre:focus-visible {
  transform: var(--pos) scale(1.06);
}
.lacre:focus-visible { outline: 2px solid var(--azul); outline-offset: 6px; border-radius: 50%; }

/* =============================================================
   Tocador de música
   ============================================================= */
.player {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.player svg { width: 100%; height: 100%; display: block; }
.player .ico-pause { display: none; }
.player[aria-pressed="true"] .ico-play { display: none; }
.player[aria-pressed="true"] .ico-pause { display: block; }
.player:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 50%; }

/* =============================================================
   Pílula e botões
   ============================================================= */
.pilula {
  background: var(--azul);
  border-radius: 999px;
}

.botao {
  display: block;
  background: var(--azul);
  border-radius: 999px;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.botao:hover { filter: brightness(1.08); }
.botao:active { filter: brightness(.94); }
.botao:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* o conteúdo (ícone + rótulo) é centralizado como um bloco só,
   igual ao agrupamento do design original */
.botao-conteudo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cw) * 1px);
  transform: translate(-50%, -50%);
  display: block;
  height: 0;
}
/* --icx = centro horizontal do icone medido da borda esquerda do botao;
   igual nos tres botoes, os icones ficam alinhados no mesmo eixo */
.botao-conteudo > img {
  position: absolute;
  left: calc((var(--icx) - var(--iw) / 2 - (var(--w) - var(--cw)) / 2) * 1px);
  top: 50%;
  width: calc(var(--iw) * 1px);
  height: calc(var(--ih) * 1px);
  transform: translateY(-50%);
}
.botao-txt {
  position: absolute;
  left: calc(var(--tx) * 1px);
  top: 50%;
  width: calc(var(--tw) * 1px);
  transform: translateY(-50%);
  display: block;
  text-align: center;
  color: #fff;
  font-size: calc(var(--fs) * 1px);
  line-height: calc(var(--lh) * 1px);
}

/* =============================================================
   Contagem regressiva
   ============================================================= */
.contagem {
  /* o original usava um widget externo em Courier New — aqui a
     contagem é feita em JavaScript, mantendo a mesma aparência */
  font-family: 'Courier New', Courier, monospace;
  color: var(--grafite);
  display: flex;
  align-items: stretch;
}
.contagem-linha {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}
.contagem .bloco {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.contagem .num {
  display: block;
  height: 57.6px;
  font-size: 35px;
  line-height: 57.6px;
  font-variant-numeric: tabular-nums;
}
.contagem .rot {
  display: block;
  font-size: 11px;
  line-height: 14.4px;
}
.contagem .sep {
  flex: 0 0 auto;
  font-size: 35px;
  line-height: 57.6px;
  height: 57.6px;
}

/* =============================================================
   Preferência por menos animação
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .lacre, .botao { transition: none; }
}

/* =============================================================
   Abertura do convite — a capa se desfaz e o convite entra
   (classe .abrindo na capa, .chegando no convite; o JS aplica)
   ============================================================= */

/* --- saida da capa --- */
.abrindo .dica { animation: rj-sumir .2s ease both; }

.abrindo .lacre { animation: rj-lacre .58s cubic-bezier(.3,.02,.3,1) both; }
@keyframes rj-lacre {
  0%   { transform: var(--pos) scale(1);    opacity: 1; }
  22%  { transform: var(--pos) scale(.93);  opacity: 1; }
  60%  { transform: var(--pos) scale(1.75); opacity: .8; }
  100% { transform: var(--pos) scale(2.6);  opacity: 0; }
}

.abrindo .selo-sombra { animation: rj-sombra .58s ease both; }
@keyframes rj-sombra {
  0%   { transform: var(--pos) scale(1);    opacity: 1; }
  22%  { transform: var(--pos) scale(.93);  opacity: 1; }
  100% { transform: var(--pos) scale(2.4);  opacity: 0; }
}

/* as cordas so desaparecem: nada de mexer no tamanho nem na posicao */
.abrindo .corda { animation: rj-sumir .42s ease .04s both; }

.abrindo .flores { animation: rj-flores .6s ease both; }
@keyframes rj-flores {
  to { transform: var(--pos) translate(0, -16px) scale(1.02); opacity: 0; }
}

.abrindo .moldura--capa {
  animation: rj-aproxima .76s cubic-bezier(.45,0,.55,1) both;
  /* o JS aponta a origem para o centro do lacre */
}
@keyframes rj-aproxima { to { transform: scale(1.14); } }

/* cortina na cor do papel: fecha na capa, abre no convite */
.abrindo body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--areia);
  opacity: 0;
  pointer-events: none;
  animation: rj-cortina-fecha .46s ease .3s forwards;
}
@keyframes rj-cortina-fecha { to { opacity: 1; } }

/* --- entrada do convite --- */
.chegando body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--areia);
  opacity: 0;
  pointer-events: none;
  animation: rj-cortina-abre .62s ease both;
}
@keyframes rj-cortina-abre {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.chegando .moldura {
  transform-origin: 50% 0;
  animation: rj-convite-entra .7s cubic-bezier(.2,.6,.25,1) both;
}
@keyframes rj-convite-entra {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}

@keyframes rj-sumir { to { opacity: 0; } }

/* quem pediu menos movimento no sistema vai direto ao convite
   (fica depois das animacoes acima, senao nao vence a cascata) */
@media (prefers-reduced-motion: reduce) {
  .abrindo .lacre, .abrindo .selo-sombra, .abrindo .corda, .abrindo .flores,
  .abrindo .dica, .abrindo .moldura--capa, .abrindo body::after,
  .chegando body::before, .chegando .moldura { animation: none; }
}

/* =============================================================
   Presentes — QR Code + chave PIX
   Pagina em fluxo (sem prancheta), mesma paleta do convite
   ============================================================= */
.pagina-presentes { background: var(--gelo); }

.moldura--presentes {
  background: var(--gelo);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ramos de gipsofila como marca d'agua, iguais aos do convite */
.pres-ramo {
  position: absolute;
  width: 150px;
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.pres-ramo--topo { top: -34px; right: -46px; transform: rotate(24deg); }
.pres-ramo--base { bottom: -40px; left: -52px; transform: rotate(-152deg); }

.pres {
  position: relative;
  z-index: 1;
  padding: 26px 22px 34px;
  text-align: center;
}

.pres-monograma {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 6px;
}

.pres-titulo {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 6px;
  color: var(--azul);
}

.pres-texto {
  margin: 0 auto 24px;
  max-width: 300px;
  font-size: 13.5px;
  line-height: 21px;
  color: var(--grafite);
  opacity: .85;
}

/* cartoes brancos */
.pres-cartao {
  background: #fff;
  border: 1px solid var(--cinza);
  border-radius: 20px;
  padding: 18px 16px;
  margin: 0 0 16px;
  box-shadow: 0 6px 18px rgba(94, 112, 157, .08);
}

.pres-rotulo {
  margin: 0 0 12px;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  color: var(--azul);
  opacity: .75;
}

.pres-qr { min-height: 40px; }
.pres-qr > img {
  width: 100%;
  max-width: 230px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
}
.pres-qr-falta {
  margin: 0;
  font-size: 12.5px;
  line-height: 19px;
  color: var(--grafite);
  opacity: .7;
}

.pres-chave {
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: 1.4px;
  color: var(--azul);
  word-break: break-all;
}

/* botoes no mesmo desenho dos do convite */
.pres-botao {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-align: center;
  cursor: pointer;
  transition: filter .2s ease;
}
.pres-botao:hover { filter: brightness(1.08); }
.pres-botao:active { filter: brightness(.94); }
.pres-botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.pres-botao--claro {
  background: #fff;
  color: var(--azul);
  border: 1px solid var(--areia);
  margin-bottom: 26px;
}

.pres-recado {
  margin: 10px 0 0;
  min-height: 16px;
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--azul);
  opacity: 0;
  transition: opacity .25s ease;
}
.pres-recado.aparece { opacity: .9; }

.pres-assinatura {
  display: block;
  width: 100%;
  max-width: 215px;
  height: auto;
  margin: 0 auto 20px;
  opacity: .9;
}

.pres-voltar {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--azul);
  opacity: .7;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.pres-voltar:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pres-botao, .pres-recado { transition: none; }
}