/* =========================================================
   GLOBAL UTILITIES
========================================================= */

/* Blur effect */
.backdrop-blur {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important; /* Safari support */
    border-radius: 10px !important;
}

/* Bounce animation */
@keyframes custom-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

.bounce-effect {
  display: inline-block !important;
  animation: custom-bounce 1.5s infinite !important;
}

/* Gradient Overlay bottom to top */
.gradient-overlay {
    position: relative !important;
    overflow: hidden !important;
}

.gradient-overlay::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    
    background: -webkit-linear-gradient(0deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.4) 100%);
    background: -moz-linear-gradient(0deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.4) 100%);
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.4) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr="#000000",
      endColorstr="#000000",
      GradientType=0
    );
    
    pointer-events: none !important; /* important! */
}

/* To ensure that the content remains above the overlay */
.gradient-overlay > * {
    position: relative !important;
    z-index: 2 !important;
}