/* ==========================================================
   Convite • Halloween Infantil — Carta Comilona (Convida&u)
   Mesma estrutura do modelo da Ana Desidério e do Halloween adulto:
   - Títulos: Fredoka  |  Textos: Nunito
   - Paleta: noite roxa, papel creme, abóbora e lilás
   ========================================================== */

:root {
  --noite: #1A0B29;
  --noite-2: #2E1648;
  --papel: #FFF4E6;
  --papel-suave: #D7C4E6;
  --abobora: #FF8A1F;
  --abobora-clara: #FFB347;
  --abobora-funda: #E9650C;
  --lilas: #B98CFF;
  --linha: rgba(185, 140, 255, .35);
  --papel-carta: #E2A877;   /* cor do papel do envelope (pálpebras) */

  --titulo: 'Fredoka', 'Baloo 2', 'Trebuchet MS', sans-serif;
  --texto: 'Nunito', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  color: var(--papel);
  background: radial-gradient(120% 80% at 50% 35%, var(--noite-2) 0%, var(--noite) 65%) fixed, var(--noite);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
[hidden] { display: none !important; }

.rotulo {
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel-suave);
}
.rotulo strong { color: var(--abobora-clara); font-weight: 600; }

/* ---------- Entrada suave ---------- */

@keyframes surgir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.surgir { animation: surgir .9s cubic-bezier(.2, .7, .2, 1) both; }
.t1 { animation-delay: .1s; }
.t2 { animation-delay: .22s; }
.t3 { animation-delay: .34s; }
.t4 { animation-delay: .5s; }

/* ==========================================================
   CAPA (index.html) — a carta comilona
   ========================================================== */

.capa {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 16px 36px;
  text-align: center;
  transition: opacity .6s ease;
}
.capa .chamada {
  max-width: 22ch;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(24px, 6.6vw, 32px);
  line-height: 1.15;
  color: var(--papel);
}
.capa .dica {
  font-family: var(--titulo);
  font-size: 18px;
  color: var(--abobora-clara);
  animation: pulinho 1.6s ease-in-out infinite;
}
@keyframes pulinho { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* O palco tem a proporção da imagem (1374 x 1145).
   --u = 1px da imagem original, recalculado pelo carta.js. */
.palco {
  position: relative;
  width: min(94vw, 500px);
  aspect-ratio: 1374 / 1145;
  cursor: pointer;
  touch-action: manipulation;
  transform-origin: 52.4% 61%;
  --u: .36px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
                      linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent),
              linear-gradient(to bottom, transparent, #000 8%, #000 90%, transparent);
  mask-composite: intersect;
}
.palco:focus-visible { outline: 3px solid var(--abobora); outline-offset: 6px; }

/* Camada de trás: os olhos de verdade. Só aparecem pelos buracos do papel. */
.fundo-olhos { position: absolute; inset: 0; overflow: hidden; background: #3A1A0C; }

.olho {
  position: absolute;
  left: calc(var(--u) * var(--cx));
  top: calc(var(--u) * var(--cy));
  width: 0;
  height: 0;
}
.olho > * { position: absolute; }
.iris {
  width: calc(var(--u) * (var(--w) + 12));
  height: calc(var(--u) * (var(--h) + 12));
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--a));
  background: radial-gradient(ellipse 62% 62% at 50% 58%,
    #FFB858 0%, #FF9126 42%, #F2700E 74%, #C9500A 100%);
}
.pupila {
  width: calc(var(--u) * var(--pw));
  height: calc(var(--u) * var(--ph));
  left: calc(var(--u) * var(--pw) / -2);
  top: calc(var(--u) * var(--ph) / -2);
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 36%, #4E2C23 0%, #26120C 58%, #120604 100%);
  will-change: transform;
}
.pupila::before, .pupila::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #FBE9D7;
}
.pupila::before {   /* brilho grande */
  width: calc(var(--u) * var(--br) * 2);
  height: calc(var(--u) * var(--br) * 2);
  left: calc(var(--u) * (var(--bx) - var(--br)));
  top: calc(var(--u) * (var(--by) - var(--br)));
}
.pupila::after {    /* brilho pequenininho */
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  right: calc(var(--u) * 22);
  bottom: calc(var(--u) * 22);
  opacity: .7;
}
.sombra-olho {      /* sombra que a borda do papel faz em cima do olho */
  width: calc(var(--u) * (var(--w) + 20));
  height: calc(var(--u) * (var(--h) + 20));
  left: calc(var(--u) * (var(--w) + 20) / -2);
  top: calc(var(--u) * (var(--h) + 20) / -2);
  background: linear-gradient(180deg, rgba(110, 40, 0, .5) 0%, rgba(110, 40, 0, 0) 30%);
  pointer-events: none;
}
.palpebra {
  width: calc(var(--u) * (var(--w) + 60));
  height: calc(var(--u) * (var(--h) + 40));
  left: calc(var(--u) * (var(--w) + 60) / -2);
  top: calc(var(--u) * (var(--h) + 40) / -2);
  border-radius: 0 0 50% 50% / 0 0 26% 26%;
  background: linear-gradient(180deg, #E8B283 0%, var(--papel-carta) 80%, #C98B5C 100%);
  border-bottom: calc(var(--u) * 6) solid #4A2418;
  transform: translateY(-112%);
  will-change: transform;
}

.monstro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Língua (peça separada) e o dentinho que fica na frente dela */
.lingua, .dente { position: absolute; max-width: none; pointer-events: none; }
.lingua {
  left: calc(var(--u) * 668);
  top: calc(var(--u) * 682);
  width: calc(var(--u) * 244);
  height: calc(var(--u) * 216);
  transform-origin: 48% 6%;
  animation: balancar 1.5s ease-in-out infinite alternate;
}
@keyframes balancar {
  0%   { transform: rotate(-4deg) scaleY(1); }
  50%  { transform: rotate(0deg) scaleY(1.04); }
  100% { transform: rotate(4deg) scaleY(1); }
}
.dente {
  left: calc(var(--u) * 641);
  top: calc(var(--u) * 736);
  width: calc(var(--u) * 67);
  height: calc(var(--u) * 72);
}

/* Abertura: dá um pulinho, faz "blééé" e engole a tela */
.palco.acordou { animation: pular .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pular {
  0%   { transform: translateY(0) scale(1, 1); }
  25%  { transform: translateY(4px) scale(1.04, .95); }
  55%  { transform: translateY(-22px) scale(.97, 1.04); }
  100% { transform: translateY(0) scale(1, 1); }
}
.palco.acordou .lingua { animation: bleh .18s ease-in-out 5 alternate; }
@keyframes bleh {
  from { transform: rotate(-9deg) scaleY(1.1); }
  to   { transform: rotate(9deg) scaleY(1.1); }
}
.palco.engolindo {
  animation: none;
  transform: scale(5.5);
  filter: brightness(.25);
  transition: transform .8s cubic-bezier(.6, 0, .9, .4), filter .8s;
}
.capa > *:not(.palco) { transition: opacity .45s ease; }
body.abrindo .capa > *:not(.palco) { opacity: 0; }
body.saindo .capa { opacity: 0; }

/* Botão de som */
.som {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(255, 244, 230, .25);
  background: rgba(26, 11, 41, .6);
  color: var(--papel);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.som svg { width: 18px; height: 18px; }
.som .off { display: none; }
.som[aria-pressed="true"] .on { display: none; }
.som[aria-pressed="true"] .off { display: block; }

/* ==========================================================
   CONVITE (convite.html)
   ========================================================== */

.saudacao { text-align: center; padding: 30px 24px 4px; }

.hero { max-width: 560px; margin: 0 auto; text-align: center; padding: 0 16px; }
.hero .rosto {
  width: min(260px, 66vw);
  margin: 8px auto 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  animation: flutuar 3.2s ease-in-out infinite;
}
@keyframes flutuar { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.selo {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 16px 5px;
  border-radius: 999px;
  background: var(--lilas);
  color: var(--noite);
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .04em;
}
.hero h1 {
  margin-top: 10px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(34px, 10vw, 50px);
  line-height: 1.02;
  color: var(--abobora);
  text-shadow: 0 3px 0 #8A3A06, 0 0 28px rgba(255, 138, 31, .35);
}
.hero .subtitulo {
  margin-top: 12px;
  font-family: var(--titulo);
  font-size: 19px;
  color: var(--papel-suave);
}

.carta {
  max-width: 28rem;
  margin: 30px auto 0;
  padding: 0 26px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
}
.carta p + p { margin-top: 14px; }
.assinatura {
  margin-top: 24px !important;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 18px;
  color: var(--abobora-clara);
}
.assinatura::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 4px;
  background: var(--lilas);
  opacity: .7;
}

/* "Não esqueça de trazer" */
.levar {
  max-width: 24rem;
  width: calc(100% - 32px);
  margin: 30px auto 0;
  padding: 20px 22px 18px;
  border: 2px dashed var(--linha);
  border-radius: 20px;
  text-align: center;
}
.levar ul { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.levar li { font-family: var(--titulo); font-size: 18px; }
.levar li::before { content: "★"; margin-right: 8px; color: var(--abobora); }

/* Bloco com as informações */
.detalhes {
  max-width: 460px;
  margin: 40px auto 0;
  padding: 36px 22px 38px;
  border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(185, 140, 255, .16), transparent 60%),
    linear-gradient(180deg, #2B1444 0%, #220F37 100%);
  border: 2px solid var(--linha);
  text-align: center;
}
@media (max-width: 499px) { .detalhes { margin-left: 12px; margin-right: 12px; } }
.detalhes-inner { max-width: 420px; margin: 0 auto; }
.detalhes .titulo-bloco {
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papel);
}
.linha-ouro { height: 2px; margin: 24px auto; max-width: 260px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--linha), transparent); }

.quando { display: grid; grid-template-columns: 1fr 2px 1fr; align-items: start; column-gap: 8px; margin-top: 24px; }
.quando .divisor { align-self: stretch; border-radius: 2px; background: var(--linha); }
.valor {
  margin-top: 8px;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: clamp(1.3rem, 5.8vw, 1.65rem);
  line-height: 1.15;
}
.quando .sub { margin-top: 2px; font-size: 15px; color: var(--papel-suave); }

.onde .valor { font-size: clamp(1.4rem, 6.4vw, 1.8rem); }
.onde .endereco { margin-top: 6px; font-size: 16px; line-height: 1.5; color: rgba(255, 244, 230, .88); }
.onde .segredo { margin-top: 6px; font-size: 16px; color: var(--papel-suave); }
.mapa {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px 7px;
  border-radius: 999px;
  border: 2px solid var(--linha);
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 14px;
  color: var(--papel);
  text-decoration: none;
}
.contagem {
  display: inline-block;
  margin-top: 22px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 138, 31, .14);
  font-family: var(--titulo);
  font-weight: 600;
  font-size: 17px;
  color: var(--abobora-clara);
}

.confirmar { margin-top: 30px; }
.fantasia { max-width: 320px; margin: 0 auto 14px; }
.fantasia label { display: block; margin-bottom: 8px; text-align: center; }
.fantasia input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--linha);
  border-radius: 16px;
  background: rgba(0, 0, 0, .25);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 17px;
  text-align: center;
}
.fantasia input::placeholder { color: rgba(215, 196, 230, .55); }
.fantasia input:focus { outline: 2px solid var(--abobora); outline-offset: 2px; }

.btn-confirmar {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 17px 20px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--abobora-clara), var(--abobora-funda));
  color: #2A0E00;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 #A54707, 0 10px 24px rgba(0, 0, 0, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-confirmar:active { transform: translateY(4px); box-shadow: 0 1px 0 #A54707, 0 4px 12px rgba(0, 0, 0, .3); }
.btn-confirmar:focus-visible { outline: 2px solid var(--papel); outline-offset: 4px; }
.nota { margin-top: 12px; font-size: 15px; color: var(--papel-suave); }
.agenda { margin-top: 18px; font-size: 15px; color: var(--papel-suave); }
.agenda a { color: var(--papel); text-decoration: none; border-bottom: 2px solid var(--linha); }

.encerramento {
  max-width: 25rem;
  margin: 0 auto;
  padding: 36px 28px 6px;
  text-align: center;
  font-family: var(--titulo);
  font-size: 19px;
  line-height: 1.45;
  color: var(--papel);
}

.quero { max-width: 25rem; margin: 26px auto 0; padding: 0 24px; text-align: center; }
.quero p { font-size: 15px; color: var(--papel-suave); }
.quero a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px 9px;
  border: 2px solid var(--linha);
  border-radius: 999px;
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: var(--abobora-clara);
}

.marca-rodape {
  padding: 22px 16px 30px;
  text-align: center;
  font-size: 13px;
  color: rgba(215, 196, 230, .65);
}
.marca-rodape a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--linha); }

@media (min-width: 700px) {
  .saudacao { padding-top: 46px; }
  .carta { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .palco.engolindo { transform: none; }
}