/**
 * ブックマークボタン共通スタイル（thread-actions / thread-sticky-bar 共用）
 *
 * - 基本見た目: リアクションボタン（reaction-btn）と同系の角丸トーン
 * - アクティブ状態（--active）: メインカラーで塗り、しおりSVG を fill する
 * - クリック演出: 追加時はしおりが差し込まれるポップ + キラ2粒、解除時は軽いスケール
 * - prefers-reduced-motion 対応
 *
 * sticky-bar 側固有のサイズ・配置は thread-detail.css の .thread-sticky-bar__bookmark
 * に既存定義あり。本ファイルは「.bookmark-btn 共通」を担当する。
 */

/* ============================================================
   レイアウト・基本外観
   ============================================================ */

.bookmark-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	font: inherit;
	font-size: var(--font-size-xs);
	color: var(--color-text-secondary, #6b7280);
	background: transparent;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-sm, 4px);
	cursor: pointer;
	overflow: visible;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.bookmark-btn:hover:not(:disabled) {
	border-color: var(--color-main, #15ccb6);
	color: var(--color-text-primary, #1a1a1a);
	background: color-mix(in srgb, var(--color-main, #15ccb6) 6%, transparent);
}

.bookmark-btn:focus-visible {
	outline: 2px solid var(--color-main, #15ccb6);
	outline-offset: 2px;
}

.bookmark-btn:disabled {
	cursor: wait;
	opacity: 0.7;
}

.bookmark-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.bookmark-btn__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 非アクティブ: 線画のしおり */
.bookmark-btn:not(.bookmark-btn--active) .bookmark-btn__icon svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   アクティブ状態（リアクションの --active と同系統）
   ============================================================ */

.bookmark-btn--active {
	color: var(--color-main, #15ccb6);
	border-color: var(--color-main, #15ccb6);
	background: color-mix(in srgb, var(--color-main, #15ccb6) 14%, transparent);
}

.bookmark-btn--active:hover:not(:disabled) {
	background: color-mix(in srgb, var(--color-main, #15ccb6) 20%, transparent);
}

.bookmark-btn--active .bookmark-btn__icon svg path {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ============================================================
   クリック演出 - 追加時（しおり差し込み + キラ2粒）
   ============================================================ */

@keyframes wakuwaku-bookmark-drop {
	0% {
		transform: translateY(-6px) scale(0.85);
	}
	55% {
		transform: translateY(2px) scale(1.15);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

.bookmark-btn--just-added .bookmark-btn__icon {
	animation: wakuwaku-bookmark-drop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}

.bookmark-btn__sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
}

.bookmark-btn__sparkle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-main, #15ccb6);
	opacity: 0;
}

.bookmark-btn__sparkle:nth-child(1) {
	top: 6px;
	left: 10px;
}

.bookmark-btn__sparkle:nth-child(2) {
	top: 12px;
	right: 8px;
}

@keyframes wakuwaku-bookmark-sparkle {
	0% {
		opacity: 0;
		transform: scale(0.4) translate(0, 0);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.4) translate(var(--dx, 4px), var(--dy, -8px));
	}
}

.bookmark-btn--just-added .bookmark-btn__sparkle:nth-child(1) {
	--dx: -8px;
	--dy: -10px;
	animation: wakuwaku-bookmark-sparkle 0.55s ease-out 0.05s 1;
}

.bookmark-btn--just-added .bookmark-btn__sparkle:nth-child(2) {
	--dx: 8px;
	--dy: -8px;
	animation: wakuwaku-bookmark-sparkle 0.55s ease-out 0.1s 1;
}

/* ============================================================
   クリック演出 - 解除時（軽いスケールダウンのみ）
   ============================================================ */

@keyframes wakuwaku-bookmark-out {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.85);
	}
	100% {
		transform: scale(1);
	}
}

.bookmark-btn--just-removed .bookmark-btn__icon {
	animation: wakuwaku-bookmark-out 0.25s ease 1;
}

/* ============================================================
   prefers-reduced-motion 対応
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.bookmark-btn,
	.bookmark-btn--just-added .bookmark-btn__icon,
	.bookmark-btn--just-added .bookmark-btn__sparkle,
	.bookmark-btn--just-removed .bookmark-btn__icon {
		animation: none;
		transition: none;
	}
}

/* ============================================================
   エンゲージメントアテンション（T1: 画面に入った瞬間に1回発火）
   仕様: doc/ux-engagement-attention-spec.md
   - .is-engage-attn が JS 側から付与され、~700ms で外される
   - 既存の --just-added（押下時）とは別演出（sparkle 距離も控えめ）
   ============================================================ */

.bookmark-btn.is-engage-attn {
	animation: wakuwaku-bookmark-engage-ring 700ms ease-out 1;
}

.bookmark-btn.is-engage-attn .bookmark-btn__icon {
	animation: wakuwaku-bookmark-engage-icon 600ms ease-out 1;
}

.bookmark-btn.is-engage-attn .bookmark-btn__sparkle:nth-child(1) {
	--dx: -4px;
	--dy: -6px;
	animation: wakuwaku-bookmark-sparkle 0.6s ease-out 0.1s 1;
}

.bookmark-btn.is-engage-attn .bookmark-btn__sparkle:nth-child(2) {
	--dx: 4px;
	--dy: -5px;
	animation: wakuwaku-bookmark-sparkle 0.6s ease-out 0.18s 1;
}

@keyframes wakuwaku-bookmark-engage-ring {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-main) 50%, transparent);
		transform: scale(1);
	}
	40% {
		box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-main) 0%, transparent);
		transform: scale(1.04);
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
		transform: scale(1);
	}
}

@keyframes wakuwaku-bookmark-engage-icon {
	0% {
		transform: translateY(0) rotate(0);
	}
	35% {
		transform: translateY(-3px) rotate(-3deg);
	}
	70% {
		transform: translateY(1px) rotate(2deg);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bookmark-btn.is-engage-attn,
	.bookmark-btn.is-engage-attn .bookmark-btn__icon,
	.bookmark-btn.is-engage-attn .bookmark-btn__sparkle {
		animation: none;
	}
}

/* ============================================================
   カード用コンパクト版（thread-card / article-card で使用）
   テキストラベルを持たず、しおりアイコンのみのコンパクト表示。
   ============================================================ */

.bookmark-btn--card {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: var(--radius-full, 9999px);
	flex: 0 0 auto;
	gap: 0;
	justify-content: center;
}

.bookmark-btn--card .bookmark-btn__icon {
	width: 16px;
	height: 16px;
}