#15 Animations

.button {
  background: #3b82f6;
  transform: scale(1);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

/* Move */
transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, -20px);

/* Rotate */
transform: rotate(45deg);

/* Scale */
transform: scale(1.2);     /* Enlarge 20% */
transform: scale(0.8);     /* Shrink 20% */

/* Combine */
transform: translate(-50%, -50%) rotate(45deg) scale(1.1);

/* Transform origin */
transform-origin: center;  /* Default */
transform-origin: top left;

@keyframes slideIn {
  0%   { opacity: 0; transform: translateX(-100px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.slide-in {
  animation: slideIn 0.5s ease-out forwards;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animated {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.2s;
  animation-iteration-count: 1;       /* or infinite */
  animation-direction: normal;         /* or reverse, alternate */
  animation-fill-mode: forwards;       /* Keep end state */

  /* Shorthand */
  animation: fadeIn 0.5s ease-out 0.2s 1 normal forwards;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}