.journal-card__media { position:relative; }

.like-button {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	min-width:58px;
	height:38px;
	padding:0 12px;
	border:1px solid rgba(255,255,255,.42);
	border-radius:19px;
	color:#fff;
	background:rgba(10,10,10,.7);
	box-shadow:0 4px 15px rgba(0,0,0,.14);
	font:700 11px/1 "Open Sans",sans-serif;
	letter-spacing:0;
	cursor:pointer;
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.like-button:hover,
.like-button:focus { color:#fff; background:rgba(10,10,10,.9); border-color:#fff; outline:none; }
.like-button:focus-visible { box-shadow:0 0 0 3px rgba(255,255,255,.45); }
.like-button__icon { display:block; width:20px; height:20px; color:#ef5757; transform:scale(.88); transition:transform .25s cubic-bezier(.2,.8,.2,1.4); }
.like-button__icon svg { display:block; width:100%; height:100%; overflow:visible; }
.like-button__heart-outline { fill:transparent; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; transition:opacity .2s ease; }
.like-button__heart-fill { opacity:0; transition:opacity .2s ease; }
.like-button.is-liked .like-button__icon { transform:scale(1); }
.like-button.is-liked .like-button__heart-outline { opacity:0; }
.like-button.is-liked .like-button__heart-fill { opacity:1; }
.like-button.is-liked { border-color:rgba(230,75,75,.62); }
.like-button.is-animating .like-button__icon { animation:like-heart-pop .42s ease; }
.like-button[disabled] { cursor:wait; opacity:.7; }

.like-button--thumbnail { position:absolute; z-index:8; right:18px; bottom:18px; }
.drawings-gallery .work-caption { padding-right:90px; }
.like-button--hero { position:relative; z-index:3; margin-top:28px; }
.journal-article__heading .like-button--hero { margin-top:26px; }

.like-burst {
	position:absolute;
	z-index:12;
	top:50%;
	left:50%;
	width:112px;
	height:104px;
	pointer-events:none;
	filter:drop-shadow(0 10px 22px rgba(40,12,48,.3));
	transform:translate(-50%,-50%);
	animation:like-burst 1s cubic-bezier(.16,.76,.24,1) forwards;
}

.like-burst__heart {
	position:absolute;
	top:0;
	left:4px;
	width:104px;
	height:104px;
	overflow:visible;
}

.like-burst__heart--1 { opacity:.1; animation:like-heart-layer-one 1s cubic-bezier(.16,.76,.24,1) forwards; }
.like-burst__heart--2 { opacity:.5; animation:like-heart-layer-two 1s cubic-bezier(.16,.76,.24,1) forwards; }
.like-burst__heart--3 { opacity:1; transform:translate(0,0) scale(1); }

.like-burst__heart--1,
.like-burst__heart--2 {
	filter:blur(.15px);
}

@keyframes like-heart-pop {
	0%,100% { transform:scale(1); }
	45% { transform:scale(1.45); }
}

@keyframes like-burst {
	0% { opacity:0; transform:translate(-50%,-42%) scale(.18) rotate(-5deg); }
	30% { opacity:1; transform:translate(-50%,-50%) scale(1.16) rotate(2deg); }
	48% { opacity:1; transform:translate(-50%,-52%) scale(.94) rotate(0); }
	68% { opacity:1; transform:translate(-50%,-55%) scale(1.02); }
	100% { opacity:0; transform:translate(-50%,-78%) scale(.84); }
}

@keyframes like-heart-layer-one {
	0% { transform:translate(-28px,15px) rotate(-14deg) scale(1.2); }
	45% { transform:translate(-17px,8px) rotate(-9deg) scale(1.12); }
	100% { transform:translate(-10px,3px) rotate(-5deg) scale(1.04); }
}

@keyframes like-heart-layer-two {
	0% { transform:translate(23px,-12px) rotate(12deg) scale(1.12); }
	45% { transform:translate(12px,-5px) rotate(7deg) scale(1.04); }
	100% { transform:translate(7px,-2px) rotate(3deg) scale(1); }
}

@media (max-width:767px) {
	.like-button--thumbnail { right:14px; bottom:14px; min-width:54px; height:36px; }
	.like-button--hero { margin-top:22px; }
}

@media (prefers-reduced-motion:reduce) {
	.like-button,
	.like-button__icon { transition:none; }
	.like-button.is-animating .like-button__icon,
	.like-burst,
	.like-burst__heart { animation:none; }
	.like-burst__heart--1 { transform:translate(-17px,8px) rotate(-9deg) scale(1.12); }
	.like-burst__heart--2 { transform:translate(12px,-5px) rotate(7deg) scale(1.04); }
}