/* ─────────────────────────────────────────────────────────
   animations — 到着・バウンド

   派手なアニメーションは禁止（指示書§6.1）。
   prefers-reduced-motion では大きな移動アニメーションを止める（指示書§29）。
   ───────────────────────────────────────────────────────── */

/* ─── 初回の到着 ────────────────────────────────────────
   シールが順に貼られていく。--i は重なり順に基づく描画インデックス。 */

@keyframes yt-place {
	from {
		opacity: 0;
		scale: 0.92;
	}
	60% {
		opacity: 1;
		scale: 1.02;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

.yt-stage .yt-sticker {
	animation: yt-place 0.44s var(--yt-ease) backwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}

/* ─── たまに1枚だけ動く（うごメモの手描きアニメ）──────────
   全部を常に震わせると画面じゅうがざわついて落ち着かない。
   間を置いて1枚だけ、少しだけ動かす。どの1枚かは toolbox.js が選ぶ。

   なめらかに揺らすのではなく4コマを steps() でカクカク送る。
   手で描き直したコマを送っているように見せるのがねらい。

   動かすのは中の <img> だけ。ボタン側の translate / rotate / scale は
   位置・hover・選択状態が使っているので触らない。 */

@keyframes yt-wiggle {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	25% {
		transform: translate(0.45%, -0.4%) rotate(0.4deg);
	}
	50% {
		transform: translate(-0.4%, 0.3%) rotate(-0.35deg);
	}
	75% {
		transform: translate(0.25%, 0.25%) rotate(0.2deg);
	}
	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

.yt-sticker.is-wiggling img {
	animation: yt-wiggle 0.32s steps(1, end);
}

/* ─── クリック時の小さなバウンド（指示書§6.1） ──────────── */

@keyframes yt-bounce {
	0% {
		scale: 1;
	}
	38% {
		scale: 1.11;
	}
	70% {
		scale: 1.03;
	}
	100% {
		scale: 1.07;
	}
}

.yt-sticker.is-bouncing {
	animation: yt-bounce 0.32s var(--yt-ease);
}

/* ─── reduced-motion（指示書§29） ───────────────────────
   大きな移動アニメーションを停止する。状態の変化自体は残す。 */

@media (prefers-reduced-motion: reduce) {
	.yt-stage .yt-sticker,
	.yt-sticker.is-bouncing,
	.yt-sticker.is-wiggling img {
		animation: none;
	}

	.yt-sticker,
	.yt-works__item,
	.yt-works__link,
	.yt-tooltip {
		transition-duration: 0.01ms !important;
	}
}