/* ==========================================================
   Convite 15 anos · Livia
   Paleta e tipografia seguem o PDF do Canva (lírios rosa).
   ========================================================== */

@font-face{font-family:"Jost";font-weight:300;font-style:normal;font-display:swap;src:url(../assets/fontes/jost-300.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:300;font-style:italic;font-display:swap;src:url(../assets/fontes/jost-300i.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fontes/jost-400.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url(../assets/fontes/jost-500.woff2) format("woff2")}
@font-face{font-family:"League Spartan";font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fontes/spartan-700.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url(../assets/fontes/cormorant-600.woff2) format("woff2")}

:root{
  --moldura:#E98591;      /* linha da moldura */
  --texto:#DE6579;        /* textos corridos */
  --titulo-cor:#F6798F;   /* títulos em negrito */
  --botao:#F69DAE;        /* botões do menu */
  --botao-forte:#F08699;
  --rosa-suave:#FFE6EB;
  --tinta:#8E2F46;        /* texto digitado nos campos */

  --corpo:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --titulo:"League Spartan","Jost",system-ui,sans-serif;
  --serifa:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}

*{box-sizing:border-box;margin:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  background:#FDEEF1;color:var(--texto);font-family:var(--corpo);
  -webkit-tap-highlight-color:transparent;
}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px;border-radius:6px}
[data-foco]:focus{outline:none}

/* ---------- palco (formato 9:16 do convite) ---------- */
.palco{
  position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;
  background:#fff;container-type:size;isolation:isolate;
}
@media (min-width:600px){
  .palco{
    height:min(calc(100dvh - 32px),940px);width:auto;aspect-ratio:9/16;
    border-radius:26px;box-shadow:0 34px 90px -24px rgba(214,86,116,.5);
  }
}

/* ---------- moldura: quatro traços que se desenham em sequência ---------- */
.moldura{position:absolute;inset:10cqw 5.4cqw;pointer-events:none;z-index:1}
.moldura i{position:absolute;display:block;background:var(--moldura)}
.moldura .t,.moldura .b{left:0;right:0;height:.38cqw;transform:scaleX(0)}
.moldura .d,.moldura .e{top:0;bottom:0;width:.38cqw;transform:scaleY(0)}
.moldura .t{top:0;transform-origin:0 50%}
.moldura .d{right:0;transform-origin:50% 0}
.moldura .b{bottom:0;transform-origin:100% 50%}
.moldura .e{left:0;transform-origin:50% 100%}
.palco.aberto .moldura i{animation:traco .7s var(--ease) forwards}
.palco.aberto .moldura .t{animation-delay:.75s}
.palco.aberto .moldura .d{animation-delay:1.3s}
.palco.aberto .moldura .b{animation-delay:1.85s}
.palco.aberto .moldura .e{animation-delay:2.4s}
@keyframes traco{to{transform:none}}

/* ---------- lírios ---------- */
.flor{
  position:absolute;width:62cqw;z-index:2;pointer-events:none;
  opacity:0;scale:.55;
  transition:opacity 1.5s var(--ease) var(--atraso,.9s),scale 2.4s var(--ease) var(--atraso,.9s);
}
.flor-br{right:-10cqw;bottom:-8cqw;transform-origin:100% 100%;--atraso:1.1s;animation:balanco-br 9s ease-in-out infinite alternate}
.flor-tl{left:-28cqw;top:-14cqw;rotate:180deg;--atraso:.9s;animation:balanco-tl 11s ease-in-out infinite alternate}
.palco.aberto .flor{opacity:1;scale:1}
.palco[data-tela="menu"] .flor{scale:.8}
.palco.aberto:is([data-tela="como-chegar"],[data-tela="dress-code"],[data-tela="presente"],[data-tela="confirmacao"],[data-tela="recado"]) .flor{scale:.88}
.palco.pronto .flor{transition-delay:0s}
@keyframes balanco-br{from{rotate:-1.8deg}to{rotate:1.8deg}}
@keyframes balanco-tl{from{rotate:177.5deg}to{rotate:182.5deg}}

/* ---------- capa ---------- */
.capa{position:absolute;inset:0;z-index:30}
.porta{position:absolute;top:0;bottom:0;width:50.3%;background:#fff;transition:transform 1.5s cubic-bezier(.77,0,.18,1) .3s}
.porta-e{left:0;box-shadow:.5cqw 0 1.6cqw rgba(0,0,0,.2)}
.porta-d{right:0}
.porta-d::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:12cqw;
  background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 38%,rgba(0,0,0,.05) 75%,transparent);
}
.capa.abrindo .porta-e{transform:translateX(-103%)}
.capa.abrindo .porta-d{transform:translateX(103%)}

.capa-flor{
  position:absolute;right:-12cqw;bottom:-17cqw;width:80cqw;z-index:2;pointer-events:none;
  transform-origin:100% 100%;animation:balanco-br 8s ease-in-out infinite alternate;
  transition:opacity 1.1s ease .1s,translate 1.4s var(--ease) .1s,scale 1.4s var(--ease) .1s;
}
.capa.abrindo .capa-flor{opacity:0;translate:7cqw 9cqw;scale:1.06}

.lacre{position:absolute;left:50%;top:50%;width:29cqw;aspect-ratio:1;translate:-50% -50%;z-index:3;border-radius:50%}
.lacre-img{display:block;width:100%;animation:respira 3.4s ease-in-out infinite}
.lacre-l{
  position:absolute;inset:0;display:grid;place-items:center;padding-bottom:.8cqw;
  font:600 15.5cqw/1 var(--serifa);color:#fff;text-shadow:0 .3cqw .5cqw rgba(196,70,98,.35);
  pointer-events:none;
}
.onda{position:absolute;inset:3%;border-radius:50%;border:.4cqw solid rgba(246,121,143,.6);animation:onda 3.4s ease-out infinite;pointer-events:none}
.anel{position:absolute;left:50%;top:50%;width:150%;translate:-50% -50%;overflow:visible;pointer-events:none;transition:opacity .45s ease}
.anel text{font:600 26px var(--serifa);letter-spacing:.05em;fill:var(--titulo-cor)}
@keyframes respira{0%,100%{scale:1}50%{scale:1.045}}
@keyframes onda{0%{scale:.95;opacity:.8}100%{scale:1.7;opacity:0}}

.capa.abrindo .lacre{pointer-events:none}
.capa.abrindo .lacre-img,.capa.abrindo .lacre-l{animation:rompe .85s var(--ease) forwards}
.capa.abrindo .anel{opacity:0}
.capa.abrindo .onda{display:none}
@keyframes rompe{
  0%{scale:1;rotate:0deg;opacity:1}
  30%{scale:.88;rotate:-4deg;opacity:1}
  100%{scale:1.4;rotate:8deg;opacity:0;filter:blur(1.2cqw)}
}

/* ---------- telas ---------- */
.tela{
  position:absolute;inset:10cqw 5.4cqw;z-index:5;display:flex;
  padding:3cqw 5cqw;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.tela::-webkit-scrollbar{display:none}
.tela.ativa{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease .15s,visibility 0s}
.tela-in{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center}
.detalhe{padding-top:15cqw}

/* entrada escalonada: acontece quando a tela abre */
.rev{
  opacity:0;filter:blur(.7cqw);translate:0 2cqw;
  transition:opacity .8s var(--ease),filter .8s var(--ease),translate .8s var(--ease);
}
.ativa .rev{
  opacity:1;filter:none;translate:0 0;
  transition-delay:calc(var(--i,0) * 110ms + .3s);
}

/* ---------- carta ---------- */
.carta-1{font:300 7.6cqw/1.1 var(--corpo);letter-spacing:.03em;text-transform:uppercase;color:var(--texto)}
.carta-2{margin-top:6cqw;font:300 italic 8.6cqw/1.15 var(--corpo);text-align:center;color:var(--texto)}
.divisor{display:flex;align-items:center;gap:2cqw;width:40cqw;margin:8cqw 0 7cqw}
.divisor span{flex:1;height:.3cqw;background:var(--moldura);transform:scaleX(0);transition:transform 1.1s var(--ease) 1s}
.divisor span:first-child{transform-origin:100% 50%}
.divisor span:last-child{transform-origin:0 50%}
.ativa .divisor span{transform:none}
.divisor svg{width:4cqw;height:4cqw;fill:var(--moldura);flex:none}
.carta-3{max-width:62cqw;font:400 5.1cqw/1.38 var(--corpo);text-align:center;text-wrap:balance;color:var(--texto)}

.continuar{
  margin-top:11cqw;display:inline-flex;align-items:center;gap:1.6cqw;
  padding:2.8cqw 6.5cqw 2.8cqw 7cqw;border:.35cqw solid var(--moldura);border-radius:99px;
  font:400 4cqw/1 var(--corpo);color:var(--texto);background:#fff;
  transition:background .25s,color .25s,transform .25s var(--ease);
}
.continuar svg{width:4.6cqw;height:4.6cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:quica 1.8s ease-in-out infinite}
.continuar:hover{background:var(--rosa-suave)}
.continuar:active{transform:scale(.96)}
@keyframes quica{0%,100%{translate:0 -.3cqw}50%{translate:0 .7cqw}}

/* ---------- selo pequeno ---------- */
.selo{position:relative;width:21cqw;flex:none}
.selo img{display:block;width:100%}
.selo span{
  position:absolute;inset:0;display:grid;place-items:center;padding-bottom:.6cqw;
  font:600 11cqw/1 var(--serifa);color:#fff;text-shadow:0 .25cqw .4cqw rgba(196,70,98,.3);
}

/* ---------- menu ---------- */
.menu-leg{margin:1.6cqw 0 6.5cqw;font:400 3.9cqw/1 var(--corpo);letter-spacing:.04em;color:var(--texto)}
.itens{display:flex;flex-direction:column;gap:4cqw;width:68cqw}
.item{
  display:grid;grid-template-columns:8.5cqw 1fr 8cqw;align-items:center;gap:3.2cqw;
  min-height:17cqw;padding:2.2cqw 4.4cqw 2.2cqw 4cqw;border-radius:5.4cqw;
  background:var(--botao);color:#fff;text-align:left;
  transition:background .25s,transform .3s var(--ease),filter .8s var(--ease),opacity .8s var(--ease),translate .8s var(--ease);
}
.item:hover{background:var(--botao-forte)}
.item:active{transform:scale(.97)}
.item .ico,.item .seta{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.item .ico{width:8.5cqw;height:8.5cqw;stroke-width:1.3}
.item .seta{width:8cqw;height:8cqw;stroke-width:2.2;transition:translate .35s var(--ease)}
.item:hover .seta{translate:1.2cqw 0}
.item-txt{display:flex;flex-direction:column;gap:.5cqw}
.item b,.item i{font-style:normal;text-decoration:underline;text-decoration-thickness:.28cqw;text-underline-offset:.7cqw}
.item b{font:700 4.5cqw/1.1 var(--titulo);text-transform:uppercase;letter-spacing:.01em}
.item i{font:400 3.8cqw/1.15 var(--corpo)}

/* ---------- títulos das telas de detalhe ---------- */
.titulo{font:700 10cqw/1 var(--titulo);color:var(--titulo-cor);text-align:center;text-transform:uppercase;letter-spacing:.005em}
.sub{margin-top:2cqw;font:400 3.7cqw/1.3 var(--corpo);color:var(--texto);text-align:center;text-wrap:balance;max-width:66cqw}

.voltar{
  position:absolute;top:12.4cqw;right:9.4cqw;z-index:20;width:10cqw;height:10cqw;border-radius:50%;
  display:grid;place-items:center;border:.35cqw solid var(--moldura);background:#fff;color:var(--texto);
  opacity:0;pointer-events:none;transition:opacity .4s ease,background .25s;
}
.voltar svg{width:5cqw;height:5cqw;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.voltar:hover{background:var(--rosa-suave)}
.palco:is([data-tela="menu"],[data-tela="como-chegar"],[data-tela="dress-code"],[data-tela="presente"],[data-tela="confirmacao"],[data-tela="recado"]) .voltar{opacity:1;pointer-events:auto}

/* ---------- como chegar ---------- */
.cartao{width:66cqw;margin-top:8cqw;padding:6cqw 5cqw;border:.38cqw solid var(--moldura);border-radius:5cqw;text-align:center;display:flex;flex-direction:column;gap:1.8cqw}
.cartao-data{font:700 6.6cqw/1.1 var(--titulo);color:var(--titulo-cor)}
.cartao-data::first-letter{text-transform:uppercase}
.cartao-hora{font:500 4.6cqw/1.1 var(--corpo)}
.cartao-local{font:700 4.6cqw/1.2 var(--titulo);margin-top:2cqw}
.cartao-end{font:400 4cqw/1.35 var(--corpo);text-wrap:balance}
.acoes{width:66cqw;margin-top:5cqw;display:flex;flex-direction:column;gap:3cqw}

.botao{
  display:flex;align-items:center;justify-content:center;gap:2cqw;width:100%;min-height:12.5cqw;padding:2cqw 5cqw;
  border-radius:99px;background:var(--botao);color:#fff;text-decoration:none;text-align:center;
  font:700 4cqw/1.1 var(--titulo);letter-spacing:.01em;
  transition:background .25s,transform .3s var(--ease),filter .8s var(--ease),opacity .8s var(--ease),translate .8s var(--ease);
}
.botao:hover{background:var(--botao-forte)}
.botao:active{transform:scale(.97)}
.botao:disabled{opacity:.7;cursor:progress}
.botao-sec{background:#fff;color:var(--texto);border:.38cqw solid var(--moldura)}
.botao-sec:hover{background:var(--rosa-suave)}

/* ---------- dress code ---------- */
.paleta{display:flex;justify-content:center;margin-top:11cqw}
.cor{width:29cqw;margin-left:-6cqw;text-align:center}
.cor:first-child{margin-left:0}
.cor-bola{width:100%;aspect-ratio:1;border-radius:50%}
.cor figcaption{margin-top:3cqw;font:400 3.6cqw/1 var(--corpo);color:var(--texto)}
.ativa .cor{animation:espalha 1.2s var(--ease) .55s both}
@keyframes espalha{from{translate:var(--de) 0;scale:.55;opacity:0}to{translate:0 0;scale:1;opacity:1}}

/* ---------- ideias de presente ---------- */
.lista{align-items:flex-start;width:68cqw;text-align:left}
.lista h2,.lista h3{font:700 6.6cqw/1.05 var(--titulo);color:var(--titulo-cor);text-transform:uppercase}
.lista h2{margin-bottom:1.5cqw}
.lista .bloco{margin-top:4.2cqw}
.lista p{margin-top:1.2cqw;font:400 3.7cqw/1.4 var(--corpo);color:var(--texto)}
.pix{font-weight:500 !important;letter-spacing:.03em}
.copiar{
  margin-top:2.6cqw;display:inline-flex;align-items:center;gap:1.8cqw;padding:2.1cqw 4.4cqw 2.1cqw 3.6cqw;
  border:.35cqw solid var(--moldura);border-radius:99px;font:400 3.6cqw/1 var(--corpo);color:var(--texto);background:#fff;
  transition:background .25s,color .25s,transform .25s var(--ease);
}
.copiar svg{width:4.4cqw;height:4.4cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.copiar:hover{background:var(--rosa-suave)}
.copiar:active{transform:scale(.96)}
.copiar.ok{background:var(--botao);border-color:var(--botao);color:#fff}

/* ---------- formulários ---------- */
.form{width:66cqw;margin-top:7cqw;display:flex;flex-direction:column;gap:4cqw}
.campo{position:relative;display:flex;flex-direction:column;gap:1.2cqw;text-align:left}
.campo>span,.escolhas legend{font:500 3.6cqw/1 var(--corpo);color:var(--texto)}
.campo input,.campo textarea{
  width:100%;padding:3cqw 3.6cqw;border:.35cqw solid var(--moldura);border-radius:3.6cqw;background:#FFF8FA;
  font-size:max(16px,4.2cqw);line-height:1.35;color:var(--tinta);resize:none;
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.campo input::placeholder,.campo textarea::placeholder{color:#E7A6B1}
.campo input:focus,.campo textarea:focus{outline:none;background:#fff;border-color:var(--titulo-cor);box-shadow:0 0 0 .8cqw rgba(246,121,143,.22)}
.contador{align-self:flex-end;font:400 3cqw/1 var(--corpo);color:var(--texto)}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.erro{font:500 3.6cqw/1.35 var(--corpo);color:#C23A5A;text-align:center}

.escolhas{border:0;padding:0;display:flex;flex-direction:column;gap:2cqw}
.escolhas legend{margin-bottom:1.2cqw;padding:0}
.escolha{position:relative;display:block}
.escolha input{position:absolute;opacity:0;inset:0}
.escolha span{
  display:flex;align-items:center;justify-content:center;min-height:11.5cqw;padding:2cqw 4cqw;border:.38cqw solid var(--moldura);
  border-radius:99px;font:500 4cqw/1.1 var(--corpo);color:var(--texto);background:#fff;transition:background .25s,color .25s,border-color .25s;
}
.escolha input:checked+span{background:var(--botao);border-color:var(--botao);color:#fff}
.escolha input:focus-visible+span{outline:2px solid var(--texto);outline-offset:3px}

/* ---------- recado enviado ---------- */
.enviado{width:66cqw;margin-top:9cqw;display:flex;flex-direction:column;align-items:center;gap:3.2cqw;text-align:center}
.enviado h3{font:700 8cqw/1 var(--titulo);color:var(--titulo-cor);text-transform:uppercase;margin-top:3cqw}
.enviado h3:focus{outline:none}
.enviado p{font:400 4.2cqw/1.35 var(--corpo);color:var(--texto);margin-bottom:3cqw}
.enviado .selo{width:30cqw}
.enviado .selo span{font-size:15.5cqw}
.carimbo{animation:carimbo 1s var(--ease) both}
@keyframes carimbo{
  0%{scale:2.4;rotate:-22deg;opacity:0}
  50%{scale:.9;rotate:3deg;opacity:1}
  72%{scale:1.07;rotate:-1deg}
  100%{scale:1;rotate:0deg;opacity:1}
}

#recado.enviou .titulo,#recado.enviou .sub{display:none}

/* ---------- pétalas ---------- */
.petalas{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.petala{
  position:absolute;left:var(--x);top:var(--y);width:3.4cqw;height:5cqw;opacity:0;
  background:linear-gradient(150deg,#fff3f5 0%,var(--cor) 55%);border-radius:90% 0 90% 0;
  animation:cai var(--dur) cubic-bezier(.2,.55,.3,1) var(--atraso) forwards;
}
@keyframes cai{
  0%{opacity:0;translate:0 0;rotate:0deg;scale:.4}
  12%{opacity:.95}
  100%{opacity:0;translate:var(--dx) var(--dy);rotate:var(--rot);scale:1}
}

/* ---------- aviso (toast) ---------- */
.aviso{
  position:absolute;left:50%;bottom:8cqw;z-index:50;translate:-50% 3cqw;max-width:80cqw;padding:3cqw 6cqw;border-radius:99px;
  background:#C94B67;color:#fff;font:500 3.8cqw/1.2 var(--corpo);text-align:center;opacity:0;pointer-events:none;
  transition:opacity .35s ease,translate .45s var(--ease);
}
.aviso.on{opacity:1;translate:-50% 0}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .petalas{display:none}
}