:root {
	--bg:         #171715;
	--bg-dark:    #383a34;
	--bg-darker:  #2a2d28;
	--bg-tooltip: #000000e0;
	--text:       #f4f3ee;
	--text-muted: #b0b0af;
	--primary:    #916e56;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: Mulish, sans-serif;
	margin: 0;
	min-height: 100vh;
}

.hero {
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 64px 16px;
}

.hero h1 {
	color: var(--text);
	font-size: 48px;
	font-weight: 300;
	margin: 0 0 64px;
}

.hero h1 .icon {
	color: var(--primary);
	transform: translateY(7px);
}

.hero h1 .icon__steam {
	animation: icon-steam 3s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.hero h1 small {
	color: var(--text-muted);
	display: block;
	font-size: 14px;
}

.hero__subtitle {
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1.6;
	margin: 16px 0 32px;
	max-width: 600px;
	text-align: center;
}

.hero__search {
	position: relative;
	width: min(640px, 100%);
}

#query {
	background: var(--bg-darker);
	border-radius: 8px;
	border: 2px solid var(--bg-darker);
	box-sizing: border-box;
	color: var(--text);
	font: inherit;
	min-height: 42px;
	padding: 8px 84px 8px 16px;
	resize: none;
	transition: border-color .15s;
	width: 100%;
}

#query::placeholder {
	color: var(--text-muted);
	opacity: 0.75;
}

#query:focus {
	border-color: var(--bg-dark);
	outline: none;
}

.button-tooltip {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--text-muted);
	cursor: help;
	display: inline-flex;
	font-size: 14px;
	gap: 4px;
	height: 24px;
	justify-content: center;
	line-height: 1;
	padding: 0;
}

#clear,
#search {
	cursor: pointer;
	height: 42px;
	position: absolute;
	width: 42px;
}

#clear {
	opacity: 0;
	right: 52px;
	transition: opacity 0.2s;
}

#search {
	right: 10px;
}

#clear .icon,
#search .icon {
	color: var(--text-muted);
	opacity: 0.75;
	transition: opacity 0.2s;
}

#clear:hover .icon,
#search:hover .icon {
	opacity: 1;
}

.hero__search:has(#query:not(:placeholder-shown)) #clear,
.hero__search:has(#query:not(:placeholder-shown)) #search {
	opacity: 1;
	pointer-events: auto;
}

.button-tooltip__content {
	background: var(--bg-tooltip);
	border-radius: 8px;
	bottom: calc(100% + 8px);
	color: var(--text);
	font-size: 14px;
	font-weight: 400;
	left: 50%;
	line-height: 1.4;
	opacity: 0;
	padding: 8px 12px;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%);
	transition: opacity .2s;
	white-space: nowrap;
}

.drink-card__name .button-tooltip__content {
	white-space: normal;
	width: 260px;
}

.button-tooltip:hover .button-tooltip__content,
.button-tooltip:focus-visible .button-tooltip__content {
	opacity: 1;
}

.hero__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 32px;
	width: min(600px, 100%);
}

.hero__suggestions-title {
	color: var(--text-muted);
	font-size: 14px;
	margin: 4px;
}

.hero__suggestion {
	background: var(--bg-darker);
	border: none;
	border-radius: 8px;
	color: var(--text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	opacity: 0.66;
	padding: 4px 8px;
	transition: color .2s, opacity 0.2s;
}

.hero__suggestion:hover {
	color: var(--text);
	opacity: 1;
}

#results {
	display: grid;
	gap: 36px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
	justify-content: center;
}

.loader {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.loader__text {
	color: var(--text-muted);
	margin: 0;
}

.loader__dots {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.loader__dots span {
	animation: loader-dot 1.2s infinite;
	background: var(--primary);
	border-radius: 50%;
	height: 8px;
	opacity: .25;
	width: 8px;
}

.loader__dots span:nth-child(2) {
	animation-delay: .2s;
}

.loader__dots span:nth-child(3) {
	animation-delay: .4s;
}

.results-message {
	background: var(--bg-darker);
	border-radius: 16px;
	color: var(--text-muted);
	margin: 0 auto;
	padding: 16px;
}

.results-message h2 {
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 16px;
}

.results-message p {
	line-height: 1.6;
	margin: 0;
}

.drink-card {
	align-items: center;
	animation: fade-in 1s ease-out forwards;
	display: flex;
	flex-direction: column;
	max-width: 360px;
	opacity: 0;
	text-align: center;
	width: 100%;
}

.drink-card:nth-child(2) {
	animation-delay: .08s;
}

.drink-card:nth-child(3) {
	animation-delay: .16s;
}

.drink-card--alternative > * {
	opacity: 0.6;
	transition: opacity 0.15s ease-out;
}

.drink-card--alternative:focus > *,
.drink-card--alternative:hover > * {
	opacity: 0.8;
}

.drink-card__visual {
	align-items: flex-end;
	display: flex;
	height: 256px;
	justify-content: center;
}

.drink-card__info {
	width: 100%;
}

.drink-card__info h3 {
	font-size: 20px;
	font-weight: 300;
	margin: 24px 0 8px;
}

.drink-card__info p,
.drink-card__info section {
	margin: 0 0 16px;
}

.drink-card__name {
	align-items: center;
	display: inline-flex;
	font-size: 32px;
	font-weight: 300;
	gap: 4px;
	justify-content: center;
	margin: 0 0 12px;
	position: relative;
}

.drink-card__name .button-tooltip {
	height: 40px;
	transform: translateY(4px);
	width: 32px;
}

.drink-card__description {
	color: var(--text-muted);
	line-height: 1.5;
	min-height: 72px;
}

.drink-card__nutrition ul {
	display: flex;
	gap: 16px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.drink-card__nutrition li {
	align-items: center;
	display: flex;
	font-size: 14px;
	gap: 4px;
	position: relative;
}

.drink-card__nutrition .icon {
	color: var(--text-muted);
}

.drink-card__nutrition strong {
	background: var(--bg-darker);
	border-radius: 16px;
	color: var(--text);
	font-weight: 400;
	padding: 5px 10px 4px;
}

.drink-card__taste ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.drink-card__taste h3 {
	display: none;
}

.drink-card__taste-item {
	align-items: baseline;
	display: flex;
	gap: 16px;
	justify-content: center;
}

.drink-card__taste-name {
	color: var(--text-muted);
	text-align: right;
	width: 50%;
}

.drink-card__taste-level {
	display: flex;
	gap: 4px;
	width: 50%;
}

.drink-card__taste-dot {
	background: var(--bg-dark);
	border-radius: 50%;
	height: 8px;
	width: 8px;
}

.drink-card__taste-dot.is-active {
	background: var(--primary);
}

.drink-card__recipe {
	line-height: 1.75;
	margin: 16px 0 0;
}

.drink-card__recipe details {
	scroll-margin-bottom: 32px;
}

.drink-card__recipe details summary {
	border-bottom: 1px dashed var(--primary);
	color: var(--text);
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	list-style: none;
	margin-bottom: 8px;
	padding: 0 2px;
	transition: color 0.15s ease-out;
}

.drink-card__recipe details summary::-webkit-details-marker {
	display: none;
}

.drink-card__recipe details summary::marker {
	content: "";
}

.drink-card__recipe summary:hover {
	color: var(--primary);
}

.drink-card__recipe ol {
	margin: 0;
	padding: 0 24px;
	text-align: left;
}

@media (max-width: 991.98px) {
	#results {
		grid-template-columns: repeat(2, minmax(280px, 360px));
	}
}

@media (max-width: 767.98px) {
	.hero {
		padding: 16px;
	}

	#results {
		gap: 24px;
		grid-template-columns: minmax(280px, 360px);
		padding: 16px;
	}
}

/* Glasses */
.glass {
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	background: rgba(255, 255, 255, 0.04);
	border-bottom-left-radius: 70px;
	border-bottom-right-radius: 70px;
	border-top-left-radius: 64px 12px;
	border-top-right-radius: 64px 12px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: center;
	margin-bottom: 24px;
	position: relative;
	width: 140px;
}

.glass--small {
	height: 120px;
}

.glass--medium {
	height: 170px;
}

.glass--large {
	height: 210px;
}

.glass::after {
	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.35),
			rgba(255, 255, 255, 0)
		);
	border-radius: 2px;
	content: '';
	filter: blur(2px);
	left: 16px;
	position: absolute;
	top: 24px;
	transform: skewY(8deg);
	width: 16px;
}

.glass.glass--small::after {
	height: 50px;
}

.glass.glass--medium::after {
	height: 70px;
}

.glass.glass--large::after {
	height: 80px;
}

.glass::before {
	bottom: -1px;
	box-shadow: 0 -5px 25px 3px #111;
	content: '';
	height: 0px;
	left: 0;
	position: absolute;
	width: 100%;
}

.glass__inner {
	background: rgba(255, 255, 255, 0.05);
	border-bottom-left-radius: 64px;
	border-bottom-right-radius: 64px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
	border-top-left-radius: 64px 8px;
	border-top-right-radius: 64px 8px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow:
		inset 6px 0 10px rgba(255, 255, 255, 0.1),
		inset -6px 0 10px rgba(255, 255, 255, 0.1),
		inset 0 -10px 15px rgba(255, 255, 255, 0.15);
	overflow: hidden;
	position: absolute;
	top: 3px;
	width: 130px;
}

.glass--small .glass__inner {
	height: 106px;
}

.glass--medium .glass__inner {
	height: 156px;
}

.glass--large .glass__inner {
	height: 196px;
}

.glass__inner::after {
	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, .08) 0%,
			rgba(255, 255, 255, .02) 18%,
			transparent 30%,
			transparent 70%,
			rgba(255, 255, 255, .07) 100%
		);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.glass__rim {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	box-shadow:
		inset 0 0px 0 3px rgba(255, 255, 255, 0.1),
		0 2px 4px rgba(255, 255, 255, 0.12);
	height: 22px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 140px;
	z-index: 2;
}

.glass__rim::before {
	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.25),
			rgba(255, 255, 255, 0)
		);
	border-radius: 50%;
	content: '';
	filter: blur(3px);
	height: 10px;
	left: 48px;
	position: absolute;
	width: 40px;
}

.glass--small .glass__rim::before {
	bottom: -98px;
}

.glass--medium .glass__rim::before {
	bottom: -148px;
}

.glass--large .glass__rim::before {
	bottom: -188px;
}

/* .glass--cold  .drink {
	
} */

/* Visual components */
.citrus {
	border-radius: 50%;
	box-shadow:
		inset 0 0 6px rgba(255, 255, 255, .45),
		0 1px 3px rgba(0, 0, 0, .15);
	clip-path: polygon(
		50% 50%,
		22% 0,
		70% 0,
		100% 0,
		100% 100%,
		0 100%,
		0 0
	);
	height: 50px;
	opacity: .92;
	position: absolute;
	right: -24px;
	top: -15px;
	transform: rotate(-138deg);
	width: 50px;
	z-index: 6;
}

.citrus--espresso_tonic {
	background:
		radial-gradient(
			circle,
			#fffef6 0 2px,
			transparent 3px
		),
		repeating-conic-gradient(
			from -6deg,
			rgba(255, 255, 255, .5) 0deg 3deg,
			transparent 3deg 42deg
		),
		radial-gradient(
			circle,
			#dff5a5 0%,
			#c9ea73 55%,
			#b8dd57 72%,
			transparent 73%
		);
	border: 3px solid #6ea52e;
}

.citrus--espresso_romano {
	background:
		radial-gradient(
			circle,
			#fffef7 0 2px,
			transparent 3px
		),
		repeating-conic-gradient(
			from -6deg,
			rgba(255, 255, 255, .65) 0deg 3deg,
			transparent 3deg 42deg
		),
		radial-gradient(
			circle,
			#fff9c9 25%,
			#fff08b 50%,
			#f3d94d 68%,
			transparent 73%
		);
	border: 3px solid #d3b52b;
}

.citrus::before {
	background: rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	content: "";
	filter: blur(2px);
	height: 28px;
	left: 41px;
	position: absolute;
	top: 0px;
	transform: rotate(-30deg);
	width: 4px;
}

.citrus::after {
	background: rgba(100, 52, 0, 0.25);
	content: "";
	filter: blur(2px);
	height: 27px;
	left: 14px;
	position: absolute;
	top: -9px;
	transform: rotate(40deg);
	width: 20px;
}

.cream {
	height: 60px;
	left: 50%;
	position: absolute;
	top: 16px;
	transform: translateX(-50%);
	width: 140px;
}

.cream::before {
	background:
		radial-gradient(
			ellipse 32px 20px at 57% 33%,
			#ffffff 0%,
			#FAF8F3 74%,
			transparent 78%
		),
		radial-gradient(
			ellipse 24px 13px at 36% 27%,
			#ffffff 0%,
			#faf8f3 72%,
			transparent 76%
		),
		radial-gradient(
			ellipse 20px 8px at 70% 23%,
			#ffffff 0%,
			#faf8f3 72%,
			transparent 76%
		),
		radial-gradient(
			ellipse 24px 16px at 27% 45%,
			#ffffff 0%,
			#f7f3ec 72%,
			transparent 76%
		),
		radial-gradient(
			ellipse 22px 12px at 45% 56%,
			#ffffff 0%,
			#f8f4ef 74%,
			transparent 78%
		),
		radial-gradient(
			ellipse 32px 12px at 82% 43%,
			#ffffff 0%,
			#f7f3ec 72%,
			transparent 76%
		),
		radial-gradient(
			ellipse 18px 16px at 13% 39%,
			#faf8f3 0%,
			#ece3d5 74%,
			transparent 78%
		),
		radial-gradient(
			ellipse 25px 16px at 28% 31%,
			#faf8f3 0%,
			#ece3d5 74%,
			transparent 78%
		),
		radial-gradient(
			ellipse 24px 14px at 69% 51%,
			#faf8f3 0%,
			#ece3d5 70%,
			transparent 100%
		),
		radial-gradient(
			ellipse 24px 14px at 84% 31%,
			#faf8f3 0%,
			#ece3d5 74%,
			transparent 78%
		);
	content: "";
	filter: blur(0.35px);
	inset: 0;
	position: absolute;
}

.cream::after {
	background:
		radial-gradient(
			ellipse 14px 5px at 58% 40%,
			rgba(225, 214, 198, .68),
			transparent 72%
		),
		radial-gradient(
			ellipse 17px 6px at 36% 28%,
			rgba(220, 208, 190, .46),
			transparent 72%
		),
		radial-gradient(
			ellipse 14px 5px at 70% 21%,
			rgba(220, 208, 190, .44),
			transparent 72%
		),
		radial-gradient(
			ellipse 18px 7px at 27% 65%,
			rgba(214, 201, 182, .44),
			transparent 72%
		),
		radial-gradient(
			ellipse 17px 6px at 51% 59%,
			rgba(214, 201, 182, .43),
			transparent 72%
		),
		radial-gradient(
			ellipse 15px 6px at 86% 34%,
			rgba(214, 201, 182, .40),
			transparent 72%
		),
		radial-gradient(
			ellipse 14px 6px at 15% 49%,
			rgba(205, 192, 173, .40),
			transparent 72%
		),
		radial-gradient(
			ellipse 19px 7px at 28% 38%,
			rgba(205, 192, 173, .38),
			transparent 72%
		),
		radial-gradient(
			ellipse 17px 6px at 67% 49%,
			rgba(205, 192, 173, .38),
			transparent 72%
		),
		radial-gradient(
			ellipse 14px 6px at 91% 51%,
			rgba(205, 192, 173, .38),
			transparent 72%
		),
		radial-gradient(
			ellipse 120px 18px at 50% 65%,
			rgba(175, 120, 70, .18) 0%,
			transparent 70%
		);
	content: "";
	filter: blur(1px);
	inset: 5px 7px;
	opacity: .8;
	position: absolute;
}

.ice {
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.ice__cube {
	backdrop-filter: blur(1px);
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, .95) 0%,
			rgba(235, 246, 255, .82) 35%,
			rgba(180, 215, 240, .55) 100%
		);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 5px;
	height: 32px;
	position: absolute;
	width: 32px;
}

.ice__cube::before {
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, .85),
			rgba(255, 255, 255, 0)
		),
		linear-gradient(
			35deg,
			transparent 46%,
			rgba(170, 210, 235, .28) 49%,
			transparent 52%
		);
	clip-path: polygon(0 0, 100% 0,55% 55%, 0 45%);
	content: "";
	inset: 2px;
	position: absolute;
}

.ice__cube::after {
	background: rgba(255, 255, 255, .95);
	border-radius: 2px;
	content: "";
	filter: blur(.6px);
	height: 4px;
	left: 4px;
	position: absolute;
	top: 3px;
	width: 7px;
}

.ice__cube:nth-child(1) {
	border-radius: 4px 7px 5px 6px;
	bottom: 25px;
	height: 30px;
	left: 12px;
	transform:rotate(-16deg);
	width: 30px;
}

.ice__cube:nth-child(2) {
	border-radius: 5px 7px 6px 6px;
	bottom: 15px;
	height: 29px;
	left: 57px;
	opacity: 0.5;
	transform:rotate(11deg) scale(.95);
	width: 28px;
}

.ice__cube:nth-child(3) {
	border-radius: 7px 5px 4px 6px;
	bottom: 27px;
	height: 27px;
	right: 12px;
	transform:rotate(-9deg);
	width: 28px;
}

.ice__cube:nth-child(4) {
	border-radius: 6px 7px 5px 4px;
	bottom: 6px;
	height: 33px;
	left: 39px;
	transform:rotate(18deg);
	width: 31px;
}

.ice__cube:nth-child(5) {
	border-radius: 4px 4px 7px 5px;
	bottom: 9px;
	height: 27px;
	right: 32px;
	transform:rotate(-22deg);
	width: 29px;
}

.ice__cube:nth-child(6) {
	border-radius: 6px 5px 5px 7px;
	bottom: 40px;
	height: 30px;
	left: 39px;
	transform:rotate(8deg);
	width: 31px;
}

.ice__cube:nth-child(7) {
	border-radius: 7px 4px 5px 4px;
	bottom: 32px;
	height: 28px;
	left: 64px;
	transform: rotate(-29deg);
	width: 31px;
}

.ice__cube:nth-child(8) {
	border-radius: 5px 5px 4px 5px;
	bottom: 12px;
	height: 26px;
	left: 24px;
	opacity: 0.75;
	transform: rotate(-37deg);
	width: 28px;
}

.icecream {
	background:
		radial-gradient(
			ellipse at 20% 10%,
			rgba(90, 45, 18, .45) 0%,
			rgba(90, 45, 18, .18) 20%,
			transparent 55%
		),
		radial-gradient(
			circle at 28% 30%,
			#ffffff 0 10px,
			transparent 11px
		),
		radial-gradient(
			circle at 70% 26%,
			#fefdfb 0 9px,
			transparent 10px
		),
		radial-gradient(
			circle at 48% 55%,
			#fbf8f2 0 15px,
			transparent 16px
		),
		radial-gradient(
			circle at 35% 75%,
			rgba(215, 195, 165, .18) 0 8px,
			transparent 9px
		),
		radial-gradient(
			circle at 78% 65%,
			rgba(205, 185, 155, .15) 0 7px,
			transparent 8px
		),
		radial-gradient(
			ellipse at 35% 30%,
			#ffffff 0%,
			#faf8f2 55%,
			#ece3d4 82%,
			#d8c6a8 100%
		);
	border-radius: 40% 60% 45% 55% / 60% 42% 58% 40%;
	box-shadow:
		inset -6px -10px 12px rgba(170, 145, 110, .28),
		inset 5px 5px 8px rgba(255, 255, 255, .55), 0 5px 10px rgba(30, 15, 5, .18);
	height: 54px;
	left: 50%;
	position: absolute;
	top: 10px;
	transform: translateX(-50%);
	width: 68px;
}

.icecream::before {
	background-image: linear-gradient(to bottom, #f5ecdd 70%, #d5c7ab 100%);
	border-radius: 50% 50% 70% 70%;
	bottom: 4px;
	content: "";
	height: 20px;
	left: 5%;
	position: absolute;
	transform: translateX(-50%);
	width: 19px;
}

.icecream::after {
	background: radial-gradient(ellipse, #f3ead3 0%, #d6c8ad 100%);
	border-radius: 25%;
	content: "";
	height: 8px;
	left: 6%;
	opacity: 0.85;
	position: absolute;
	top: 50px;
	width: 88%;
}

.steam {
	filter: blur(9px);
	height: 64px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 18px;
}

.glass--small .steam {
	bottom: 68px;
}

.glass--medium .steam {
	bottom: 108px;
}

.glass--large .steam {
	bottom: 148px;
}

.steam,
.steam::before,
.steam::after {
	background:
		radial-gradient(
			ellipse,
			rgba(255, 255, 255, .4) 0%,
			rgba(255, 255, 255, .3) 55%,
			transparent 100%
		);
	border-radius: 50%;
}

.steam::before,
.steam::after {
	content: "";
	position: absolute;
}

.steam::before {
	height: 28px;
	left: -5px;
	top: 18px;
	width: 16px;
}

.steam::after {
	height: 24px;
	right: -4px;
	top: 38px;
	width: 14px;
}

.drink-card--animated .steam--left {
	--drift: -4px;
	left: 42px;
}

.drink-card--animated .steam--middle {
	--drift: 5px;
	height: 72px;
	left: 68px;
	width: 20px;
}

.drink-card--animated .steam--right {
	--drift: -2px;
	height: 58px;
	left: 94px;
	width: 16px;
}

/* Drinks */
.drink {
	border-radius: inherit;
	bottom: 0;
	bottom: 2px;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	width: 100%;
}

.drink--espresso,
.drink--ristretto,
.drink--doppio,
.drink--triplo,
.drink--lungo,
.drink--espresso_romano {
	background:
		radial-gradient(
			ellipse at center 16px,
			rgba(73, 38, 7, .15) 0%,
			rgba(100, 57, 25, .20) 20%,
			rgba(136, 94, 35, .1) 35%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#241108 0%,
			#34180b 60%,
			#432111 82%,
			#563019 94%,
			#724624 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .20),
		inset 0 8px 10px rgba(255, 255, 255, .05);
}

.drink--espresso::before,
.drink--ristretto::before,
.drink--doppio::before,
.drink--triplo::before,
.drink--lungo::before,
.drink--cafe_bombon::before,
.drink--espresso_romano::before {
	background:
		radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .08), transparent 20%),
		radial-gradient(circle at 70% 60%, rgba(255, 225, 170, .06), transparent 25%),
		linear-gradient(
			to bottom,
			#d2a56d 0%,
			#b77d49 50%,
			#8d562f 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow: 0 3px 6px rgba(20, 10,5, .25);
	content: "";
	height: 16px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--espresso::after,
.drink--ristretto::after,
.drink--doppio::after,
.drink--triplo::after,
.drink--lungo::after,
.drink--cafe_bombon::after,
.drink--espresso_romano::after {
	background:
		radial-gradient(
			ellipse,
			#e7c99c 0%,
			#c88d57 65%,
			#9f6438 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, .22),
		0 2px 4px rgba(0, 0, 0, .08);
	content: "";
	height: 18px;
	left: -2%;
	position: absolute;
	top: -10px;
	width: 104%;
}

.drink--lungo::before {
	height: 12px;
}

.drink--lungo::after {
	height: 15px;
}

.drink--espresso {
	height: 56%;
}

.drink--ristretto {
	height: 40%;
}

.drink--doppio {
	height: 69%;
}

.drink--triplo {
	height: 84%;
}

.drink--lungo {
	height: 88%;
}

.drink--espresso_romano {
	height: 60%;
}

.drink--americano,
.drink--long_black {
	background:
		radial-gradient(
			ellipse at center 28px,
			rgba(73, 38, 7, .40) 0%,
			rgba(100, 57, 25, .35) 20%,
			rgba(136, 94, 35, .10) 35%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#2f190d 0%,
			#4b2a17 70%,
			#583319 88%,
			#694123 96%,
			#865937 100%
		);
	box-shadow: inset 0 -8px 12px rgba(120, 70, 20, .18), inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 76%;
}

.drink--americano::before,
.drink--long_black::before {
	background:
		radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .06), transparent 20%),
		radial-gradient(circle at 70% 60%, rgba(255, 220, 170, .05), transparent 25%),
		linear-gradient(
			to bottom,
			#d4ae81 0%,
			#c39263 45%,
			#ab7348 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow:
		0 3px 6px rgba(20, 10,5, .22);
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--americano::after,
.drink--long_black::after {
	background:
		radial-gradient(
			ellipse,
			#e2c298 0%,
			#c99663 65%,
			#ab7348 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, .18),
		0 2px 4px rgba(0, 0, 0, .08);
	content: "";
	height: 18px;
	left: -2%;
	position: absolute;
	top: -10px;
	width: 104%;
}

.drink--americano {
	height: 74%;
}

.drink--long_black {
	height: 77%;
}

.drink--long_black::before {
	height: 18px;
}

.drink--long_black::after {
	height: 20px;
	top: -9px;
}

.drink--macchiato {
	background:
		radial-gradient(
			ellipse at center 18px,
			rgba(92, 52, 22, .24) 0%,
			rgba(128, 82, 42, .20) 22%,
			rgba(185, 132, 78, .08) 38%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#4b2813 0%,
			#61361b 28%,
			#7d4c28 62%,
			#a56b41 88%,
			#c58d5d 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .20),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 62%;
}

.drink--macchiato::before {
	background:
		radial-gradient(
			circle at 43% 65%,
			#fffdf8 0%,
			#f7efe0 10%,
			rgba(247, 239, 224, .82) 50%,
			rgba(247, 239, 224, 0) 80%
		),
		linear-gradient(
			to bottom,
			#d4ae81 0%,
			#b77d49 55%,
			#8d562f 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow: 0 3px 6px rgba(20, 10,5, .25);
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--macchiato::after {
	background:
		radial-gradient(
			ellipse,
			#fbf7ef 0%,
			#ecd8b6 40%,
			#c88d57 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, .45),
		0 2px 4px rgba(0, 0, 0, .08);
	content: "";
	filter: blur(1px);
	height: 16px;
	left: -2%;
	position: absolute;
	top: -6px;
	width: 104%;
}

.drink--cortado {
	background:
		radial-gradient(
			ellipse at center 18px,
			rgba(95,55, 20, .32) 0%,
			rgba(125,75,35, .24) 20%,
			rgba(180, 125,70, .10) 36%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#734523 0%,
			#a0663e 38%,
			#b77d4f 68%,
			#d1a073 90%,
			#e8c69d 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(90,55, 20, .16),
		inset 0 8px 10px rgba(255, 255, 255, .07);
	height: 73%;
}

.drink--cortado::before {
	background:
		radial-gradient(
			circle at 60% 60%,
			#fffdf8 0%,
			#f7efe0 50%,
			rgba(247, 239, 224, .82) 60%,
			rgba(247, 239, 224, 0) 80%
		),
		linear-gradient(
			to bottom,
			#d8b184 0%,
			#c48f5f 55%,
			#a86b42 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow: 0 2px 5px rgba(20, 10,5, .18);
	content: "";
	height: 13px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--cortado::after {
	background:
		radial-gradient(
			ellipse,
			#efd7b6 0%,
			#ddb487 58%,
			#bf8356 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 2px 2px rgba(255, 255, 255, .28),
		0 2px 4px rgba(0, 0, 0, .06);
	content: "";
	filter: blur(1px);
	height: 16px;
	left: -2%;
	position: absolute;
	top: -6px;
	width: 104%;
}

.drink--cappuccino {
	background:
		radial-gradient(
			ellipse at center 28px,
			rgba(95, 55, 20, .30) 0%,
			rgba(120, 72, 35, .20) 20%,
			rgba(180, 135, 70, .15) 35%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#ab7348 0%,
			#b88052 50%,
			#daa46f 80%,
			#ddb98a 96%,
			#ead3b1 100%
		);
	box-shadow: inset 0 -8px 12px rgba(120, 70, 20, .18), inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 81%;
}

.drink--cappuccino::before {
	background:
		radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .12), transparent 20%),
		radial-gradient(circle at 70% 60%, rgba(160, 110,60, .10), transparent 25%),
		linear-gradient(
			to bottom,
			#f2e3c4 0%,
			#e8d1ac 40%,
			#d6b487 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow: 0 5px 10px rgba(30, 15,5, .25);
	content: "";
	height: 36px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--cappuccino::after {
	background: radial-gradient(ellipse, #f8ecd7 0%, #ecd8b6 65%, #dcb98b 100%);
	border-radius: 50%;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .85), 0 2px 4px rgba(0, 0, 0, .05);
	content: "";
	height: 20px;
	left: -2%;
	position: absolute;
	top: -8px;
	width: 104%;
}

.drink--flat_white {
	background:
		radial-gradient(
			ellipse at center 12px,
			rgba(75, 40, 15, .55) 0%,
			rgba(110, 60, 25, .38) 22%,
			rgba(165, 105, 55, .18) 38%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#8f572f 0%,
			#ac6e45 30%,
			#b17444 60%,
			#c58b56 80%,
			#ddb487 100%
		);
	box-shadow: inset 0 -8px 12px rgba(120, 70, 20, .18), inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 72%;
}

.drink--flat_white::before {
	background:
		radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .12), transparent 20%),
		radial-gradient(circle at 70% 60%, rgba(160, 110,60, .10), transparent 25%),
		linear-gradient(
			to bottom,
			#f2e3c4 0%,
			#e8d1ac 40%,
			#d6b487 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow: 0 5px 10px rgba(30, 15,5, .25);
	content: "";
	height: 30px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--flat_white::after {
	background: radial-gradient(ellipse, #f8ecd7 0%, #ecd8b6 65%, #dcb98b 100%);
	border-radius: 50%;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .85), 0 2px 4px rgba(0, 0, 0, .05);
	content: "";
	height: 20px;
	left: -2%;
	position: absolute;
	top: -8px;
	width: 104%;
}

.drink--latte {
	background:
		radial-gradient(
			ellipse at center 0px,
			rgba(95, 55, 20, .40) 0%,
			rgba(120, 72, 35, .30) 20%,
			rgba(180, 135, 70, .15) 35%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#8c6037 0%,
			#cb9e6d  12%,
			#dbc39b 30%,
			#f1e2c7 55%,
			#fff8ef 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(120,70, 20, .12),
		inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 82%;
}

.drink--latte::before {
	background:
		linear-gradient(
			to bottom,
			#ffffff,
			#fdfbf7 65%,
			#eee6d9 100%
		);
	border-bottom-left-radius: 64px 6px;
	border-bottom-right-radius: 64px 6px;
	box-shadow:
		0 3px 6px rgba(35, 18,5, .18);
	content: "";
	height: 20px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--latte::after {
	background:
		radial-gradient(
			ellipse,
			#ffffff 0%,
			#fbfaf7 75%,
			#eee5d8 100%
		);
	border-radius: 50%;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .85), 0 2px 4px rgba(0, 0, 0, .05);
	content: "";
	height: 16px;
	left: -2%;
	position: absolute;
	top: -6px;
	width: 104%;
}

.drink--latte_macchiato {
	background:
		radial-gradient(
			ellipse at center 36px,
			rgba(95,55, 20, .65) 0%,
			rgba(120,72,35, .45) 20%,
			rgba(180, 135,70, .18) 35%,
			transparent 52%
		),
		radial-gradient(
			ellipse 170% 62px at 50% 8px,
			#4d2c13 53%,
			#694524 63%,
			#8c6340 77%,
			transparent 80%
		),
		linear-gradient(
			to bottom,
			#4d2c13 22%,
			#694524 28%,
			#8c6340 34%,
			#bf9766 44%,
			#e7cfaa 60%,
			#f6edd9 70%,
			#fffdf8 100%
		);
	box-shadow: inset 0 -8px 12px rgba(120, 70, 20, .18), inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 82%;
}

.drink--latte_macchiato::before {
	background: linear-gradient(to bottom, #ffffff, #fbfaf6 45%, #efe6d7 100%);
	border-bottom-left-radius: 64px 6px;
	border-bottom-right-radius: 64px 6px;
	box-shadow: 0 5px 8px rgba(35, 18, 5, .28);
	content: "";
	height: 32px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}

.drink--latte_macchiato::after {
	background: radial-gradient(ellipse at center, #ffffff 0%, #fcfbf8 55%, #ece5d8 100%);
	border-radius: 50%;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .85), 0 2px 4px rgba(0, 0, 0, .08);
	content: "";
	height: 18px;
	left: -2%;
	position: absolute;
	top: -7px;
	width: 104%;
	z-index: 3;
}

.drink--mocha {
	background:
		radial-gradient(
			ellipse at center 0,
			rgba(60,30, 15, .45) 0%,
			rgba(95,55,30, .28) 20%,
			rgba(150,95,55, .12) 38%,
			transparent 55%
		),
		linear-gradient(
			to bottom,
			#6f4327 0%,
			#8b5939 14%,
			#a87652 32%,
			#c79b76 58%,
			#e6ceb1 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(120,70, 20, .12),
		inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 88%;
}

.drink--mocha::before {
	background:
		linear-gradient(
			to bottom,
			#faf5eb 0%,
			#f0dfc6 58%,
			#d3a271 85%,
			#dcc09a 100%
		);
	border-bottom-left-radius: 64px 6px;
	border-bottom-right-radius: 64px 6px;
	box-shadow:
		0 3px 6px rgba(35, 18,5, .18);
	content: "";
	height: 20px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--mocha::after {
	background:
		repeating-radial-gradient(
			circle at 10% 10%,
			rgba(95,50, 18, .45) 0 1.2px,
			transparent 1.2px 3.8px
		),
		repeating-radial-gradient(
			circle at 70% 60%,
			rgba(65,35, 15, .35) 0 1px,
			transparent 1px 3px
		),
		radial-gradient(
			ellipse,
			#e7d2b0 0%,
			#d2ae82 70%,
			#b48353 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, .85),
		0 2px 4px rgba(0, 0, 0, .05);
	content: "";
	filter: blur(1px);
	height: 16px;
	left: -2%;
	opacity: 0.33;
	position: absolute;
	top: 0;
	width: 104%;
}

.drink--marocchino {
	background:
		radial-gradient(
			ellipse at center 12px,
			rgba(60,30, 10, .40) 0%,
			rgba(95,55, 25, .28) 20%,
			rgba(150,95,55, .10) 38%,
			transparent 55%
		),
		linear-gradient(
			to bottom,
			#6b4025 0%,
			#8a5939 35%,
			#ac7b56 68%,
			#cfa37d 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .18),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 75%;
}

.drink--marocchino::before {
	background:
		linear-gradient(
			to bottom,
			#efe2c8 0%,
			#ddc19b 55%,
			#bf9364 100%
		);
	border-bottom-left-radius: 64px 4px;
	border-bottom-right-radius: 64px 4px;
	box-shadow: 0 3px 6px rgba(20, 10,5, .20);
	content: "";
	height: 16px;
	inset: 0 0 auto;
	position: absolute;
}

.drink--marocchino::after {
	background:
		repeating-radial-gradient(
			circle at 80% -150%,
			rgba(95,50, 18, .45) 0 1.2px,
			transparent 1.2px 3.8px
		),
		repeating-radial-gradient(
			circle at 70% 60%,
			rgba(65,35, 15, .35) 0 1px,
			transparent 1px 3px
		),
		radial-gradient(
			ellipse,
			#e7d2b0 0%,
			#d2ae82 70%,
			#b48353 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, .25),
		0 2px 4px rgba(0, 0, 0, .08);
	content: "";
	filter: blur(1px);
	height: 18px;
	left: -2%;
	opacity: 0.33;
	position: absolute;
	top: -8px;
	width: 104%;
}

.drink--cafe_bombon {
	background:
		radial-gradient(
			ellipse at center 16px,
			rgba(73,38,7, .15) 0%,
			rgba(100,57, 25, .20) 20%,
			rgba(136,94,35, .10) 35%,
			transparent 52%
		),
		radial-gradient(
			ellipse 120% 55px at 50% 0px,
			#241108 0%,
			#34180b 48%,
			#432111 68%,
			#563019 80%,
			transparent 84%
		),
		linear-gradient(
			to bottom,
			#f0d8a3 0%,
			#f6e6be 70%,
			#fff7df 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .20),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 69%;
}

.drink--espresso_con_panna {
	background:
		radial-gradient(
			ellipse at center 20px,
			rgba(73, 38, 7, 0.35) 0%,
			rgba(100, 57, 25, 0.2) 20%,
			rgba(136, 94, 35, 0.1) 30%,
			transparent 44%
		),
		radial-gradient(
			ellipse 100% 38px at 50% 0,
			#eae5da 25%,
			#f3f0e6 54%,
			#faf8f3 75%,
			transparent 91%
		),
		linear-gradient(
			to bottom,
			#241108 20%,
			#34180b 60%,
			#432111 82%,
			#563019 94%,
			#724624 100%
		);
	box-shadow: 
		inset 0 -8px 12px rgba(70, 40, 15, .20),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 64%;
}

.drink--espresso_con_panna::before,
.drink--wiener_melange::before,
.drink--irish_coffee::before {
	background:
		radial-gradient(
			ellipse at center,
			rgba(245, 236, 220, .95) 0%,
			rgba(233, 216, 188, .75) 25%,
			rgba(182, 124, 70, .25) 50%,
			transparent 100%
		);
	content: "";
	height: 18px;
	left: 0;
	position: absolute;
	right: 0;
	top: 13px;
}

.drink--espresso_con_panna::after,
.drink--wiener_melange::after,
.drink--irish_coffee::after {
	background:
		radial-gradient(
			ellipse,
			rgb(255 250 241 / 95%),
			rgb(248 242 242 / 28%)
		);
	border-radius: 50%;
	content: "";
	height: 17px;
	left: 0%;
	opacity: .85;
	position: absolute;
	right: 0%;
	top: 9px;
}

.drink--wiener_melange {
	background:
		radial-gradient(
			ellipse at center 32px,
			rgba(73, 38, 7, 0.35) 0%,
			rgba(100, 57, 25, 0.2) 20%,
			rgba(136, 94, 35, 0.1) 30%,
			transparent 44%
		),
		radial-gradient(
			ellipse 100% 38px at 50% 0,
			#eae5da 25%,
			#f3f0e6 54%,
			#faf8f3 75%,
			transparent 91%
		),
		linear-gradient(
			to bottom,
			#8f572f 0%,
			#ac6e45 30%,
			#b17444 60%,
			#c58b56 80%,
			#ddb487 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(120, 70, 20, .18),
		inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 77%;
}

.drink--wiener_melange + .cream {
	top: 22px;
}

.drink--raf {
	background:
		radial-gradient(
			ellipse at center 0,
			rgba(145,90,45, .18) 0%,
			rgba(185, 135,85, .12) 24%,
			rgba(220, 185, 140, .06) 42%,
			transparent 58%
		),
		linear-gradient(
			to bottom,
			#b07a4f  0%,
			#c99b6d  20%,
			#dfbf98  45%,
			#edd9be  72%,
			#f5ebdc  100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(120,70, 20, .12),
		inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 82%;
}

.drink--raf::before {
	background:
		linear-gradient(
			to bottom,
			#f8eee2,
			#ead9bc  65%,
			#ddb387  100%
		);
	border-bottom-left-radius: 64px 6px;
	border-bottom-right-radius: 64px 6px;
	box-shadow: 0 3px 6px rgba(35, 18,5, .18);
	content: "";
	height: 20px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--raf::after {
	background:
		radial-gradient(
			ellipse,
			#f7efe3 0%,
			#e9d7bc 75%,
			#d5b089 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, .85),
		0 2px 4px rgba(0, 0, 0, .05);
	content: "";
	height: 16px;
	left: -2%;
	position: absolute;
	top: -6px;
	width: 104%;
}

.drink--dirty_chai_latte {
	background:
		radial-gradient(
			ellipse at center 12px,
			rgba(155,95,40, .40) 0%,
			rgba(195, 125,60, .26) 22%,
			rgba(230, 175, 105, .12) 40%,
			transparent 52%
		),
		linear-gradient(
			to bottom,
			#ad6a35 0%,
			#c87a3e 25%,
			#d88f4f 55%,
			#e4ab71 80%,
			#efd0a3 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(120,70, 20, .12),
		inset 0 8px 10px rgba(255, 255, 255, .08);
	height: 82%;
}

.drink--dirty_chai_latte::before {
	background:
		linear-gradient(
			to bottom,
			#f0dfc8,
			#e2c397 65%,
			#c88f58 100%
		);
	border-bottom-left-radius: 64px 5px;
	border-bottom-right-radius: 64px 5px;
	box-shadow: 0 3px 6px rgba(35, 18,5, .16);
	content: "";
	height: 16px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--dirty_chai_latte::after {
	background:
		radial-gradient(
			ellipse,
			#f5ead7 0%,
			#e7c99c 72%,
			#c98d56 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 2px 3px rgba(255, 255, 255, .85),
		0 2px 4px rgba(0, 0, 0, .05);
	content: "";
	height: 14px;
	left: -2%;
	position: absolute;
	top: -6px;
	width: 104%;
}

.drink--affogato {
	background:
		radial-gradient(
			ellipse at center 10px,
			rgba(73, 38, 7, .45) 0%,
			rgba(100, 57, 25, .30) 12%,
			rgba(136, 94, 35, .20) 35%,
			transparent 50%
		),
		radial-gradient(
			ellipse 100% 30px at 50% 0px,
			#f0d8a3 40%,
			#f6e6be 50%,
			#fff7df 75%,
			transparent 90%
		),
		linear-gradient(
			to bottom,
			#241108 20%,
			#34180b 60%,
			#432111 82%,
			#563019 94%,
			#724624 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70, 40, 15, .20),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 54%;
}

.drink--affogato::before {
	background:
		radial-gradient(
			circle at 41% 115%,
			#ffffff 0 12px,
			#ece7df 16px,
			transparent 16px
		),
		radial-gradient(
			circle at 58% 107%,
			#ffffff 0 14px,
			#ebe7dc 18px,
			transparent 16px
		),
		linear-gradient(
			to bottom,
			#fffefb,
			#f5efe6 50%,
			#e7ddcf
		);
	border-bottom-left-radius: 64px 10px;
	border-bottom-right-radius: 64px 10px;
	box-shadow: 0 3px 6px rgba(20, 10, 5, 0.1);
	content: "";
	height: 42px;
	left: -4%;
	position: absolute;
	right: -4%;
	top: -19px;
}

.drink--affogato::after {
	background:
		radial-gradient(
			ellipse,
			#d8ceb8 0%,
			#ece2d3 100%
		);
	border-radius: 50%;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .9);
	content: "";
	height: 8px;
	left: 6%;
	opacity: 0.33;
	position: absolute;
	top: 14px;
	width: 88%;
}

.drink--irish_coffee {
	background:
		radial-gradient(
			ellipse at center 6px,
			rgba(115,70, 25, .30) 0%,
			rgba(145,90,40, .18) 22%,
			rgba(185, 130,75, .08) 38%,
			transparent 50%
		),
		radial-gradient(
			ellipse 100% 34px at 50% 0,
			#efe8da 22%,
			#f8f2e7 52%,
			#fcfaf5 74%,
			transparent 90%
		),
		linear-gradient(
			to bottom,
			#2a170c 18%,
			#3b2213 56%,
			#52311d 78%,
			#704528 92%,
			#8b5b39 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .20),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 64%;
}

.drink--irish_coffee + .cream {
	top: 34px;
}

.drink--cold_brew {
	background:
		radial-gradient(
			ellipse at center 16px,
			rgba(95,55, 28, .10) 0%,
			rgba(125,75,42, .06) 22%,
			rgba(165, 110,70, .03) 40%,
			transparent 56%
		),
		linear-gradient(
			to bottom,
			#21130d 0%,
			#2d1b13 56%,
			#3b261c 82%,
			#51382a 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .16),
		inset 0 8px 10px rgba(255, 255, 255, .04);
	height: 66%;
}

.drink--cold_brew::before {
	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .10),
			rgba(255, 255, 255, 0)
		);
	border-bottom-left-radius: 64px 2px;
	border-bottom-right-radius: 64px 2px;
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--cold_brew::after {
	background:
		radial-gradient(
			ellipse,
			rgba(255, 255, 255, .16) 0%,
			rgba(255, 255, 255, .05) 55%,
			rgba(255, 255, 255, 0) 100%
		);
	border-radius: 50%;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, .12);
	content: "";
	height: 14px;
	left: -2%;
	opacity: .5;
	position: absolute;
	top: 0;
	width: 104%;
}

.drink--espresso_tonic {
	background:
		radial-gradient(
			ellipse at center 16px,
			rgba(78,40, 10, .18) 0%,
			rgba(110,62, 28, .16) 18%,
			rgba(175, 120,60, .08) 34%,
			transparent 50%
		),
		linear-gradient(
			to bottom,
			#241108 0%,
			#3a1d0f 18%,
			#5b341d 32%,
			#8d6238 44%,
			rgba(220, 180, 105, .35) 60%,
			rgba(245, 225, 170, .12) 78%,
			rgba(255, 250, 235, .03) 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(70,40, 15, .18),
		inset 0 8px 10px rgba(255, 255, 255, .05);
	height: 76%;
}

.drink--espresso_tonic::before {
	background:
		radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .06), transparent 22%),
		radial-gradient(circle at 70% 60%, rgba(255, 235, 185, .05), transparent 28%),
		linear-gradient(
			to bottom,
			#c58b52 0%,
			#aa6937 55%,
			#7d4524 100%
		);
	border-bottom-left-radius: 64px 3px;
	border-bottom-right-radius: 64px 3px;
	box-shadow: 0 2px 5px rgba(20, 10,5, .20);
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--espresso_tonic::after {
	background:
		radial-gradient(
			ellipse,
			#ddb57b 0%,
			#bd844b 65%,
			#92562d 100%
		);
	border-radius: 50%;
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, .18),
		0 2px 3px rgba(0, 0, 0, .06);
	content: "";
	height: 15px;
	left: -2%;
	position: absolute;
	top: -9px;
	width: 104%;
}

.drink--iced_latte {
	background:
		radial-gradient(
			ellipse at center 0,
			rgba(95,55, 20, .26) 0%,
			rgba(135,85,40, .18) 18%,
			rgba(210, 175, 125, .08) 36%,
			transparent 54%
		),
		linear-gradient(
			to bottom,
			#96673f 0%,
			#bf8d60 10%,
			#d9ba92 25%,
			#ead8bd 45%,
			#f7efe2 100%
		);
	box-shadow:
		inset 0 -8px 12px rgba(120,70, 20, .10),
		inset 0 8px 10px rgba(255, 255, 255, .10);
	height: 88%;
}

.drink--iced_latte::before {
	background:
		linear-gradient(
			to bottom,
			rgba(250, 247, 242, .9),
			rgba(240, 232, 220, .45),
			transparent
		);
	border-bottom-left-radius: 64px 6px;
	border-bottom-right-radius: 64px 6px;
	content: "";
	height: 16px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.drink--iced_latte::after {
	background:
		radial-gradient(
			ellipse,
			rgba(250, 247, 242, .5),
			rgba(236, 227, 213, .25)
		);
	border-radius: 50%;
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, .7);
	content: "";
	height: 16px;
	left: -2%;
	position: absolute;
	top: -2px;
	width: 104%;
}

/* Animations */
@keyframes icon-steam {
	0%, 49.99% {
		transform: scaleX(1);
	}

	50%, 100% {
		transform: scaleX(-1) translateX(-1px);
	}
}

@keyframes loader-dot {
	0%, 80%, 100% {
		opacity: .25;
		transform: scale(.8);
	}

	40% {
		opacity: 1;
		transform: scale(1);
	}
}

.drink-card--animated .glass::after {
	animation: condensation 8s ease-in-out infinite;
	opacity: 0.4;
}

.drink-card--animated .glass__inner::after {
	animation: condensation 6s ease-in-out infinite;
	opacity: 0.4;
}

.drink-card--animated .drink {
	animation: drink-transparency 6.5s ease-in-out infinite;
	transform-origin: bottom center;
}

.drink-card--animated .drink::after {
	animation: foam 5.5s ease-in-out infinite;
}

.drink-card--animated .steam--left {
	animation: steam 4.6s ease-in-out 0s infinite;
}

.drink-card--animated .steam--middle {
	animation: steam 5.3s ease-in-out 1.5s infinite;
}

.drink-card--animated .steam--right {
	animation: steam 4.1s ease-in-out 3s infinite;
}

.drink-card--animated.drink-card--alternative .glass::after,
.drink-card--animated.drink-card--alternative .glass__inner::after,
.drink-card--animated.drink-card--alternative .drink,
.drink-card--animated.drink-card--alternative .drink::after,
.drink-card--animated.drink-card--alternative .steam--left,
.drink-card--animated.drink-card--alternative .steam--middle,
.drink-card--animated.drink-card--alternative .steam--right {
	animation-delay: .5s;
}

.drink-card--animated.drink-card--alternative:last-child .glass::after,
.drink-card--animated.drink-card--alternative:last-child .glass__inner::after,
.drink-card--animated.drink-card--alternative:last-child .drink,
.drink-card--animated.drink-card--alternative:last-child .drink::after,
.drink-card--animated.drink-card--alternative:last-child .steam--left,
.drink-card--animated.drink-card--alternative:last-child .steam--middle,
.drink-card--animated.drink-card--alternative:last-child .steam--right {
	animation-delay: 1s;
}

@keyframes condensation {
	0%, 100% {
		opacity: .4;
	}

	50% {
		opacity: 1;
	}
}

@keyframes drink-transparency {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.95;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes foam {
	0%, 100% {
		transform: scaleX(1);
	}

	50% {
		transform: scaleX(.9);
	}
}

@keyframes steam {
	0% {
		opacity: 0;
		transform:
			translateY(0)
			translateX(0)
			scale(.65);
	}

	15% {
		opacity: .12;
	}

	45% {
		opacity: .28;
		transform:
			translateY(-24px)
			translateX(calc(var(--drift) * .35))
			scale(.9);
	}

	75% {
		opacity: .18;
		transform:
			translateY(-44px)
			translateX(calc(var(--drift) * .75))
			scale(1.05);
	}

	100% {
		opacity: 0;
		transform:
			translateY(-64px)
			translateX(var(--drift))
			scale(1.25);
	}
}