/* Specific for scroll-down indicator bounce animation */
@keyframes bounce-down {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-8px);
  }

  60% {
    transform: translateY(-4px);
  }
}

.scroll-bounce {
  animation: bounce-down 2s infinite;
}

/* Custom styling for hero image decoration for a layered effect */
.hero-image-wrap {
  position: relative;
  z-index: 1;
  /* Ensure image is above deco */
}

.hero-deco {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100%;
  height: 100%;
  background-color: #bfdbfe;
  /* Light blue, similar to bg-blue-200 */
  border-radius: 1.5rem;
  /* rounded-3xl */
  z-index: -1;
  transform: rotate(5deg);
  opacity: 0.7;
}

@media (min-width: 1024px) {
  /* Adjust for larger screens */
  .hero-deco {
    top: -30px;
    right: -30px;
    width: calc(100% + 60px);
    /* Extend deco a bit */
    height: calc(100% + 60px);
  }
}

/* Optional: background pattern for hero section */
.bg-hero-pattern {
  background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M0 0h30v30H0V0zm10 10h10v10H10V10zm10 10h10v10H20V20zm-10 10h10v10H10V30zM30 30h30v30H30V30zm10 10h10v10H40V40z" fill="%232563EB" opacity="0.1"/%3E%3Cpath d="M10 0h10v10H10V0zM40 0h10v10H40V0zM0 30h10v10H0V30zM20 30h10v10H20V30zM40 30h10v10H40V30z" fill="%239C92AC" opacity="0.1"/%3E%3C/g%3E%3C/svg%3E');
}

@keyframes pulse-slow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.5;
  }
}

.animate-pulse-slow {
  animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes bounce-subtle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

.animate-bounce-subtle {
  animation: bounce-subtle 1.5s infinite;
}