/* "Живая вода" Ti — тихая непрерывная рябь в зоне реальной воды на
   фото + редкие самопроизвольные круги. Не привязана ни к каким
   событиям (переходам, кликам) — просто зацикленная CSS/SVG-анимация,
   которая работает всегда, независимо от навигации. Геометрия воды
   (высота зоны, маска) отличается на каждой странице под конкретное
   фото — задаётся локальными переменными в CSS самой страницы,
   значения ниже — просто разумные умолчания. */

.waterRipple {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--water-height, 35%);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .6) var(--water-mask-soft, 20%),
    black var(--water-mask-full, 40%)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, .6) var(--water-mask-soft, 20%),
    black var(--water-mask-full, 40%)
  );
}

.waterRipple__img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 250%;
  object-fit: cover;
  object-position: center bottom;
  filter: url(#waterRippleFilter);
}

.waterRipple__ring {
  position: absolute;
  left: var(--ripple1-x, 28%);
  bottom: var(--ripple1-y, 12%);
  width: 5vw;
  height: 5vw;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  transform: translate(-50%, 50%) scale(.2);
  opacity: 0;
  filter: url(#waterRippleFilter);
  animation: waterRippleRing 21s ease-out infinite;
}

.waterRipple__ring--2 {
  left: var(--ripple2-x, 68%);
  bottom: var(--ripple2-y, 8%);
  width: 4vw;
  height: 4vw;
  min-width: 26px;
  min-height: 26px;
  animation-duration: 17s;
  animation-delay: 6s;
}

@keyframes waterRippleRing {
  0%, 87% { opacity: 0; transform: translate(-50%, 50%) scale(.2); }
  90% { opacity: .45; }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(7); }
}

@media (prefers-reduced-motion: reduce) {
  .waterRipple__img { filter: none; }
  .waterRipple__ring,
  .waterRipple__ring--2 { display: none; }
}