/**
 * 8-Bit Pixel Art Professor Sprite
 * Uses box-shadow technique to create pixel art
 * 32x32 pixel grid with 4px pixels (128x128px total size)
 */

.professor-sprite {
  width: 4px;
  height: 4px;
  position: relative;
  display: inline-block;
  animation: professor-wave 1.5s ease-in-out infinite;
}

.professor-sprite::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  /* Standing pose frame */
  box-shadow:
    /* Hair (white/gray) - Row 0 */
    36px 0 #f0f0f0, 40px 0 #f0f0f0, 44px 0 #f0f0f0, 48px 0 #f0f0f0, 52px 0 #f0f0f0, 56px 0 #f0f0f0, 60px 0 #f0f0f0, 64px 0 #f0f0f0, 68px 0 #f0f0f0, 72px 0 #f0f0f0, 76px 0 #f0f0f0, 80px 0 #f0f0f0, 84px 0 #f0f0f0, 88px 0 #f0f0f0,
    /* Hair sides - Row 1 */
    32px 4px #e0e0e0, 36px 4px #f0f0f0, 40px 4px #ffd699, 44px 4px #ffd699, 48px 4px #ffd699, 52px 4px #ffd699, 56px 4px #ffd699, 60px 4px #ffd699, 64px 4px #ffd699, 68px 4px #ffd699, 72px 4px #ffd699, 76px 4px #ffd699, 80px 4px #ffd699, 84px 4px #ffd699, 88px 4px #ffd699, 92px 4px #e0e0e0,
    /* Hair sides and forehead - Row 2 */
    28px 8px #e0e0e0, 32px 8px #e0e0e0, 36px 8px #ffd699, 40px 8px #ffd699, 44px 8px #ffd699, 48px 8px #ffd699, 52px 8px #ffd699, 56px 8px #ffd699, 60px 8px #ffd699, 64px 8px #ffd699, 68px 8px #ffd699, 72px 8px #ffd699, 76px 8px #ffd699, 80px 8px #ffd699, 84px 8px #ffd699, 88px 8px #ffd699, 92px 8px #ffd699, 96px 8px #e0e0e0,
    /* Hair sides and face - Row 3 */
    24px 12px #e0e0e0, 28px 12px #e0e0e0, 32px 12px #ffd699, 36px 12px #ffd699, 40px 12px #ffd699, 44px 12px #ffd699, 48px 12px #ffd699, 52px 12px #ffd699, 56px 12px #ffd699, 60px 12px #ffd699, 64px 12px #ffd699, 68px 12px #ffd699, 72px 12px #ffd699, 76px 12px #ffd699, 80px 12px #ffd699, 84px 12px #ffd699, 88px 12px #ffd699, 92px 12px #ffd699, 96px 12px #e0e0e0, 100px 12px #e0e0e0,
    /* Face and glasses start - Row 4 */
    24px 16px #e0e0e0, 28px 16px #ffd699, 32px 16px #ffd699, 36px 16px #ffd699, 40px 16px #333333, 44px 16px #87ceeb, 48px 16px #87ceeb, 52px 16px #87ceeb, 56px 16px #333333, 60px 16px #ffd699, 64px 16px #333333, 68px 16px #87ceeb, 72px 16px #87ceeb, 76px 16px #87ceeb, 80px 16px #333333, 84px 16px #ffd699, 88px 16px #ffd699, 92px 16px #ffd699, 96px 16px #e0e0e0, 100px 16px #e0e0e0,
    /* Glasses and eyes - Row 5 */
    24px 20px #e0e0e0, 28px 20px #ffd699, 32px 20px #ffd699, 36px 20px #333333, 40px 20px #333333, 44px 20px #87ceeb, 48px 20px #4a4a4a, 52px 20px #4a4a4a, 56px 20px #333333, 60px 20px #ffd699, 64px 20px #333333, 68px 20px #87ceeb, 72px 20px #4a4a4a, 76px 20px #4a4a4a, 80px 20px #333333, 84px 20px #ffd699, 88px 20px #ffd699, 92px 20px #ffd699, 96px 20px #e0e0e0, 100px 20px #e0e0e0,
    /* Glasses and nose - Row 6 */
    24px 24px #e0e0e0, 28px 24px #ffd699, 32px 24px #ffd699, 36px 24px #333333, 40px 24px #333333, 44px 24px #87ceeb, 48px 24px #87ceeb, 52px 24px #87ceeb, 56px 24px #333333, 60px 24px #ffd699, 64px 24px #333333, 68px 24px #87ceeb, 72px 24px #87ceeb, 76px 24px #87ceeb, 80px 24px #333333, 84px 24px #ffd699, 88px 24px #ffd699, 92px 24px #ffd699, 96px 24px #e0e0e0, 100px 24px #e0e0e0,
    /* Nose and cheeks - Row 7 */
    24px 28px #e0e0e0, 28px 28px #ffd699, 32px 28px #ffd699, 36px 28px #ffd699, 40px 28px #ffd699, 44px 28px #ffd699, 48px 28px #e8b89d, 52px 28px #e8b89d, 56px 28px #ffd699, 60px 28px #ffd699, 64px 28px #ffd699, 68px 28px #ffd699, 72px 28px #ffd699, 76px 28px #ffd699, 80px 28px #ffd699, 84px 28px #ffd699, 88px 28px #ffd699, 92px 28px #ffd699, 96px 28px #e0e0e0, 100px 28px #e0e0e0,
    /* Smile - Row 8 */
    24px 32px #e0e0e0, 28px 32px #ffd699, 32px 32px #ffd699, 36px 32px #ffd699, 40px 32px #ffd699, 44px 32px #ffd699, 48px 32px #ffd699, 52px 32px #ff6b6b, 56px 32px #ff6b6b, 60px 32px #ff6b6b, 64px 32px #ffd699, 68px 32px #ffd699, 72px 32px #ffd699, 76px 32px #ffd699, 80px 32px #ffd699, 84px 32px #ffd699, 88px 32px #ffd699, 92px 32px #ffd699, 96px 32px #e0e0e0, 100px 32px #e0e0e0,
    /* Chin and neck - Row 9 */
    24px 36px #e0e0e0, 28px 36px #ffd699, 32px 36px #ffd699, 36px 36px #ffd699, 40px 36px #ffd699, 44px 36px #ffd699, 48px 36px #ffd699, 52px 36px #ffd699, 56px 36px #ffd699, 60px 36px #ffd699, 64px 36px #ffd699, 68px 36px #ffd699, 72px 36px #ffd699, 76px 36px #ffd699, 80px 36px #ffd699, 84px 36px #ffd699, 88px 36px #ffd699, 92px 36px #ffd699, 96px 36px #e0e0e0, 100px 36px #e0e0e0,
    /* Neck and collar - Row 10 */
    28px 40px #ffd699, 32px 40px #ffd699, 36px 40px #ffd699, 40px 40px #ffd699, 44px 40px #ffd699, 48px 40px #ffffff, 52px 40px #ffffff, 56px 40px #ffffff, 60px 40px #ffffff, 64px 40px #ffffff, 68px 40px #ffffff, 72px 40px #ffffff, 76px 40px #ffffff, 80px 40px #ffd699, 84px 40px #ffd699, 88px 40px #ffd699, 92px 40px #ffd699, 96px 40px #e0e0e0,
    /* Tweed jacket body - Row 11 */
    20px 44px #8b4513, 24px 44px #8b4513, 28px 44px #8b4513, 32px 44px #d2691e, 36px 44px #d2691e, 40px 44px #ffffff, 44px 44px #ffffff, 48px 44px #d2691e, 52px 44px #d2691e, 56px 44px #d2691e, 60px 44px #d2691e, 64px 44px #d2691e, 68px 44px #d2691e, 72px 44px #ffffff, 76px 44px #ffffff, 80px 44px #d2691e, 84px 44px #d2691e, 88px 44px #d2691e, 92px 44px #8b4513, 96px 44px #8b4513, 100px 44px #8b4513,
    /* Tweed jacket body - Row 12 */
    16px 48px #8b4513, 20px 48px #8b4513, 24px 48px #8b4513, 28px 48px #d2691e, 32px 48px #d2691e, 36px 48px #d2691e, 40px 48px #d2691e, 44px 48px #d2691e, 48px 48px #d2691e, 52px 48px #d2691e, 56px 48px #d2691e, 60px 48px #d2691e, 64px 48px #d2691e, 68px 48px #d2691e, 72px 48px #d2691e, 76px 48px #d2691e, 80px 48px #d2691e, 84px 48px #d2691e, 88px 48px #d2691e, 92px 48px #8b4513, 96px 48px #8b4513, 100px 48px #8b4513, 104px 48px #8b4513,
    /* Tweed jacket body - Row 13 */
    12px 52px #8b4513, 16px 52px #8b4513, 20px 52px #8b4513, 24px 52px #8b4513, 28px 52px #d2691e, 32px 52px #d2691e, 36px 52px #cd853f, 40px 52px #cd853f, 44px 52px #cd853f, 48px 52px #cd853f, 52px 52px #cd853f, 56px 52px #cd853f, 60px 52px #cd853f, 64px 52px #cd853f, 68px 52px #cd853f, 72px 52px #cd853f, 76px 52px #cd853f, 80px 52px #d2691e, 84px 52px #d2691e, 88px 52px #8b4513, 92px 52px #8b4513, 96px 52px #8b4513, 100px 52px #8b4513, 104px 52px #8b4513, 108px 52px #8b4513,
    /* Tweed jacket body - Row 14 */
    12px 56px #8b4513, 16px 56px #8b4513, 20px 56px #8b4513, 24px 56px #8b4513, 28px 56px #d2691e, 32px 56px #d2691e, 36px 56px #cd853f, 40px 56px #cd853f, 44px 56px #cd853f, 48px 56px #cd853f, 52px 56px #cd853f, 56px 56px #cd853f, 60px 56px #cd853f, 64px 56px #cd853f, 68px 56px #cd853f, 72px 56px #cd853f, 76px 56px #cd853f, 80px 56px #d2691e, 84px 56px #d2691e, 88px 56px #8b4513, 92px 56px #8b4513, 96px 56px #8b4513, 100px 56px #8b4513, 104px 56px #8b4513, 108px 56px #8b4513,
    /* Tweed jacket bottom - Row 15 */
    12px 60px #8b4513, 16px 60px #8b4513, 20px 60px #8b4513, 24px 60px #8b4513, 28px 60px #8b4513, 32px 60px #d2691e, 36px 60px #d2691e, 40px 60px #d2691e, 44px 60px #d2691e, 48px 60px #d2691e, 52px 60px #d2691e, 56px 60px #d2691e, 60px 60px #d2691e, 64px 60px #d2691e, 68px 60px #d2691e, 72px 60px #d2691e, 76px 60px #d2691e, 80px 60px #8b4513, 84px 60px #8b4513, 88px 60px #8b4513, 92px 60px #8b4513, 96px 60px #8b4513, 100px 60px #8b4513, 104px 60px #8b4513, 108px 60px #8b4513,
    /* Left arm standing - Row 11 */
    8px 44px #8b4513, 12px 44px #d2691e, 16px 44px #d2691e,
    /* Left arm standing - Row 12 */
    4px 48px #8b4513, 8px 48px #d2691e, 12px 48px #d2691e,
    /* Left arm standing - Row 13 */
    4px 52px #8b4513, 8px 52px #d2691e,
    /* Left arm standing - Row 14 */
    4px 56px #8b4513, 8px 56px #8b4513,
    /* Right arm standing - Row 11 */
    100px 44px #d2691e, 104px 44px #d2691e, 108px 44px #d2691e, 112px 44px #8b4513,
    /* Right arm standing - Row 12 */
    104px 48px #d2691e, 108px 48px #d2691e, 112px 48px #8b4513,
    /* Right arm standing - Row 13 */
    108px 52px #d2691e, 112px 52px #8b4513,
    /* Right arm standing - Row 14 */
    108px 56px #8b4513, 112px 56px #8b4513;

  animation: professor-face 1.5s ease-in-out infinite;
}

/* Waving frame - shown at 50% of animation */
.professor-sprite.waving::before {
  animation: professor-wave 1.5s ease-in-out infinite;
}

@keyframes professor-wave {
  0%, 45%, 100% {
    /* Standing pose */
    box-shadow:
      /* Hair (white/gray) - Row 0 */
      36px 0 #f0f0f0, 40px 0 #f0f0f0, 44px 0 #f0f0f0, 48px 0 #f0f0f0, 52px 0 #f0f0f0, 56px 0 #f0f0f0, 60px 0 #f0f0f0, 64px 0 #f0f0f0, 68px 0 #f0f0f0, 72px 0 #f0f0f0, 76px 0 #f0f0f0, 80px 0 #f0f0f0, 84px 0 #f0f0f0, 88px 0 #f0f0f0,
      /* Hair sides - Row 1 */
      32px 4px #e0e0e0, 36px 4px #f0f0f0, 40px 4px #ffd699, 44px 4px #ffd699, 48px 4px #ffd699, 52px 4px #ffd699, 56px 4px #ffd699, 60px 4px #ffd699, 64px 4px #ffd699, 68px 4px #ffd699, 72px 4px #ffd699, 76px 4px #ffd699, 80px 4px #ffd699, 84px 4px #ffd699, 88px 4px #ffd699, 92px 4px #e0e0e0,
      /* Hair sides and forehead - Row 2 */
      28px 8px #e0e0e0, 32px 8px #e0e0e0, 36px 8px #ffd699, 40px 8px #ffd699, 44px 8px #ffd699, 48px 8px #ffd699, 52px 8px #ffd699, 56px 8px #ffd699, 60px 8px #ffd699, 64px 8px #ffd699, 68px 8px #ffd699, 72px 8px #ffd699, 76px 8px #ffd699, 80px 8px #ffd699, 84px 8px #ffd699, 88px 8px #ffd699, 92px 8px #ffd699, 96px 8px #e0e0e0,
      /* Hair sides and face - Row 3 */
      24px 12px #e0e0e0, 28px 12px #e0e0e0, 32px 12px #ffd699, 36px 12px #ffd699, 40px 12px #ffd699, 44px 12px #ffd699, 48px 12px #ffd699, 52px 12px #ffd699, 56px 12px #ffd699, 60px 12px #ffd699, 64px 12px #ffd699, 68px 12px #ffd699, 72px 12px #ffd699, 76px 12px #ffd699, 80px 12px #ffd699, 84px 12px #ffd699, 88px 12px #ffd699, 92px 12px #ffd699, 96px 12px #e0e0e0, 100px 12px #e0e0e0,
      /* Face and glasses start - Row 4 */
      24px 16px #e0e0e0, 28px 16px #ffd699, 32px 16px #ffd699, 36px 16px #ffd699, 40px 16px #333333, 44px 16px #87ceeb, 48px 16px #87ceeb, 52px 16px #87ceeb, 56px 16px #333333, 60px 16px #ffd699, 64px 16px #333333, 68px 16px #87ceeb, 72px 16px #87ceeb, 76px 16px #87ceeb, 80px 16px #333333, 84px 16px #ffd699, 88px 16px #ffd699, 92px 16px #ffd699, 96px 16px #e0e0e0, 100px 16px #e0e0e0,
      /* Glasses and eyes - Row 5 */
      24px 20px #e0e0e0, 28px 20px #ffd699, 32px 20px #ffd699, 36px 20px #333333, 40px 20px #333333, 44px 20px #87ceeb, 48px 20px #4a4a4a, 52px 20px #4a4a4a, 56px 20px #333333, 60px 20px #ffd699, 64px 20px #333333, 68px 20px #87ceeb, 72px 20px #4a4a4a, 76px 20px #4a4a4a, 80px 20px #333333, 84px 20px #ffd699, 88px 20px #ffd699, 92px 20px #ffd699, 96px 20px #e0e0e0, 100px 20px #e0e0e0,
      /* Glasses and nose - Row 6 */
      24px 24px #e0e0e0, 28px 24px #ffd699, 32px 24px #ffd699, 36px 24px #333333, 40px 24px #333333, 44px 24px #87ceeb, 48px 24px #87ceeb, 52px 24px #87ceeb, 56px 24px #333333, 60px 24px #ffd699, 64px 24px #333333, 68px 24px #87ceeb, 72px 24px #87ceeb, 76px 24px #87ceeb, 80px 24px #333333, 84px 24px #ffd699, 88px 24px #ffd699, 92px 24px #ffd699, 96px 24px #e0e0e0, 100px 24px #e0e0e0,
      /* Nose and cheeks - Row 7 */
      24px 28px #e0e0e0, 28px 28px #ffd699, 32px 28px #ffd699, 36px 28px #ffd699, 40px 28px #ffd699, 44px 28px #ffd699, 48px 28px #e8b89d, 52px 28px #e8b89d, 56px 28px #ffd699, 60px 28px #ffd699, 64px 28px #ffd699, 68px 28px #ffd699, 72px 28px #ffd699, 76px 28px #ffd699, 80px 28px #ffd699, 84px 28px #ffd699, 88px 28px #ffd699, 92px 28px #ffd699, 96px 28px #e0e0e0, 100px 28px #e0e0e0,
      /* Smile - Row 8 */
      24px 32px #e0e0e0, 28px 32px #ffd699, 32px 32px #ffd699, 36px 32px #ffd699, 40px 32px #ffd699, 44px 32px #ffd699, 48px 32px #ffd699, 52px 32px #ff6b6b, 56px 32px #ff6b6b, 60px 32px #ff6b6b, 64px 32px #ffd699, 68px 32px #ffd699, 72px 32px #ffd699, 76px 32px #ffd699, 80px 32px #ffd699, 84px 32px #ffd699, 88px 32px #ffd699, 92px 32px #ffd699, 96px 32px #e0e0e0, 100px 32px #e0e0e0,
      /* Chin and neck - Row 9 */
      24px 36px #e0e0e0, 28px 36px #ffd699, 32px 36px #ffd699, 36px 36px #ffd699, 40px 36px #ffd699, 44px 36px #ffd699, 48px 36px #ffd699, 52px 36px #ffd699, 56px 36px #ffd699, 60px 36px #ffd699, 64px 36px #ffd699, 68px 36px #ffd699, 72px 36px #ffd699, 76px 36px #ffd699, 80px 36px #ffd699, 84px 36px #ffd699, 88px 36px #ffd699, 92px 36px #ffd699, 96px 36px #e0e0e0, 100px 36px #e0e0e0,
      /* Neck and collar - Row 10 */
      28px 40px #ffd699, 32px 40px #ffd699, 36px 40px #ffd699, 40px 40px #ffd699, 44px 40px #ffd699, 48px 40px #ffffff, 52px 40px #ffffff, 56px 40px #ffffff, 60px 40px #ffffff, 64px 40px #ffffff, 68px 40px #ffffff, 72px 40px #ffffff, 76px 40px #ffffff, 80px 40px #ffd699, 84px 40px #ffd699, 88px 40px #ffd699, 92px 40px #ffd699, 96px 40px #e0e0e0,
      /* Tweed jacket body - Row 11 */
      20px 44px #8b4513, 24px 44px #8b4513, 28px 44px #8b4513, 32px 44px #d2691e, 36px 44px #d2691e, 40px 44px #ffffff, 44px 44px #ffffff, 48px 44px #d2691e, 52px 44px #d2691e, 56px 44px #d2691e, 60px 44px #d2691e, 64px 44px #d2691e, 68px 44px #d2691e, 72px 44px #ffffff, 76px 44px #ffffff, 80px 44px #d2691e, 84px 44px #d2691e, 88px 44px #d2691e, 92px 44px #8b4513, 96px 44px #8b4513, 100px 44px #8b4513,
      /* Tweed jacket body - Row 12 */
      16px 48px #8b4513, 20px 48px #8b4513, 24px 48px #8b4513, 28px 48px #d2691e, 32px 48px #d2691e, 36px 48px #d2691e, 40px 48px #d2691e, 44px 48px #d2691e, 48px 48px #d2691e, 52px 48px #d2691e, 56px 48px #d2691e, 60px 48px #d2691e, 64px 48px #d2691e, 68px 48px #d2691e, 72px 48px #d2691e, 76px 48px #d2691e, 80px 48px #d2691e, 84px 48px #d2691e, 88px 48px #d2691e, 92px 48px #8b4513, 96px 48px #8b4513, 100px 48px #8b4513, 104px 48px #8b4513,
      /* Tweed jacket body - Row 13 */
      12px 52px #8b4513, 16px 52px #8b4513, 20px 52px #8b4513, 24px 52px #8b4513, 28px 52px #d2691e, 32px 52px #d2691e, 36px 52px #cd853f, 40px 52px #cd853f, 44px 52px #cd853f, 48px 52px #cd853f, 52px 52px #cd853f, 56px 52px #cd853f, 60px 52px #cd853f, 64px 52px #cd853f, 68px 52px #cd853f, 72px 52px #cd853f, 76px 52px #cd853f, 80px 52px #d2691e, 84px 52px #d2691e, 88px 52px #8b4513, 92px 52px #8b4513, 96px 52px #8b4513, 100px 52px #8b4513, 104px 52px #8b4513, 108px 52px #8b4513,
      /* Tweed jacket body - Row 14 */
      12px 56px #8b4513, 16px 56px #8b4513, 20px 56px #8b4513, 24px 56px #8b4513, 28px 56px #d2691e, 32px 56px #d2691e, 36px 56px #cd853f, 40px 56px #cd853f, 44px 56px #cd853f, 48px 56px #cd853f, 52px 56px #cd853f, 56px 56px #cd853f, 60px 56px #cd853f, 64px 56px #cd853f, 68px 56px #cd853f, 72px 56px #cd853f, 76px 56px #cd853f, 80px 56px #d2691e, 84px 56px #d2691e, 88px 56px #8b4513, 92px 56px #8b4513, 96px 56px #8b4513, 100px 56px #8b4513, 104px 56px #8b4513, 108px 56px #8b4513,
      /* Tweed jacket bottom - Row 15 */
      12px 60px #8b4513, 16px 60px #8b4513, 20px 60px #8b4513, 24px 60px #8b4513, 28px 60px #8b4513, 32px 60px #d2691e, 36px 60px #d2691e, 40px 60px #d2691e, 44px 60px #d2691e, 48px 60px #d2691e, 52px 60px #d2691e, 56px 60px #d2691e, 60px 60px #d2691e, 64px 60px #d2691e, 68px 60px #d2691e, 72px 60px #d2691e, 76px 60px #d2691e, 80px 60px #8b4513, 84px 60px #8b4513, 88px 60px #8b4513, 92px 60px #8b4513, 96px 60px #8b4513, 100px 60px #8b4513, 104px 60px #8b4513, 108px 60px #8b4513,
      /* Left arm standing - Row 11 */
      8px 44px #8b4513, 12px 44px #d2691e, 16px 44px #d2691e,
      /* Left arm standing - Row 12 */
      4px 48px #8b4513, 8px 48px #d2691e, 12px 48px #d2691e,
      /* Left arm standing - Row 13 */
      4px 52px #8b4513, 8px 52px #d2691e,
      /* Left arm standing - Row 14 */
      4px 56px #8b4513, 8px 56px #8b4513,
      /* Right arm standing - Row 11 */
      100px 44px #d2691e, 104px 44px #d2691e, 108px 44px #d2691e, 112px 44px #8b4513,
      /* Right arm standing - Row 12 */
      104px 48px #d2691e, 108px 48px #d2691e, 112px 48px #8b4513,
      /* Right arm standing - Row 13 */
      108px 52px #d2691e, 112px 52px #8b4513,
      /* Right arm standing - Row 14 */
      108px 56px #8b4513, 112px 56px #8b4513;
  }

  50%, 95% {
    /* Waving pose - right arm raised */
    box-shadow:
      /* Hair (white/gray) - Row 0 */
      36px 0 #f0f0f0, 40px 0 #f0f0f0, 44px 0 #f0f0f0, 48px 0 #f0f0f0, 52px 0 #f0f0f0, 56px 0 #f0f0f0, 60px 0 #f0f0f0, 64px 0 #f0f0f0, 68px 0 #f0f0f0, 72px 0 #f0f0f0, 76px 0 #f0f0f0, 80px 0 #f0f0f0, 84px 0 #f0f0f0, 88px 0 #f0f0f0,
      /* Hair sides - Row 1 */
      32px 4px #e0e0e0, 36px 4px #f0f0f0, 40px 4px #ffd699, 44px 4px #ffd699, 48px 4px #ffd699, 52px 4px #ffd699, 56px 4px #ffd699, 60px 4px #ffd699, 64px 4px #ffd699, 68px 4px #ffd699, 72px 4px #ffd699, 76px 4px #ffd699, 80px 4px #ffd699, 84px 4px #ffd699, 88px 4px #ffd699, 92px 4px #e0e0e0,
      /* Hair sides and forehead - Row 2 */
      28px 8px #e0e0e0, 32px 8px #e0e0e0, 36px 8px #ffd699, 40px 8px #ffd699, 44px 8px #ffd699, 48px 8px #ffd699, 52px 8px #ffd699, 56px 8px #ffd699, 60px 8px #ffd699, 64px 8px #ffd699, 68px 8px #ffd699, 72px 8px #ffd699, 76px 8px #ffd699, 80px 8px #ffd699, 84px 8px #ffd699, 88px 8px #ffd699, 92px 8px #ffd699, 96px 8px #e0e0e0,
      /* Hair sides and face - Row 3 */
      24px 12px #e0e0e0, 28px 12px #e0e0e0, 32px 12px #ffd699, 36px 12px #ffd699, 40px 12px #ffd699, 44px 12px #ffd699, 48px 12px #ffd699, 52px 12px #ffd699, 56px 12px #ffd699, 60px 12px #ffd699, 64px 12px #ffd699, 68px 12px #ffd699, 72px 12px #ffd699, 76px 12px #ffd699, 80px 12px #ffd699, 84px 12px #ffd699, 88px 12px #ffd699, 92px 12px #ffd699, 96px 12px #e0e0e0, 100px 12px #e0e0e0,
      /* Face and glasses start - Row 4 */
      24px 16px #e0e0e0, 28px 16px #ffd699, 32px 16px #ffd699, 36px 16px #ffd699, 40px 16px #333333, 44px 16px #87ceeb, 48px 16px #87ceeb, 52px 16px #87ceeb, 56px 16px #333333, 60px 16px #ffd699, 64px 16px #333333, 68px 16px #87ceeb, 72px 16px #87ceeb, 76px 16px #87ceeb, 80px 16px #333333, 84px 16px #ffd699, 88px 16px #ffd699, 92px 16px #ffd699, 96px 16px #e0e0e0, 100px 16px #e0e0e0,
      /* Glasses and eyes - Row 5 */
      24px 20px #e0e0e0, 28px 20px #ffd699, 32px 20px #ffd699, 36px 20px #333333, 40px 20px #333333, 44px 20px #87ceeb, 48px 20px #4a4a4a, 52px 20px #4a4a4a, 56px 20px #333333, 60px 20px #ffd699, 64px 20px #333333, 68px 20px #87ceeb, 72px 20px #4a4a4a, 76px 20px #4a4a4a, 80px 20px #333333, 84px 20px #ffd699, 88px 20px #ffd699, 92px 20px #ffd699, 96px 20px #e0e0e0, 100px 20px #e0e0e0,
      /* Glasses and nose - Row 6 */
      24px 24px #e0e0e0, 28px 24px #ffd699, 32px 24px #ffd699, 36px 24px #333333, 40px 24px #333333, 44px 24px #87ceeb, 48px 24px #87ceeb, 52px 24px #87ceeb, 56px 24px #333333, 60px 24px #ffd699, 64px 24px #333333, 68px 24px #87ceeb, 72px 24px #87ceeb, 76px 24px #87ceeb, 80px 24px #333333, 84px 24px #ffd699, 88px 24px #ffd699, 92px 24px #ffd699, 96px 24px #e0e0e0, 100px 24px #e0e0e0,
      /* Nose and cheeks - Row 7 */
      24px 28px #e0e0e0, 28px 28px #ffd699, 32px 28px #ffd699, 36px 28px #ffd699, 40px 28px #ffd699, 44px 28px #ffd699, 48px 28px #e8b89d, 52px 28px #e8b89d, 56px 28px #ffd699, 60px 28px #ffd699, 64px 28px #ffd699, 68px 28px #ffd699, 72px 28px #ffd699, 76px 28px #ffd699, 80px 28px #ffd699, 84px 28px #ffd699, 88px 28px #ffd699, 92px 28px #ffd699, 96px 28px #e0e0e0, 100px 28px #e0e0e0,
      /* Smile - Row 8 */
      24px 32px #e0e0e0, 28px 32px #ffd699, 32px 32px #ffd699, 36px 32px #ffd699, 40px 32px #ffd699, 44px 32px #ffd699, 48px 32px #ffd699, 52px 32px #ff6b6b, 56px 32px #ff6b6b, 60px 32px #ff6b6b, 64px 32px #ffd699, 68px 32px #ffd699, 72px 32px #ffd699, 76px 32px #ffd699, 80px 32px #ffd699, 84px 32px #ffd699, 88px 32px #ffd699, 92px 32px #ffd699, 96px 32px #e0e0e0, 100px 32px #e0e0e0,
      /* Chin and neck - Row 9 */
      24px 36px #e0e0e0, 28px 36px #ffd699, 32px 36px #ffd699, 36px 36px #ffd699, 40px 36px #ffd699, 44px 36px #ffd699, 48px 36px #ffd699, 52px 36px #ffd699, 56px 36px #ffd699, 60px 36px #ffd699, 64px 36px #ffd699, 68px 36px #ffd699, 72px 36px #ffd699, 76px 36px #ffd699, 80px 36px #ffd699, 84px 36px #ffd699, 88px 36px #ffd699, 92px 36px #ffd699, 96px 36px #e0e0e0, 100px 36px #e0e0e0,
      /* Neck and collar - Row 10 */
      28px 40px #ffd699, 32px 40px #ffd699, 36px 40px #ffd699, 40px 40px #ffd699, 44px 40px #ffd699, 48px 40px #ffffff, 52px 40px #ffffff, 56px 40px #ffffff, 60px 40px #ffffff, 64px 40px #ffffff, 68px 40px #ffffff, 72px 40px #ffffff, 76px 40px #ffffff, 80px 40px #ffd699, 84px 40px #ffd699, 88px 40px #ffd699, 92px 40px #ffd699, 96px 40px #e0e0e0,
      /* Tweed jacket body - Row 11 */
      20px 44px #8b4513, 24px 44px #8b4513, 28px 44px #8b4513, 32px 44px #d2691e, 36px 44px #d2691e, 40px 44px #ffffff, 44px 44px #ffffff, 48px 44px #d2691e, 52px 44px #d2691e, 56px 44px #d2691e, 60px 44px #d2691e, 64px 44px #d2691e, 68px 44px #d2691e, 72px 44px #ffffff, 76px 44px #ffffff, 80px 44px #d2691e, 84px 44px #d2691e, 88px 44px #d2691e, 92px 44px #8b4513, 96px 44px #8b4513, 100px 44px #8b4513,
      /* Tweed jacket body - Row 12 */
      16px 48px #8b4513, 20px 48px #8b4513, 24px 48px #8b4513, 28px 48px #d2691e, 32px 48px #d2691e, 36px 48px #d2691e, 40px 48px #d2691e, 44px 48px #d2691e, 48px 48px #d2691e, 52px 48px #d2691e, 56px 48px #d2691e, 60px 48px #d2691e, 64px 48px #d2691e, 68px 48px #d2691e, 72px 48px #d2691e, 76px 48px #d2691e, 80px 48px #d2691e, 84px 48px #d2691e, 88px 48px #d2691e, 92px 48px #8b4513, 96px 48px #8b4513, 100px 48px #8b4513, 104px 48px #8b4513,
      /* Tweed jacket body - Row 13 */
      12px 52px #8b4513, 16px 52px #8b4513, 20px 52px #8b4513, 24px 52px #8b4513, 28px 52px #d2691e, 32px 52px #d2691e, 36px 52px #cd853f, 40px 52px #cd853f, 44px 52px #cd853f, 48px 52px #cd853f, 52px 52px #cd853f, 56px 52px #cd853f, 60px 52px #cd853f, 64px 52px #cd853f, 68px 52px #cd853f, 72px 52px #cd853f, 76px 52px #cd853f, 80px 52px #d2691e, 84px 52px #d2691e, 88px 52px #8b4513, 92px 52px #8b4513, 96px 52px #8b4513, 100px 52px #8b4513, 104px 52px #8b4513, 108px 52px #8b4513,
      /* Tweed jacket body - Row 14 */
      12px 56px #8b4513, 16px 56px #8b4513, 20px 56px #8b4513, 24px 56px #8b4513, 28px 56px #d2691e, 32px 56px #d2691e, 36px 56px #cd853f, 40px 56px #cd853f, 44px 56px #cd853f, 48px 56px #cd853f, 52px 56px #cd853f, 56px 56px #cd853f, 60px 56px #cd853f, 64px 56px #cd853f, 68px 56px #cd853f, 72px 56px #cd853f, 76px 56px #cd853f, 80px 56px #d2691e, 84px 56px #d2691e, 88px 56px #8b4513, 92px 56px #8b4513, 96px 56px #8b4513, 100px 56px #8b4513, 104px 56px #8b4513, 108px 56px #8b4513,
      /* Tweed jacket bottom - Row 15 */
      12px 60px #8b4513, 16px 60px #8b4513, 20px 60px #8b4513, 24px 60px #8b4513, 28px 60px #8b4513, 32px 60px #d2691e, 36px 60px #d2691e, 40px 60px #d2691e, 44px 60px #d2691e, 48px 60px #d2691e, 52px 60px #d2691e, 56px 60px #d2691e, 60px 60px #d2691e, 64px 60px #d2691e, 68px 60px #d2691e, 72px 60px #d2691e, 76px 60px #d2691e, 80px 60px #8b4513, 84px 60px #8b4513, 88px 60px #8b4513, 92px 60px #8b4513, 96px 60px #8b4513, 100px 60px #8b4513, 104px 60px #8b4513, 108px 60px #8b4513,
      /* Left arm standing - Row 11 */
      8px 44px #8b4513, 12px 44px #d2691e, 16px 44px #d2691e,
      /* Left arm standing - Row 12 */
      4px 48px #8b4513, 8px 48px #d2691e, 12px 48px #d2691e,
      /* Left arm standing - Row 13 */
      4px 52px #8b4513, 8px 52px #d2691e,
      /* Left arm standing - Row 14 */
      4px 56px #8b4513, 8px 56px #8b4513,
      /* Right arm WAVING - raised up */
      100px 40px #8b4513,
      104px 36px #d2691e, 108px 36px #d2691e,
      108px 32px #d2691e, 112px 32px #8b4513,
      112px 28px #d2691e, 116px 28px #8b4513,
      116px 24px #8b4513;
  }
}

@keyframes professor-face {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1px);
  }
}

/* Demo styles */
.professor-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 200px;
}

.professor-demo h2 {
  color: white;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  text-align: center;
  margin: 0;
  text-shadow: 2px 2px 0 #000;
}

.professor-demo-container {
  display: flex;
  gap: 40px;
  align-items: center;
}

.professor-label {
  color: white;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}

/* Standing variant */
.professor-sprite.standing {
  animation: none;
}

.professor-sprite.standing::before {
  animation: none;
}

/* Continuous waving variant */
.professor-sprite.continuous-wave::before {
  animation: professor-wave 1s ease-in-out infinite;
}

@keyframes professor-wave-continuous {
  0%, 40%, 100% {
    /* Standing */
  }
  20%, 60% {
    /* Waving arm raised */
  }
}