/* ============================================================
   Vales para a Mariana — tema "carta de amor vintage"
   Papel craft, lacre de cera dourado, tickets serrilhados.
   ============================================================ */

:root {
  --papel: #f3e7d3;
  --papel-fundo: #e7d3b6;
  --tinta: #3b2a22;
  --tinta-suave: #6f5847;
  --vinho: #8a2b3c;
  --vinho-escuro: #6d1f2e;
  --rosa: #c46a6a;
  --ouro: #c79a45;
  --ouro-claro: #e3c373;
  --serif-display: "Fraunces", Georgia, serif;
  --serif-corpo: "EB Garamond", Georgia, serif;
  --mao: "Caveat", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  height: 100%;
}

body {
  font-family: var(--serif-corpo);
  color: var(--tinta);
  background:
    radial-gradient(120% 90% at 50% 0%, #8a3344 0%, #5f1f2c 45%, #3d1420 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grão por cima de tudo, dá textura analógica */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Cenas (atos) ---- */
.cena {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(20px, 6vw, 48px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s ease;
}
.cena--ativa { opacity: 1; visibility: visible; }

/* Cena de vales rola, não é fixa */
#cena-vales.cena--ativa {
  position: static;
  min-height: 100dvh;
  justify-content: flex-start;
  padding-top: clamp(36px, 9vh, 80px);
}

/* ============================================================
   ATO 1 — ENVELOPE
   ============================================================ */
.envelope {
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  cursor: pointer; user-select: none;
  animation: respira 4s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.envelope__corpo {
  position: relative;
  width: min(78vw, 340px);
  aspect-ratio: 3 / 2;
  background: linear-gradient(160deg, var(--papel) 0%, var(--papel-fundo) 100%);
  border-radius: 8px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.55),
    inset 0 0 60px rgba(120,80,40,0.18);
}
/* bolso (triângulos das bordas do envelope) */
.envelope__bolso {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
}
.envelope__bolso::before,
.envelope__bolso::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 100%;
}
.envelope__bolso::before {
  left: 0;
  background: linear-gradient(135deg, transparent 49.4%, rgba(0,0,0,0.06) 50%);
}
.envelope__bolso::after {
  right: 0;
  background: linear-gradient(-135deg, transparent 49.4%, rgba(0,0,0,0.10) 50%);
}
/* aba superior */
.envelope__aba {
  position: absolute; top: 0; left: 0; right: 0; height: 56%;
  background: linear-gradient(160deg, var(--papel-fundo), #d8c09e);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.8s cubic-bezier(.6,-0.2,.3,1.4);
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
/* lacre de cera */
.envelope__lacre {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rosa), var(--vinho) 55%, var(--vinho-escuro));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.35), inset 0 4px 6px rgba(255,255,255,0.2);
  z-index: 4;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.envelope__lacre::before {
  content: ""; position: absolute; inset: 8px; border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,0.35);
}
.envelope__lacre-letra {
  font-family: var(--serif-display); font-weight: 600; font-style: italic;
  font-size: 34px; color: #f3dcc0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.envelope__dica {
  font-family: var(--mao); font-size: 26px; color: var(--ouro-claro);
  letter-spacing: 0.5px; opacity: 0.9;
}

/* estado aberto */
.envelope--aberto .envelope__aba { transform: rotateX(180deg); z-index: 1; }
.envelope--aberto .envelope__lacre { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
.envelope--aberto { animation: sobe-some 0.8s 0.3s forwards ease-in; }
@keyframes sobe-some {
  to { transform: translateY(-40px) scale(0.92); opacity: 0; }
}

/* ============================================================
   ATO 2 — CARTA
   ============================================================ */
.carta {
  position: relative;
  width: min(90vw, 460px);
  background: linear-gradient(180deg, var(--papel) 0%, #efe0c8 100%);
  padding: clamp(34px, 8vw, 56px) clamp(28px, 7vw, 48px);
  border-radius: 4px;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,0.6);
  text-align: center;
}
/* borda fina interna estilo papel timbrado */
.carta::after {
  content: ""; position: absolute; inset: 12px; border: 1px solid rgba(120,80,40,0.25); border-radius: 2px; pointer-events: none;
}
.carta__saudacao {
  font-family: var(--serif-display); font-style: italic; font-weight: 500;
  font-size: clamp(30px, 8vw, 40px); color: var(--vinho);
  margin-bottom: 22px;
}
.carta__corpo {
  font-size: clamp(18px, 4.6vw, 21px); line-height: 1.7; color: var(--tinta);
}
.carta__corpo p { margin-bottom: 6px; }
.carta__assinatura {
  font-family: var(--mao); font-size: clamp(34px, 9vw, 46px);
  color: var(--vinho); margin-top: 26px; transform: rotate(-3deg);
}
.botao-vales, .modal__btn, .vale__btn {
  font-family: var(--serif-corpo);
}
.botao-vales {
  margin-top: 30px;
  background: var(--vinho); color: var(--papel);
  border: none; border-radius: 100px;
  padding: 14px 34px; font-size: 17px; letter-spacing: 0.5px;
  cursor: pointer; box-shadow: 0 8px 20px -6px rgba(109,31,46,0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.botao-vales:hover, .botao-vales:active { transform: translateY(-2px); box-shadow: 0 12px 24px -6px rgba(109,31,46,0.8); }

/* aparição suave de elementos da carta */
.carta__saudacao, .carta__corpo p, .carta__assinatura, .botao-vales {
  opacity: 0; transform: translateY(12px);
}
.cena--ativa .carta__saudacao { animation: surge 0.7s 0.2s forwards ease; }
.cena--ativa .carta__corpo p:nth-child(1) { animation: surge 0.7s 0.55s forwards ease; }
.cena--ativa .carta__corpo p:nth-child(2) { animation: surge 0.7s 0.9s forwards ease; }
.cena--ativa .carta__corpo p:nth-child(3) { animation: surge 0.7s 1.25s forwards ease; }
.cena--ativa .carta__assinatura { animation: surge 0.8s 1.6s forwards ease; }
.cena--ativa .botao-vales { animation: surge 0.7s 2.1s forwards ease; }
@keyframes surge { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   ATO 3 — VALES
   ============================================================ */
.vales-cabecalho { text-align: center; margin-bottom: 30px; color: var(--papel); }
.vales-cabecalho__sobre {
  font-family: var(--mao); font-size: 24px; color: var(--ouro-claro); line-height: 1;
}
.vales-cabecalho__titulo {
  font-family: var(--serif-display); font-weight: 600; font-style: italic;
  font-size: clamp(34px, 10vw, 52px); line-height: 1.05; color: var(--papel);
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.vales-cabecalho__nota {
  margin-top: 12px; font-size: 15px; color: rgba(243,231,211,0.65); font-style: italic;
}

.vales-lista {
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 22px;
}

/* --- ticket --- */
.vale {
  position: relative;
  background: linear-gradient(180deg, var(--papel) 0%, #ecdcc0 100%);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex; align-items: center; gap: 18px;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(20px) scale(0.98);
  animation: entra-vale 0.6s forwards ease;
  overflow: hidden;
}
@keyframes entra-vale { to { opacity: 1; transform: translateY(0) scale(1); } }
/* picotes laterais (entalhe do ticket) */
.vale::before, .vale::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: #5f1f2c; /* cor do fundo, finge "furo" */
}
.vale::before { left: -11px; box-shadow: inset -2px 0 3px rgba(0,0,0,0.3); }
.vale::after  { right: -11px; box-shadow: inset 2px 0 3px rgba(0,0,0,0.3); }

.vale__emoji {
  flex: 0 0 auto;
  width: 58px; height: 58px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: rgba(138,43,60,0.08);
  border: 1px dashed rgba(138,43,60,0.35);
}
.vale__info { flex: 1 1 auto; min-width: 0; }
.vale__titulo {
  font-family: var(--serif-display); font-weight: 600; font-size: 19px;
  color: var(--vinho); line-height: 1.15;
}
.vale__desc { font-size: 15.5px; color: var(--tinta); margin-top: 4px; line-height: 1.4; }
.vale__regras {
  display: block; margin-top: 8px; font-size: 11.5px; font-style: italic;
  color: var(--tinta-suave); letter-spacing: 0.2px;
}
.vale__rodape {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; gap: 12px;
}
.vale__usos {
  font-size: 12px; letter-spacing: 0.5px; color: var(--tinta-suave);
  text-transform: uppercase;
}
.vale__usos b { color: var(--vinho); }
.vale__btn {
  background: var(--ouro); color: #4a3410;
  border: none; border-radius: 100px;
  padding: 9px 20px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(199,154,69,0.9);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.vale__btn:hover, .vale__btn:active { transform: translateY(-1px); filter: brightness(1.06); }

/* botão de avisar no WhatsApp (aparece após resgate) */
.vale__btn--whats { background: #25653f; color: #eafaef; box-shadow: 0 6px 14px -6px rgba(37,101,63,0.9); }

/* carimbo RESGATADO */
.vale__carimbo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg) scale(0.5);
  font-family: var(--serif-display); font-weight: 600; letter-spacing: 2px;
  font-size: 26px; color: var(--vinho);
  border: 3px solid var(--vinho); border-radius: 8px;
  padding: 4px 16px; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  background: rgba(243,231,211,0.35);
}
.vale--usado { filter: saturate(0.75); }
.vale--usado .vale__emoji, .vale--usado .vale__info { opacity: 0.45; }
.vale--usado .vale__carimbo { opacity: 0.92; animation: carimbar 0.4s forwards cubic-bezier(.2,1.4,.4,1); }
@keyframes carimbar {
  to { transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}

.rodape {
  text-align: center; margin: 40px auto clamp(28px, 8vh, 60px);
  font-family: var(--mao); font-size: 22px; color: var(--ouro-claro);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(40,12,18,0.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
.modal--aberto { opacity: 1; visibility: visible; }
.modal__caixa {
  background: linear-gradient(180deg, var(--papel), #efe0c8);
  border-radius: 18px; padding: 32px 28px; text-align: center;
  width: min(86vw, 360px);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.7);
  transform: scale(0.9); transition: transform 0.3s cubic-bezier(.2,1.3,.4,1);
}
.modal--aberto .modal__caixa { transform: scale(1); }
.modal__emoji { font-size: 46px; margin-bottom: 8px; }
.modal__pergunta { font-family: var(--serif-display); font-size: 22px; color: var(--vinho); font-style: italic; }
.modal__vale { font-size: 17px; margin-top: 6px; color: var(--tinta); }
.modal__acoes { display: flex; gap: 12px; margin-top: 24px; }
.modal__btn { flex: 1; border: none; border-radius: 100px; padding: 13px; font-size: 15px; cursor: pointer; }
.modal__btn--cancelar { background: rgba(59,42,34,0.1); color: var(--tinta-suave); }
.modal__btn--ok { background: var(--vinho); color: var(--papel); font-weight: 600; }

/* ============================================================
   CONFETE
   ============================================================ */
.confete-canvas { position: fixed; inset: 0; z-index: 1500; pointer-events: none; }

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.1ms !important; }
}