/* ======================================================
  CAUTION: Applying these animations to everything can 
  be overwhelming for users and may impact performance.
  It's a good idea to pick and choose specific animations
  for key elements rather than using them all at once.
  ======================================================
*/

/* Define a subtle fade-in animation for most elements */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Define a "pop-in" animation for a more dramatic entrance */
@keyframes popIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Define a "slide-up" animation for cards and blocks */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Define a subtle pulse effect for buttons on hover */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* --------------------
  Apply the Animations
-------------------- */

/* Apply a fade-in and slide-up to card-like elements.
   The `forwards` value keeps the animation's final state.
   The `var(--animation-delay, 0s)` allows for staggering.
*/
.service-card-grid, .ui-tax, .booking-item {
  animation: slideUp 0.6s ease-out forwards;
  opacity: 0;
  animation-delay: var(--animation-delay, 0s);
}

/* Use a "pop-in" animation for all headings */
h1, h2, h3, h4, h5, h6 {
  animation: popIn 0.5s ease-out;
}

/* Apply a pulse effect to all buttons on hover */
button:hover, .btn:hover {
  /* Added new properties to change color and position */
  transform: translateY(-2px);
  background-color: #2a6fdb; /* Example color, you can change this */
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  animation: pulse 1s ease-in-out infinite;
}

/* Add a fade-in to the page header or main title section */
.services__header {
  animation: fadeIn 1s ease-in-out;
}

/* Add a fade-in to the footer for a smooth entrance */
.footer {
  animation: fadeIn 1s ease-in-out 0.5s forwards;
  opacity: 0;
}