/* ============================================================
   book.css — Viewer / palco do livro digital
   Coordenadas nativas do Figma: palco 430×932 (px de design).
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-base);
  background:#1a0526;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* Fundo permanente da marca */
#book-viewer{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFE8D6 0%, #F6C9D8 38%, #B87FC2 72%, #6B0584 100%);
}
/* Backdrop borrado (desktop) */
#book-backdrop{
  position:fixed;inset:-6%;z-index:0;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(34px) brightness(.62) saturate(1.15);
  transform:scale(1.12);
  opacity:.9;transition:opacity .5s ease;
  pointer-events:none;
}

/* Palco: 430×932 escalado por --scale */
#book-stage{position:relative;z-index:1}
#book-page-frame{
  position:relative;
  width:430px;height:932px;
  transform-origin:center center;
  transform:scale(var(--scale,1));
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  background:#FFEFE3;
}

/* Container das páginas */
#pages-container{position:absolute;inset:0}
.page{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}
.page.active{opacity:1;pointer-events:auto}

/* ---- Camadas posicionadas (coords Figma em px) ---- */
.layer{position:absolute;will-change:transform,opacity}
.layer img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

/* Background full-frame */
.layer-bg{inset:0;width:100%!important;height:100%!important}
.layer-bg img{object-fit:cover}

/* ---- Box roxo (cabeçalho sólido P2–P6) ---- */
.box-roxo{
  background:var(--c-roxo);
  left:0;top:0;width:430px;
  border-radius:0;
}

/* ---- Caixa bege com narração (dentro do box roxo) ---- */
.box-bege{
  background:var(--c-bege);
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  padding:10px 16px;
  box-shadow:0 4px 18px rgba(107,5,132,.18);
}
.box-bege .txt,.narr{
  color:var(--c-roxo-txt);font-weight:700;font-size:18px;
  line-height:1.22;text-align:left;
}

/* ---- Box roxo flutuante (P7+, sem cabeçalho) ---- */
.box-float{
  background:var(--c-roxo);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  padding:10px 16px;
  box-shadow:0 4px 18px rgba(107,5,132,.35);
}
.box-float .txt{
  color:#fff;font-weight:700;font-size:18px;
  line-height:1.22;text-align:left;
}

/* ---- Tarja rosa (pergunta de destaque) ---- */
.tarja{background:var(--c-rosa);border-radius:0 10px 10px 0;display:flex;align-items:center;padding:6px 14px 6px 29px}
.tarja .txt{color:#fff;font-weight:700;font-size:18px;line-height:1.1}

/* ---- Texto complementar ---- */
.complement{color:var(--c-roxo-txt);font-weight:700;font-size:18px;line-height:1.18;text-align:left}

/* ---- Logo persistente (topo-esquerda) ---- */
.logo-pg{position:absolute;left:22px;top:13px;width:70px;height:61px}
.logo-pg img{width:100%;height:100%;object-fit:contain}

/* ============================================================
   Animações de entrada
   ============================================================ */
.anim{opacity:0;transition:opacity var(--t-med) var(--ease-out),transform var(--t-med) var(--ease-out)}
.anim.is-in{opacity:1;transform:none}

.anim-fade{}
.anim-down{transform:translateY(-28px)}
.anim-up{transform:translateY(28px)}
.anim-left{transform:translateX(-40px)}
.anim-right{transform:translateX(40px)}
.anim-bg{transform:translateX(430px);transition-duration:var(--t-med)}
.anim-spin{transform:translateX(-60px) rotate(-180deg);transition-duration:var(--t-med)}
/* escala: começa pequeno e cresce até o tamanho normal */
.anim-grow{transform:scale(.25)}
/* pop: cresce com leve overshoot (ex.: botão do fim) */
.anim-pop{transform:scale(.3);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
/* entrada lenta e clara (ex.: Ursinha que "chega depois") */
.anim.anim-slow{transition-duration:1.4s}
/* sem fade: só o transform anima (opacity vai a 1 instantaneamente) — o
   elemento aparece já visível e desliza, em vez de surgir com fade sutil */
.anim.anim-nofade{transition-property:transform}

/* Reveal: começa oculto. NÃO força transform aqui — assim cada elemento
   usa sua própria direção (.anim-left/.anim-right/etc.) ao ser revelado. */
.hidden-reveal{opacity:0}

/* Glow PISCANTE — indica que o botão de ação precisa ser clicado.
   Usa escala + halo branco/dourado: o movimento dá destaque mesmo sobre o
   cenário amarelado (onde um glow só dourado se fundiria). Ritmo calmo,
   sem parecer "árvore de natal". */
@keyframes glowPulse{
  0%,100%{transform:scale(1);    filter:drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 0 3px rgba(255,187,0,.35))}
  50%    {transform:scale(1.13); filter:drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(255,187,0,.9))}
}
.glow{animation:glowPulse 1.1s ease-in-out infinite}

/* ============================================================
   Navbar inferior + hambúrguer
   ============================================================ */
/* Pílula da navbar recriada em CSS (mesmo visual do Navbar.svg:
   #FFBB00, borda branca, cantos arredondados) com botões individuais
   sem gaps — área de toque confiável de ponta a ponta. */
.navbar{position:absolute;display:flex;align-items:stretch;z-index:30;
  background:var(--c-dourado);border:2px solid #fff;border-radius:25px;
  box-shadow:0 6px 16px rgba(107,5,132,.30);overflow:hidden;padding:0 4px}
.nav-btn{flex:1;height:100%;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent}
.nav-btn img{height:62%;width:auto;object-fit:contain;pointer-events:none;transition:transform .12s ease}
.nav-btn:active img{transform:scale(.85)}
/* botão de reprodução automática desabilitado (fim da história) */
.nav-btn.nav-disabled{opacity:.35;pointer-events:none}

.hamburger-btn{
  position:absolute;right:16px;top:16px;
  width:45px;height:45px;
  background:none;border:0;cursor:pointer;z-index:40;
  padding:0;
}
.hamburger-btn img{width:100%;height:100%;object-fit:contain}

/* Botão Iniciar (capa) */
.btn-iniciar{position:absolute;border:0;cursor:pointer;background:none;z-index:30}
.btn-iniciar img{width:100%;height:100%}

/* Botão Palavras do Coração (P14 → Parte 2) */
.btn-pc2{
  position:absolute;border:0;cursor:pointer;z-index:30;
  background:var(--c-dourado);border-radius:12px;
  color:var(--c-roxo);font-family:var(--font-base);font-weight:700;
  font-size:13px;line-height:1.25;text-align:center;
  padding:4px 6px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(107,5,132,.35);
}
.btn-pc2:hover{filter:brightness(1.08)}
.btn-pc2:active{transform:scale(.95)}

/* ============================================================
   Menu suspenso — gaveta deslizante pela esquerda
   ============================================================ */
#side-menu{
  position:absolute;inset:0;z-index:300; /* acima do #pc-overlay (200) */
  pointer-events:none;
  /* sombra de fundo quando aberto */
}
#side-menu.open{pointer-events:auto}
#side-menu.open::after{
  content:'';position:absolute;inset:0;
  background:rgba(40,4,55,.45);
}

/* Painel do menu — dimensões do Figma: 246 × 340 (NÃO ocupa a tela toda),
   fill bege, traçado branco 1px, cantos arredondados, sombra projetada. */
#side-menu-panel{
  position:absolute;left:0;top:0;
  width:246px;height:340px;
  background:var(--c-bege);
  border:1px solid #fff;
  border-radius:0 18px 18px 0;
  box-shadow:4px 6px 24px rgba(107,5,132,.30);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
  z-index:1;
  display:flex;flex-direction:column;
  overflow:hidden;
}
#side-menu.open #side-menu-panel{transform:translateX(0)}

/* Cabeçalho do menu */
#menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 8px;
  border-bottom:1.5px solid rgba(107,5,132,.15);
}
#menu-header img.menu-logo{height:34px;width:auto;object-fit:contain}
#menu-close{
  background:none;border:0;cursor:pointer;
  color:var(--c-roxo-txt);font-size:26px;line-height:1;
  padding:4px 8px;border-radius:8px;
}
#menu-close:hover{background:rgba(107,5,132,.1)}

/* Lista de itens */
#side-menu-panel ul{list-style:none;flex:1;overflow-y:auto}
#side-menu-panel li{border-bottom:1.5px solid rgba(107,5,132,.12)}
#side-menu-panel li:last-child{border-bottom:none}

.menu-item{
  display:flex;align-items:center;gap:11px;
  width:100%;padding:9px 14px;
  background:none;border:0;cursor:pointer;
  font-family:var(--font-base);font-weight:700;font-size:13px;
  color:var(--c-roxo-txt);text-align:left;
  transition:background .15s,color .15s;
}
.menu-item img{width:23px;height:23px;object-fit:contain;flex-shrink:0}
.menu-item:hover{background:rgba(107,5,132,.08);color:var(--c-roxo)}
.menu-item:active{background:rgba(107,5,132,.15)}

/* ---- Efeito de corações flutuantes (p9) ---- */
.heart-particle{
  position:absolute;z-index:20;pointer-events:none;
  background:url('../assets/over/heart-particle.svg') center/contain no-repeat;
  will-change:transform,opacity;
  animation:floatHeart 2.6s ease-out forwards;
}
@keyframes floatHeart{
  0%  {transform:translate(0,0) scale(.4) rotate(0);opacity:0}
  15% {opacity:.95}
  100%{transform:translate(var(--dx,0),var(--dy,-200px)) scale(var(--sc,1)) rotate(var(--rot,0));opacity:0}
}

/* Interação */
.clickable{cursor:pointer;pointer-events:auto}

/* Acessibilidade
   As animações de entrada (.anim) e o glow do botão de ação SÃO conteúdo/UX
   essencial deste livro infantil (o glow indica "clique aqui"), então não são
   suprimidos por prefers-reduced-motion. */