/* Puppypedia | leitor de livro | revisao de motion v2 (2026-10-20)
   Mantem a paleta de contraste do CSS adicional do WordPress: nao define o fundo
   do palco nem cores globais; usa as variaveis da paleta com valores de reserva. */

/* ---------- palco: coluna flexivel, sem posicoes magicas ---------- */
.book-demo{--page-height:300px;--page-ratio:.772727;--page-max:420px;min-height:600px;perspective:none;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:62px 28px 18px;box-sizing:border-box}
.book-demo .stage-kicker{top:29px;left:30px}
.reader-halo{position:absolute;left:50%;top:42%;width:420px;height:420px;transform:translate(-50%,-50%);border:1px solid #ffffffb0;border-radius:50%;background:radial-gradient(ellipse,#ffffff66,transparent 68%);pointer-events:none}
.reader-halo:after{content:'';position:absolute;inset:35px;border:1px solid #ffffff80;border-radius:50%}
.book-demo .book-float{display:none}

/* ---------- cena 3D e tamanho do livro ---------- */
.reader-scene{position:relative;flex:1 1 0;min-height:220px;perspective:1250px;perspective-origin:50% 45%}
/* O livro aberto (duas paginas) cabe sempre na largura; o fechado aproveita a altura. */
@supports (width:1cqw){
  .reader-scene{container-type:size}
  .reader-book{--page-height:min(86cqh,calc(45cqw / var(--page-ratio)),var(--page-max))}
}
.reader-book{position:absolute;width:calc(var(--page-height)*var(--page-ratio));height:var(--page-height);left:50%;top:50%;transform:translate(-50%,-50%) rotateX(7deg) rotateY(-14deg);transform-style:preserve-3d;transform-origin:0 50%;transition:transform .75s cubic-bezier(.3,.7,.2,1);touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:none}
.reader-book.is-open{transform:translate(0,-50%) rotateX(5deg) rotateY(0)}
.reader-book.is-busy{pointer-events:none}
.reader-book:focus-visible .reader-base,.reader-book:focus-visible .cover-leaf:not(.is-flipped) .reader-front{outline:2px solid #8b6961;outline-offset:4px}
.reader-book:before{content:'';position:absolute;left:-1px;top:0;width:3px;height:100%;background:#a7a995;transform:translateZ(1px);z-index:0}

/* ---------- base, folhas e faces ---------- */
.reader-base,.reader-leaf{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:0 50%;border-radius:1px 4px 4px 1px}
.reader-base{background:#faf9f1;transform:translateZ(0);box-shadow:4px 13px 23px #536c7a40,-3px 0 0 #c9c9bd,0 4px 0 #e1dfd4,0 7px 0 #f5f1e5}
.reader-base:after{content:'';position:absolute;left:-3px;right:0;bottom:-7px;height:7px;background:repeating-linear-gradient(#f8f4e9 0,#f8f4e9 1px,#d1d1c5 1px,#d1d1c5 2px);transform:rotateX(-55deg);transform-origin:top}
/* Corte das paginas (fore-edge): volume real visivel com o livro fechado. */
.reader-edge{position:absolute;left:100%;top:3px;bottom:3px;width:5px;transform-origin:0 50%;transform:rotateY(-90deg);background:repeating-linear-gradient(90deg,#e4e1d7 0,#e4e1d7 1px,#fbf9f2 1px,#fbf9f2 2px);pointer-events:none}
.reader-leaf{--depth:3px;--angle:0deg;transform:translateZ(var(--depth)) rotateY(var(--angle));transition:none}
.reader-leaf.is-flipped{--angle:-180deg}
.reader-leaf.cover-leaf{--depth:5px}
.reader-leaf.is-turning{will-change:transform}
.reader-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fffdf6;overflow:hidden;border-radius:1px 4px 4px 1px}
.reader-front{transform:translateZ(.2px)}
.reader-back{transform:rotateY(180deg) translateZ(.2px);border-radius:4px 1px 1px 4px}
.reader-face img,.reader-base>img{display:block;width:100%;height:100%;object-fit:contain;background:#fffdf6;max-height:none;box-shadow:none;pointer-events:none}
/* Sombra da lombada (estatica). */
.reader-front:after,.reader-back:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#46535b22,transparent 5%,#ffffff20 8%,transparent 20%,transparent 80%,#fff2)}
.reader-back:after{background:linear-gradient(270deg,#45535b28,transparent 6%,#ffffff1a 12%,transparent 70%)}
.cover-leaf .reader-front{box-shadow:2px 7px 13px #334d6040}
/* Sombra de contacto tambem debaixo das paginas da esquerda. */
.reader-leaf.is-flipped .reader-back{box-shadow:-4px 13px 23px #536c7a40}
/* Camada de sombra animada por opacidade durante a viragem. */
.reader-shade{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(40,56,63,.55),rgba(40,56,63,.14) 38%,rgba(40,56,63,0) 80%)}
.reader-back .reader-shade{background:linear-gradient(270deg,rgba(40,56,63,.55),rgba(40,56,63,.14) 38%,rgba(40,56,63,0) 80%)}

/* ---------- legenda ---------- */
.reader-caption{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:Georgia,serif;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:var(--ink,#28383f)}
.reader-caption-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 14px;margin-top:4px;font-family:Arial,sans-serif;letter-spacing:.01em}
.reader-caption-note{font-size:11px;line-height:1.5;color:#4f6068}
.reader-zoom-open{display:inline-flex;align-items:center;min-height:36px;padding:0 2px;border:0;background:none;color:var(--ink,#28383f);font:700 12px/1.2 Arial,sans-serif;text-decoration:underline;text-decoration-color:#8faab7;text-underline-offset:4px;cursor:pointer}
.reader-zoom-open:hover{text-decoration-color:currentColor}

/* ---------- controlos (alvos de 44 px) ---------- */
.reader-toolbar{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.reader-toolbar button{min-height:44px;padding:0 16px;border:1px solid #a8beca;border-radius:2px;background:#fffaf5d9;color:#25343b;font-size:13px;line-height:1.2;white-space:nowrap;cursor:pointer}
.reader-toolbar .reader-previous{width:44px;padding:0;border-radius:50%;font-size:17px}
.reader-toolbar .reader-next{min-width:150px;background:var(--salmon,#df9e87);border-color:var(--salmon,#df9e87);font-weight:700}
.reader-toolbar .reader-next:hover{background:#d58b72;border-color:#d58b72}
.reader-toolbar button[aria-disabled=true]{opacity:.45;cursor:default}
.reader-toolbar .reader-next[aria-disabled=true]:hover{background:var(--salmon,#df9e87);border-color:var(--salmon,#df9e87)}
.reader-position{min-width:96px;font-size:12px;text-align:center;color:#425860}
.reader-toolbar .reader-replay{min-height:44px;padding:0 4px;border:0;background:none;color:#425860;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.reader-bottom{position:relative;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 18px}
.reader-select{display:flex;flex-wrap:wrap;gap:0 18px}
.reader-select button{min-height:44px;padding:0 2px;border:0;border-bottom:2px solid transparent;background:transparent;color:#4f6068;font-size:13px;cursor:pointer}
.reader-select button[aria-pressed=true]{border-bottom-color:#9c6458;color:#25343b;font-weight:700}
.reader-product-link{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--ink,#28383f);text-decoration:underline;text-underline-offset:4px}
.book-demo button:focus-visible,.book-demo a:focus-visible{outline:2px solid #8b6961;outline-offset:3px}

/* ---------- guia horizontal ---------- */
.book-demo.is-landscape{--page-height:160px;--page-max:260px}

/* ---------- leitura ampliada (dialog) ---------- */
html.reader-zoom-lock{overflow:hidden}
.reader-zoom{--zoom-fit:600px;box-sizing:border-box;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0 16px 32px;border:0;background:rgba(248,247,244,.98);color:var(--ink,#28383f);overflow:auto;overscroll-behavior:contain}
.reader-zoom.is-landscape{--zoom-fit:960px}
.reader-zoom::backdrop{background:rgba(40,56,63,.4)}
.reader-zoom-bar{position:sticky;top:0;left:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px 16px;padding:10px 16px;background:rgba(248,247,244,.96);border-bottom:1px solid #d7dbdb}
.reader-zoom-title{margin:0;font:400 16px/1.3 Georgia,serif;letter-spacing:-.01em}
.reader-zoom-actions{display:flex;gap:8px;flex-shrink:0}
.reader-zoom-actions button{min-height:44px;min-width:44px;padding:0 16px;border:1px solid #a8beca;border-radius:2px;background:#fffaf5;color:#25343b;font-size:13px;cursor:pointer}
.reader-zoom-actions .reader-zoom-close{background:var(--salmon,#df9e87);border-color:var(--salmon,#df9e87);font-weight:700}
.reader-zoom-pages{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px}
.reader-zoom-pages img{display:block;width:min(100%,var(--zoom-fit));height:auto;background:#fffdf6;box-shadow:0 10px 30px rgba(40,56,63,.18);cursor:zoom-in}
.reader-zoom-pages.is-magnified{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;width:max-content;margin:0 auto}
.reader-zoom-pages.is-magnified img{width:calc(2*min(100vw - 32px,var(--zoom-fit)));max-width:none;cursor:zoom-out}
.reader-zoom-hint{margin:16px 0 0;font-size:12px;text-align:center;color:#4f6068}
.reader-zoom :focus-visible{outline:2px solid #8b6961;outline-offset:3px}

/* ---------- ecras grandes ---------- */
@media(min-width:1500px){
  .book-demo{min-height:700px;--page-height:350px;--page-max:460px}
  .book-demo.is-landscape{--page-height:185px;--page-max:290px}
  .reader-caption{font-size:21px}
}
/* ---------- tablet ---------- */
@media(max-width:1100px) and (min-width:701px){
  .book-demo{--page-height:260px;padding:58px 18px 16px}
  .book-demo.is-landscape{--page-height:132px}
  .reader-caption{font-size:17px}
  .reader-toolbar{gap:8px}
  .reader-toolbar button{padding:0 12px}
  .reader-toolbar .reader-next{min-width:132px}
}
/* ---------- telemovel ---------- */
@media(max-width:700px){
  .book-demo{min-height:560px;--page-height:200px;padding:52px 16px 14px;gap:8px}
  .book-demo.is-landscape{--page-height:91px}
  .book-demo .stage-kicker{top:22px;left:20px;font-size:8px}
  .reader-scene{min-height:230px;perspective:1100px}
  .reader-halo{width:290px;height:290px;top:40%}
  .reader-caption{font-size:17px}
  .reader-toolbar{gap:8px}
  .reader-toolbar button{padding:0 12px}
  .reader-toolbar .reader-next{min-width:140px}
  .reader-position{min-width:84px}
  .reader-bottom{gap:0 14px}
  .reader-zoom-title{font-size:14px}
  .reader-zoom-actions button{padding:0 12px}
}
@media(max-width:420px){
  .reader-toolbar .reader-replay{flex-basis:100%;min-height:32px}
}

/* ---------- movimento reduzido: sem transicoes nem autoplay ---------- */
@media(prefers-reduced-motion:reduce){
  .reader-book,.reader-leaf{transition:none}
  .reader-shade{opacity:0!important}
}