/* =========================================================================
   GuiaVivo · Mode extras · LIVRO
   -------------------------------------------------------------------------
   - Substitui SVG da bolha por bolha.png (perde displacement reativo,
     mas mantém animações de respiração/glow do container .bubble).
   - Fundo.png no .screen--capa em vez do gradiente sépia.
   ========================================================================= */


/* =====================================================================
   1. Bolha como PNG
   - PNG ocupa o lugar das circles SVG dentro de .bubble
   - .bubble já tem clamp(150px, 44vw, 200px) + aspect-ratio:1
   ===================================================================== */

/* default em todos os modos: PNG escondido, SVG visível */
.bubble__png{
  display:none;
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* livro / app / future: TODOS usam PNG (mode-switch.js troca o src por modo).
   SVG só fica pra fallback quando JS desativado e modo undefined. */
html[data-mode="livro"]  .bubble__png,
html[data-mode="app"]    .bubble__png,
html[data-mode="future"] .bubble__png,
html:not([data-mode])    .bubble__png{
  display:block;
  position:absolute;inset:0;
}
html[data-mode="livro"]  .bubble__svg,
html[data-mode="app"]    .bubble__svg,
html[data-mode="future"] .bubble__svg,
html:not([data-mode])    .bubble__svg{
  display:none;
}

/* garante que .bubble seja contexto pro absolute do png em todos os modos */
html[data-mode="livro"]  .bubble,
html[data-mode="app"]    .bubble,
html[data-mode="future"] .bubble,
html:not([data-mode])    .bubble{
  position:relative;
}


/* =====================================================================
   2. Fundo da capa
   - Substitui o gradient sépia por fundo.png
   - object-position: contém o topo (folhas) e a água embaixo
   ===================================================================== */

html[data-mode="livro"] .screen--capa,
html:not([data-mode]) .screen--capa{
  background:
    linear-gradient(180deg, rgba(250,246,236,0.55), rgba(250,246,236,0.20) 40%, rgba(250,246,236,0.65) 100%),
    url("../../image/fundo.png") center / cover no-repeat;
}


/* =====================================================================
   3. Logo Guidelyze (substitui eyebrow "Guia Vivo")
   - Capa: maior, é o "hero brand mark"
   - Índice e demais: menor, eyebrow-style
   - Em outros modos (app/future) o logo continua visível mas pode
     precisar de filtro (Guidelyze em preto não se vê em fundo navy)
   ===================================================================== */

.brand-logo{
  display:block;
  height:16px;
  width:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* Na capa o logo é o "wordmark hero" da marca */
.brand-logo.capa__brand{
  height:60px;
  margin:0 auto var(--space-2);
}

/* Em modos escuros, o "Guide" preto vira branco e "lyze" mantém sage:
   o swap acontece via JS (mode-switch.js) trocando o src pra logo3-dark.svg.
   Aqui só ajusta opacidade sutil pra não brigar com elementos vivos. */
html[data-mode="app"] .brand-logo,
html[data-mode="future"] .brand-logo{
  opacity: .94;
}