.bottle {
  position: relative;
  width: var(--bottle-size, 140px);
  height: calc(var(--bottle-size, 140px) * 1.4);
  display: inline-block;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
}

.bottle--lg { --bottle-size: 200px; }
.bottle--xl { --bottle-size: 280px; }
.bottle--sm { --bottle-size: 80px; }

.bottle svg { width: 100%; height: 100%; }

.bottle__water {
  transform-origin: center;
  animation: waterSway 6s ease-in-out infinite;
}

.bottle--hover:hover .bottle__water { animation-duration: 3s; }

@keyframes waterSway {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50%      { transform: translateX(1%) scaleY(0.99); }
}

.bubble {
  position: absolute;
  background: radial-gradient(circle at 30% 30%, var(--c-glass-hi), var(--c-glass));
  border-radius: 50%;
  border: 1px solid var(--c-glass-edge);
  pointer-events: none;
  animation: bubbleRise var(--bubble-dur, 8s) linear infinite;
  animation-delay: var(--bubble-delay, 0s);
  opacity: 0;
}

@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(0.4); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(calc(-1 * var(--bottle-size, 140px) * 1.4)) scale(1); opacity: 0; }
}

.wave-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.wave-bg svg {
  position: absolute;
  bottom: -10%;
  width: 200%;
  height: auto;
  opacity: 0.15;
  animation: waveDrift 20s linear infinite;
}

.wave-bg svg:nth-child(2) {
  bottom: -20%;
  opacity: 0.1;
  animation-duration: 30s;
  animation-direction: reverse;
}

@keyframes waveDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}