/* ============================================================
   estilo.css — aparência
   Os números que valem a pena mexer estão no bloco #folha,
   lá embaixo: são todos "% da altura da folha".
   ============================================================ */

:root{
  --parede:#051C2C;   /* cor da parede, usada enquanto a imagem não carrega */
  --tinta:#014D6E;    /* azul do texto dentro do livro */
  --creme:#EFE0CE;    /* creme do X e dos links por cima da parede */
  --imagem-parede:url("imagens/fundo-computador.webp");

  /* capas vizinhas: altura em % da altura da janela e
     quanto por cento da capa fica pra fora da borda */
  --viz-altura:48;
  --viz-fora:36;
}
@media (max-width:820px){
  :root{
    --imagem-parede:url("imagens/fundo-celular.webp");
    --viz-altura:25;
    --viz-fora:56;
  }
}

/* a parede, atrás de tudo. Cobre a tela inteira e não rola junto. */
#parede{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--parede) var(--imagem-parede) center / cover no-repeat;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--parede); }
body{
  font-family:"adobe-aldine", Georgia, serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- a estante ---------- */
#palco{ min-height:100dvh; display:flex; align-items:center; justify-content:center; }
#quadro{ position:relative; line-height:0; }
#fundo{ display:block; width:100%; height:100%; }

.area{
  position:absolute; cursor:pointer;
  background:transparent; border:0; border-radius:4px;
  transition:box-shadow .18s ease, transform .18s ease;
}
.area:hover, .area:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.28), 0 8px 26px rgba(0,0,0,.5);
  transform:translateY(-2px);
}

/* ---------- telas sobrepostas ---------- */
/* pano de fundo que fica ligado enquanto qualquer tela está aberta —
   evita a estante piscar quando se passa de um livro pro outro */
body::before{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none;
  background:var(--parede) var(--imagem-parede) center / cover no-repeat;
  opacity:0; transition:opacity .22s ease;
}
body.tela-aberta::before{ opacity:1; }

.tela{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  opacity:0; transition:opacity .22s ease;
}
.tela.aberta{ opacity:1; }
.tela[hidden]{ display:none; }

/* ---------- controles: X e setas ---------- */
#controles{
  position:fixed; inset:0; z-index:60;
  pointer-events:none;                /* só os botões pegam clique */
  opacity:0; transition:opacity .22s ease;
}
#controles.aberto{ opacity:1; }
#controles[hidden]{ display:none; }

.ctrl{
  position:absolute; pointer-events:auto;
  padding:0; border:0; background:transparent; cursor:pointer;
  transition:transform .16s ease, opacity .16s ease;
}
.ctrl img{ display:block; width:100%; height:auto; }
.ctrl:not(.vizinha):hover{ transform:translateY(-2px); }
.ctrl:not(.vizinha):active{ transform:translateY(0); }
.ctrl[hidden]{ display:none; }

#btnFechar{
  left:clamp(14px, 4.6vmin, 54px);
  top:clamp(14px, 4.6vmin, 54px);
  width:clamp(22px, 4.2vmin, 46px);
}
/* as capas de trás e da frente, espiando nas laterais */
.vizinha{
  display:block; top:50%; width:auto; line-height:0;
  height:calc(var(--viz-altura) * 1dvh);
  opacity:.55; filter:brightness(.62);
  transition:transform .3s cubic-bezier(.22,.9,.3,1), opacity .25s ease, filter .25s ease;
}
.vizinha img{ display:block; height:100%; width:auto; }
#btnAnterior{ left:0;  transform:translate(calc(-1% * var(--viz-fora)), -50%); }
#btnProximo{ right:0; transform:translate(calc( 1% * var(--viz-fora)), -50%); }
.vizinha:hover{ opacity:1; filter:brightness(.9); }
#btnAnterior:hover{ transform:translate(calc(-1% * (var(--viz-fora) - 9)), -50%); }
#btnProximo:hover{ transform:translate(calc( 1% * (var(--viz-fora) - 9)), -50%); }

#btnBaixar{
  right:clamp(14px, 4.6vmin, 54px);
  top:clamp(14px, 4.6vmin, 54px);
  font-family:inherit; font-style:italic; color:var(--creme);
  font-size:clamp(14px, 2.2vmin, 22px); text-decoration:none;
  border-bottom:1px solid rgba(239,224,206,.45);
  padding-bottom:2px;
}
#btnBaixar:hover{ opacity:.7; }

/* ---------- about me / my CV ---------- */
#folhaImg{
  display:block;
  max-height:86dvh; max-width:92vw;
  width:auto; height:auto;
  transform:scale(.97); opacity:0;
  transition:transform .3s cubic-bezier(.22,.9,.3,1), opacity .3s ease;
}
.tela.aberta #folhaImg{ transform:scale(1); opacity:1; }

/* ---------- capa ampliada ----------
   IMPORTANTE: quem manda no tamanho é a IMAGEM, não a caixa.
   Os limites de altura e de largura ficam os dois na imagem, então
   a caixa .capa encolhe exatamente em cima do desenho. Se o limite
   for posto na caixa, ela fica maior que a capa e a orelha desgruda. */
.capa{
  position:relative; display:block; line-height:0;
  --s-parada:34px;                  /* preenchidos pelo site.js, em cima */
  --s-aberta:68px;                  /* da largura real da capa */
  --s:var(--s-parada);
  transform:scale(.96); opacity:0;
  transition:transform .28s cubic-bezier(.22,.9,.3,1), opacity .28s ease;
}
.tela.aberta .capa{ transform:scale(1); opacity:1; }

.capa-arte{
  display:block; width:auto; height:auto;
  max-height:min(76dvh, 760px);
  max-width:50vw;   /* deixa espaço pras capas vizinhas */
  /* sem box-shadow: a sombra seguiria o retângulo do arquivo, não o desenho */
  transition:clip-path .3s cubic-bezier(.22,.9,.3,1);
}
.orelha{ display:none; }

/* a orelha só existe nos livros que têm texto */
.capa.tem-orelha{ cursor:pointer; }
.capa.tem-orelha .capa-arte{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,0 100%);
}
.capa.tem-orelha .orelha{
  display:block;
  position:absolute; right:0; bottom:0;
  width:var(--s); height:var(--s);
  clip-path:polygon(0 0,100% 0,0 100%);
  background:linear-gradient(315deg,#6F6552 0%,#CFC3A6 45%,#F6F0E2 100%);
  filter:drop-shadow(-3px -3px 4px rgba(0,0,0,.5));
  transition:width .3s cubic-bezier(.22,.9,.3,1), height .3s cubic-bezier(.22,.9,.3,1);
  pointer-events:none;
}
.capa.tem-orelha:hover, .capa.tem-orelha.acenando{ --s:var(--s-aberta); }

/* ---------- livro aberto (uma página) ---------- */
/* A altura tem que levar em conta a largura da tela, senão numa tela
   estreita a largura é cortada, a altura não, e o desenho da página
   descola do texto. O 1.204 é a proporção do papel (1806 ÷ 1500):
   ele converte "quanto da largura da tela" em "quanto de altura".
   Mexeu num dos dois números? Mexe nos dois. */
#livro{
  position:relative;
  aspect-ratio:1500/1806;              /* proporção do PNG da página */
  width:auto;
  height:min(88dvh, calc(64vw * 1.204));   /* 64vw = espaço pras vizinhas */
  background:url("imagens/ui/pagina-em-branco.webp") center/contain no-repeat;
  transform:scale(.97); opacity:0;
  transition:transform .3s cubic-bezier(.22,.9,.3,1), opacity .3s ease;
}
.tela.aberta #livro{ transform:scale(1); opacity:1; }

/* #folha = só o retângulo de papel de dentro do PNG.
   Tudo lá dentro é medido em "% da altura da folha" (1cqh). */
#folha{
  position:absolute;
  left:5.60%; top:6.12%; width:87.60%; height:87.85%;
  container-type:size;
  display:flex; flex-direction:column; align-items:center;
  color:var(--tinta); text-align:center;

  /* ---- tamanhos de letra (% da altura da folha) ---- */
  --f-autor:3.4;
  --f-titulo:9.4;
  --alt-titulo:15.8;   /* altura máxima do título; se não couber, ele encolhe */
  --f-subtitulo:4.0;
  --f-texto:2.25;
  --f-voltar:3.0;

  /* ---- espaços verticais (% da altura da folha) ---- */
  --pad-topo:9.06;
  --g-titulo:6.25;
  --g-subtitulo:1.15;
  --g-botao:7.21;
  --g-texto:7.51;
  --g-voltar:1.5;
  --pad-base:8.55;

  /* ---- larguras (% da largura da folha) ---- */
  --larg-botao:26.5;
  --larg-texto:71.33;

  padding:calc(var(--pad-topo) * 1cqh) 0 calc(var(--pad-base) * 1cqh);
}

#pgAutor{
  margin:0; font-style:italic; font-weight:400;
  font-size:calc(var(--f-autor) * 1cqh); line-height:1.15;
}
/* sem autor a linha continua ocupando o lugar, só que invisível */
#pgAutor.vazio{ visibility:hidden; }
#pgTitulo{
  margin:calc(var(--g-titulo) * 1cqh) 0 0;
  font-weight:400; font-size:calc(var(--f-titulo) * 1cqh); line-height:1.05;
  max-width:88%; text-wrap:balance;
}
#pgSubtitulo{
  margin:calc(var(--g-subtitulo) * 1cqh) 0 0;
  font-weight:400; font-size:calc(var(--f-subtitulo) * 1cqh); line-height:1.15;
  max-width:84%; text-wrap:balance;
}
#pgComprar{
  display:block; margin:calc(var(--g-botao) * 1cqh) 0 0;
  width:calc(var(--larg-botao) * 1cqw);
  transition:transform .16s ease;
}
#pgComprar img{ display:block; width:100%; height:auto; }
#pgComprar:hover{ transform:translateY(-2px) rotate(-.6deg); }
#pgComprar[hidden]{ display:none; }

#pgTexto{
  margin:calc(var(--g-texto) * 1cqh) 0 0;
  width:calc(var(--larg-texto) * 1cqw);
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  font-size:max(calc(var(--f-texto) * 1cqh), 15px);
  line-height:1.38; text-align:justify; hyphens:auto;
  scrollbar-width:thin; scrollbar-color:rgba(1,77,110,.28) transparent;
}
#pgTexto::-webkit-scrollbar{ width:4px; }
#pgTexto::-webkit-scrollbar-thumb{ background:rgba(1,77,110,.28); border-radius:3px; }
#pgTexto p{ margin:0 0 .9em; }
#pgTexto p:last-child{ margin-bottom:0; }

#btnVoltarCapa{
  margin:calc(var(--g-voltar) * 1cqh) 0 0;
  padding:0; border:0; background:transparent; cursor:pointer;
  font-family:inherit; color:var(--tinta);
  font-style:italic; font-size:calc(var(--f-voltar) * 1cqh); line-height:1.15;
  transition:opacity .16s ease;
}
#btnVoltarCapa:hover{ opacity:.6; }
#btnVoltarCapa[hidden]{ display:none; }

/* ---------- celular ---------- */
@media (max-width:820px){
  #palco{ display:block; }
  #quadro{ width:100%; }

  .capa-arte{ max-height:min(62dvh,520px); max-width:68vw; }
  #folhaImg{ max-height:82dvh; max-width:94vw; }

  #livro{ height:min(82dvh, calc(78vw * 1.204)); }

  /* No celular a página é estreita, então ela também fica baixa —
     e sobra bem menos altura pro texto do que no computador.
     Por isso as folgas aqui são mais apertadas que lá em cima. */
  #folha{
    --f-autor:4.0;
    --f-titulo:6.4;
    --alt-titulo:20;
    --f-subtitulo:4.2;
    --f-texto:4.7;
    --f-voltar:3.6;

    --pad-topo:4;
    --g-titulo:2.5;
    --g-subtitulo:1;
    --g-botao:2.5;
    --g-texto:2.5;
    --g-voltar:1;
    --pad-base:4;

    --larg-botao:26;
    --larg-texto:86;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}