/* Het gezelschap: kaart, galerij en het blad met details. */

.gezelschap { --kolom: 62rem; }
.groep--familie, .groep--lord { --c: var(--goud); }
.groep--personeel { --c: var(--zilver); }
.groep--gast { --c: var(--jade); }
.groep--notaris { --c: var(--creme); }

/* Kaart of galerij */
.weergave {
  display: flex;
  width: fit-content;
  margin: 0 auto 1.1rem;
  border: 1px solid var(--lijn);
  padding: 3px;
  gap: 3px;
}
.weergave button {
  padding: .5rem 1.3rem;
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--creme-zacht);
  transition: background .25s, color .25s;
}
.weergave button[aria-pressed="true"] { background: var(--metaal); color: var(--nacht); font-weight: 600; }

.groepen { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: .6rem; }
.groep-knop {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem .38rem;
  border: 1px solid var(--lijn-vaag);
  border-radius: 999px;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme-zacht);
  transition: border-color .25s, background .25s, color .25s;
}
.groep-knop i, .blad-groep i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.groep-knop[aria-pressed="true"] { border-color: var(--c); color: var(--creme); background: color-mix(in srgb, var(--c) 16%, transparent); }

/* ---------- De kaart ---------- */

.kaart {
  --d: 46px;
  --lw: 78px;
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 11.2;
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 23.5rem) { .kaart { aspect-ratio: 7 / 12.6; } }
@media (min-width: 40rem) { .kaart { aspect-ratio: 1 / 1.12; max-width: 46rem; } }
@media (min-width: 60rem) { .kaart { aspect-ratio: 16 / 11; max-width: none; } }

.kaart-zon {
  position: absolute;
  width: calc(var(--d) * 6.5);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgb(244 221 156 / .14) 0deg 1.5deg, transparent 1.5deg 7.5deg);
  mask: radial-gradient(circle, #000 18%, transparent 68%);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: verschijnen 1.6s ease .2s both, draaien 240s linear infinite;
  pointer-events: none;
}

.kaart-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gids { fill: none; stroke: var(--lijn-vaag); stroke-width: 1; stroke-dasharray: 1 5; animation: verschijnen 1.5s ease .1s both; }

.lijn { stroke-linecap: round; transition: opacity .35s, stroke-width .35s; }
.lijn--familie { stroke: var(--goud); stroke-width: 1.6; }
.lijn--dienst { stroke: var(--zilver); stroke-width: 1; opacity: .6; }
.lijn--kennis { stroke: var(--jade); stroke-width: 1; opacity: .6; }
.lijn--raadsel { stroke: var(--creme); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; }

.kaart .lijn:not(.lijn--raadsel) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: teken 1.3s var(--ease-uit) .55s forwards;
}
.kaart .lijn--raadsel { animation: verschijnen 1.3s ease .9s both; }

.kaart.heeft-selectie .lijn, .kaart[data-groep] .lijn { opacity: .1; }
.kaart.heeft-selectie .lijn.actief { opacity: 1; stroke-width: 2.2; filter: drop-shadow(0 0 3px currentColor); }
.kaart.heeft-selectie .lijn--dienst.actief { color: var(--zilver); }
.kaart.heeft-selectie .lijn--kennis.actief { color: var(--jade); }
.kaart.heeft-selectie .lijn--familie.actief { color: var(--goud); }

.knoop {
  position: absolute;
  z-index: 2;
  width: var(--lw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  translate: -50% calc(var(--d) / -2);
  animation: knoop-in .8s var(--ease-veer) calc(.15s + var(--afstand, 0) * 1.6s) both;
  transition: opacity .35s, filter .35s;
  border-radius: 4px;
}
@keyframes knoop-in { from { opacity: 0; scale: .3; } }
.knoop .portret { transition: box-shadow .3s, scale .35s var(--ease-veer); }
.knoop:hover .portret { scale: 1.07; }
.knoop:focus-visible { outline: none; }
.knoop:focus-visible .portret { box-shadow: 0 0 0 2px var(--goud-licht), 0 0 0 5px var(--nacht), 0 0 0 7px var(--goud-licht); }
.knoop-naam {
  max-width: 100%;
  font-family: var(--label);
  font-size: .64rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--creme);
  text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px #000;
}
.knoop-titel { display: none; }
@media (min-width: 40rem) {
  .knoop-naam { font-size: .7rem; }
  .knoop-titel {
    display: block;
    margin-top: -3px;
    font-style: italic;
    font-size: .9rem;
    line-height: 1.1;
    text-align: center;
    color: var(--creme-vaag);
    text-shadow: 0 0 6px #000, 0 0 10px #000;
  }
}

.knoop.boven { flex-direction: column-reverse; translate: -50% calc(-100% + var(--d) / 2); }
.knoop.boven .knoop-titel { order: 1; margin: -3px 0 0; }
.knoop.boven .knoop-naam { order: 2; }

/* De Lord: een groter, hoekig portret met zijn naam op een bordje, zoals bij een schilderij. */
.knoop--lord { translate: -50% calc(var(--d) * -.8); }
.knoop--lord .portret { --maat: calc(var(--d) * 1.6) !important; }
.knoop--lord .knoop-naam {
  position: absolute;
  top: calc(var(--d) * 1.6 - .55rem);
  max-width: calc(var(--d) * 1.7);
  padding: 3px 6px 2px;
  font-size: .56rem;
  color: var(--goud-licht);
  background: var(--nacht);
  border: 1px solid var(--goud);
  text-shadow: none;
}
.knoop--lord .knoop-naam::after { content: " \2020"; }
.knoop--lord .knoop-titel { display: none; }

.knoop.actief .portret {
  scale: 1.1;
  box-shadow: 0 0 0 2px var(--goud-licht), 0 0 0 5px var(--nacht), 0 0 0 6px var(--goud), 0 0 26px rgb(244 221 156 / .65);
}
.kaart.heeft-selectie .knoop:not(.actief):not(.verbonden) { opacity: .25; filter: grayscale(.8); }
.kaart[data-groep="familie"] .knoop:not([data-groep="familie"]),
.kaart[data-groep="personeel"] .knoop:not([data-groep="personeel"]),
.kaart[data-groep="gast"] .knoop:not([data-groep="gast"]) { opacity: .22; filter: grayscale(.8); }

.lijn-label {
  position: absolute;
  z-index: 3;
  translate: -50% -50%;
  padding: 3px 7px 2px;
  font-family: var(--label);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nacht);
  background: var(--goud-licht);
  box-shadow: 0 2px 10px rgb(0 0 0 / .6);
  opacity: 0;
  scale: .7;
  pointer-events: none;
  transition: opacity .3s, scale .35s var(--ease-veer);
}
.lijn-label--dienst { background: var(--zilver); }
.lijn-label--kennis { background: var(--jade); }
.lijn-label--raadsel { background: var(--creme); }
.lijn-label.zichtbaar { opacity: 1; scale: 1; }

.lijnsoorten {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 1.2rem;
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme-vaag);
}
.lijnsoorten li { display: flex; align-items: center; gap: .45rem; }
.lijnsoorten svg { width: 1.75rem; height: .25rem; overflow: visible; }
.lijnsoorten .lijn { opacity: 1; }

/* ---------- De galerij ---------- */

.galerij-kop {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.8rem 0 .8rem;
  font-weight: 400;
}
.galerij-kop::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lijn), transparent); }
.galerij > .galerij-kop:first-child { margin-top: .4rem; }
.galerij-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 34rem) { .galerij-lijst { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .galerij-lijst { grid-template-columns: 1fr 1fr 1fr; } }
.kaartje {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
  padding: .7rem .9rem;
  text-align: left;
  border: 1px solid var(--lijn-vaag);
  background: linear-gradient(100deg, rgb(22 58 51 / .4), rgb(12 17 20 / .6));
  transition: border-color .25s, background .25s, translate .3s var(--ease-veer);
}
.kaartje:hover { border-color: var(--lijn); translate: 3px 0; }
.kaartje-tekst { display: flex; flex-direction: column; gap: .1rem; }
.kaartje-naam { font-family: var(--deco); font-size: 1.15rem; line-height: 1.15; color: var(--goud-licht); }
.kaartje-titel { font-style: italic; font-size: 1rem; line-height: 1.2; color: var(--creme-zacht); }

/* ---------- Het blad ---------- */

html.blad-open { overflow: hidden; }

.blad-scherm {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(0 0 0 / .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: verschijnen .3s ease both;
  transition: opacity .3s;
}
.blad-scherm.weg { opacity: 0; }

.blad {
  position: fixed;
  z-index: 51;
  left: 0; right: 0; bottom: 0;
  max-height: min(88dvh, 52rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.4rem calc(var(--onder) + 2.2rem);
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgb(216 180 95 / .12), transparent 70%),
    linear-gradient(180deg, #10191b, var(--nacht) 45%);
  border-top: 1px solid var(--goud);
  box-shadow: 0 -24px 60px rgb(0 0 0 / .7), inset 0 4px 0 -3px var(--lijn);
  translate: 0 100%;
  transition: translate .45s var(--ease-uit);
}
.blad.open { translate: 0 0; }
.blad.sleept { transition: none; }

.blad-greep { width: 2.8rem; height: 4px; margin: -.5rem auto 1.1rem; border-radius: 2px; background: var(--lijn); }
.blad-sluit {
  position: absolute;
  top: 1.3rem; right: 2rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border: 1px solid var(--lijn);
  rotate: 45deg;
  color: var(--goud-licht);
  font-size: 1.6rem;
  line-height: 1;
  transition: background .25s, color .25s;
}
.blad-sluit > span { rotate: -45deg; translate: 0 -1px; }
.blad-sluit:hover { background: var(--goud); color: var(--nacht); }

.blad-inhoud { max-width: 30rem; margin-inline: auto; }
.blad-kop { display: flex; flex-direction: column; align-items: center; text-align: center; }
.blad-kop .portret { margin-bottom: 1.1rem; box-shadow: 0 0 0 2px var(--ring), 0 0 0 7px var(--nacht), 0 0 0 8px color-mix(in srgb, var(--ring) 55%, transparent), 0 0 40px color-mix(in srgb, var(--ring) 30%, transparent); }
.blad-groep { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--c); }
.blad-naam { margin: 0; font-family: var(--deco); font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--goud-licht); }
.blad-titel { margin: .3rem 0 0; font-style: italic; font-size: 1.25rem; color: var(--creme-zacht); }
.blad .ornament { margin-block: 1.2rem; }

.blad-feiten { margin: 0; }
.blad-feiten dt { margin-bottom: .2rem; }
.blad-feiten dd { margin: 0 0 1.05rem; }
.blad-feiten .vaag { font-style: italic; color: var(--creme-vaag); }

.blad-banden-kop { margin: 1.4rem 0 .4rem; font-weight: 400; }
.blad-banden { list-style: none; margin: 0; padding: 0; }
.band {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--lijn-vaag);
  text-decoration: none;
  color: var(--creme);
  transition: translate .3s var(--ease-veer);
}
.band:hover { translate: 3px 0; }
.band > span:last-child { display: flex; flex-direction: column; }
.band-naam { font-family: var(--deco); font-size: 1.08rem; line-height: 1.2; color: var(--goud-licht); }
.band-tekst { font-style: italic; font-size: 1rem; line-height: 1.25; color: var(--creme-zacht); }

@media (min-width: 60rem) {
  .blad {
    left: auto; top: 0;
    width: 28rem;
    height: 100dvh;
    max-height: none;
    padding-top: 2.4rem;
    border-top: 0;
    border-left: 1px solid var(--goud);
    box-shadow: -24px 0 60px rgb(0 0 0 / .7);
    translate: 100% 0;
  }
  .blad.open { translate: 0 0; }
  .blad-greep { display: none; }
  /* Naast het blad blijft de kaart zichtbaar, zodat je de verbanden ziet oplichten. */
  .blad-scherm { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .gezelschap { transition: translate .5s var(--ease-uit); }
  html.blad-open .gezelschap { translate: -14rem 0; }
}