/* Página pública do convite.
   Independente do CSS do sistema — nada aqui depende do painel. */

:root{
  --fundo:#f3e9dc;
  --papel:#fdfaf5;
  --dourado:#b08d57;
  --dourado-fraco:rgba(176,141,87,.35);
  --tinta:#5d4b3c;
  --tinta-fraca:#8a7867;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display:grid;place-items:center;
  overflow:hidden;
  background:var(--fundo);
  color:var(--tinta);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

/* fundo desfocado das sobras — acompanha a cena que está na tela */
.fundo{
  position:fixed;inset:-8%;
  width:116%;height:116%;
  object-fit:cover;
  filter:blur(46px) saturate(115%) brightness(1.04);
  opacity:.55;
  z-index:0;
  pointer-events:none;
  transition:opacity .9s ease;
}
.fundo.final{opacity:0}
body.fim .fundo.inicial{opacity:0}
body.fim .fundo.final{opacity:.55}

/* ---------------------------------------------------------------
   Palco: mantém a proporção do vídeo enviado. É o que garante que
   os pontos continuem em cima dos botões em qualquer tela.
   --------------------------------------------------------------- */
.palco{
  position:relative;
  z-index:1;
  width:min(100vw, calc(100dvh * var(--prop, 0.5625)));
  height:min(100dvh, calc(100vw / var(--prop, 0.5625)));
  overflow:hidden;
  background:var(--papel);
  box-shadow:0 20px 70px rgba(93,75,60,.25);
}

.palco .arte,
.palco video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* a arte final só aparece no fim, senão vaza uma linha por baixo do vídeo */
.palco .arte{opacity:0;transition:opacity .7s ease}
body.fim .palco .arte{opacity:1}

.palco video{z-index:2;transition:opacity .7s ease;background:var(--papel)}
body.fim .palco video{opacity:0;pointer-events:none}

/* ---------------------------------------------------------------
   Pontos clicáveis
   --------------------------------------------------------------- */
.ponto{
  position:absolute;
  z-index:3;
  padding:0;border:0;
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .5s ease,transform .25s cubic-bezier(.2,.8,.3,1),background .25s;
}
.ponto.retangulo{border-radius:9px}
.ponto .oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* No fim do vídeo o ponto passa a ser clicável. Ele continua invisível
   (fundo transparente, sem borda) — quem manda no visual é o .visivel. */
body.fim .ponto{
  opacity:1;
  pointer-events:auto;
}

/* O anel dourado pulsante é só para quem pediu o marcador. Sem isto ele
   aparecia em TODO ponto, inclusive nos que já têm botão desenhado na arte. */
body.fim .ponto.visivel{
  animation:pulso 3s ease-in-out infinite;
}

@keyframes pulso{
  0%,100%{box-shadow:0 0 0 0 rgba(176,141,87,0)}
  50%    {box-shadow:0 0 0 2.5px rgba(176,141,87,.38),0 8px 22px rgba(176,141,87,.22)}
}

/* quando a arte não tem botão desenhado, o círculo colorido aparece */
.ponto.visivel{
  border:2px solid var(--cor);
  background:color-mix(in srgb, var(--cor) 22%, transparent);
}

/* Brilho ao passar o mouse: só onde o marcador foi pedido. Em ponto sobre
   botão desenhado na arte isso reapareceria como um círculo indesejado
   (no celular o :hover fica "grudado" depois do toque). */
.ponto.visivel:hover,.ponto:focus-visible{
  background:rgba(176,141,87,.10);
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 0 0 2.5px rgba(176,141,87,.6),0 12px 28px rgba(176,141,87,.3)!important;
  animation:none!important;
  outline:none;
}
@media (hover:none){
  .ponto:hover{background:none;transform:none;box-shadow:none!important}
}
.ponto:active{transform:scale(.98)}

/* ---------------------------------------------------------------
   Botão de início — sem ele a música se perde: navegador nenhum
   libera áudio automático sem um gesto do usuário.
   --------------------------------------------------------------- */
.inicio{
  position:absolute;inset:0;z-index:5;
  display:none;
  align-items:flex-end;justify-content:center;
  padding-bottom:13%;
  background:linear-gradient(180deg,rgba(30,22,14,.06) 40%,rgba(30,22,14,.26) 100%);
  cursor:pointer;
  animation:surgir .5s ease;
}
.inicio.mostrar{display:flex}

#btn-inicio{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  padding:17px clamp(22px,6vw,38px);
  max-width:min(86vw,440px);
  text-align:center;text-wrap:balance;
  font-family:var(--serif);
  font-size:15.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dourado);
  background:rgba(253,250,245,.96);
  border:1px solid var(--dourado-fraco);
  border-radius:999px;
  box-shadow:0 14px 36px rgba(93,75,60,.22);
  animation:respira 2.6s ease-in-out infinite;
  transition:background .25s,color .25s,transform .2s;
}
#btn-inicio small{
  display:block;margin-top:5px;
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta-fraca);
  transition:color .25s;
}
#btn-inicio:hover{background:var(--dourado);color:#fff;transform:scale(1.04)}
#btn-inicio:hover small{color:rgba(255,255,255,.85)}
#btn-inicio:active{transform:scale(.98)}

@keyframes respira{
  0%,100%{box-shadow:0 14px 36px rgba(93,75,60,.22),0 0 0 0 rgba(176,141,87,.35)}
  50%    {box-shadow:0 14px 36px rgba(93,75,60,.22),0 0 0 10px rgba(176,141,87,0)}
}
@keyframes surgir{from{opacity:0}to{opacity:1}}

/* ---------------------------------------------------------------
   Pular vídeo — só enquanto o vídeo roda. Antes da partida o toque
   em QUALQUER lugar dá play (é o gesto que libera o áudio), e um
   botão aqui roubaria esse toque; depois do fim não há o que pular.
   --------------------------------------------------------------- */
.pular{
  position:absolute;
  z-index:6;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  display:none;
  align-items:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:9px 16px;
  font-family:var(--sans);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--papel);
  background:rgba(30,22,14,.34);
  border:1px solid rgba(253,250,245,.4);
  border-radius:999px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:.82;
  transition:background .25s,opacity .25s,transform .12s;
}
body.tocando .pular{display:inline-flex;animation:surgir .5s ease}
body.fim .pular{display:none}
.pular:hover{background:rgba(30,22,14,.52);opacity:1}
.pular:active{transform:scale(.97)}
.pular:focus-visible{outline:2px solid var(--papel);outline-offset:2px;opacity:1}


/* ---------------------------------------------------------------
   Janelas
   --------------------------------------------------------------- */
.janela{
  position:fixed;inset:0;z-index:20;
  display:none;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(70,54,40,.42);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.janela.aberta{display:flex;animation:surgir .3s ease}

.folha{
  position:relative;
  width:min(470px,100%);
  max-height:88vh;overflow-y:auto;
  padding:42px 30px 32px;
  background:linear-gradient(180deg,#fffdf9 0%,var(--papel) 100%);
  border:1px solid var(--dourado-fraco);border-radius:4px;
  box-shadow:0 30px 70px rgba(60,44,30,.35);
  animation:subir .35s cubic-bezier(.2,.8,.3,1);
}
.folha::before{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(176,141,87,.22);border-radius:2px;pointer-events:none;
}
@keyframes subir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.fechar{
  position:absolute;top:8px;right:10px;
  width:36px;height:36px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:transparent;color:var(--tinta-fraca);
  font-size:24px;line-height:1;cursor:pointer;
  transition:background .2s,color .2s;
}
.fechar:hover{background:rgba(176,141,87,.14);color:var(--dourado)}

.folha h2{
  margin:0;text-align:center;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,6vw,33px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dourado);
}
.risco{
  width:70px;height:1px;margin:14px auto 24px;
  background:linear-gradient(90deg,transparent,var(--dourado),transparent);
}
.folha p{margin:0 0 5px;line-height:1.6;font-size:15px;color:var(--tinta-fraca);text-align:center}

.etiqueta{
  display:block;margin:24px 0 5px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dourado);text-align:center;
}

.pix{
  display:flex;gap:10px;align-items:center;
  margin-top:6px;padding:11px 13px;
  border:1px dashed var(--dourado-fraco);border-radius:3px;
  background:rgba(176,141,87,.06);
}
.pix code{
  flex:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;color:var(--tinta);word-break:break-all;
}
.copiar{
  flex:none;cursor:pointer;
  padding:8px 14px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--dourado);border:0;border-radius:999px;
  transition:opacity .2s;
}
.copiar:hover{opacity:.85}

/* Botões dentro da janela — confirmar presença, mapa, lista de presentes */
.botoes-janela{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;margin-top:18px;
}
.botao-janela{
  flex:1 1 auto;min-width:150px;max-width:100%;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:12px 22px;
  font-family:var(--sans);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;text-decoration:none;
  color:#fff;background:var(--dourado);
  border-radius:999px;
  transition:opacity .2s,transform .12s;
}
.botao-janela:hover{opacity:.88}
.botao-janela:active{transform:translateY(1px)}
.botao-janela:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}