/* Wave layers hidden until scroll-triggered reveal fires */
.bg-wave {
  opacity: 0;
}

.hero-bg {
  position: relative;
  overflow: hidden;
}

/* ⭐ gradient layer (safe from Elementor) */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background: linear-gradient(
    60deg,
    #3cc1de 0%,
    #3cc1de 28%,
    #f4d06f 34%,
    #f99211 44%,
    #f88d73 58%,
    #f8c186 70%,
    #eef6d7 84%,
    #47b4d5 94%,
    #3cc1de 100%
  );

  background-size: 300% 300%;
  background-position: var(--bgPos, 0%) 50%;
}

/* content above gradient */
.hero-bg > * {
  position: relative;
  z-index: 1;
}

/* Ripple image — ensure dimensions so WebGL canvas has something to fill */
.ripple-image {
  width: 100% !important;
  min-height: 400px;
}

/* CSS fallback when WebGL/jquery.ripples is unavailable */
@keyframes waterDrift {
  0%   { background-position: 0% 50%; transform: scale(1); }
  25%  { background-position: 8% 52%; }
  50%  { background-position: 4% 48%; transform: scale(1.01); }
  75%  { background-position: -4% 51%; }
  100% { background-position: 0% 50%; transform: scale(1); }
}
.ripple-image--css-anim {
  animation: waterDrift 6s ease-in-out infinite;
  background-size: 110% 110% !important;
}