/* Doorblader: opengeslagen gids met 3D-bladeren. Alle kleuren via tokens, overschrijfbaar op .db. */
.db {
  --db-tafel: #0d2837;
  --db-tekst: #d9e1e7;
  --db-grijs: #a3b4c0;
  --db-accent: #EFA40B;
  --db-lijn: rgba(255,255,255,.14);
  --db-ratio: 2000 / 1304;
  --db-duur: .85s;
  --db-ease: cubic-bezier(.45,.05,.25,1);
  display: grid;
  gap: 18px;
  color: var(--db-tekst);
  outline: none;
}
.db:focus-visible .db-podium { outline: 2px solid var(--db-accent); outline-offset: 8px; border-radius: 4px; }

.db-podium { position: relative; padding-block: 2% 4%; }
.db-boek {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--db-ratio);
  perspective: 2600px;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
/* Dicht (alleen de cover): het boek schuift een halve pagina op, zodat de cover in het midden ligt. */
.db-schuif {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--db-duur) var(--db-ease);
}
.db[data-dicht="ja"] .db-schuif { transform: translateX(-25%); }

/* Slagschaduw onder het boek. Net binnen het boek laten eindigen: een box-shadow wordt niet onder het eigen vlak getekend, dan schijnt er een randje achtergrond door. */
.db-schaduw {
  position: absolute; top: 3%; bottom: 1%; left: 50%; width: 50%;
  border-radius: 2px;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.65), 0 10px 22px -10px rgba(0,0,0,.5);
  transition: left var(--db-duur) var(--db-ease), width var(--db-duur) var(--db-ease);
}
.db[data-dicht="nee"] .db-schaduw { left: 0; width: 100%; }

.db-half, .db-blad {
  position: absolute; top: 0; height: 100%; width: 50%;
}
.db-half.links { left: 0; }
.db-half.rechts, .db-blad { left: 50%; }
.db-blad {
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--db-duur) var(--db-ease);
}
.db-blad.om { transform: rotateY(-180deg); }
.db-kant {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #f4f4f2;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  overflow: hidden;
}
.db-kant.achter { transform: rotateY(180deg); }
.db-kant.l, .db-half.links .db-kant { background-position: left center; }
.db-kant.r, .db-half.rechts .db-kant { background-position: right center; }
.db-kant.enkel { background-size: 100% 100%; background-position: center; }
.db-kant.leeg { background: transparent; }

/* Papier: rug-schaduw en een lichte bolling naar de buitenkant */
.db-kant::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.db-kant.r::after, .db-kant.enkel::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 2.2%, rgba(0,0,0,0) 7%, rgba(255,255,255,.06) 14%, rgba(255,255,255,0) 30%),
    linear-gradient(270deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 2%);
}
.db-kant.l::after {
  background:
    linear-gradient(270deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.10) 2.2%, rgba(0,0,0,0) 7%, rgba(255,255,255,.06) 14%, rgba(255,255,255,0) 30%),
    linear-gradient(90deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 2%);
}
.db-kant.enkel::after {
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 3%, rgba(255,255,255,.05) 10%, rgba(255,255,255,0) 26%);
}
.db-kant.leeg::after { display: none; }
/* Licht en schaduw die tijdens het omslaan over het blad trekken */
.db-kant::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 70%);
}
.db-blad.bezig .db-kant::before { animation: db-schaduw var(--db-duur) var(--db-ease); }
@keyframes db-schaduw { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } }

/* Bediening */
.db-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.db-info { display: grid; gap: 2px; min-width: 0; }
.db-titel { font-weight: 700; font-size: 1.05rem; text-wrap: balance; }
.db-pag { color: var(--db-grijs); font-size: .85rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.db-knoppen { display: flex; align-items: center; gap: 10px; }
.db-knop {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--db-lijn); background: transparent; color: var(--db-tekst);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
}
.db-knop:hover { border-color: var(--db-accent); }
.db-knop:focus-visible { outline: 2px solid var(--db-accent); outline-offset: 2px; }
.db-knop:disabled { opacity: .3; cursor: default; border-color: var(--db-lijn); }
.db-knop svg { width: 18px; height: 18px; }
.db-stippen { display: flex; gap: 6px; }
.db-stip { width: 7px; height: 7px; border-radius: 50%; background: var(--db-lijn); border: 0; padding: 0; cursor: pointer; }
.db-stip[aria-current="true"] { background: var(--db-accent); }
.db-hint { color: var(--db-grijs); font-size: .8rem; }

@media (max-width: 560px) {
  .db-stippen { display: none; }
  .db-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .db { --db-duur: 0s; }
}