.welcome-learning-icon {
  display:block;
  width:64px;
  height:64px;
  margin:0 0 18px;
  overflow:visible;
  image-rendering:pixelated;
  pointer-events:none;
}

/* Short little gestures with long rests keep the artwork quietly alive. */
.welcome-icon-sound {
  opacity:.65;
  animation:welcome-listen 9s steps(2,end) infinite;
}
.welcome-icon-sound-far { animation-delay:.24s; }
.welcome-icon-book-glint {
  opacity:.8;
  animation:welcome-book-glint 11s steps(2,end) 2s infinite;
}
.welcome-icon-egg {
  transform-origin:16px 26px;
  animation:welcome-egg-wiggle 12s steps(2,end) 4s infinite;
}

@keyframes welcome-listen {
  0%,78%,100% { opacity:.65; }
  81%,86% { opacity:1; }
  91%,96% { opacity:.35; }
}
@keyframes welcome-book-glint {
  0%,83%,100% { opacity:.8; }
  87% { opacity:1; }
  92% { opacity:.4; }
  96% { opacity:1; }
}
@keyframes welcome-egg-wiggle {
  0%,88%,100% { transform:translateX(0) rotate(0deg); }
  90% { transform:translateX(-.5px) rotate(-3deg); }
  93% { transform:translateX(.5px) rotate(3deg); }
  96% { transform:translateX(-.5px) rotate(-2deg); }
}

[data-motion="paused"] .welcome-learning-icon *,
.welcome-learning-icon[data-motion="paused"] * {
  animation-play-state:paused;
}
[data-motion="off"] .welcome-learning-icon *,
.welcome-learning-icon[data-motion="off"] * {
  animation:none;
}
@media(prefers-reduced-motion:reduce) {
  .welcome-learning-icon * { animation:none; }
}