:root {
  --ink: #3e392f;
  --muted: #716c5f;
  --paper: #c6edf1;
  --leaf: #669b42;
  --leaf-dark: #315b32;
  --apple: #f2bd4b;
  --gold: #f4c95d;
  --blue: #bde6eb;
  --shadow: 0 24px 70px rgba(68, 78, 43, .18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 7%, rgba(255,255,255,.27), transparent 31rem),
    linear-gradient(180deg,
      #b2ebf1 0%,
      #c6edf1 38%,
      #83c74d 69%,
      #b6db6c 100%);
  font-family: "Avenir Next Condensed Ultra Light", "Avenir Next Condensed", Avenir, "Arial Narrow", sans-serif;
  font-weight: 100;
  line-height: 1.6;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: white;
  background: var(--leaf-dark);
  border-radius: 999px;
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 20;
  width: min(1180px, calc(100% - 2rem));
  min-height: 105px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; padding: .7rem 0; }
.brand img { width: 145px; height: auto; image-rendering: auto; }

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid rgba(62,57,47,.2);
  border-radius: 999px;
  background: rgba(235, 250, 249, .72);
  color: var(--ink);
  padding: .72rem 1.05rem;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(68,78,43,.08);
}

.menu-button:hover,
.menu-button:focus-visible { background: white; border-color: var(--leaf); outline: none; }

.menu-button__lines,
.menu-button__lines::before,
.menu-button__lines::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease;
}

.menu-button__lines { position: relative; }
.menu-button__lines::before,
.menu-button__lines::after { content: ""; position: absolute; left: 0; }
.menu-button__lines::before { top: -6px; }
.menu-button__lines::after { top: 6px; }

.menu-button[aria-expanded="true"] .menu-button__lines { background: transparent; }
.menu-button[aria-expanded="true"] .menu-button__lines::before { top: 0; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-button__lines::after { top: 0; transform: rotate(-45deg); }

.site-menu {
  position: absolute;
  top: 88px;
  right: 0;
  width: min(290px, calc(100vw - 2rem));
  padding: .65rem;
  border: 1px solid rgba(62,57,47,.12);
  border-radius: 20px;
  background: rgba(255,255,250,.96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.site-menu:not([hidden]) { display: grid; animation: menu-in .22s ease-out both; }
.site-menu a { padding: .68rem .85rem; border-radius: 12px; text-decoration: none; }
.site-menu a:hover,
.site-menu a:focus-visible { background: #edf3dc; outline: none; }
.site-menu a[aria-current="page"] { color: var(--leaf-dark); font-weight: 500; }

.welcome {
  width: min(900px, calc(100% - 2rem));
  margin: 3.2rem auto 2.5rem;
  text-align: center;
}

.eyebrow {
  margin: 0 0 .5rem;
  color: var(--leaf-dark);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  max-width: 780px;
  margin: 0 auto .65rem;
  font-family: "Avenir Next Condensed Ultra Light", "Avenir Next Condensed", Avenir, "Arial Narrow", sans-serif;
  font-size: clamp(2.4rem, 5.7vw, 5.2rem);
  font-weight: 100;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.welcome > p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 auto 1.15rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.discover-link {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  color: var(--leaf-dark);
  font-weight: 500;
  text-underline-offset: .3em;
}

.tree-section {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
}

.tree-help {
  width: fit-content;
  margin: 0 auto .75rem;
  padding: .42rem .8rem;
  color: var(--leaf-dark);
  background: rgba(225,248,247,.72);
  border: 1px solid rgba(49,91,50,.14);
  border-radius: 999px;
  font-size: .84rem;
}

.tree-help span { color: var(--gold); }

.tree-stage {
  position: relative;
  width: min(100%, 970px);
  margin: 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

.tree-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  box-shadow: none;
}

.tree-image { display: block; width: 100%; height: auto; }

.art-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

/* De twee vogels en twee appelgroepjes staan ieder in één bronbestand.
   Met een uitsnede krijgt elk onderdeel toch zijn eigen beweging. */
.art-layer--bird-left {
  clip-path: inset(5% 80% 84% 3%);
  transform-origin: 12% 10%;
  animation: bird-left-flight 8s ease-in-out infinite;
}

.art-layer--bird-top {
  clip-path: inset(1% 68% 85% 19%);
  transform-origin: 26% 8%;
  animation: bird-top-bob 4.8s ease-in-out infinite -.9s;
}

.art-layer--apple-top {
  clip-path: inset(18% 18% 69% 66%);
  transform-origin: 74% 24%;
  animation: apple-top-sway 4.7s ease-in-out infinite;
}

.art-layer--apple-middle {
  clip-path: inset(42% 23% 42% 59%);
  transform-origin: 68% 49%;
  animation: apple-middle-sway 5.2s ease-in-out infinite -1.4s;
}

.art-layer--blanket {
  transform-origin: 47% 50%;
  animation: blanket-breathe 4.1s ease-in-out infinite;
}

.art-layer--bes {
  transform-origin: 21.4% 46.2%;
  animation: bes-swing 5.1s ease-in-out infinite;
}

.art-layer--keesje {
  transform-origin: 75.8% 51.2%;
  animation: keesje-swing 5.8s ease-in-out infinite -.7s;
}

.window-glow {
  position: absolute;
  z-index: 2;
  left: 42.5%;
  top: 45.1%;
  width: 7.3%;
  aspect-ratio: 1.1;
  border-radius: 12%;
  background: rgba(255, 232, 92, .38);
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: window-light 5.5s ease-in-out infinite;
  pointer-events: none;
}

.sky-speck {
  position: absolute;
  z-index: 2;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 8px 2px rgba(255,255,255,.65);
  pointer-events: none;
  animation: drift 11s linear infinite;
}

.sky-speck--one { top: 8%; left: 58%; }
.sky-speck--two { top: 18%; left: 16%; animation-delay: -6s; animation-duration: 14s; }

.hotspot {
  --pulse-delay: 0s;
  position: absolute;
  z-index: 5;
  width: clamp(40px, 5.4%, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  display: grid;
  place-items: center;
}

.hotspot__dot {
  position: relative;
  width: 15px;
  aspect-ratio: 1;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--apple);
  box-shadow: 0 3px 10px rgba(58,37,22,.32);
  transition: transform .22s ease, background .22s ease;
}

.hotspot__dot::before,
.hotspot__dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  animation: hotspot-pulse 2.7s ease-out infinite var(--pulse-delay);
}

.hotspot__dot::after { animation-delay: calc(var(--pulse-delay) + .9s); }

.hotspot__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .45rem);
  width: max-content;
  max-width: 180px;
  padding: .42rem .68rem;
  color: var(--ink);
  background: rgba(255,255,248,.97);
  border: 1px solid rgba(62,57,47,.12);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(60,55,40,.16);
  font-size: clamp(.7rem, 1.5vw, .86rem);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 7px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot { transform: scale(1.3); background: var(--gold); }
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label { opacity: 1; transform: translate(-50%, 0); }
.hotspot:focus-visible { outline: 3px solid white; outline-offset: 3px; }

.hotspot--illustrations { left: 13%; top: 10%; --pulse-delay: .15s; }
.hotspot--stories { left: 47%; top: 49%; --pulse-delay: .4s; }
.hotspot--work { left: 57.5%; top: 64.5%; --pulse-delay: .7s; }
.hotspot--education { left: 42.5%; top: 83%; --pulse-delay: 1s; }
.hotspot--shop { left: 74%; top: 24%; --pulse-delay: 1.25s; }
.hotspot--about { left: 21%; top: 80%; --pulse-delay: 1.55s; }

.quick-links {
  width: min(920px, calc(100% - 2rem));
  margin: 2.4rem auto 5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(62,57,47,.18);
  border-bottom: 1px solid rgba(62,57,47,.18);
}

.quick-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.1rem;
  font-family: "Avenir Next Condensed Ultra Light", "Avenir Next Condensed", Avenir, "Arial Narrow", sans-serif;
  font-weight: 100;
  font-size: 1.08rem;
  text-decoration: none;
}

.quick-links a + a { border-left: 1px solid rgba(62,57,47,.18); }
.quick-links a:hover { color: var(--leaf-dark); background: rgba(255,255,255,.45); }
.quick-links span { color: var(--apple); font: 500 .68rem "Avenir Next Condensed", Avenir, "Arial Narrow", sans-serif; }

.site-footer {
  padding: 2.4rem 1rem 3.2rem;
  color: var(--muted);
  background: transparent;
  text-align: center;
  font-size: .78rem;
}

.site-footer p { margin: .15rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes window-light { 0%, 100% { opacity: .32; } 48% { opacity: .9; } 58% { opacity: .62; } }
@keyframes drift { 0% { transform: translate(-50px, 8px); opacity: 0; } 15%, 75% { opacity: .85; } 100% { transform: translate(170px, -25px); opacity: 0; } }
@keyframes hotspot-pulse { 0% { transform: scale(.45); opacity: .75; } 72%, 100% { transform: scale(1.75); opacity: 0; } }
@keyframes bird-left-flight {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  45% { transform: translate(1.8%, -.55%) rotate(-1deg); }
  62% { transform: translate(1.35%, -.2%) rotate(.7deg); }
}
@keyframes bird-top-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-.55%) rotate(1.2deg); }
}
@keyframes apple-top-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.7deg); }
}
@keyframes apple-middle-sway {
  0%, 100% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.5deg); }
}
@keyframes blanket-breathe {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(.18%) rotate(.7deg); }
}
@keyframes bes-swing {
  0%, 100% { transform: rotate(-1.65deg); }
  50% { transform: rotate(1.65deg); }
}
@keyframes keesje-swing {
  0%, 100% { transform: rotate(1.25deg); }
  50% { transform: rotate(-1.25deg); }
}

@media (max-width: 700px) {
  .site-header { min-height: 84px; }
  .brand img { width: 112px; }
  .site-menu { top: 76px; }
  .welcome { margin-top: 1.9rem; }
  .welcome > p:not(.eyebrow) { font-size: .96rem; }
  .tree-section { width: 100%; }
  .tree-stage { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .hotspot__label { font-size: .7rem; }
  .quick-links { grid-template-columns: 1fr; }
  .quick-links a + a { border-left: 0; border-top: 1px solid rgba(62,57,47,.18); }
}

@media (hover: none) {
  .hotspot__label {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  .hotspot.is-touched .hotspot__label,
  .hotspot:focus .hotspot__label { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}