/* ===== Convite Leonardo e Vitória ===== */

/* paleta tirada das artes: papel marfim do arco, filete dourado, tinta quase preta */
:root{
  --papel:#f1ece4;
  --cartao:#f5f1ea;
  --tinta:#1d1a16;
  --ouro:#b28e58;
  --ouro-escuro:#86683a;
  --cinza:#5f5a53;
  --vinho:#8c2f39;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box}

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

body{
  display:grid;
  place-items:center;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ---- Palco: tela cheia no celular, cartão 9:16 centralizado no desktop ---- */
.palco{
  position:relative;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  background:var(--papel);
  touch-action:none;
}

@media (min-width:760px){
  body{background:#e6e0d6}
  .palco{
    width:min(430px, calc(94dvh * 9 / 16));
    height:min(94dvh, calc(430px * 16 / 9));
    border-radius:20px;
    box-shadow:0 40px 90px -30px rgba(29,26,22,.5), 0 2px 10px rgba(29,26,22,.08);
  }
}

/* ---- Cenas ---- */
.cena{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
.cena.ativa{
  opacity:1; visibility:visible;
  transition:opacity .45s ease, visibility 0s;
}

.midia{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ---- 1. Capa: o envelope. Toque em qualquer lugar abre; o lacre pulsa de leve ---- */
.abrir{
  position:absolute; inset:0;
  border:0; padding:0; margin:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lacre{
  position:absolute;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  animation:lacre-luz 2.8s ease-in-out .8s infinite;
}
.lacre::before,
.lacre::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid rgba(236,201,128,.95);
  opacity:0;
  animation:lacre-onda 2.8s cubic-bezier(.2,.7,.2,1) 1.2s infinite;
}
.lacre::after{ animation-delay:2.6s; }
@keyframes lacre-onda{
  0%  { transform:scale(1);   opacity:.9; }
  100%{ transform:scale(1.8); opacity:0; }
}
@keyframes lacre-luz{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,204,130,0); }
  50%    { box-shadow:0 0 26px 6px rgba(240,204,130,.35); }
}
.capa.abrindo .lacre{ display:none; }

.carregando{
  position:absolute; left:50%; top:89%;
  transform:translateX(-50%);
  margin:0;
  font:600 .8rem/1 var(--serif); letter-spacing:.26em; text-transform:uppercase;
  color:var(--tinta); opacity:.6;
  white-space:nowrap;
}

/* ---- 2. Filme ---- */
.filme{ background:var(--papel); }
.filme video{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(var(--s,1));
  transform-origin:center;
  object-fit:cover;
  will-change:transform;
  background:transparent;
}

/* ---- 3. Livro ---- */
.livro{ background:var(--papel); }

.folhas{ position:absolute; inset:0; overflow:hidden; }

.camada{ position:absolute; inset:0; }
.camada[hidden]{ display:none; }
.camada.baixo{ z-index:1; }
.camada.cima{ z-index:2; }

.pagina{ position:absolute; inset:0; }
.pagina canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  transform-origin:center;
}
/* página 2: o lugar se aproxima bem devagar (camada já pronta para o zoom não engasgar ao começar) */
.pagina canvas.lugar{ will-change:transform; }
.pagina canvas.zoom-lugar{
  transform:scale(1.07);
  transition:transform 9s cubic-bezier(.25,.1,.25,1);
}

.virada{
  position:absolute; inset:0;
  z-index:3;
  display:block;
  pointer-events:none;
}
.virada[hidden]{ display:none; }

/* ---- Página 2: o arco com as informações aparece sobre o lugar ---- */
.info{
  position:absolute;
  z-index:2;
  pointer-events:none;
  visibility:hidden;
}
.info img{
  position:absolute;
  display:block;
  max-width:none;
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
}
/* papel e sombra entram juntos; a sombra já vem desfocada e com um furo onde o papel fica */
.info-papel{ inset:0; width:100%; height:100%; }
.info-sombra{ left:-14.583%; top:-5.556%; width:129.167%; height:119.444%; transform-origin:50% 46.512%; }
.info-papel, .info-sombra{
  opacity:0;
  transform:translateY(24px) scale(.985);
}
.info-faixa{               /* posição e tamanho de cada faixa vêm no template */
  opacity:0;
  transform:translateY(10px);
}
.info.revelando{ visibility:visible; }
.info.revelando .info-papel,
.info.revelando .info-sombra{
  opacity:1; transform:none;
  transition:opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.info.revelando .info-faixa{
  opacity:1; transform:none;
  transition:opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(.75s + var(--i) * .28s);
}

/* ---- Dica de arrastar ---- */
.dica{
  position:absolute;
  z-index:10;
  left:50%; bottom:max(6vh, calc(env(safe-area-inset-bottom, 0px) + 28px));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem .95rem;
  border-radius:999px;
  background:rgba(247,242,234,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 2px 14px rgba(29,26,22,.18);
  font:600 .72rem/1 var(--serif); letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
  color:var(--tinta);
  opacity:0;
  animation:dica-entra .8s ease .6s forwards;
}
.dica[hidden]{display:none}
.dica-seta{
  width:16px; height:16px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:rotate(45deg) scale(.62);
  animation:seta-acena 1.9s ease-in-out infinite;
}
@keyframes dica-entra{ to{opacity:.94} }
@keyframes seta-acena{
  0%,100%{transform:rotate(45deg) scale(.62) translate(0,0)}
  50%{transform:rotate(45deg) scale(.62) translate(3px,-3px)}
}

/* ---- Página 3: confirmação de presença — no mesmo arco da página 2 ---- */
.pagina-html{
  position:absolute; inset:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.rsvp{
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:max(62px, 9vh) 18px max(28px, env(safe-area-inset-bottom, 0px) + 20px);
}
.rsvp-voltar{
  position:absolute; left:max(14px, env(safe-area-inset-left, 0px)); top:max(14px, env(safe-area-inset-top, 0px));
  background:rgba(247,242,234,.9); border:0; border-radius:999px;
  padding:.55rem 1rem;
  font:600 .78rem/1 var(--serif); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta);
  cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.2);
}
.rsvp-cartao{
  position:relative;
  width:min(100%, 380px);
  background:var(--cartao);
  border-radius:999px 999px 6px 6px;               /* topo em semicírculo, como o arco da arte */
  padding:62px 28px 28px;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.7), 0 2px 10px rgba(20,12,4,.2);
  text-align:center;
  color:var(--tinta);
}
.rsvp-cartao::before{                              /* filete dourado */
  content:"";
  position:absolute; inset:9px;
  border:1.5px solid var(--ouro);
  border-radius:999px 999px 3px 3px;
  pointer-events:none;
}
.rsvp-cartao > *{ position:relative; }
.rsvp-mono{ height:70px; width:auto; display:block; margin:0 auto 10px; }
.rsvp-titulo{ margin:0; font:500 1.8rem/1.15 var(--serif); letter-spacing:.01em; }
.rsvp-data{ margin:.5rem 0 1.5rem; font:600 .8rem/1.3 var(--serif); letter-spacing:.3em; text-indent:.3em; text-transform:uppercase; color:var(--ouro-escuro); font-variant-numeric:lining-nums; }
.rsvp-hora{ display:block; margin-top:.3rem; }        /* 16:30 em números de linha, como na arte da página 2 */
.rsvp-data::after{
  content:""; display:block; width:56px; height:1px; margin:14px auto 0;
  background:linear-gradient(90deg, transparent, var(--ouro), transparent);
}
.rsvp-rotulo{ display:block; font:600 .8rem/1.3 var(--serif); letter-spacing:.24em; text-transform:uppercase; color:var(--cinza); margin-bottom:.4rem; }
.rsvp-input{
  display:block; width:100%; box-sizing:border-box;
  border:0; border-bottom:1.5px solid rgba(29,26,22,.6); border-radius:0; background:transparent;
  padding:.45rem 0 .5rem; margin-bottom:1.1rem;
  font:600 2rem/1.2 var(--serif); letter-spacing:.26em; text-indent:.26em; text-align:center; text-transform:uppercase;
  color:var(--tinta); outline:none;
  -webkit-appearance:none; appearance:none;
}
.rsvp-input::placeholder{ color:#bdb5a8; letter-spacing:.26em; font-weight:500; }
.rsvp-input:focus{ border-bottom-color:var(--ouro-escuro); box-shadow:0 1px 0 var(--ouro-escuro); }
.rsvp-botao{
  display:block; width:100%;
  border:0; border-radius:3px; padding:1.05rem 1rem;
  background:linear-gradient(180deg,#38332c 0%,#1d1a16 46%,#151310 54%,#1d1a16 100%);
  color:#f7f2ea;
  font:600 .9rem/1 var(--serif); letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  box-shadow:0 12px 22px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  cursor:pointer; transition:transform .12s ease, opacity .2s;
}
.rsvp-botao:active{ transform:translateY(1px); }
.rsvp-botao:disabled{ opacity:.6; cursor:default; }
.rsvp-erro{ margin:.9rem 0 0; font:italic 500 1.05rem/1.4 var(--serif); color:var(--vinho); }
.rsvp-erro[hidden]{ display:none; }
.rsvp-passo[hidden]{ display:none; }
.rsvp-ok-titulo{ margin:.2rem 0 .8rem; font:500 1.6rem/1.2 var(--serif); }
.rsvp-resumo{ list-style:none; margin:0 0 1rem; padding:0; text-align:left; }
.rsvp-resumo li{
  position:relative; padding:.45rem 0 .45rem 1.7rem; border-bottom:1px solid rgba(29,26,22,.1);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em; font-size:1.1rem; font-weight:600;
}
.rsvp-resumo li::before{ position:absolute; left:.15rem; top:.45rem; font-size:1rem; }
.rsvp-resumo li.vai::before{ content:"✓"; color:var(--ouro-escuro); font-weight:700; }
.rsvp-resumo li.nao::before{ content:"—"; color:var(--cinza); }
.rsvp-obrigado{ margin:0 0 1rem; font:500 1.05rem/1.45 var(--serif); color:#3a352e; }
.rsvp-link{
  background:none; border:0; padding:.45rem;
  font:600 .8rem/1 var(--serif); letter-spacing:.16em; text-transform:uppercase; color:var(--tinta);
  cursor:pointer; text-decoration:underline; text-decoration-color:var(--ouro); text-underline-offset:5px;
}
.rsvp-passo .rsvp-link{ margin-top:.9rem; }

/* vários códigos */
.rsvp-codigos{ display:grid; gap:.35rem; margin-bottom:.4rem; }
.rsvp-campo{ position:relative; }
.rsvp-campo .rsvp-input{ margin-bottom:0; }
.rsvp-remover{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:50%; background:transparent;
  color:var(--cinza); font-size:1.4rem; line-height:1; cursor:pointer;
}
.rsvp-mais{
  display:block; width:100%; margin:.2rem 0 1.1rem;
  background:none; border:0; padding:.55rem;
  font:600 .78rem/1.2 var(--serif); letter-spacing:.07em; text-transform:uppercase; color:var(--ouro-escuro); cursor:pointer; white-space:nowrap;
}
.rsvp-mais[hidden]{ display:none; }

@media (min-width:760px){ .rsvp{ padding-top:64px; } }

/* ---- Acessibilidade / menos movimento ---- */
@media (prefers-reduced-motion:reduce){
  .lacre, .lacre::before, .lacre::after{ animation:none; }
  .dica{ animation:none; opacity:.94; }
  .dica-seta{ animation:none; }
  .pagina canvas.zoom-lugar{ transform:none; transition:none; }
  .info-papel, .info-sombra, .info-faixa{ transform:none; }
  .info.revelando .info-papel,
  .info.revelando .info-sombra,
  .info.revelando .info-faixa{ transition:opacity .3s ease; transition-delay:0s; }
}