/* ====== Cores e fontes ====== */
:root {
  --azul: #1d2a8f;
  --tinta: #1f2f8a;          /* cor da "caneta" do garçom */
  --papel: #fdfcf7;
  --linha: #2a2a2a;
  --amarelo: #ffe81a;
  --fonte-mao: "Caveat", "Comic Sans MS", cursive;
  --fonte-impressa: "Oswald", "Arial Narrow", sans-serif;

  --fonte-poster: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fonte-creditos: "Roboto Condensed", "Arial Narrow", sans-serif;
  --amarelo-poster: #ffd21f;

  /* ---- enquadramento do fundo (desktop: foto 1920x1080) ----
     --pw/--ph: tamanho da foto cobrindo a tela; --u: 1px da foto original;
     --cx/--cy: quanto da foto ficou cortado de cada lado */
  --ar: 1.7778;
  --base: 1920;
  --vh: 100vh;
  --pw: max(100vw, var(--vh) * var(--ar));
  --ph: calc(var(--pw) / var(--ar));
  --u: calc(var(--pw) / var(--base));
  --cx: calc((var(--pw) - 100vw) / 2);
  --cy: calc((var(--ph) - var(--vh)) / 2);
  /* boca: ponto de giro (orelha), quanto gira e quanto desliza com a boca toda aberta */
  --pivo: 76% 36.1%;
  --gira: -6deg;
  --desliza: .47%;
}
@supports (height: 100lvh) { :root { --vh: 100lvh; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }

body {
  font-family: var(--fonte-mao);
  color: var(--tinta);
  background: #0b0b0d;
  overflow-x: hidden;
}

/* ====== Palco (foto de fundo + queixo que canta) ====== */
.palco { position: fixed; inset: 0; height: var(--vh); overflow: hidden; z-index: 0; background: #0b0b0d; }
.quadro {
  position: absolute;
  width: var(--pw); height: var(--ph);
  left: calc(-1 * var(--cx)); top: calc(-1 * var(--cy));
}
.quadro img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.quadro-mobile { display: none; }
/* escurece de leve o lado esquerdo pra dar leitura aos textos */
.palco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 45%);
}
/* o queixo gira em torno da orelha (como uma mandíbula de verdade) e desliza um tico pro lado.
   --abre vai de 0 (fechado) a 1 (aberto) e é controlado pelo script.js conforme o som */
@property --abre { syntax: "<number>"; inherits: true; initial-value: 0; }
.queixo {
  --abre: 0;
  transform-origin: var(--pivo);
  transform: translateX(calc(var(--abre) * var(--desliza))) rotate(calc(var(--abre) * var(--gira)));
  will-change: transform;
}
/* modo reserva (quando não dá pra "ouvir" a música): abre e fecha no ritmo */
.palco.cantando-css .queixo { animation: cantar 1.6s linear infinite; }
@keyframes cantar {
  0%, 100% { --abre: 0; }
  8%  { --abre: .9; }
  18% { --abre: .2; }
  26% { --abre: .7; }
  36% { --abre: 0; }
  48% { --abre: 1; }
  62% { --abre: .35; }
  70% { --abre: .8; }
  84% { --abre: .1; }
}

/* ====== Cena ====== */
.cena {
  position: relative; z-index: 1;
  height: 100vh; height: 100svh;   /* uma tela só, sem rolagem */
  overflow: hidden;
  --margem: max(16px, calc(75 * var(--u) - var(--cx)));
  padding: max(16px, calc(22 * var(--u) - var(--cy))) 16px 0 var(--margem);
}

/* ====== Textos do pôster (medidas em "pixels da foto" pra casar com a arte) ====== */
.titulos { color: #fff; font-family: var(--fonte-poster); text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.titulos p, .titulos h1 { margin: 0; }
.creditos {
  display: grid;
  grid-template-columns: 353fr 394fr 400fr;
  width: min(1100 * var(--u), 100%);
  font-family: var(--fonte-creditos);
  font-size: max(11px, 31 * var(--u));
  line-height: .9;
  text-transform: uppercase;
  transform: scaleY(1.08);
  transform-origin: top;
}
.creditos em { font-style: normal; color: var(--amarelo-poster); }
.sobretitulo {
  margin-top: calc(56 * var(--u)) !important;
  font-size: max(9px, 21 * var(--u));
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nome {
  font-size: max(30px, 80 * var(--u));
  font-weight: 400;
  font-stretch: 112%;
  letter-spacing: .1em;
  line-height: 1.05;
  color: var(--amarelo-poster);
  text-transform: uppercase;
}
.convida { display: grid; justify-items: start; line-height: 1; margin-top: calc(26 * var(--u)) !important; }
.convida-1 { font-size: max(16px, 36 * var(--u)); letter-spacing: .06em; font-stretch: 110%; }
.convida-2 { font-size: max(16px, 36 * var(--u)); letter-spacing: .03em; font-stretch: 110%; }
.convida-30 { font-size: max(28px, 66 * var(--u)); margin-left: calc(222 * var(--u)); margin-top: calc(-8 * var(--u)); letter-spacing: .03em; }
.convida-anos { font-size: max(40px, 96 * var(--u)); font-weight: 500; margin-left: calc(112 * var(--u)); letter-spacing: .02em; }

/* ====== Bloquinho "espiando" no canto de baixo (abre a folha) ====== */
.aba-pedido {
  position: absolute; bottom: 0; left: var(--margem);
  width: min(340px, calc(100vw - 32px));
  padding: 18px 0 0; margin: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transform: translateY(42px) rotate(-3deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 -6px 22px rgba(0,0,0,.5));
  transition: transform .3s cubic-bezier(.3,1.5,.5,1);
  animation: espiar 3.5s ease-in-out 2s infinite;
}
.aba-pedido:hover, .aba-pedido:focus-visible { animation: none; transform: translateY(18px) rotate(-1.5deg); }
.aba-pedido:focus-visible { outline: 3px dashed var(--amarelo); outline-offset: 4px; }
@keyframes espiar {
  0%, 70%, 100% { transform: translateY(42px) rotate(-3deg); }
  80% { transform: translateY(28px) rotate(-2deg); }
  90% { transform: translateY(38px) rotate(-3deg); }
}
.aba-folha {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--papel);
  border-radius: 4px 4px 0 0;
  padding: 28px 22px 56px;
}
.aba-folha .rotulo-grande { font-size: 1.7rem; transform-origin: left; }
.aba-dica { font-size: 1.45rem; font-weight: 700; color: var(--tinta); }

/* folha de pedidos aberta */
.bloco-principal { width: min(500px, 100%); }

/* ====== Bloco de notas ====== */
.bloco {
  position: relative;
  padding-top: 18px;
  transform: rotate(1.5deg);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.folha {
  position: relative;
  background: var(--papel);
  border-radius: 4px 4px 6px 6px;
  padding: 34px 26px 26px;
  /* folhas de baixo do bloco (espessura) */
  box-shadow:
    0 2px 0 #ecebe4, 0 4px 0 #f6f5ef, 0 6px 0 #e7e5dc, 0 8px 0 #f3f1ea, 0 10px 0 #dedbd0;
}
/* espiral: cada <i> é um arame + o furo no papel (gerados pelo script.js) */
.espiral {
  position: absolute; left: 16px; right: 16px; top: 0; height: 34px;
  display: flex; justify-content: space-between;
  z-index: 2; pointer-events: none;
}
.espiral i { position: relative; width: 12px; height: 100%; }
.espiral i::before { /* furo */
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: #2b2420; box-shadow: inset 0 2px 2px #000;
  transform: translateX(-50%);
}
.espiral i::after { /* arame */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 4px;
  width: 7px; border-radius: 5px 5px 3px 3px;
  background: linear-gradient(90deg, #4a4c52, #f4f5f8 40%, #a5a7ae 70%, #4a4c52);
  box-shadow: 1px 2px 2px rgba(0,0,0,.35);
  transform: translateX(-50%) rotate(-6deg);
}

/* ====== Logo ====== */
.logo-wrap { display: flex; justify-content: center; margin: 4px 0 10px; }
.logo { width: min(210px, 60%); height: auto; overflow: visible; }
.logo-txt {
  font-family: "Kaushan Script", cursive;
  font-size: 104px;
  fill: #1c2299;
}
.logo-txt-borda { stroke: url(#glitter); stroke-width: 12px; stroke-linejoin: round; fill: url(#glitter); }

/* ====== Cabeçalho do pedido ====== */
.cabecalho {
  border: 2.5px solid var(--linha);
  border-radius: 12px;
  padding: 10px 14px 8px;
  margin-bottom: 14px;
}
.linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.linha + .linha { margin-top: 2px; }
.rotulo-grande {
  font-family: var(--fonte-impressa);
  font-weight: 700;
  color: #222;
  font-size: 2rem;
  letter-spacing: .5px;
  margin: 0;
  line-height: 1.1;
  transform: scaleY(1.12);
}
.campo { display: flex; align-items: baseline; flex: 1; min-width: 0; gap: 6px; }
.rotulo {
  font-family: var(--fonte-impressa);
  font-weight: 700;
  color: #222;
  font-size: .95rem;
  white-space: nowrap;
}
.escrito {
  flex: 1;
  border-bottom: 1.5px solid #333;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 0 4px;
  transform: rotate(-1deg);
  white-space: nowrap;
}

/* ====== Corpo do pedido ====== */
.corpo {
  border: 2.5px solid var(--linha);
  border-radius: 12px;
  padding: 16px 18px 18px;
  font-size: 1.55rem;
  line-height: 1.25;
}
.corpo p { margin: 0 0 12px; }
.corpo strong { font-weight: 700; }
.marca-texto {
  color: inherit;
  font-weight: 700;
  padding: 0 .2em;
  margin: 0 -.1em;
  border-radius: .8em .3em;
  background: linear-gradient(100deg, rgba(255,232,26,0) 1%, rgba(255,232,26,.9) 4%, rgba(255,226,40,.75) 94%, rgba(255,232,26,0) 98%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.btn-confirmar {
  display: block;
  margin: 18px auto 14px;
  font-family: var(--fonte-mao);
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--azul);
  border: 3px solid #0d1460;
  padding: 6px 28px 8px;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* borda "desenhada à mão" */
  cursor: pointer;
  box-shadow: 3px 4px 0 #0d1460;
  transform: rotate(-1.5deg);
  transition: transform .15s, box-shadow .15s;
}
.btn-confirmar:hover { transform: rotate(-1.5deg) translateY(-2px) scale(1.03); box-shadow: 4px 6px 0 #0d1460; }
.btn-confirmar:active { transform: rotate(-1.5deg) translateY(2px); box-shadow: 1px 1px 0 #0d1460; }

.nota { font-size: 1.3rem; text-align: center; opacity: .9; }

/* ====== Ícones ====== */
.icones {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 2px dashed #c9c6ba;
}
.icone {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  background: none; border: 0; padding: 4px; margin: 0;
  font-family: var(--fonte-mao); font-size: 1.35rem; font-weight: 700;
  color: var(--tinta); text-decoration: none; cursor: pointer;
}
.icone svg { width: 64px; height: 64px; overflow: visible; }
.icone:focus-visible, .btn-confirmar:focus-visible, .btn-som:focus-visible { outline: 3px dashed var(--azul); outline-offset: 4px; }

/* pin quica */
.pin-corpo { transform-box: fill-box; transform-origin: 50% 100%; }
.icone-pin:hover .pin-corpo { animation: quicar .6s ease infinite; }
@keyframes quicar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* presente: tampa abre ao passar o mouse */
.presente-tampa { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.presente-brilho { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .35s; }
.icone-presente:hover .presente-tampa,
.icone-presente:focus-visible .presente-tampa { transform: translate(-6px, -14px) rotate(-28deg); }
.icone-presente:hover .presente-brilho,
.icone-presente:focus-visible .presente-brilho { opacity: 1; transform: translateY(-4px); }

/* globo de discoteca */
.disco { transform-origin: 40px 0; animation: balanco 3s ease-in-out infinite; }
@keyframes balanco { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.disco-tile { animation: piscar 1.4s steps(2) infinite; }
.disco-tile.t2 { animation-delay: .45s; }
.disco-tile.t3 { animation-delay: .9s; }
@keyframes piscar { 50% { opacity: .15; } }
.faiscas path { transform-box: fill-box; transform-origin: center; animation: faisca 1.6s ease-in-out infinite; }
.faiscas path:nth-child(2) { animation-delay: .5s; }
.faiscas path:nth-child(3) { animation-delay: 1s; }
@keyframes faisca { 0%,100% { transform: scale(.3); opacity: .3; } 50% { transform: scale(1.2); opacity: 1; } }
.icone-after:hover .disco { animation-duration: .8s; }

/* ====== Botão de som ====== */
.btn-som {
  position: fixed; top: 16px; right: 16px; z-index: 50;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(20,17,43,.75);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  backdrop-filter: blur(4px);
}
.btn-som svg { width: 26px; height: 26px; fill: currentColor; }
.btn-som .ico-som-off { display: none; }
.btn-som[aria-pressed="true"] .ico-som-on { display: none; }
.btn-som[aria-pressed="true"] .ico-som-off { display: block; }

body.com-folha .dica-som { display: none; }
.dica-som {
  position: fixed; top: 22px; right: 76px; z-index: 50;
  background: var(--amarelo); color: #111;
  font-family: var(--fonte-mao); font-size: 1.2rem; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  animation: quicar 1.2s ease infinite;
}

/* ====== Modal do after ====== */
.modal {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain;
}
.modal > .bloco { margin: auto 0; flex-shrink: 0; animation: entrar .35s cubic-bezier(.3,1.4,.5,1); }
.modal-pedido .bloco-principal { animation-name: subir; }
@keyframes subir { from { transform: translateY(60vh) rotate(-3deg); opacity: .4; } }
#modal-after, #modal-presente, #modal-confirmar { z-index: 45; }
.modal[hidden] { display: none; }
.modal-fundo { position: fixed; inset: 0; background: rgba(8,6,25,.7); backdrop-filter: blur(3px); }
.bloco-after { width: min(440px, 100%); transform: rotate(-2deg); }
@keyframes entrar { from { transform: translateY(40px) rotate(-6deg) scale(.9); opacity: 0; } }
.btn-fechar {
  position: absolute; top: 14px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; padding: 0 0 4px;
  background: var(--papel); border: 2.5px solid #333;
  font-size: 1.9rem; line-height: 1; color: #333; cursor: pointer;
  transition: transform .15s;
}
.btn-fechar:hover { transform: rotate(90deg); }
.btn-fechar:focus-visible { outline: 3px dashed var(--azul); outline-offset: 3px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #111; color: #fff; padding: 10px 18px; border-radius: 24px;
  font-family: var(--fonte-mao); font-size: 1.3rem; z-index: 60;
}

/* ====== Mobile / telas em pé (foto 542x1111) ====== */
@media (max-aspect-ratio: 1/1) {
  :root { --ar: .4878; --base: 542; --pivo: 83.2% 58.5%; --desliza: .92%; }
  .quadro-desktop { display: none; }
  .quadro-mobile { display: block; }
  .palco::after { background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0) 35%); }
  .cena { padding: max(14px, calc(26 * var(--u) - var(--cy))) 14px 60px max(14px, calc(20 * var(--u) - var(--cx))); }
  .creditos { width: 100%; grid-template-columns: 170fr 190fr 150fr; font-size: max(10px, 13.6 * var(--u)); padding-right: 6px; }
  .sobretitulo { margin-top: calc(48 * var(--u)) !important; font-size: max(8px, 11 * var(--u)); }
  .nome { font-size: max(20px, 35 * var(--u)); letter-spacing: .07em; font-stretch: 100%; white-space: nowrap; }
  .btn-som { top: auto; bottom: 16px; }
  .dica-som { top: auto; bottom: 26px; right: 74px; }
  .convida { margin-top: calc(16 * var(--u)) !important; }
  .convida-1, .convida-2 { font-size: max(15px, 18.5 * var(--u)); }
  .convida-30 { font-size: max(26px, 33 * var(--u)); margin-left: calc(112 * var(--u)); margin-top: 0; }
  .convida-anos { font-size: max(38px, 48 * var(--u)); margin-left: calc(56 * var(--u)); }
  .bloco-principal { transform: rotate(0); }
  .modal { padding: 16px 10px 76px; }   /* espaço embaixo pro botão de som */
  .aba-pedido { left: 14px; width: min(320px, calc(100vw - 92px)); }
  .aba-folha { padding: 24px 16px 54px; }
  .aba-dica { font-size: 1.3rem; }
  .folha { padding: 30px 14px 18px; }
  .corpo { font-size: 1.4rem; padding: 14px 12px; }
  .rotulo-grande { font-size: 1.7rem; }
  .escrito { font-size: 1.4rem; }
  .icone svg { width: 54px; height: 54px; }
}

/* ====== After ====== */
.lista-after { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-after li, .precos li { position: relative; margin: 2px 0; padding-left: 16px; }
.lista-after li::before, .precos li::before { content: "-"; position: absolute; left: 2px; }
.lista-after .obs { font-size: .85em; opacity: .75; }
.precos { margin: 0 0 14px; }
.precos-titulo { margin: 0 0 2px !important; }
.precos ul { list-style: none; margin: 0; padding: 0; }
.precos li { padding-left: 20px; }
.endereco {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 2px dashed #b9b5a6; border-radius: 10px;
  color: inherit; text-decoration: none; line-height: 1.1;
  transition: background .15s, transform .15s;
}
.endereco:hover { background: rgba(255,232,26,.25); transform: rotate(-1deg); }
.endereco svg { width: 30px; height: 38px; flex: none; }
.endereco:hover svg { animation: quicar .6s ease infinite; }
.endereco small { display: block; font-size: .8em; text-decoration: underline; margin-top: 2px; }

/* ====== Bilhete do presente (post-it com fita) ====== */
.bilhete {
  position: relative; margin: auto 0; flex-shrink: 0;
  width: min(380px, 100%);
  background: #fff6a8;
  padding: 44px 26px 26px;
  font-size: 1.55rem; line-height: 1.25; color: var(--tinta);
  box-shadow: 0 18px 30px rgba(0,0,0,.45), inset 0 -30px 40px -30px rgba(160,130,0,.25);
  transform: rotate(-2deg);
  animation: entrar .35s cubic-bezier(.3,1.4,.5,1);
}
.bilhete p { margin: 0 0 6px; }
.bilhete .fita {
  position: absolute; top: -14px; left: 50%; width: 120px; height: 30px;
  transform: translateX(-50%) rotate(3deg);
  background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.bilhete .btn-fechar { background: #fff6a8; }
.btn-lista { text-decoration: none; text-align: center; width: fit-content; }

/* ====== Formulário de presença ====== */
.form-presenca { display: flex; flex-direction: column; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pergunta {
  font-family: var(--fonte-impressa); font-weight: 700; color: #222;
  font-size: .95rem; text-transform: uppercase; letter-spacing: .3px;
  margin-top: 10px; padding: 0;
}
.form-presenca > .pergunta:first-child { margin-top: 0; }
.resposta {
  font: inherit; font-weight: 700; color: var(--tinta);
  font-size: 1.5rem; line-height: 1.2;
  border: 0; border-bottom: 1.5px solid #333; border-radius: 0;
  background: transparent; padding: 2px 4px; width: 100%;
}
.resposta:focus { outline: none; border-bottom: 2.5px solid var(--azul); background: rgba(255,232,26,.2); }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.grupo .pergunta { float: none; }
.opcoes { display: flex; gap: 18px; margin-top: 4px; }
.opcao { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 1.5rem; font-weight: 700; }
.opcao input {
  appearance: none; width: 24px; height: 24px; margin: 0;
  border: 2.5px solid #333; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
}
.opcao input::after { content: "✓"; font-family: var(--fonte-mao); font-size: 1.5rem; line-height: 1; color: var(--azul); transform: scale(0) rotate(-10deg); transition: transform .15s; margin-top: -4px; }
.opcao input:checked::after { transform: scale(1.3) rotate(-10deg); }
.opcao input:focus-visible { outline: 3px dashed var(--azul); outline-offset: 2px; }
.disclaimer { font-size: 1.05rem; line-height: 1.15; opacity: .8; margin: 4px 0 0 !important; }
.erro { color: #c1121f; font-size: 1.15rem; margin: 2px 0 0 !important; font-weight: 700; }
.aviso-envio { text-align: center; font-size: 1.2rem; margin: 0 !important; color: #c1121f; font-weight: 700; }
.form-presenca .btn-confirmar { margin: 16px auto 8px; }
.btn-confirmar:disabled { opacity: .6; cursor: wait; }
.obrigado { text-align: center; }
.obrigado-titulo { font-size: 2rem; font-weight: 700; }
.bloco-form { width: min(460px, 100%); transform: rotate(-1deg); }
.bloco-form .folha, .bloco-after .folha { padding-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

.bloco-after .folha { padding-top: 48px; }
.bloco-principal .folha { padding-top: 40px; }