/* Water waves container */
.water-waves {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 15vh;
  min-height: 50px;
  max-height: 150px;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 768px) {
  .water-waves {
    height: 10vh;
    min-height: 40px;
    max-height: 80px;
  }
}

.water-waves .wave-1 {
  animation: wave-anim 7s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;
  animation-delay: -2s;
  fill: var(--page-bg);
  opacity: 0.25;
}
.water-waves .wave-2 {
  animation: wave-anim 10s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;
  animation-delay: -3s;
  fill: var(--page-bg);
  opacity: 0.5;
}
.water-waves .wave-3 {
  animation: wave-anim 13s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;
  animation-delay: -4s;
  fill: var(--page-bg);
  opacity: 0.65;
}
.water-waves .wave-4 {
  animation: wave-anim 20s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;
  animation-delay: -5s;
  fill: var(--page-bg);
  opacity: 0.75;
}

@keyframes wave-anim {
  0% { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

/* Gradient transition */
#banner-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--banner-gradient-height, 8vh);
  background: linear-gradient(to bottom, transparent, var(--page-bg));
  z-index: 1;
  pointer-events: none;
}

/* Hide waves/gradient when disabled */
html[data-waves-enabled="false"] .water-waves { display: none; }
html[data-gradient-enabled="false"] #banner-gradient { display: none; }
html[data-banner-title-enabled="false"] .home-text-title,
html[data-banner-title-enabled="false"] .home-text-subtitle { display: none; }

/* Hide waves/gradient in overlay and none wallpaper modes */
.wallpaper-overlay .water-waves,
.no-banner-layout .water-waves { display: none; }
.wallpaper-overlay #banner-gradient,
.no-banner-layout #banner-gradient { display: none; }

/* Banner carousel crossfade */
.banner-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.banner-carousel-slide.active { opacity: 1; }