@property --peek {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

#timber > div {
  width: fit-content;
  font-size: min(50vh, 70vw);

  /* Center below the viewport, peeking out. */
  position: fixed;
  bottom: 0;
  left: 50vw;
  transform-origin: center 70%;
  translate: -50% calc(100% - var(--peek));

  animation: timber-wag;
  animation-timeline: --timber;

  z-index: 1;  /* above #splash */
}

@keyframes timber-wag {
  0% {
    rotate: 0deg;
    --peek: 0%;
  }
  20% {
    rotate: 30deg;
  }
  25% {
    --peek: 75%;
  }
  50% {
    --peek: 60%;
  }
  60% {
    rotate: -30deg;
  }
  75% {
    --peek: 75%;
  }
  100% {
    rotate: 15deg;
    --peek: 0%;
  }
}
