:root {
  --bg: #0e1d1a;
  --bg2: #16302a;
  --ink: #efe8d6;
  --branch: #8fb39c;
  --leaf: #d9c58a;
  --dim: rgba(239, 232, 214, .55);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2eee3;
    --bg2: #e4ddca;
    --ink: #1d3a31;
    --branch: #47705d;
    --leaf: #b08a2e;
    --dim: rgba(29, 58, 49, .6);
  }
}

:root[data-theme="light"] {
  --bg: #f2eee3;
  --bg2: #e4ddca;
  --ink: #1d3a31;
  --branch: #47705d;
  --leaf: #b08a2e;
  --dim: rgba(29, 58, 49, .6);
}

html,
body {
  height: 100%;
  margin: 0
}

body {
  background: radial-gradient(ellipse at 50% 35%, var(--bg2), var(--bg) 70%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  overflow: hidden;
  position: relative;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block
}

main {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 9vh 6vw 0;
  pointer-events: none;
}

h1 {
  margin: 0;
  font: inherit;
  opacity: 0;
  animation: rise 2.4s 1.6s cubic-bezier(.2, .7, .2, 1) forwards
}

.sign {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: .5em 1.1em .62em;
  border-radius: .22em;
  background:
    radial-gradient(circle at 3.2% 50%, rgba(120, 62, 28, .55), transparent 7%),
    radial-gradient(circle at 96.8% 50%, rgba(120, 62, 28, .5), transparent 7%),
    linear-gradient(180deg, transparent 40%, rgba(110, 58, 28, .28) 41%, transparent 50%) 0 0/9% 100% no-repeat,
    radial-gradient(ellipse at 22% 18%, rgba(255, 255, 255, .13), transparent 45%),
    radial-gradient(ellipse at 80% 85%, rgba(0, 0, 0, .28), transparent 50%),
    radial-gradient(circle at 64% 28%, rgba(215, 205, 180, .18), transparent 5%),
    radial-gradient(circle at 12% 82%, rgba(215, 205, 180, .16), transparent 4%),
    repeating-linear-gradient(112deg, transparent 0 41px, rgba(255, 255, 255, .05) 41px 42px, transparent 42px 97px),
    linear-gradient(170deg, #21497c 0%, #173d6e 55%, #112f58 100%);
  color: #efebdc;
  text-shadow: 0 .02em .03em rgba(0, 0, 0, .35);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 6.2vw, 4.6rem);
  line-height: 1;
  letter-spacing: .005em;
  text-align: left;
  box-shadow: inset 0 0 0 .07em #163a69, inset 0 0 0 .1em #e4dfcd, inset 0 0 .5em rgba(0, 0, 0, .35), 0 .5em 2.2em rgba(0, 0, 0, .45), 0 .08em .15em rgba(0, 0, 0, .4);
  max-width: 92vw;
}

.sign small {
  display: block;
  font-size: .26em;
  font-weight: 600;
  letter-spacing: .14em;
  margin: 0 0 .45em .1em;
  opacity: .92
}

.sign::before,
.sign::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .2em;
  height: .2em;
  margin-top: -.1em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8eef7, #7f93ad);
  box-shadow: 0 0 0 .03em rgba(0, 0, 0, .3)
}

.sign::before {
  left: .38em
}

.sign::after {
  right: .38em
}

p {
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 300;
  color: var(--dim);
  opacity: 0;
  animation: rise 2s 2.6s ease forwards;
  text-shadow: 0 0 20px var(--bg);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Semi-verborgen links: twee kleine knopen bij de stam */
.node {
  position: absolute;
  z-index: 2;
  bottom: calc(5vh + env(safe-area-inset-bottom, 0px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  font-style: italic;
  opacity: 0;
  animation: appear 2s 4s ease forwards;
}

.node::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--leaf);
  opacity: .35;
  transition: transform .5s, opacity .5s, box-shadow .5s;
}

.node span {
  position: absolute;
  bottom: 46px;
  white-space: nowrap;
  opacity: .0;
  transform: translateY(6px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}

.node:hover::before,
.node:focus-visible::before {
  opacity: 1;
  transform: scale(1.9);
  box-shadow: 0 0 22px var(--leaf)
}

.node:hover span,
.node:focus-visible span {
  opacity: 1;
  transform: none
}

.node:focus-visible {
  outline: 1px solid var(--leaf);
  outline-offset: -6px;
  border-radius: 50%
}

#stamboom {
  left: calc(50% - 150px)
}

#geni {
  left: calc(50% + 106px)
}

@keyframes appear {
  to {
    opacity: 1
  }
}

/* Op touchschermen is er geen hover: laat het label heel zacht zien */
@media (hover:none) {
  .node span {
    opacity: .4;
    transform: none;
    font-size: .95rem
  }
}

@media (prefers-reduced-motion: reduce) {

  h1,
  p,
  .node {
    animation: none;
    opacity: 1
  }
}