/* cave −2 · Fabel: a galeria do artista-agente. Paredes claras, quentes, da cor do papel do B-SIDE, com a luz a
   cair sobre as obras; chão de cimento afagado, claro. A cor vem das obras (os violetas, os verdes-azulados, os
   ferrugens e os dourados da Heartwood) e do banco, estofado a coral. A Heartwood roda devagar, como a obra viva. */
.f-fabel { --wallc: #E8DDCB; --accent: var(--coral); --numc: #B8A587; }

.f-fabel .slab {
  --top:
    radial-gradient(ellipse 40% 34% at 76% 46%, rgb(255 246 226 / .55), transparent 70%),
    linear-gradient(#E4DDD1, #D6CEC1);
}
/* a luz da galeria: um foco sobre a Heartwood, na parede da direita, e outro sobre as irmãs, na da esquerda */
.f-fabel .wall-r { --c1: radial-gradient(ellipse 46% 52% at 50% 48%, #FBF4E8 0, #EFE5D4 50%, #DCCFBA 100%); }
.f-fabel .wall-l { --c2: radial-gradient(ellipse 34% 60% at 80% 58%, #FBF4E8 0, #EFE5D4 46%, #DCCFBA 100%); }

/* a Heartwood: o quadrado escuro (a obra é «a dark square»), com o disco a rodar */
.f-fabel .fb-quadro { --c: #1E1929; --c1: #1A1623; --c2: #231E2F; --top: #231E2F; }
.f-fabel .fb-heartwood {
  overflow: hidden; background: #1E1929; /* o fundo da obra, com a mesma luz que o disco */
  box-shadow: calc(-1.5 * var(--u)) calc(2 * var(--u)) calc(5 * var(--u)) rgb(31 28 44 / .3);
}
.f-fabel .fb-heartwood i {
  position: absolute; inset: 2%; border-radius: 50%;
  background: url(img/heartwood-480.jpg) center / 104% no-repeat;
  filter: brightness(1.9) saturate(1.25) contrast(1.1);
  animation: fb-roda 180s linear infinite;
}
@keyframes fb-roda { to { rotate: 1turn; } }

/* as irmãs: dois quadrados com uma moldura fina, cada um com a captura da obra viva */
.f-fabel .fb-irma {
  background: #110E17 center / cover no-repeat;
  outline: calc(1.4 * var(--u)) solid #2A2533; outline-offset: 0;
  box-shadow: calc(1.5 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u)) rgb(31 28 44 / .25);
}
.f-fabel .fb-unsaid { background-image: url(img/unsaid-240.jpg); }
.f-fabel .fb-chorus { background-image: url(img/chorus-240.jpg); background-color: #F1EFEA; }

/* o banco, de carvalho, aberto por baixo, com o assento estofado a coral */
.f-fabel .fb-banco { --c: #D96F55; --top: var(--coral); }
.f-fabel .fb-banco-pe { --c: #A57C52; --top: #B98E62; }

/* os dois plintos brancos, cada um com a revista aberta numa página dupla */
.f-fabel .fb-plinto { --c: #F6F2EA; --c1: #ECE6DB; --c2: #F9F6F0; --top: #FFFDF8; }
.f-fabel .fb-revista {
  background:
    linear-gradient(90deg, transparent 47%, rgb(31 28 44 / .16) 50%, transparent 53%),
    #FBF4EA center / 100% 100% no-repeat;
  box-shadow: calc(.6 * var(--u)) calc(.8 * var(--u)) calc(1.6 * var(--u)) rgb(31 28 44 / .3);
}

.f-fabel .fb-revista-1 { background-image: linear-gradient(90deg, transparent 47%, rgb(31 28 44 / .16) 50%, transparent 53%), url(img/bside-mesa-1-360.jpg); }
.f-fabel .fb-revista-2 { background-image: linear-gradient(90deg, transparent 47%, rgb(31 28 44 / .16) 50%, transparent 53%), url(img/bside-mesa-2-360.jpg); }

/* a janela de cada obra: a imagem quadrada, com a largura das outras capturas, e a ligação para a obra viva */
.ovo-fabel img { width: min(480px, calc(100vw - 52px), calc(100svh - 110px)); height: auto; aspect-ratio: 1; max-width: none; max-height: none; background: #110E17; }
.ovo-fabel span a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .f-fabel .fb-heartwood i { animation: none; }
}