/* Animations for the slogan */

/* Animation for "clicks" word - button press effect */
@keyframes clickAnimation {
  0% {
    transform: scale(1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  30% {
    transform: scale(0.85);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  }
  60% {
    transform: scale(1.05);
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }
}

/* Animation for "sticks" word - plaster expanding and contracting */
@keyframes stickAnimation {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2) rotate(2deg);
    letter-spacing: 0.02em;
  }
  60% {
    transform: scale(0.95) rotate(-1deg);
    letter-spacing: -0.01em;
  }
  100% {
    transform: scale(1) rotate(0);
    letter-spacing: normal;
  }
}

/* Styling for the animated words */
.animated-word {
  display: inline-block;
  position: relative;
  transform-origin: center;
  font-weight: 700;
}

/* Initial page load animations */
.word-clicks {
  animation: clickAnimation 1.5s ease-in-out 1 0.5s backwards;
}

.word-sticks {
  animation: stickAnimation 1.8s ease-in-out 1 1s backwards;
}

/* Prevent animations from playing when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .word-clicks,
  .word-sticks {
    animation: none;
    transform: none;
  }
}