/* ==========================================================
   Convite • Halloween — Carta Assombrada (Convida&u)
   Mesma estrutura do modelo da Ana Desidério:
   - Títulos: Cinzel  |  Textos: IM Fell English
   - Paleta: fundo quase preto, papel envelhecido e brasa laranja
   ========================================================== */

:root {
  --fundo: #0A0402;
  --fundo-2: #1C0A04;
  --papel: #ECD9C0;
  --papel-suave: #B89C80;
  --brasa: #FF8A1F;
  --brasa-clara: #FFD36B;
  --brasa-funda: #E2600C;
  --linha-brasa: rgba(255, 138, 31, .35);

  --titulo: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --texto: 'IM Fell English', Georgia, 'Times New Roman', serif;
}

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

body {
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.55;
  color: var(--papel);
  background: radial-gradient(120% 80% at 50% 40%, var(--fundo-2) 0%, var(--fundo) 62%) fixed, var(--fundo);
  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-size: 12px;
  line-height: 1.2;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--papel-suave);
}
.rotulo strong { color: var(--brasa-clara); font-weight: 700; }

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

@keyframes surgir {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.surgir { animation: surgir 1s 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-monstro
   ========================================================== */

.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 {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.15;
  text-shadow: 0 0 18px rgba(255, 120, 30, .25);
}
.capa .dica {
  font-style: italic;
  font-size: 17px;
  color: var(--papel-suave);
  animation: respirar 2.4s ease-in-out infinite;
}
@keyframes respirar { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* O palco tem o tamanho da imagem. --u = 1px da imagem original (1254px),
   recalculado pelo carta.js, para posicionar as pupilas no lugar certo. */
.palco {
  position: relative;
  width: min(92vw, 470px);
  aspect-ratio: 1 / 1;
  cursor: pointer;
  touch-action: manipulation;
  transform-origin: 51.8% 58%;
  --u: .375px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
                      linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
              linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
.palco:focus-visible { outline: 2px solid var(--brasa); outline-offset: 6px; }

/* Camada de trás: o escuro e as pupilas. Só aparece pelos buracos dos olhos. */
.fundo-olhos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(calc(var(--u) * 160) calc(var(--u) * 90) at 42.7% 34.7%, rgba(255, 70, 0, .28), transparent 70%),
    radial-gradient(calc(var(--u) * 140) calc(var(--u) * 80) at 66.2% 37.5%, rgba(255, 70, 0, .28), transparent 70%),
    #070201;
}
.pupila {
  position: absolute;
  width: calc(var(--u) * 170);
  height: calc(var(--u) * 170);
  margin: calc(var(--u) * -85) 0 0 calc(var(--u) * -85);
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFF7DC 0 9%, #FFE08A 16%, #FFB13B 27%, #FF7A12 40%,
    rgba(230, 70, 5, .55) 54%, rgba(120, 20, 0, 0) 71%);
  will-change: transform;
  transition: filter .3s ease;
}
.pupila.esq { left: calc(var(--u) * 535); top: calc(var(--u) * 437); }
.pupila.dir { left: calc(var(--u) * 832); top: calc(var(--u) * 470); }

.monstro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Língua: peça separada que balança presa pela raiz, dentro da boca */
.lingua {
  position: absolute;
  left: calc(var(--u) * 562);
  top: calc(var(--u) * 656);
  width: calc(var(--u) * 268);
  height: calc(var(--u) * 349);
  max-width: none;
  pointer-events: none;
  transform-origin: 27% 10%;
  animation: babar 3.4s ease-in-out infinite alternate;
}
@keyframes babar {
  0%   { transform: rotate(-1.6deg) scaleY(1); }
  45%  { transform: rotate(1.2deg) scaleY(1.025); }
  100% { transform: rotate(2.6deg) scaleY(1.01); }
}
.palco.acordou .lingua { animation: lamber .9s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes lamber {
  0%   { transform: rotate(1deg) scaleY(1); }
  30%  { transform: rotate(-5deg) scaleY(1.08); }
  60%  { transform: rotate(4deg) scaleY(1.04); }
  100% { transform: rotate(0deg) scaleY(1.02); }
}

.brilho-boca {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(calc(var(--u) * 300) calc(var(--u) * 230) at 52% 56%, rgba(255, 110, 25, .55), transparent 70%);
  mix-blend-mode: screen;
  opacity: .35;
  animation: chama 2.6s infinite;
}
@keyframes chama {
  0%, 100% { opacity: .30; } 18% { opacity: .42; } 31% { opacity: .27; }
  52% { opacity: .46; } 64% { opacity: .33; } 83% { opacity: .40; }
}

/* Abertura: acorda, treme e engole a tela */
.palco.acordou .pupila { filter: brightness(1.35) saturate(1.2); }
.palco.acordou .brilho-boca { animation: none; opacity: .9; transition: opacity .4s; }
.palco.acordou { animation: tremer .55s linear; }
@keyframes tremer {
  0%, 100% { translate: 0 0; } 10% { translate: -6px 2px; } 20% { translate: 5px -3px; }
  30% { translate: -7px -1px; } 40% { translate: 6px 3px; } 50% { translate: -4px 2px; }
  60% { translate: 5px -2px; } 70% { translate: -3px 1px; } 80% { translate: 2px -1px; }
}
.palco.engolindo {
  transform: scale(6);
  filter: brightness(.2);
  transition: transform .85s cubic-bezier(.6, 0, .9, .4), filter .85s;
}
.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: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(236, 217, 192, .25);
  background: rgba(10, 4, 2, .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: 34px 24px 6px; }

/* Topo: os olhos da carta continuam acesos */
.hero { max-width: 560px; margin: 0 auto; text-align: center; }
.hero .olhos {
  width: min(420px, 100%);
  margin: 0 auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  animation: brasa 3s infinite;
}
@keyframes brasa {
  0%, 100% { filter: brightness(1); } 22% { filter: brightness(1.15); }
  40% { filter: brightness(.92); } 70% { filter: brightness(1.1); }
}
.hero h1 {
  margin-top: -6px;
  padding: 0 16px;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(34px, 10vw, 50px);
  line-height: 1.05;
  letter-spacing: .04em;
  color: var(--brasa-clara);
  text-shadow: 0 0 26px rgba(255, 120, 30, .45);
}
.hero .subtitulo {
  margin-top: 10px;
  padding: 0 24px;
  font-style: italic;
  font-size: 19px;
  color: var(--papel-suave);
}

.carta {
  max-width: 28rem;
  margin: 36px auto 0;
  padding: 0 28px;
  text-align: center;
  font-size: 18px;
  line-height: 1.7;
}
.carta p + p { margin-top: 16px; }
.assinatura {
  margin-top: 30px !important;
  font-family: var(--titulo);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brasa);
}
.assinatura::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  margin: 0 auto 20px;
  background: var(--brasa);
  opacity: .6;
}

/* Bloco com as informações */
.detalhes {
  margin-top: 54px;
  padding: 50px 24px 54px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 110, 20, .10), transparent 60%),
    linear-gradient(180deg, #170804 0%, #0D0503 100%);
  border-top: 1px solid var(--linha-brasa);
  border-bottom: 1px solid var(--linha-brasa);
  text-align: center;
}
.detalhes-inner { max-width: 440px; margin: 0 auto; }
.detalhes .titulo-bloco {
  font-family: var(--titulo);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--papel);
}
.linha-ouro { height: 1px; margin: 28px auto; max-width: 300px; background: linear-gradient(90deg, transparent, var(--linha-brasa), transparent); }

.quando { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: start; column-gap: 8px; margin-top: 30px; }
.quando .divisor { align-self: stretch; background: var(--linha-brasa); }
.valor {
  margin-top: 10px;
  font-family: var(--titulo);
  font-size: clamp(1.25rem, 5.6vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: .02em;
}
.quando .sub { margin-top: 4px; font-size: 15px; color: var(--papel-suave); }

.onde .valor { font-size: clamp(1.5rem, 7vw, 1.9rem); }
.onde .endereco { margin-top: 8px; font-size: 17px; line-height: 1.5; color: rgba(236, 217, 192, .88); }
.onde .segredo { margin-top: 8px; font-style: italic; font-size: 17px; color: var(--papel-suave); }
.mapa {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--titulo);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--papel);
  text-decoration: none;
  border-bottom: 1px solid var(--linha-brasa);
  padding-bottom: 2px;
}
.contagem { margin-top: 22px; font-size: 17px; color: var(--brasa-clara); }

.confirmar { margin-top: 34px; }
.fantasia { max-width: 320px; margin: 0 auto 16px; text-align: left; }
.fantasia label { display: block; margin-bottom: 8px; text-align: center; }
.fantasia input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--linha-brasa);
  border-radius: 2px;
  background: rgba(0, 0, 0, .35);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 18px;
  text-align: center;
}
.fantasia input::placeholder { color: rgba(184, 156, 128, .6); font-style: italic; }
.fantasia input:focus { outline: 1px solid var(--brasa); outline-offset: 2px; }

.btn-confirmar {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 18px 20px 16px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, #FF9A2E, var(--brasa-funda));
  color: #1A0802;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 28px rgba(255, 110, 20, .35);
  transition: filter .2s ease, transform .2s ease;
}
.btn-confirmar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-confirmar:focus-visible { outline: 1px solid var(--brasa-clara); outline-offset: 4px; }
.nota { margin-top: 12px; font-size: 15px; color: var(--papel-suave); }
.agenda { margin-top: 16px; font-size: 15px; color: var(--papel-suave); }
.agenda a { color: var(--papel); text-decoration: none; border-bottom: 1px solid var(--linha-brasa); }

.encerramento {
  max-width: 25rem;
  margin: 0 auto;
  padding: 40px 28px 8px;
  text-align: center;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--papel-suave);
}
/* Todo convidado é um possível cliente da Convida&u */
.quero {
  max-width: 25rem;
  margin: 28px 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: 11px 20px 10px;
  border: 1px solid var(--linha-brasa);
  border-radius: 999px;
  font-family: var(--titulo);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brasa-clara);
  transition: background-color .2s ease;
}
.quero a:hover { background: rgba(255, 138, 31, .08); }

.marca-rodape {
  padding: 22px 16px 30px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(184, 156, 128, .7);
}
.marca-rodape a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 138, 31, .3); }

@media (min-width: 700px) {
  .saudacao { padding-top: 50px; }
  .carta { font-size: 19px; }
  .detalhes { padding: 62px 24px 66px; }
}

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