CSS Transitions & Animations

.btn {
  background: #6c63ff;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;

  /* transition: property duration timing-function delay */
  transition: background 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background: #5048e5;   /* smoothly animates over 0.3s */
  transform: translateY(-2px); /* lifts up on hover */
}

/* Transition everything */
.card { transition: all 0.3s ease; }

.box {
  transform: translateX(50px);   /* move right 50px */
  transform: translateY(-20px);  /* move up 20px */
  transform: translate(50px, -20px); /* move both */

  transform: scale(1.1);         /* 10% bigger */
  transform: scale(0.9);         /* 10% smaller */

  transform: rotate(45deg);      /* rotate 45 degrees */
  transform: rotate(-90deg);     /* counter-clockwise */

  transform: skew(10deg, 5deg);  /* skew/tilt */

  /* Combine multiple transforms */
  transform: translateY(-4px) scale(1.02);
}

/* Define the animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Apply the animation */
.hero-title {
  /* animation: name duration timing-function delay iterations direction */
  animation: fadeIn 0.6s ease-out forwards;
}

.loader {
  animation: spin 1s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}