/* Product 29: animated digital water beneath the drain-valve faucet. */
body.product-id-29 .product-cover {
  position: relative;
  overflow: hidden;
}

body.product-id-29 .product-cover::before {
  position: absolute;
  z-index: 3;
  top: 77.5%;
  left: 63.8%;
  width: 6.7%;
  height: 9%;
  content: "";
  pointer-events: none;
  opacity: .84;
  border-radius: 38% 38% 46% 46%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(196, 255, 255, .95) 0%,
      rgba(64, 247, 255, .9) 4%,
      rgba(64, 247, 255, .2) 7%,
      transparent 11%,
      transparent 17%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(64, 247, 255, .25) 16%,
      rgba(64, 247, 255, .92) 37%,
      rgba(228, 255, 255, .98) 49%,
      rgba(64, 247, 255, .75) 62%,
      rgba(17, 191, 239, .2) 82%,
      transparent 100%
    );
  background-size: 100% 44%, 100% 100%;
  background-position: 0 -44%, 0 0;
  clip-path: polygon(
    25% 0,
    30% .8%,
    35% 2.5%,
    40% 4.2%,
    45% 5.6%,
    50% 6.2%,
    55% 5.6%,
    60% 4.2%,
    65% 2.5%,
    70% .8%,
    75% 0,
    82% 100%,
    18% 100%
  );
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 25%, #000 75%, transparent 97%);
  mask-image: linear-gradient(90deg, transparent 3%, #000 25%, #000 75%, transparent 97%);
  filter: blur(.75px) drop-shadow(0 0 4px rgba(64, 247, 255, .9)) drop-shadow(0 0 9px rgba(64, 247, 255, .45));
  mix-blend-mode: screen;
  animation: ms-digital-water-flow 1.4s linear infinite;
}

body.product-id-29 .product-cover::after {
  position: absolute;
  z-index: 4;
  top: 82.2%;
  left: 60.9%;
  width: 13%;
  height: 6.8%;
  content: "";
  pointer-events: none;
  opacity: .75;
  background:
    radial-gradient(ellipse at 50% 70%, transparent 0 24%, rgba(177, 255, 255, .9) 26% 29%, rgba(64, 247, 255, .34) 31% 38%, transparent 41%),
    radial-gradient(circle at 24% 56%, rgba(196, 255, 255, .95) 0 3%, rgba(64, 247, 255, .5) 4% 8%, transparent 10%),
    radial-gradient(circle at 78% 34%, rgba(196, 255, 255, .9) 0 2%, rgba(64, 247, 255, .45) 3% 7%, transparent 9%);
  filter: blur(.4px) drop-shadow(0 0 5px rgba(64, 247, 255, .72));
  mix-blend-mode: screen;
  transform-origin: 50% 70%;
  animation: ms-digital-water-splash 1.9s ease-in-out infinite;
}

@keyframes ms-digital-water-flow {
  0% {
    background-position: 0 -44%, 0 0;
    opacity: .68;
  }
  45% {
    opacity: .94;
  }
  100% {
    background-position: 0 44%, 0 0;
    opacity: .72;
  }
}

@keyframes ms-digital-water-splash {
  0%, 100% {
    opacity: .48;
    transform: scale(.88, .78);
  }
  48% {
    opacity: .88;
    transform: scale(1.04, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.product-id-29 .product-cover::before,
  body.product-id-29 .product-cover::after {
    animation: none;
  }
}