/* =============================================================================
   ADHDity GNOME ANIMATION CSS
   Gnome appears bottom-right and animates mouth when talking
   ============================================================================= */

/* Gnome container */
.adhdity-gnome-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 220px;
  height: 220px;
  z-index: 1000;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Show gnome when listening */
.adhdity-gnome-container.is-speaking {
  opacity: 1;
  transform: scale(1);
}

/* Gnome image */
.adhdity-gnome-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mouth animation (talking) */
.adhdity-gnome-mouth {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  animation: none;
}

/* Mouth talking animation */
@keyframes adhdity-gnome-talk {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.3; }
  50% { opacity: 0.6; }
  75% { opacity: 0.3; }
}

.adhdity-gnome-mouth.is-talking {
  animation: adhdity-gnome-talk 23s infinite;
}

/* On mobile, make smaller */
@media (max-width: 600px) {
  .adhdity-gnome-container {
    width: 180px;
    height: 180px;
    bottom: 10px;
    right: 10px;
  }
}