/* Efectos acuáticos para la fotografía original del producto. */
.visual-card {
  background: #050608;
  isolation: isolate;
}

.visual-card::after { display: none; }

.visual-card img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  mix-blend-mode: normal;
  filter: none;
}

.product-pill,
.volume-mark { z-index: 5; }

.bubble-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble-field i {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.12) 42%, rgba(91,190,218,.14) 69%, rgba(255,255,255,.55));
  box-shadow: inset 0 0 8px rgba(255,255,255,.7), 0 4px 13px rgba(51,135,159,.14);
  animation: bubble-float 5.5s ease-in-out infinite;
}

.bubble-field i:nth-child(1) { width: 42px; height: 42px; left: 8%; bottom: 17%; animation-delay: -1.2s; }
.bubble-field i:nth-child(2) { width: 22px; height: 22px; left: 17%; bottom: 38%; animation-delay: -3.8s; }
.bubble-field i:nth-child(3) { width: 58px; height: 58px; right: 7%; bottom: 25%; animation-delay: -2.6s; }
.bubble-field i:nth-child(4) { width: 27px; height: 27px; right: 18%; top: 27%; animation-delay: -.6s; }
.bubble-field i:nth-child(5) { width: 15px; height: 15px; left: 28%; top: 18%; animation-delay: -4.4s; }
.bubble-field i:nth-child(6) { width: 35px; height: 35px; right: 27%; top: 12%; animation-delay: -1.9s; }
.bubble-field i:nth-child(7) { width: 18px; height: 18px; left: 11%; top: 45%; animation-delay: -3.1s; }
.bubble-field i:nth-child(8) { width: 13px; height: 13px; right: 11%; top: 49%; animation-delay: -4.9s; }

.foam-layer {
  position: absolute;
  z-index: 4;
  left: -3%;
  right: -3%;
  bottom: 0;
  height: 118px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .74;
  animation: foam-drift 5.5s ease-in-out infinite alternate;
}

.foam-layer::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 76px;
  background:
    radial-gradient(ellipse at 8% 79%, rgba(255,255,255,.52) 0 9%, transparent 10%),
    radial-gradient(ellipse at 25% 88%, rgba(255,255,255,.38) 0 12%, transparent 13%),
    radial-gradient(ellipse at 49% 82%, rgba(255,255,255,.46) 0 10%, transparent 11%),
    radial-gradient(ellipse at 73% 91%, rgba(255,255,255,.42) 0 13%, transparent 14%),
    radial-gradient(ellipse at 94% 78%, rgba(255,255,255,.48) 0 9%, transparent 10%),
    linear-gradient(180deg, transparent 5%, rgba(239,252,255,.08) 48%, rgba(239,252,255,.25) 100%);
  filter: blur(.4px);
}

.foam-layer i {
  position: absolute;
  bottom: 22px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(225,247,251,.2) 58%, transparent 72%);
  box-shadow: inset -1px -2px 5px rgba(111,197,216,.16);
  animation: foam-pop 3.8s ease-in-out infinite;
}

.foam-layer i:nth-child(1) { width: 12px; height: 12px; left: 5%; animation-delay: -.5s; }
.foam-layer i:nth-child(2) { width: 21px; height: 21px; left: 18%; bottom: 34px; animation-delay: -2.2s; }
.foam-layer i:nth-child(3) { width: 9px; height: 9px; left: 36%; bottom: 17px; animation-delay: -1.1s; }
.foam-layer i:nth-child(4) { width: 24px; height: 24px; left: 49%; bottom: 28px; animation-delay: -3s; }
.foam-layer i:nth-child(5) { width: 14px; height: 14px; right: 28%; bottom: 38px; animation-delay: -1.8s; }
.foam-layer i:nth-child(6) { width: 19px; height: 19px; right: 12%; bottom: 19px; animation-delay: -2.7s; }
.foam-layer i:nth-child(7) { width: 10px; height: 10px; right: 3%; bottom: 43px; animation-delay: -.9s; }

@keyframes bubble-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: .65; }
  50% { transform: translateY(-18px) scale(1.06); opacity: 1; }
}

@keyframes foam-drift {
  from { transform: translate3d(-1%, 2px, 0) scaleY(.96); opacity: .58; }
  to { transform: translate3d(1%, -2px, 0) scaleY(1.03); opacity: .8; }
}

@keyframes foam-pop {
  0%, 100% { transform: translateY(4px) scale(.88); opacity: .35; }
  50% { transform: translateY(-7px) scale(1.08); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-field i { animation: none; }
  .foam-layer { animation: none; }
  .visual-card img { transition: none; }
}

@media (max-width: 600px) {
  .visual-card img { height: 100%; object-position: 74% center; }
  .foam-layer { bottom: 0; height: 92px; }
}