/* The library's drinks corner (public/library/drinks.js). */
.drinks { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 3rem; flex: none; }
.drinks button { font: inherit; color: inherit; cursor: pointer; }
.drinks [hidden] { display: none !important; }

.drinks__coaster {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--paper);
  border: 2px dashed color-mix(in srgb, var(--peach) 80%, var(--ink-soft));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
}
.drinks__coaster:hover { border-style: solid; }

.drinks__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 4.6rem);
  gap: 0.35rem;
  padding: 0.6rem;
  border-radius: 1.25rem;
  background: var(--paper);
  border: 2px solid var(--rule);
  box-shadow: var(--shadow);
}
@media (max-width: 26rem) { .drinks__menu { grid-template-columns: repeat(3, 4.6rem); } }
.drinks__menu button {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.2rem;
  border: 0;
  border-radius: 0.9rem;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.1;
}
.drinks__menu button:hover, .drinks__menu button:focus-visible { background: color-mix(in srgb, var(--peach) 30%, var(--paper)); }
.drinks__menu svg { width: 2.6rem; height: auto; }

.drinks__cup {
  padding: 0;
  border: 0;
  background: none;
  width: 3.6rem;
  transform-origin: 30% 95%;
}
.drinks__cup svg { display: block; width: 100%; height: auto; overflow: visible; }
.drinks__cup .liquid { transition: transform 500ms ease-in-out; }
.drinks__cup:hover:not(:disabled) { transform: rotate(-4deg); }
.drinks__cup:disabled { cursor: default; }
.drinks__cup.poured { animation: pour 450ms cubic-bezier(.3,1.6,.5,1); }
.drinks__cup.sipping { animation: sip 600ms ease-in-out; }
@keyframes pour { from { transform: scale(0.3) translateY(-1rem); opacity: 0; } }
@keyframes sip { 40% { transform: rotate(-22deg) translate(-0.2rem, -0.3rem); } }

.steam path { animation: steam 2.4s ease-in-out infinite; opacity: 0; }
.steam path:nth-child(2) { animation-delay: 0.8s; }
.steam path:nth-child(3) { animation-delay: 1.6s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .steam path { animation: none; opacity: 0.6; } }

.drinks__said {
  position: absolute;
  right: 100%;
  top: 0.2rem;
  margin-right: 0.3rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--candyfloss-deep);
  opacity: 0;
  pointer-events: none;
}
.drinks__said.pop { animation: said 1.4s ease-out; }
@keyframes said { 0% { opacity: 0; transform: translateY(0.4rem) scale(0.8); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-0.4rem); } }