/* The logo: the letters (an image) grow from small to full size and then jitter
   slightly; the eye is painted on canvases by logo-anim.js. Everything here is a
   plain transform on a whole element, so phones animate it without repainting.
   Numbers come from animation-params.json (set as CSS variables by LogoAnim.apply). */
#logoBox { position: relative; }
#logoBox .letters { display: block; width: 100%; height: auto; }
#logoBox canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; }
#logoBox canvas.on { visibility: visible; }

.ready #logoBox { animation: grow calc(var(--grow-dur, .7) * 1s) cubic-bezier(.2, .8, .3, 1) both; }
@keyframes grow { from { transform: scale(var(--grow-from, .3)); opacity: 0; } to { transform: none; opacity: 1; } }

/* a very slight wiggle of the letters, in 3 jumps (not a smooth sway) so it reads as hand-redrawn */
@media (prefers-reduced-motion: no-preference) {
  .ready #logoBox .letters { animation: jitter .375s step-end infinite; }
  @keyframes jitter {
    0%   { transform: translate(0, 0) rotate(0deg); }
    33%  { transform: translate(.5px, -.35px) rotate(.12deg); }
    66%  { transform: translate(-.4px, .4px) rotate(-.1deg); }
  }
}