.gn-water-divider {
  --gn-divider-height: clamp(66px, 6.4vw, 76px);
  --gn-divider-space-top: clamp(17px, 2vw, 20px);
  --gn-divider-space-bottom: clamp(17px, 2vw, 20px);
  position: relative;
  display: block;
  clear: both;
  width: min(1180px, 100%);
  height: var(--gn-divider-height);
  min-height: var(--gn-divider-height);
  margin: var(--gn-divider-space-top) auto var(--gn-divider-space-bottom);
  overflow: hidden;
  isolation: isolate;
  line-height: 0;
  pointer-events: none;
}

.gn-water-divider,
.gn-water-divider *,
.gn-water-divider *::before,
.gn-water-divider *::after {
  box-sizing: border-box;
}

.gn-water-divider--height-compatta {
  --gn-divider-height: clamp(48px, 4.8vw, 58px);
}

.gn-water-divider--height-ampia {
  --gn-divider-height: clamp(88px, 8.6vw, 108px);
}

.gn-water-divider--space-top-nessuno {
  --gn-divider-space-top: 0px;
}

.gn-water-divider--space-top-piccolo {
  --gn-divider-space-top: clamp(8px, 1vw, 12px);
}

.gn-water-divider--space-top-ampio {
  --gn-divider-space-top: clamp(26px, 3.5vw, 40px);
}

.gn-water-divider--space-bottom-nessuno {
  --gn-divider-space-bottom: 0px;
}

.gn-water-divider--space-bottom-piccolo {
  --gn-divider-space-bottom: clamp(8px, 1vw, 12px);
}

.gn-water-divider--space-bottom-ampio {
  --gn-divider-space-bottom: clamp(26px, 3.5vw, 40px);
}

.gn-water-divider__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 48% 52% 46% 54% / 30% 38% 62% 70%;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(157, 232, 247, 0.25), transparent 58%),
    linear-gradient(90deg, transparent 2%, rgba(239, 252, 255, 0.44) 48%, transparent 98%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.gn-water-divider__canvas::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 18%;
  left: 14%;
  width: 72%;
  height: 48%;
  border-top: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  opacity: 0.72;
  filter: blur(0.2px);
}

.gn-water-divider__canvas::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 12%;
  bottom: 16%;
  left: 12%;
  height: 30%;
  border-radius: 50%;
  background: rgba(49, 137, 237, 0.1);
  filter: blur(18px);
}

.gn-water-divider__glow {
  position: absolute;
  z-index: 0;
  top: 14%;
  left: 50%;
  width: 72%;
  height: 64%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.62),
    0 20px 52px rgba(49, 137, 237, 0.08);
  transform: translateX(-50%);
  filter: blur(7px);
}

.gn-water-divider__waves {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gn-water-divider__layer,
.gn-water-divider__shine {
  transform-box: view-box;
  transform-origin: center;
  will-change: transform;
}

.gn-water-divider__layer--back {
  opacity: 0.74;
}

.gn-water-divider__layer--middle {
  opacity: 0.8;
}

.gn-water-divider__layer--front {
  opacity: 0.82;
}

.gn-water-divider__shine {
  opacity: 0.72;
}

.gn-water-divider--animated .gn-water-divider__layer--back {
  animation: gn-water-divider-drift 28s linear infinite;
}

.gn-water-divider--animated .gn-water-divider__layer--middle {
  animation: gn-water-divider-drift 22s linear infinite reverse;
}

.gn-water-divider--animated .gn-water-divider__layer--front {
  animation: gn-water-divider-drift 18s linear infinite;
}

.gn-water-divider--animated .gn-water-divider__shine {
  animation: gn-water-divider-drift 24s linear infinite;
}

.gn-water-divider__bubble {
  position: absolute;
  z-index: 3;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 27%, rgba(255, 255, 255, 0.96) 0 12%, transparent 15%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(72, 201, 236, 0.16));
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.55),
    0 8px 20px rgba(49, 137, 237, 0.08);
}

.gn-water-divider__bubble--one {
  top: 24%;
  left: 22%;
  width: clamp(8px, 0.9vw, 13px);
  height: clamp(8px, 0.9vw, 13px);
}

.gn-water-divider__bubble--two {
  top: 12%;
  right: 28%;
  width: clamp(12px, 1.3vw, 18px);
  height: clamp(12px, 1.3vw, 18px);
}

.gn-water-divider__bubble--three {
  right: 18%;
  bottom: 20%;
  width: clamp(6px, 0.7vw, 10px);
  height: clamp(6px, 0.7vw, 10px);
}

.gn-water-divider--animated .gn-water-divider__bubble--one {
  animation: gn-water-divider-float 6.8s ease-in-out infinite;
}

.gn-water-divider--animated .gn-water-divider__bubble--two {
  animation: gn-water-divider-float 8.4s ease-in-out -2.8s infinite;
}

.gn-water-divider--animated .gn-water-divider__bubble--three {
  animation: gn-water-divider-float 5.9s ease-in-out -1.2s infinite;
}

.gn-water-divider--corrente .gn-water-divider__canvas {
  background:
    radial-gradient(ellipse at 50% 56%, rgba(72, 201, 236, 0.3), transparent 60%),
    linear-gradient(90deg, transparent 1%, rgba(223, 248, 255, 0.5) 50%, transparent 99%);
}

.gn-water-divider--corrente .gn-water-divider__layer--back {
  opacity: 0.9;
}

.gn-water-divider--corrente .gn-water-divider__layer--middle {
  opacity: 0.94;
}

.gn-water-divider--corrente .gn-water-divider__layer--front {
  opacity: 0.64;
}

.gn-water-divider--increspatura .gn-water-divider__canvas {
  background:
    radial-gradient(ellipse at 50% 62%, rgba(185, 242, 251, 0.2), transparent 54%),
    linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.5) 50%, transparent 96%);
}

.gn-water-divider--increspatura .gn-water-divider__waves {
  top: 12%;
  height: 78%;
}

.gn-water-divider--increspatura .gn-water-divider__layer--back,
.gn-water-divider--increspatura .gn-water-divider__layer--front {
  opacity: 0.42;
}

.gn-water-divider--increspatura .gn-water-divider__layer--middle {
  opacity: 0.66;
}

.gn-water-divider--reversed .gn-water-divider__waves {
  transform: scaleX(-1);
}

@keyframes gn-water-divider-drift {
  to {
    transform: translateX(-100%);
  }
}

@keyframes gn-water-divider-float {
  0%,
  100% {
    opacity: 0.64;
    transform: translate3d(0, 0, 0) scale(0.94);
  }

  50% {
    opacity: 1;
    transform: translate3d(5px, -9px, 0) scale(1.05);
  }
}

@media (max-width: 767px) {
  .gn-water-divider {
    --gn-divider-height: 68px;
    --gn-divider-space-top: 18px;
    --gn-divider-space-bottom: 18px;
    width: 100%;
  }

  .gn-water-divider--height-compatta {
    --gn-divider-height: 50px;
  }

  .gn-water-divider--height-ampia {
    --gn-divider-height: 92px;
  }

  .gn-water-divider__canvas {
    border-radius: 42% 58% 46% 54% / 38% 46% 54% 62%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }

  .gn-water-divider__bubble--one {
    left: 14%;
  }

  .gn-water-divider__bubble--two {
    right: 22%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gn-water-divider__layer,
  .gn-water-divider__shine,
  .gn-water-divider__bubble {
    animation: none !important;
  }
}