:root{
  --noite:      #1B1230;
  --noite-alta: #241a3d;
  --creme:      #F6EFE6;
  --creme-fraco:#cfc3d6;
  --rosa:       #E8A7B8;
  --dourado:    #F2C14E;
  --lavanda:    #9C8CB5;

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Karla", system-ui, sans-serif;

  --largura: 42rem;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html.trava-scroll,
html.trava-scroll body{
  overflow:hidden;
  height:100%;
}

.convite{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  text-align:center;
  padding:2rem;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff5, transparent),
    radial-gradient(1px 1px   at 40% 70%, #fff4, transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, #fff4, transparent),
    radial-gradient(130% 100% at 10% 22%, #571c1c 10%, #2f223a 65%);
  transition:opacity .8s ease, visibility .8s;
}
.convite-presente{
  font-size:3.4rem;
  filter:drop-shadow(0 0 18px rgba(242,193,78,.45));
  animation:balancarPresente 2.6s ease-in-out infinite;
}
.convite-foto{
  width:9.5rem;
  height:9.5rem;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--dourado);
  box-shadow:0 0 0 6px #ffffff12, 0 0 32px 4px rgba(242,193,78,.35);
  animation:respirarFoto 3.4s ease-in-out infinite;
}
@keyframes respirarFoto{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.035); }
}
@keyframes balancarPresente{
  0%,100%{ transform:rotate(-5deg); }
  50%{ transform:rotate(5deg); }
}
.convite-botao{
  min-height:44px;
  background:none;
  border:1px solid #ffffff40;
  color:var(--creme);
  font-family:var(--sans);
  font-size:.95rem;
  letter-spacing:.04em;
  padding:1rem 2.1rem;
  border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .25s, border-color .25s, transform .25s;
}
.convite-botao:hover{ background:#ffffff12; border-color:var(--dourado); }
.convite-botao:active{ transform:scale(.97); }
.convite-nota{
  margin:0;
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--lavanda);
}
.convite.sumindo{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.musica-botao{
  position:fixed;
  bottom:1.2rem;
  right:1.2rem;
  z-index:70;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid #ffffff30;
  background:var(--noite-alta);
  color:var(--creme);
  font-size:1.1rem;
  cursor:pointer;
  touch-action:manipulation;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px -8px #000a;
}
.musica-botao[hidden]{ display:none; }

.musica-botao{
  position:fixed;
  bottom:1.2rem;
  right:1.2rem;
  z-index:70;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid #ffffff30;
  background:var(--noite-alta);
  color:var(--creme);
  font-size:1.1rem;
  cursor:pointer;
  touch-action:manipulation;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px -8px #000a;
}
.musica-botao[hidden]{ display:none; }

.nivel-amor{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:60;
  pointer-events:none;
}
.nivel-amor-trilha{
  position:relative;
  height:4px;
  background:#ffffff14;
}
.nivel-amor-preenchido{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--rosa), var(--dourado));
  transition:width .1s linear;
}
.nivel-amor-coracao{
  position:absolute;
  top:2px;
  left:0%;
  transform:translate(-50%,0);
  font-size:.85rem;
  line-height:1;
  transition:left .1s linear;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.5));
}

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

body{
  margin:0;
  background:var(--noite);
  color:var(--creme);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}


@supports not (height: 1svh){
  .abertura{ min-height:100vh; }
  .final{ min-height:90vh; }
}

:focus-visible{
  outline:2px solid var(--dourado);
  outline-offset:4px;
  border-radius:2px;
}

img{ display:block; max-width:100%; }


.abertura{
  position:relative;
  z-index:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:calc(6rem + env(safe-area-inset-top)) 1.5rem 5rem;
  overflow:hidden;
}


.ceu{
  position:absolute; inset:0;
  z-index:-2;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff5, transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, #fff6, transparent),
    radial-gradient(1px 1px   at 33% 42%, #fff4, transparent),
    radial-gradient(1.5px 1.5px at 62% 33%, #fff5, transparent),
    radial-gradient(1px 1px   at 88% 56%, #fff4, transparent),
    radial-gradient(1.5px 1.5px at 22% 68%, #fff4, transparent),
    radial-gradient(1px 1px   at 52% 80%, #fff3, transparent),
    radial-gradient(1.5px 1.5px at 92% 82%, #fff4, transparent),
    radial-gradient(120% 90% at 50% 0%, #3a2757 0%, var(--noite) 60%);
  pointer-events:none;
}


.particulas{
  position:absolute; inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.particula{
  position:absolute;
  bottom:-10px;
  width:var(--tam, 5px);
  height:var(--tam, 5px);
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--rosa) 55%, transparent 75%);
  opacity:0;
  animation:flutuar var(--dur, 16s) linear infinite;
  animation-delay:var(--atraso, 0s);
}
@keyframes flutuar{
  0%  { transform:translate(0,0); opacity:0; }
  12% { opacity:.85; }
  50% { transform:translate(var(--deriva, 20px), -50vh); }
  88% { opacity:.35; }
  100%{ transform:translate(calc(var(--deriva, 20px) * -1), -100vh); opacity:0; }
}


.cadentes{
  position:absolute; inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}
.estrela-cadente{
  position:absolute;
  width:2px; height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 1px #fff, 0 0 14px 3px rgba(255,255,255,.45);
  animation:cairEstrela var(--dur, 1.3s) linear forwards;
}
.estrela-cadente::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:90px; height:1px;
  background:linear-gradient(90deg, #fff, transparent);
  transform-origin:0 50%;
  transform:translateY(-50%) rotate(180deg);
  opacity:.8;
}
@keyframes cairEstrela{
  0%{ transform:rotate(var(--ang, 215deg)) translateX(0); opacity:0; }
  10%{ opacity:1; }
  100%{ transform:rotate(var(--ang, 215deg)) translateX(320px); opacity:0; }
}

.constelacao{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}
.estrela-clicavel{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  background:none;
  border:0;
  padding:.6rem;
  cursor:pointer;
  touch-action:manipulation;
  pointer-events:auto;
}
.estrela-ponto{
  display:block;
  width:6px; height:6px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,.6), 0 0 18px 5px rgba(242,193,78,.25);
  animation:cintilarEstrela 2.4s ease-in-out infinite;
}
@keyframes cintilarEstrela{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.4); }
}
.estrela-palavra{
  opacity:0;
  transform:translateY(4px);
  font-family:var(--serif);
  font-style:italic;
  font-size:.78rem;
  color:var(--dourado);
  white-space:nowrap;
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.estrela-clicavel.revelada .estrela-ponto{
  background:var(--dourado);
  animation:none;
  box-shadow:0 0 10px 3px rgba(242,193,78,.7);
}
.estrela-clicavel.revelada .estrela-palavra{
  opacity:1;
  transform:none;
}
.constelacao-frase{
  position:relative;
  z-index:1;
  margin:1.4rem auto 0;
  max-width:24rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--rosa);
  opacity:0;
  transition:opacity .8s ease;
}
.constelacao-frase.visivel{ opacity:1; }


.vela{ position:relative; margin-bottom:2.5rem; }
.vela .corpo{
  width:12px; height:52px; margin:0 auto;
  border-radius:3px;
  background:linear-gradient(180deg,var(--creme),#d9c9c0);
}
.chama{
  width:14px; height:22px; margin:0 auto 5px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%, #fff 0%, var(--dourado) 45%, #E8763C 100%);
  box-shadow:0 0 22px 7px rgba(242,193,78,.5), 0 0 60px 20px rgba(242,193,78,.18);
  transform-origin:50% 100%;
  animation:tremular 1.6s ease-in-out infinite;
}
@keyframes tremular{
  0%,100%{ transform:scale(1) rotate(-1.5deg); }
  50%    { transform:scale(1.08,.94) rotate(2deg); }
}

.etiqueta{
  margin:0 0 .75rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--rosa);
  letter-spacing:.01em;
}

.nome{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.2rem, 17vw, 7.5rem);
  line-height:.92;
  letter-spacing:-.02em;
}

.subtitulo{
  max-width:26rem;
  margin:1.5rem auto 0;
  color:var(--creme-fraco);
  font-size:1rem;
  line-height:1.65;
}

.contagem{ margin-top:3.5rem; }

.relogio{
  display:flex;
  gap:clamp(.9rem, 5vw, 1.75rem);
  justify-content:center;
  flex-wrap:nowrap;
  font-family:var(--serif);
}
.relogio .casa{ min-width:2.6rem; }
.relogio .valor{
  display:block;
  font-size:clamp(1.5rem, 8vw, 2.1rem);
  font-weight:400;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.relogio .rotulo{
  display:block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.09em;
  color:var(--lavanda);
}
.relogio.chegou{
  font-size:1.6rem;
  font-style:italic;
  color:var(--dourado);
}
.contagem-nota{
  margin:1.1rem 0 0;
  font-size:.85rem;
  color:var(--lavanda);
}

.rolar{ position:absolute; bottom:2rem; }
.rolar span{
  display:block; width:1px; height:44px;
  background:linear-gradient(var(--lavanda), transparent);
}

.bloco{
  max-width:var(--largura);
  margin:0 auto;
  padding:5.5rem 1.5rem;
}

.titulo{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.9rem, 6vw, 2.6rem);
  line-height:1.15;
  margin:0 0 .6rem;
}

.apoio{
  margin:0 0 2.5rem;
  color:var(--creme-fraco);
  font-size:.98rem;
}
.titulo + .tempo,
.titulo + .galeria{ margin-top:2.5rem; }


.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.visivel{
  opacity:1;
  transform:none;
}


.juntos{
  text-align:center;
  padding:4.5rem 1.5rem;
  background:var(--noite-alta);
  border-block:1px solid #ffffff12;
}
.juntos-rotulo{
  margin:0;
  font-size:.8rem;
  letter-spacing:.1em;
  color:var(--lavanda);
}
.juntos-numero{
  margin:.4rem 0 .3rem;
  font-family:var(--serif);
  font-size:clamp(2.6rem, 11vw, 4.4rem);
  line-height:1;
  color:var(--rosa);
  font-variant-numeric:tabular-nums;
}
.juntos-detalhe{
  margin:0;
  font-size:.9rem;
  color:var(--creme-fraco);
  font-variant-numeric:tabular-nums;
}

.juntos-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2.2rem 1.5rem;
  margin-top:1.8rem;
}
.juntos-item{
  flex:1 1 220px;
  max-width:280px;
}
.juntos-item-rotulo{
  margin:0 0 .3rem;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--creme-fraco);
  opacity:.75;
}
.juntos-item .juntos-numero{
  margin:0 0 .3rem;
  font-family:var(--serif);
  font-size:clamp(2rem, 8vw, 3.1rem);
  line-height:1;
  color:var(--rosa);
  font-variant-numeric:tabular-nums;
}
.juntos-item .juntos-detalhe{
  margin:0;
  font-size:.82rem;
  color:var(--creme-fraco);
  font-variant-numeric:tabular-nums;
}


.tempo{
  list-style:none;
  margin:0;
  padding:0 0 0 1.75rem;
  border-left:1px solid #ffffff20;
}
.tempo li{
  position:relative;
  padding-bottom:3rem;
}
.tempo li:last-child{ padding-bottom:0; }
.tempo li::before{
  content:"";
  position:absolute;
  left:calc(-1.75rem - 4.5px);
  top:.6rem;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--dourado);
}
.tempo .data{
  font-size:.78rem;
  letter-spacing:.07em;
  color:var(--lavanda);
}
.tempo h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  margin:.15rem 0 .4rem;
}
.tempo p{ margin:0; color:var(--creme-fraco); }
.tempo .foto-parallax{
  margin-top:1rem;
  width:100%;
  aspect-ratio:4/3;
  border-radius:3px;
  overflow:hidden;
}
.tempo .foto-parallax img{
  width:100%;
  height:100%;
  object-fit:cover;
  will-change:transform;
}

.galeria{
  display:grid;
  gap:1rem;
  grid-template-columns:1fr 1fr;
}
.galeria figure{ margin:0; }
.galeria img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:3px;
}
.galeria figure:nth-child(3n+1) img{ aspect-ratio:1/1; }
.galeria figcaption{
  margin-top:.5rem;
  font-size:.82rem;
  color:var(--lavanda);
  font-style:italic;
  font-family:var(--serif);
}


.carrossel-bloco{ max-width:none; padding-left:0; padding-right:0; padding-top:2rem; padding-bottom:2rem; }
.carrossel-bloco + .carrossel-bloco{ margin-top:0; }
.carrossel-bloco .titulo{ text-align:center; padding:0 1.5rem; }
.carrossel{
  overflow:hidden;
  margin-top:2.5rem;
}
.carrossel-trilha{
  display:flex;
  gap:1rem;
  width:max-content;
  animation:rolarCarrossel 30s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.carrossel-trilha.parado{ animation:none; }
.carrossel-trilha.reversa{ animation-direction:reverse; }
.carrossel-trilha.pausado{ animation-play-state:paused; }
.carrossel-item{
  flex:0 0 auto;
  width:14rem;
}
.carrossel-item img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:4px;
}
@keyframes rolarCarrossel{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (min-width:45rem){
  .carrossel-item{ width:18rem; }
}


.motivos{
  display:grid;
  gap:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr));
}
.carta-motivo{
  position:relative;
  aspect-ratio:1/1.15;
  min-height:44px;
  border:0;
  padding:0;
  background:none;
  cursor:pointer;
  touch-action:manipulation;
  font:inherit;
  color:inherit;
}
.giro{
  position:relative;
  display:block;
  width:100%; height:100%;
}
.frente,.verso{
  position:absolute; inset:0;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.9rem;
  text-align:center;
  transition:opacity .4s ease, transform .4s ease;
}
.frente{
  background:var(--noite-alta);
  border:1px solid #ffffff1c;
  font-family:var(--serif);
  font-size:1.9rem;
  color:var(--lavanda);
  opacity:1;
  transform:scale(1);
}
.verso{
  background:var(--dourado);
  color:#2a1626;
  font-size:.98rem;
  line-height:1.45;
  opacity:0;
  transform:scale(.92);
  pointer-events:none;
}
.carta-motivo.aberta .frente{
  opacity:0;
  transform:scale(1.05);
  pointer-events:none;
}
.carta-motivo.aberta .verso{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}


.carta-bloco{ max-width:38rem; }

.envelope-cena{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.envelope{
  position:relative;
  width:100%;
  max-width:320px;
  aspect-ratio:3/2;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  touch-action:manipulation;
  font:inherit;
  perspective:800px;
  transition:opacity .5s ease, transform .5s ease;
}
.envelope-corpo{
  position:absolute; inset:0;
  background:linear-gradient(160deg, var(--rosa), #d98ba0);
  border-radius:6px;
  box-shadow:0 25px 50px -25px #000a;
}
.envelope-aba{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:58%;
  background:linear-gradient(160deg, #f3d0d9, #e6a3b4);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-radius:6px 6px 0 0;
  transform-origin:top center;
  transition:transform .7s cubic-bezier(.6,0,.3,1);
}
.envelope-selo{
  position:absolute;
  top:44%; left:50%;
  transform:translate(-50%,-50%);
  font-size:2rem;
  filter:drop-shadow(0 4px 10px #0007);
  transition:opacity .3s ease;
}
.envelope.aberto .envelope-aba{
  transform:rotateX(180deg);
}
.envelope.aberto .envelope-selo{ opacity:0; }
.envelope.sumindo{
  opacity:0;
  transform:translateY(-18px) scale(.92);
  pointer-events:none;
}
.envelope-toque{
  margin:1.1rem 0 0;
  font-size:.8rem;
  letter-spacing:.07em;
  color:var(--lavanda);
  text-transform:uppercase;
  transition:opacity .4s ease;
}
.envelope-toque.sumindo{ opacity:0; }

.carta{
  width:100%;
  background:var(--creme);
  color:#3a2d38;
  padding:3rem 2rem;
  border-radius:2px;
  box-shadow:0 30px 60px -30px #0008;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.carta.visivel{
  opacity:1;
  transform:none;
}
.carta-titulo{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:1.8rem;
  margin:0 0 1.4rem;
}
.carta p{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.85;
  margin:0 0 1.1rem;
}
.assinatura{
  margin-top:2rem !important;
  font-style:italic;
  color:#7a6472;
}


.playlist{ display:grid; gap:1.75rem; }
.musica iframe{
  width:100%;
  height:80px;
  border:0;
  border-radius:12px;
}
.musica p{
  margin:.7rem 0 0;
  font-family:var(--serif);
  font-style:italic;
  color:var(--creme-fraco);
  font-size:.95rem;
}


.final{
  min-height:92svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 1.5rem calc(5rem + env(safe-area-inset-bottom));
  background:radial-gradient(90% 60% at 50% 50%, #2c1f47 0%, var(--noite) 70%);
}
.bolo{ width:150px; }
.bolo-vela{
  width:9px; height:30px;
  margin:0 auto;
  background:linear-gradient(180deg,var(--creme),#d9c9c0);
  border-radius:2px;
  position:relative;
}
.bolo-chama{
  position:absolute; top:-20px; left:50%;
  width:13px; height:20px;
  margin-left:-6.5px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%, #fff 0%, var(--dourado) 45%, #E8763C 100%);
  box-shadow:0 0 20px 6px rgba(242,193,78,.5);
  transform-origin:50% 100%;
  animation:tremular 1.6s ease-in-out infinite;
  transition:opacity .35s, transform .35s;
}
.bolo-chama.apagada{ opacity:0; transform:scale(.3) translateY(-10px); }
.bolo-topo{
  height:38px;
  margin-top:4px;
  background:var(--rosa);
  border-radius:4px 4px 0 0;
}
.bolo-base{
  height:46px;
  background:var(--creme);
  border-radius:0 0 4px 4px;
}
.soprar{
  margin-top:2.5rem;
  min-height:44px;
  background:none;
  border:1px solid #ffffff35;
  color:var(--creme);
  font-family:var(--sans);
  font-size:.92rem;
  letter-spacing:.04em;
  padding:.85rem 1.9rem;
  border-radius:999px;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .25s, border-color .25s;
}
.soprar:active{ background:#ffffff1c; }
.soprar:hover{ background:#ffffff12; border-color:var(--dourado); }
.soprar[hidden]{ display:none; }

.final-mensagem{
  font-family:var(--serif);
  font-size:clamp(1.7rem,7vw,2.6rem);
  line-height:1.2;
  margin:2.5rem 0 0;
  max-width:20ch;
}
.final-pedido{
  margin:1rem 0 0;
  max-width:28rem;
  color:var(--creme-fraco);
  font-size:.95rem;
}
.aparece{ animation:subir .8s ease both; }
@keyframes subir{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}

#confete{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:50;
}


@media (min-width:45rem){
  body{ font-size:1.1rem; }
  .galeria{ grid-template-columns:repeat(3,1fr); gap:1.25rem; }
  .carta{ padding:4rem 3.5rem; }
  .bloco{ padding:7rem 1.5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}