/* ============================================================
   Convite Emiliane & Carlos — 16.01.2027 — Vila Salga, Ilhabela
   v2: papel claro, aquarela de mar, dourado antigo, caligrafia
   ============================================================ */

/* ---------- Fontes auto-hospedadas ---------- */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-it400.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Great Vibes';
  src: url('../fonts/great-vibes.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* papel */
  --papel: #FBF7F0;
  --papel-2: #F3EAD9;
  --papel-borda: #E8DCC6;
  /* mar e areia */
  --mar-claro: #BFE0E6;
  --mar: #8FC7D4;
  --mar-fundo: #4E8C99;
  --areia: #EFE1C8;
  /* dourado antigo — o dourado do vídeo (#EAD39A) some sobre creme */
  --ouro-1: #C9A86A;
  --ouro-2: #A8853F;
  --ouro-3: #8C6C2E;
  /* tinta */
  --tinta: #33383B;
  --tinta-suave: #5A6266;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --caps: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;

  /* grão de papel — SVG minúsculo em data URI, sem requisição */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--papel-2);
  color: var(--tinta);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  /* mesa clara sob o livro */
  background: radial-gradient(120% 90% at 50% 0%, #F2E9D8 0%, #E7DAC1 55%, #D8C7A8 100%);
}

/* ---------- Palco do livro ---------- */
#palco {
  width: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0;
  transition: opacity .9s ease .25s;
}
#palco[data-visivel='1'] { opacity: 1; }

#livro { margin: 0 auto; }
#livro .stf__item { box-shadow: 0 14px 44px rgba(93, 75, 40, .22); }

/* ---------- Página ---------- */
.pagina {
  background: var(--papel) center/cover no-repeat;
  overflow: hidden;
  position: relative;
  color: var(--tinta);
}
.pagina--capa   { background-image: url('../img/aq-capa.webp'); }
.pagina--aqua   { background-image: url('../img/aq-pagina-a.webp'); }
.pagina--aqub   { background-image: url('../img/aq-pagina-b.webp'); }

/* grão de papel por cima da aquarela */
.pagina::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grao);
  opacity: .035;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.pagina__conteudo {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10% 9%;
  gap: 2.9vmin;
}

/* moldura dourada dupla, fina */
.pagina__conteudo::before,
.pagina__conteudo::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--ouro-1);
}
.pagina__conteudo::before { inset: 4.2%; opacity: .55; }
.pagina__conteudo::after  { inset: 5.4%; opacity: .28; }

/* ---------- Tipografia ---------- */
.sobrescrito {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(9px, 2vmin, 16px);
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--ouro-3);
  margin: 0;
}

.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(34px, 8.6vmin, 78px);
  line-height: 1.12;
  color: var(--ouro-3);
  margin: 0;
  /* Great Vibes tem descidas longas; sem isso os "g/y" são cortados */
  padding-bottom: .12em;
}

.titulo {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(13px, 3vmin, 26px);
  letter-spacing: .2em;
  text-indent: .2em;
  color: var(--tinta);
  margin: 0;
  line-height: 1.5;
}

.corpo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(14px, 3.1vmin, 27px);
  line-height: 1.7;
  color: var(--tinta);
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}
.corpo em { font-style: italic; font-weight: 400; color: var(--tinta-suave); }

.destaque {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(15px, 3.4vmin, 30px);
  letter-spacing: .14em;
  text-indent: .14em;
  color: var(--ouro-3);
  margin: 0;
}

.linha {
  font-family: var(--serif);
  font-size: clamp(13px, 2.8vmin, 24px);
  line-height: 1.55;
  color: var(--tinta);
  margin: 0;
}

.legenda {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(12px, 2.6vmin, 22px);
  line-height: 1.5;
  color: var(--tinta-suave);
  margin: 0;
  max-width: 28ch;
}

.miudo {
  font-family: var(--caps);
  font-weight: 500;
  font-size: clamp(8px, 1.75vmin, 13px);
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--ouro-3);
  margin: 0;
}

/* ---------- Ornamento divisor ---------- */
.divisor {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; width: 58%;
}
.divisor::before, .divisor::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--ouro-1), transparent);
}
.divisor i {
  width: 6px; height: 6px; flex: none;
  background: var(--ouro-2);
  transform: rotate(45deg);
}

/* ---------- Ornamentos de mar (SVG de linha) ---------- */
.ornamento { display: block; color: var(--ouro-2); }
.ornamento--largo { width: min(58%, 260px); }
.ornamento--medio { width: min(34%, 150px); }

/* ---------- Selo / lacre ---------- */
.selo { display: block; height: auto; }
.selo--capa  { width: min(56%, 260px); }
.selo--fim   { width: min(42%, 200px); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(9px, 1.95vmin, 15px);
  letter-spacing: .24em; text-indent: .24em;
  color: var(--ouro-3);
  text-decoration: none;
  padding: .9em 1.6em;
  border: 1px solid var(--ouro-1);
  background: rgba(255, 253, 248, .72);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao:hover, .botao:focus-visible {
  background: var(--ouro-1);
  border-color: var(--ouro-2);
  color: #FFFDF6;
  outline: none;
}
.botao svg { width: 1.15em; height: 1.15em; flex: none; }

.botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- Traje ---------- */
.icones {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(18px, 6vmin, 48px);
  color: var(--ouro-2);
}
.icones svg { width: clamp(42px, 11.5vmin, 96px); height: auto; display: block; }
.icone { display: flex; flex-direction: column; align-items: center; gap: .7em; }
.icone span {
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(7px, 1.5vmin, 11px);
  letter-spacing: .22em; text-indent: .22em;
  color: var(--ouro-3);
}

/* ---------- Contagem regressiva ---------- */
.contagem {
  display: flex; align-items: baseline; justify-content: center; gap: .28em;
  color: var(--ouro-3);
}
.contagem b {
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(46px, 13vmin, 118px);
  line-height: 1;
  letter-spacing: .02em;
}
.contagem span {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 3.4vmin, 30px);
  color: var(--tinta-suave);
}

/* ============================================================
   Tela do lacre — é o gesto de abrir que libera o áudio
   ============================================================ */
#lacre {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel) center/cover no-repeat url('../img/aq-capa.webp');
  transition: opacity .8s ease, visibility .8s ease;
}
#lacre::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grao);
  opacity: .04; mix-blend-mode: multiply; pointer-events: none;
}
#lacre[data-aberto='1'] { opacity: 0; visibility: hidden; }

.lacre__conteudo {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 3vmin, 26px);
  text-align: center;
  padding: 12vmin 8vw;
  max-width: 620px;
}

#abrir {
  border: 0; background: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: min(62vw, 300px);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
#abrir svg { width: 100%; height: auto; display: block; }
#abrir:hover { transform: scale(1.04); }
#abrir:active { transform: scale(.97); }
#lacre[data-aberto='1'] #abrir { transform: scale(1.5) rotate(9deg); opacity: 0; }

.lacre__toque {
  font-family: var(--caps); font-weight: 500;
  font-size: clamp(10px, 2.2vmin, 16px);
  letter-spacing: .42em; text-indent: .42em;
  color: var(--ouro-3);
  margin: 0;
  animation: respira 2.6s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ---------- Controle de som ---------- */
#som {
  position: fixed;
  bottom: max(14px, env(safe-area-inset-bottom));
  right: max(14px, env(safe-area-inset-right));
  z-index: 95;
  width: 44px; height: 44px;
  border: 1px solid var(--ouro-1);
  background: rgba(255, 253, 248, .82);
  backdrop-filter: blur(6px);
  color: var(--ouro-2);
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease, border-color .25s ease;
}
#som:hover { color: var(--ouro-3); border-color: var(--ouro-2); }
#som svg { width: 21px; height: 21px; }
#som .onda { transition: opacity .2s ease; }
#som[data-ligado='0'] .onda { opacity: .18; }

/* ---------- Dica de folhear ---------- */
#dica {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  z-index: 80;
  font-family: var(--caps); font-weight: 500;
  font-size: 10px; letter-spacing: .3em; text-indent: .3em;
  color: var(--ouro-2);
  pointer-events: none;
  display: flex; align-items: center; gap: .8em;
  white-space: nowrap;
  transition: opacity .6s ease;
}
#dica[data-oculto='1'] { opacity: 0; }
#dica .seta { display: inline-block; animation: desliza 1.9s ease-in-out infinite; }
@keyframes desliza {
  0%, 100% { transform: translateX(0); opacity: .45; }
  50%      { transform: translateX(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #dica .seta, .lacre__toque { animation: none; }
  #abrir, #palco, #lacre { transition: none; }
}

/* ============================================================
   Fallback sem JS: páginas empilhadas em rolagem
   ============================================================ */
body.sem-flip { display: block; overflow-y: auto; }
body.sem-flip #palco { display: block; height: auto; padding: 0; opacity: 1; }
body.sem-flip #livro { display: block; width: 100%; }
body.sem-flip #dica { display: none; }
body.sem-flip .pagina {
  display: block !important;
  width: min(100%, 520px);
  aspect-ratio: 9/16;
  margin: 0 auto 18px;
}
/* sem JS o lacre não abre — não pode tapar o convite */
body.sem-flip #lacre { position: relative; height: 100dvh; }

/* nomes em caligrafia numa escala menor (páginas internas e contracapa) */
.script--menor { font-size: clamp(24px, 6vmin, 50px); }