.button {
  box-shadow: inset 0 1px #f3cfb947, inset 0 -2px #15070f6b, 0 3px 10px #2f122424;
}

.button::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #18071066, transparent 10%, transparent 87%, #18071070),
              linear-gradient(180deg, #ffead630, transparent 24%, transparent 76%, #20071364);
  pointer-events: none;
  content: "";
}

.button-liquid {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateY(105%);
  transition: transform .62s cubic-bezier(.18,.72,.28,1);
}

.button:is(:hover,:focus-visible,:active) .button-liquid {
  transform: none;
}

.wine-depth { fill: url(#wine-back); }
.wine-body { fill: url(#wine-volume); }
.wine-meniscus { fill: url(#wine-top); }
.wine-gloss { fill: url(#wine-reflection); }
.wine-rim {
  fill: none;
  stroke: #f2a0a3;
  stroke-opacity: .8;
  stroke-width: .85;
  vector-effect: non-scaling-stroke;
}

.button-compact { min-height: 40px; }
.button-compact .arrow { width: 38px; min-height: 38px; }
.alba-copy .button,.atlas-footer .button { --action-edge: #704d49; }
.button .arrow { border-left-color: #f9e5db69; }

.wine-splash {
  position: fixed;
  z-index: 12;
  pointer-events: none;
}

.wine-splash i {
  position: absolute;
  left: calc(var(--drop-size) / -2);
  top: calc(var(--drop-size) / -2);
  width: var(--drop-size);
  height: calc(var(--drop-size) * 1.45);
  border-radius: 65% 35% 56% 44%;
  background: radial-gradient(ellipse at 33% 27%, #f9b5b8 0%, #d26b80 14%, #a22c4a 40%, #570b24 75%, #2c0717 100%);
  box-shadow: 0 1px 2px #3b0c2b58;
  animation: wine-spill 500ms var(--drop-delay) both;
}

@keyframes wine-spill {
  0% { opacity: 0; transform: translate(0, 0) scale(.34) rotate(-30deg); animation-timing-function: cubic-bezier(.19,.62,.36,1); }
  12% { opacity: 1; }
  48% { opacity: 1; transform: translate(calc(var(--drift) * .6), var(--rise)) scale(1) rotate(25deg); animation-timing-function: cubic-bezier(.53,.01,.9,.65); }
  80% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--drift), 30px) scale(.63) rotate(66deg); }
}

@media (hover:none) {
  .button:not(:focus-visible):not(:active) .button-liquid { transform: translateY(105%); }
}

@media (prefers-reduced-motion:reduce), (forced-colors:active) {
  .button-liquid,.wine-splash { display: none; }
  .button:is(:hover,:focus-visible,:active) { background: var(--wine); }
}