.potion { padding-bottom: 48px; }
.bottle-float { position: relative; }
.potion-name {
  position: absolute;
  top: calc(100% - 34px);
  left: 50%;
  text-align: center;
  white-space: nowrap;
  font: 15px/1.5 "Kaiti SC", STKaiti, KaiTi, "Songti SC", serif;
  color: #426f89;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%,5px);
  transition: opacity .32s ease,transform .4s ease;
}
.potion:focus-visible .potion-name,.potion[data-name-revealed] .potion-name { opacity: 1; transform: translate(-50%,0); }
@media (hover: hover) {
  .potion:hover .potion-name { opacity: 1; transform: translate(-50%,0); }
}

.cauldron { transform-origin: 54% 20%; animation: cauldron-sway 7.8s ease-in-out infinite; }
.lab-stage.is-mixing .cauldron { animation-play-state: paused; }
@keyframes cauldron-sway {
  0%,100% { transform: translate(-50%,-50%) rotate(-.9deg); }
  50% { transform: translate(-50%,-50%) rotate(.9deg); }
}
.pot-atmosphere { position: absolute; left: 54%; top: 52.5%; width: 30%; height: 0; transform: translateX(-50%); pointer-events: none; }
.pot-steam { position: absolute; inset: 0; }
.pot-steam svg {
  position: absolute;
  width: 48px;
  height: 92px;
  left: 0;
  bottom: -3px;
  fill: none;
  stroke: #a5d8eb;
  stroke-width: 5;
  stroke-linecap: round;
  filter: blur(3px);
  opacity: 0;
  animation: steam-rise 5.8s -1s ease-out infinite;
}
.pot-steam svg:nth-child(2) { left: 28%; stroke: #dfb0cf; animation-delay: -3s; animation-duration: 6.4s; }
.pot-steam svg:nth-child(3) { left: 59%; animation-delay: -4.2s; animation-duration: 5.3s; }
@keyframes steam-rise {
  0% { transform: translate(0,12px) scale(.7,.8); opacity: 0; }
  25% { opacity: .42; }
  65% { opacity: .23; }
  100% { transform: translate(10px,-58px) scale(1.25,1.1); opacity: 0; }
}
.pot-bubbles i {
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 9px;
  height: 10px;
  border: 1.3px solid #9fd3e8;
  border-radius: 48% 53% 49% 46%;
  opacity: 0;
  animation: bubble-rise 4.1s -1.2s ease-in infinite;
}
.pot-bubbles i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 2px; height: 2px; border-radius: 50%; background: #d9edf7; }
.pot-bubbles i:nth-child(2) { left: 31%; width: 6px; height: 7px; border-color: #e6a4c9; animation-duration: 3.6s; animation-delay: -2.7s; --bubble-x: -10px; }
.pot-bubbles i:nth-child(3) { left: 57%; width: 13px; height: 12px; animation-duration: 5s; animation-delay: -.4s; --bubble-x: 9px; }
.pot-bubbles i:nth-child(4) { left: 78%; width: 7px; height: 8px; animation-duration: 4.4s; animation-delay: -3.1s; --bubble-x: 13px; }
.pot-bubbles i:nth-child(5) { left: 45%; width: 5px; height: 5px; border-color: #e6a4c9; animation-duration: 3.8s; animation-delay: -1.8s; }
@keyframes bubble-rise {
  0% { transform: translate(0,3px) scale(.55); opacity: 0; }
  18% { opacity: .8; }
  75% { opacity: .55; }
  100% { transform: translate(var(--bubble-x,5px),-75px) scale(1.1); opacity: 0; }
}
.cauldron.is-brewing .pot-bubbles i { animation-duration: 1.7s; }
@media (max-width: 820px) {
  .potion { padding-bottom: 48px; }
  .potion-name { font-size: 13px; }
  .pot-steam svg { width: 32px; height: 70px; }
}
@media (min-width: 821px) and (max-height: 740px) {
  .potion-name { font-size: 13px; }
}
@media (max-height: 530px) and (orientation: landscape) {
  .potion-name { font-size: 12px; }
  .pot-steam svg { height: 55px; width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .cauldron { animation: none; }
  .potion-name { transition: none; }
  .pot-atmosphere { display: none; }
}