/* vulkares.com — a página dos livros de Willamys Lacerda: uma roda de capas em três dimensões (o livro da frente
   grande, os outros em volta, menores quanto mais longe) e o texto de cada um ao lado. Mesma letra e mesmas cores
   da estante (livros.vulkares.com). Escuro por padrão, claro por escolha do visitante. */
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fontes/EBGaramond-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fundo:#0b0a0d; --papel:#15141a; --tinta:#efe8db; --fraco:#8d8578; --linha:#2b2931;
  --ouro:#c9a35c; --sombra:rgba(0,0,0,.72);
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Liberation Serif",Georgia,serif;
}
:root[data-tema="claro"]{
  --fundo:#e7e0d2; --papel:#f6f1e6; --tinta:#1d1a16; --fraco:#7d7466; --linha:#d6cdbb;
  --ouro:#9a7a3a; --sombra:rgba(0,0,0,.28);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--fundo)}
body{margin:0;min-height:100dvh;background:var(--fundo);color:var(--tinta);font-family:var(--serif);
     font-size:18px;line-height:1.55;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font-family:inherit}
a{color:inherit}
img{max-width:100%}

/* o céu: pontos de luz devagar, só no escuro */
#ceu{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
:root[data-tema="claro"] #ceu{display:none}
.topo,main,.rodape{position:relative;z-index:1}

/* ---------- cabeçalho ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;
      padding:calc(14px + env(safe-area-inset-top)) 18px 6px;max-width:1180px;margin:0 auto}
.marca{display:flex;flex-direction:column;text-decoration:none;color:inherit;line-height:1.1}
.marca b{font-weight:500;letter-spacing:.34em;font-size:17px}
.marca small{color:var(--fraco);font-size:13px;letter-spacing:.04em;margin-top:4px}
.acoes{display:flex;gap:8px;align-items:center}
.botao,.acoes button{appearance:none;border:1px solid var(--linha);background:transparent;color:inherit;font:inherit;
  border-radius:999px;padding:7px 15px;cursor:pointer;font-size:15px;text-decoration:none;line-height:1.3;
  transition:background .15s,border-color .15s,color .15s;display:inline-flex;align-items:center;justify-content:center}
.acoes button.icone{width:38px;height:38px;padding:0;font-size:18px}
.botao:hover,.acoes button:hover,.botao:focus-visible,.acoes button:focus-visible{background:rgba(127,127,127,.12);border-color:var(--fraco);outline:none}
.primario{background:var(--tinta);color:var(--fundo);border-color:var(--tinta)}
.primario:hover,.primario:focus-visible{background:var(--ouro);border-color:var(--ouro);color:#0b0a0d}

/* ---------- abertura ---------- */
.abertura{max-width:1180px;margin:0 auto;padding:clamp(10px,2.4vh,30px) 18px 0;text-align:center}
.sobre{margin:0 0 8px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ouro)}
.abertura h1{font-weight:400;font-size:clamp(19px,2.2vw,26px);letter-spacing:.015em;margin:0 auto 6px;line-height:1.25;max-width:44ch;text-wrap:balance}
.abertura .lead{margin:0 auto;max-width:36rem;color:var(--fraco);font-size:clamp(14px,1.6vw,16.5px)}

/* ---------- a roda ---------- */
.globo-secao{max-width:1240px;margin:0 auto;padding:clamp(4px,1.2vh,14px) 0 40px}
.globo-grade{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:clamp(16px,3vw,44px);align-items:start;padding:0 18px}
.palco-moldura{position:relative;padding:0 0 10px}
.palco{position:relative;height:var(--alt,520px);perspective:1100px;overflow:visible;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.palco.arrastando{cursor:grabbing}
.roda{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.roda:not(.pronta) .item{opacity:0}
.item{position:absolute;left:0;top:0;width:var(--larg,220px);aspect-ratio:2/3;margin-left:calc(var(--larg,220px) / -2);
  margin-top:calc(var(--larg,220px) * -.75);border-radius:3px 8px 8px 3px;overflow:hidden;background:#1a1720;
  box-shadow:0 24px 56px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);will-change:transform;cursor:pointer;
  transition:box-shadow .4s}
.item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.item .brilho{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 28%,rgba(0,0,0,.08) 100%)}
.item::before{content:"";position:absolute;top:0;bottom:0;left:7px;width:3px;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,.28),rgba(0,0,0,0))}            /* o vinco junto à lombada */
.item.frente{box-shadow:0 34px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1),0 0 60px rgba(201,163,92,.12)}
.item.frente:hover{box-shadow:0 34px 70px rgba(0,0,0,.7),0 0 0 1px rgba(201,163,92,.45),0 0 70px rgba(201,163,92,.18)}
/* a órbita: um anel deitado no chão, por baixo dos livros */
.orbita{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform-style:preserve-3d;
  border:1px solid color-mix(in srgb,var(--ouro) 30%,transparent);
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--ouro) 10%,transparent) 0%,transparent 62%)}
.comandos{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.seta{width:44px;height:44px;border-radius:50%;border:1px solid var(--linha);background:transparent;color:var(--tinta);font-size:28px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0 0 4px;transition:background .15s,border-color .15s}
.seta:hover,.seta:focus-visible{border-color:var(--ouro);background:color-mix(in srgb,var(--ouro) 18%,var(--fundo));outline:none}
.pontos{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:10px}
.pontos button{width:10px;height:10px;border-radius:50%;border:1px solid var(--fraco);background:transparent;padding:0;cursor:pointer;transition:background .2s,transform .2s}
.pontos button[aria-current="true"]{background:var(--ouro);border-color:var(--ouro);transform:scale(1.25)}
/* o giro automático: a linha que enche embaixo dos pontos marca o tempo até o próximo livro; o botão ao lado para e retoma */
.pontos-caixa{position:relative;padding:9px 0}
.progresso{position:absolute;left:1px;right:1px;bottom:1px;height:2px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s;
  background:color-mix(in srgb,var(--linha) 85%,transparent)}
.progresso.ativa{opacity:1}
.progresso i{display:block;height:100%;width:0;background:var(--ouro)}
.auto{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--linha);
  background:transparent;color:var(--fraco);font-size:10px;letter-spacing:-.08em;cursor:pointer;display:grid;place-items:center;padding:0 0 0 1px;
  transition:border-color .15s,color .15s,background .15s}
.auto:hover,.auto:focus-visible{border-color:var(--ouro);color:var(--tinta);background:color-mix(in srgb,var(--ouro) 14%,var(--fundo));outline:none}
.auto[aria-pressed="false"]{color:var(--ouro);font-size:13px;padding-left:3px}

/* ---------- o painel do livro da frente ---------- */
.painel{min-height:var(--alt,520px);display:flex;flex-direction:column;justify-content:center;transition:opacity .35s,transform .35s}
.painel.trocando{opacity:0;transform:translateY(8px)}
.serie{margin:0 0 8px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ouro)}
.painel h2{margin:0;font-weight:500;font-size:clamp(28px,3.6vw,44px);letter-spacing:.02em;line-height:1.12;text-wrap:balance}
.subtitulo{margin:6px 0 0;font-style:italic;color:var(--fraco);font-size:clamp(16px,1.8vw,20px)}
.genero{margin:10px 0 0;color:var(--fraco);font-size:15px}
.gen-forte{font-weight:600;letter-spacing:.06em;color:var(--tinta);font-size:.92em;text-transform:uppercase}
/* a dobra: o texto da contracapa, que abre ao passar o mouse na capa (ou ao tocar nela) */
.dobra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.75,.2,1)}
.dobra.aberta{grid-template-rows:1fr}
.dobra-dentro{overflow:hidden;min-height:0}
.contracapa{margin:18px 0 0;max-width:34rem}
.contracapa p{margin:0 0 .8em;font-size:clamp(16.5px,1.45vw,18.5px);line-height:1.58;text-wrap:pretty}
.contracapa p:last-child{margin-bottom:0}
.ficha{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;padding:0}
.ficha li{border:1px solid var(--linha);border-radius:999px;padding:3px 12px;font-size:14px;color:var(--fraco)}
.ficha:empty{display:none}
.acoes-obra{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0 0}
.estado{display:inline-block;font-size:12px;letter-spacing:.26em;text-transform:uppercase;padding:6px 14px 5px;border-radius:999px;border:1px solid var(--linha);color:var(--fraco)}
.modos{margin:12px 0 0;color:var(--fraco);font-size:14px;letter-spacing:.04em}

@media (max-width:900px){
  .globo-grade{grid-template-columns:1fr;gap:6px;padding:0}
  .palco{overflow:hidden}
  .seta{width:42px;height:42px;font-size:26px}
  .painel{min-height:0;padding:10px 22px 0;text-align:center;align-items:center}
  .painel h2{font-size:clamp(26px,7vw,34px)}
  .contracapa{text-align:left;margin-left:auto;margin-right:auto}
  .ficha,.acoes-obra{justify-content:center}
}

/* ---------- sem programa: a lista inteira, um livro depois do outro ---------- */
.dados{display:none}
.js-off .dados{display:block;max-width:760px;margin:0 auto;padding:20px 18px}
.js-off .dados article{border-top:1px solid var(--linha);padding:28px 0}
.js-off .globo-secao{display:none}

/* ---------- rodapé ---------- */
.rodape{max-width:1180px;margin:0 auto;padding:26px 18px calc(30px + env(safe-area-inset-bottom));color:var(--fraco);
  border-top:1px solid var(--linha);text-align:center;font-size:15px}
.rodape p{margin:0 0 6px}
.rodape b{font-weight:500;color:var(--tinta)}
.rodape a{text-underline-offset:4px;text-decoration-color:var(--fraco)}
.rodape a:hover{text-decoration-color:var(--ouro)}
.rodape .miudo{font-size:12px;letter-spacing:.08em;opacity:.7}

@media (max-height:720px) and (min-width:901px){
  .topo{padding-top:10px}
  .abertura{padding-top:8px}
  .abertura .lead{display:none}
  .abertura h1{font-size:19px;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  .painel,.dobra,.item{transition:none !important}
}