/* ─────────────────────────────────────────────────────────
   stickers — フレークシールの配置と状態

   座標・サイズ・回転・重なり順は stickers.json 由来のカスタム
   プロパティ（--x --y --s --r --z --hr）で受け取る。
   CSS側に個別シールの数値は書かない。
   ───────────────────────────────────────────────────────── */

.yt-sticker {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	z-index: var(--layer, var(--z));
	width: calc(var(--yt-unit) * var(--s));
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;

	/* translate / rotate / scale を独立プロパティで持つ。
	   transform に畳むと hover の scale が回転を巻き込む。 */
	translate: -50% -50%;
	rotate: calc(var(--r) * 1deg);
	scale: 1;

	transition:
		scale 0.24s var(--yt-ease),
		rotate 0.42s var(--yt-ease),
		filter 0.24s var(--yt-ease),
		opacity 0.28s var(--yt-ease),
		/* 詳細カラムの開閉にあわせて並び直す */
		left 0.52s cubic-bezier(0.3, 1.06, 0.4, 1),
		top 0.52s cubic-bezier(0.3, 1.06, 0.4, 1),
		width 0.52s cubic-bezier(0.3, 1.06, 0.4, 1);
}

/* ─── 詳細カラムが開いているときの配置 ────────────────────
   単に縮小するのではなく、右の空いた帯に並び直す。
   座標は stickers.json の open が持つ。 */

.yt-toolbox.has-detail .yt-sticker {
	left: calc(var(--ox) * 1%);
	top: calc(var(--oy) * 1%);
	width: calc(var(--yt-open-unit) * var(--os));
	rotate: calc(var(--orot) * 1deg);
	/* 端から順に動き出す */
	transition-delay: calc(var(--z, 0) * 14ms);
}

/* 中央パネルを開いている間は、プロフィールだけは右の帯から外す。 */
.yt-toolbox.has-detail .yt-sticker--profile {
	display: none;
}

.yt-sticker img {
	width: 100%;
	height: auto;
	/* 影は「白い紙にシールが貼ってある」ことを示すためだけの薄いもの。
	   派手なDrop Shadowは禁止（指示書§3.3）。 */
	filter: drop-shadow(var(--yt-shadow));
	transition: filter 0.24s var(--yt-ease);
	pointer-events: none;
}

.yt-sticker--filter,
.yt-sticker--link,
.yt-sticker--profile {
	cursor: grab;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}

.yt-sticker.is-dragging {
	z-index: 999;
	/* ドラッグ中は位置を指に即座に追従させる。 */
	transition:
		scale 0.18s var(--yt-ease),
		rotate 0.18s var(--yt-ease),
		filter 0.18s var(--yt-ease),
		opacity 0.18s var(--yt-ease);
	cursor: grabbing;
	scale: 1.035;
}

.yt-stage.is-dragging,
.yt-stage.is-dragging .yt-sticker {
	user-select: none;
}

/* ─── hover（指示書§8）──────────────────────────────────
   1.03〜1.08倍 / 微小回転 / z-indexを前面へ / 影を少しだけ増やす */

@media (hover: hover) {
	.yt-sticker--filter:hover,
	.yt-sticker--link:hover,
	.yt-sticker--profile:hover {
		z-index: 50;
		scale: 1.055;
		rotate: calc((var(--r) + var(--hr)) * 1deg);
	}

	.yt-toolbox.has-detail .yt-sticker--filter:hover,
	.yt-toolbox.has-detail .yt-sticker--link:hover,
	.yt-toolbox.has-detail .yt-sticker--profile:hover {
		rotate: calc((var(--orot) + var(--hr)) * 1deg);
	}

	.yt-sticker--filter:hover img,
	.yt-sticker--link:hover img,
	.yt-sticker--profile:hover img {
		filter: drop-shadow(var(--yt-shadow-hover));
	}
}

.yt-sticker--filter:focus-visible,
.yt-sticker--link:focus-visible,
.yt-sticker--profile:focus-visible {
	z-index: 50;
	scale: 1.055;
	outline-offset: 8px;
}

/* ─── 選択状態（指示書§6.1）────────────────────────────
   わずかに拡大・1〜3度程度回転・小さくバウンド。派手な演出は禁止。 */

.yt-sticker--filter[aria-pressed='true'] {
	z-index: var(--layer, var(--z));
	scale: 1.07;
	rotate: calc((var(--r) + var(--hr) * 1.2) * 1deg);
}

.yt-toolbox.has-detail .yt-sticker--filter[aria-pressed='true'] {
	rotate: calc((var(--orot) + var(--hr) * 1.2) * 1deg);
}

.yt-sticker--filter[aria-pressed='true'] img {
	filter: drop-shadow(var(--yt-shadow-hover));
}

/* 選択中は選ばれていないシールを少し引かせる。
   消しはしない。散らかった机の見た目を保つ。 */
/* サイドバーが開いているときだけ引かせる。閉じた大きい表示では
   一部だけ薄い状態を作らない。 */
.yt-toolbox.has-detail .yt-stage.is-filtering .yt-sticker--filter:not([aria-pressed='true']) {
	opacity: 0.22;
}

/* ─── 関連するシールが浮かび上がる ──────────────────────
   左で作品を選んだときの、シール→作品の絞り込みとは逆方向のフィードバック。
   その作品に紐づくシールだけが少し浮いて前に出る。 */

/* 作品を選んだときは、関係のないステッカーを薄く退かせる。
   is-filtering より優先しないと、先にシールで絞り込んだあとに
   作品を選んだ場合だけ不透明度が上書きされてしまう。 */
.yt-stage.is-relating .yt-sticker:not(.is-related) {
	opacity: 0.18;
}

.yt-toolbox.has-detail .yt-stage.is-relating .yt-sticker:not(.is-related) {
	opacity: 0.18;
}

.yt-stage .yt-sticker.is-related {
	z-index: var(--layer, var(--z));
	scale: 1.07;
	translate: -50% calc(-50% - 16px);
	/* 順に浮き上がるよう遅延をずらす */
	transition-delay: calc(var(--rel, 0) * 80ms);
}

.yt-stage .yt-sticker.is-related img {
	filter: drop-shadow(var(--yt-shadow-hover));
}

/* ─── 該当作品0件 ────────────────────────────────────────
   押しても何も起きないシールは、押す前に分かるようにする。 */

.yt-sticker.is-empty {
	opacity: 0.34;
	cursor: default;
}

/* ─── URL未設定のSNSシール ──────────────────────────────
   飾りとして置いておく。押せるようには見せない。 */

.yt-sticker--link.is-pending {
	pointer-events: none;
}