/* お気に入り（星）と「後でみる」（チェック）ボタン。
 * 押していない = グレー / 保存した = 星は黄色、チェックは緑。
 * 押した瞬間に、保存したときは弾むアニメーション、解除したときは縮むアニメーションが出る。
 * アニメーションは JS が押した瞬間だけ --pop / --unpop を付けて動かす
 * （ページを開いただけで、保存済みのボタンが動くことはない）。 */
.favorite-button,
.later-button {
	--saved-button-off: #aab3bb;

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 1px 4px rgba(16, 42, 67, .28);
	color: var(--saved-button-off);
	cursor: pointer;
	transition: color .25s ease, transform .15s ease;
}

.favorite-button {
	--saved-button-on: #f5b400;
}

.later-button {
	--saved-button-on: #1f9d55;
}

.favorite-button:hover,
.later-button:hover {
	transform: scale(1.1);
}

/* 押している間は、ぎゅっと沈む。 */
.favorite-button:active,
.later-button:active {
	transform: scale(.88);
}

.favorite-button:focus-visible,
.later-button:focus-visible {
	outline: 3px solid #d7282f;
	outline-offset: 2px;
}

.favorite-button__icon,
.later-button__icon {
	display: block;
	fill: currentColor;
	pointer-events: none;
}

.favorite-button--saved,
.later-button--saved {
	color: var(--saved-button-on);
}

/* サムネイルの右上に、2 つ並べて重ねる（左: 後でみる / 右: お気に入り）。
 * 置く側の枠は position: relative にしておく。 */
.save-buttons {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

/* --- 保存したとき：大きく回って弾み、まわりに輪が広がる ----------------------- */
.favorite-button--pop .favorite-button__icon,
.later-button--pop .later-button__icon {
	animation: saved-button-pop .55s cubic-bezier(.2, .9, .3, 1.3);
}

.favorite-button--pop::after,
.later-button--pop::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--saved-button-on);
	border-radius: 50%;
	pointer-events: none;
	animation: saved-button-ring .55s ease-out;
}

@keyframes saved-button-pop {
	0% {
		transform: scale(1) rotate(0);
	}

	35% {
		transform: scale(1.6) rotate(-20deg);
	}

	65% {
		transform: scale(.88) rotate(8deg);
	}

	100% {
		transform: scale(1) rotate(0);
	}
}

@keyframes saved-button-ring {
	0% {
		opacity: .9;
		transform: scale(.7);
	}

	100% {
		opacity: 0;
		transform: scale(1.9);
	}
}

/* --- 解除したとき：一度すっと縮んで戻る ---------------------------------------- */
.favorite-button--unpop .favorite-button__icon,
.later-button--unpop .later-button__icon {
	animation: saved-button-unpop .3s ease;
}

@keyframes saved-button-unpop {
	0% {
		transform: scale(1);
	}

	45% {
		transform: scale(.65);
	}

	100% {
		transform: scale(1);
	}
}

/* 動きを減らす設定の人には、アニメーションを出さない（色だけ変わる）。 */
@media (prefers-reduced-motion: reduce) {
	.favorite-button,
	.later-button,
	.favorite-button--pop .favorite-button__icon,
	.later-button--pop .later-button__icon,
	.favorite-button--unpop .favorite-button__icon,
	.later-button--unpop .later-button__icon {
		animation: none;
		transition: color .25s ease;
	}

	.favorite-button--pop::after,
	.later-button--pop::after {
		display: none;
	}
}