.drink.with-cocktail {
  min-height: 280px;
  overflow: visible;
  isolation: isolate;
  padding-right: 43%;
  background:
    radial-gradient(circle at 82% 55%, #f3126b30 0, transparent 37%),
    #100b0e;
}

.drink.featured.with-cocktail span,
.drink.featured.with-cocktail p {
  color: #aaa1a5;
}

.drink.featured.with-cocktail h3,
.drink.featured.with-cocktail b {
  color: var(--pink);
}

.drink.with-cocktail h3 {
  padding-right: 0;
  position: relative;
  z-index: 2;
}

.drink.with-cocktail p {
  position: relative;
  z-index: 2;
}

.cocktail-float {
  position: absolute;
  z-index: 1;
  right: -1%;
  bottom: -8%;
  width: 49%;
  height: 108%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 18px 18px #0009) drop-shadow(0 0 18px #f3126b35);
  animation: starry-float 4.8s ease-in-out infinite;
  transform-origin: 52% 80%;
}

.drink.with-cocktail:hover .cocktail-float {
  animation-duration: 3.5s;
}

.cocktail-float.heart-float {
  width: 52%;
  height: 102%;
  right: -2%;
  bottom: -3%;
  animation-name: heart-float;
  transform-origin: 50% 65%;
  filter: drop-shadow(0 18px 18px #000a) drop-shadow(0 0 20px #ff173e35);
}

.cocktail-float.matcha-float {
  width: 52%;
  height: 86%;
  right: -1%;
  bottom: 3%;
  animation-name: matcha-float;
  transform-origin: 50% 72%;
  filter: drop-shadow(0 18px 18px #0009) drop-shadow(0 0 18px #b1c94a30);
}

.cocktail-float.fresa-float {
  width: 53%;
  height: 91%;
  right: -2%;
  bottom: 1%;
  animation-name: fresa-float;
  transform-origin: 50% 72%;
  filter: drop-shadow(0 18px 18px #0009) drop-shadow(0 0 19px #ff8b8635);
}

.cocktail-float.sex-drugs-float {
  width: 49%;
  height: 106%;
  right: -1%;
  bottom: -7%;
  animation-name: sex-drugs-float;
  transform-origin: 50% 78%;
  filter: drop-shadow(0 18px 18px #000a) drop-shadow(0 0 20px #f3126b35);
}

.cocktail-float.kiss-float {
  width: 54%;
  height: 88%;
  right: -2%;
  bottom: 3%;
  animation-name: kiss-float;
  transform-origin: 50% 70%;
  filter: drop-shadow(0 18px 18px #0009) drop-shadow(0 0 19px #f3126b3d);
}

.cocktail-float.over-float {
  width: 57%;
  height: 94%;
  right: -5%;
  bottom: 0;
  animation-name: over-float;
  transform-origin: 52% 72%;
  filter: drop-shadow(0 18px 18px #000b) drop-shadow(0 0 20px #f3126b40);
}

.cocktail-float.eve-float {
  width: 45%;
  height: 108%;
  right: 1%;
  bottom: -7%;
  animation-name: eve-float;
  transform-origin: 50% 81%;
  filter: drop-shadow(0 18px 18px #0009) drop-shadow(0 0 18px #f7b9382b);
}

.cocktail-float.flower-float {
  width: 51%;
  height: 99%;
  right: -1%;
  bottom: -2%;
  animation-name: flower-float;
  transform-origin: 50% 73%;
  filter: drop-shadow(0 18px 18px #000a) drop-shadow(0 0 20px #ffd8142d);
}

@keyframes starry-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.5deg); }
  50% { transform: translate3d(-5px, -12px, 0) rotate(1.5deg); }
}

@keyframes heart-float {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(1.2deg) scale(1); }
  50% { transform: translate3d(4px, -10px, 0) rotate(-1.2deg) scale(1.018); }
}

@keyframes matcha-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.8deg); }
  50% { transform: translate3d(-3px, -9px, 0) rotate(.8deg); }
}

@keyframes fresa-float {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(.9deg); }
  50% { transform: translate3d(3px, -9px, 0) rotate(-.9deg); }
}

@keyframes sex-drugs-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.1deg); }
  50% { transform: translate3d(-4px, -11px, 0) rotate(1.1deg); }
}

@keyframes kiss-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.7deg); }
  50% { transform: translate3d(-3px, -9px, 0) rotate(.7deg) scale(1.012); }
}

@keyframes over-float {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(1deg); }
  50% { transform: translate3d(4px, -10px, 0) rotate(-1deg); }
}

@keyframes eve-float {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(-1deg); }
  50% { transform: translate3d(-3px, -11px, 0) rotate(1deg); }
}

@keyframes flower-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(.8deg); }
  50% { transform: translate3d(4px, -9px, 0) rotate(-.8deg) scale(1.012); }
}

@media (max-width: 850px) {
  .drink.with-cocktail { min-height: 300px; }
  .cocktail-float { width: 46%; right: 1%; }
  .cocktail-float.heart-float { width: 51%; right: -2%; }
  .cocktail-float.matcha-float { width: 53%; right: -2%; }
  .cocktail-float.fresa-float { width: 54%; right: -2%; }
  .cocktail-float.sex-drugs-float { width: 48%; right: -1%; }
  .cocktail-float.kiss-float { width: 54%; right: -2%; }
  .cocktail-float.over-float { width: 57%; right: -5%; }
  .cocktail-float.eve-float { width: 44%; right: 1%; }
  .cocktail-float.flower-float { width: 51%; right: -1%; }
}

@media (max-width: 560px) {
  .drink.with-cocktail {
    min-height: 285px;
    padding-right: 46%;
  }
  .cocktail-float {
    width: 45%;
    height: 105%;
    right: 0;
    bottom: -5%;
  }
  .cocktail-float.heart-float { width: 50%; right: -2%; }
  .cocktail-float.matcha-float { width: 52%; right: -2%; }
  .cocktail-float.fresa-float { width: 54%; right: -3%; }
  .cocktail-float.sex-drugs-float { width: 47%; right: -1%; }
  .cocktail-float.kiss-float { width: 53%; right: -2%; }
  .cocktail-float.over-float { width: 56%; right: -5%; }
  .cocktail-float.eve-float { width: 43%; right: 1%; }
  .cocktail-float.flower-float { width: 50%; right: -1%; }
}

@media (prefers-reduced-motion: reduce) {
  .cocktail-float { animation: none; }
}