/* ==================================================================
   THE GREEN TURTLES — wave-hand.css
   ------------------------------------------------------------------
   Standalone styling for the waving 👋 emoji in the header — see
   wave-hand.js for the click-for-high-five behavior.
   ================================================================== */

.wave {
  display: inline-block;
  animation: wave-hand 2.2s ease-in-out infinite;
  transform-origin: 70% 70%;

  /* .page (see style.css) is pointer-events: none so empty space
     lets clicks fall through to the background — this opts the hand
     itself back in. */
  pointer-events: auto;
  cursor: pointer;

  /* Without this, double-clicking selects the emoji (and neighboring
     text) like any other text, which looks broken for what's meant
     to read as a button. */
  user-select: none;
  -webkit-user-select: none;
}

@keyframes wave-hand {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%  { transform: rotate(16deg); }
  20%  { transform: rotate(-8deg); }
  30%  { transform: rotate(16deg); }
  40%  { transform: rotate(-4deg); }
  50%  { transform: rotate(10deg); }
}