/*
 * 富士CTA ボタン — navy 地 3 種（fuji-cta / fuji-cta-still / fuji-cta-ring）
 *                  ivory 地 3 種（fuji-cta-ghost / fuji-cta-ghost-still / fuji-cta-ghost-ring）
 *
 * 設計方針:
 *   - 二山マークは「ブランドロゴ」。藍(#1D2D50)＋金(#A08243)の実配色を常に保持する。
 *     ロゴはスタイル切替で色が変わってはいけないため、この SVG の 2 色だけは
 *     意図的に固定 hex（＝ブランド定数）で描く。トークン参照にしない。
 *   - ボタンの地色・文字・罫線・円環はすべて theme.json トークン（--wp--preset--color--*）参照。
 *   - navy 地版はマーク下にアイボリーのチップを敷き、藍峰も金峰も読めるようにする
 *     （地色に沈ませてロゴを崩さないため）。ghost 版は ivory 地なのでチップ不要。
 *   - 6 スタイルはすべて「地（navy / ghost）× アニメパターン（標準 / 静 / 円環）」の掛け合わせ。
 *     地の見た目（背景・文字色・チップ有無）は共通の navy3 / ghost3 グループで、
 *     アニメの挙動（マークが動くか・矢印があるか・円環か）は別グループで切って
 *     二重管理にならないようにしている。
 *   - アニメーション（安っぽくない範囲・240ms ease）:
 *       標準 (fuji-cta / fuji-cta-ghost)      … ①金の下罫スイープ ②マークせり上がり ③矢印前進
 *       静   (*-still)                        … ①金の下罫スイープ ③矢印前進（マークは動かない）
 *       円環 (*-ring)                          … ①金の下罫スイープ ④マーク周りに金の円環がくるり
 *                                                （矢印は円環に置き換え。ghost-ring のみ
 *                                                  下罫スイープなし＝円環演出だけ）
 *     prefers-reduced-motion で位置移動・円環描画アニメを無効化（即時状態変化のみ）。
 */

/* @property 登録: 円環（ring）の描画角度をアニメーション可能なカスタムプロパティにする。
   conic-gradient の起点角と組み合わせ、hover 時に 0deg→360deg へ滑らかに遷移させる。
   非対応ブラウザではこの登録自体が無視され、--fuji-ring は単なる離散値として扱われる
   （下の opacity フォールバックで自然に劣化する）。 */
@property --fuji-ring {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* ── 全 6 スタイル共通 ──────────────────────── */
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ring,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still,
		.is-style-fuji-cta-ghost-ring
	) > .wp-block-button__link {
	/* ロゴ概案「Variant of E · 並座 (Side by Side)」のジオメトリをそのまま採用。
	   二山は同一寸法の台形（底幅120・上幅24・高さ48）を水平にずらして並座させる。
	   左=藍(navy) 右=金(gold)。座標は概案 SVG から不変（＝三角形バランスを崩さない）。
	   描画順は概案どおり gold→navy＝重なり部で navy が手前。viewBox は座標を保ったまま
	   余白のみ調整（-2 26 204 60）。 */
	--fuji-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 26 204 60'%3E%3Cpolygon points='128,32 152,32 200,80 80,80' fill='%23A08243'/%3E%3Cpolygon points='50,32 74,32 122,80 2,80' fill='%231D2D50'/%3E%3C/svg%3E");

	position: relative; /* ring 版の円環（::after 絶対配置）の基準 */
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	border-radius: 0;
	padding: 0.75em 1.5em;
	letter-spacing: 0.02em;

	/* 金の下罫スイープ（初期は幅 0）。地色の上に重なる。全パターン共通の演出。 */
	background-image: linear-gradient(
		var(--wp--preset--color--gold),
		var(--wp--preset--color--gold)
	);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0 2px;

	transition:
		background-size 240ms ease,
		background-color 200ms ease,
		border-color 200ms ease;
}

/* ghost-ring は円環演出のみに絞るため、下罫スイープの対象から外す。 */
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ring,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still
	) > .wp-block-button__link:hover,
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ring,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still
	) > .wp-block-button__link:focus-visible {
	background-size: 100% 2px; /* 金罫が右まで引かれる */
}

.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ring,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still,
		.is-style-fuji-cta-ghost-ring
	) > .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ── navy 地 3 種（fuji-cta / fuji-cta-still / fuji-cta-ring）───── */
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ring
	) > .wp-block-button__link {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--ivory);
	border: 1.5px solid var(--wp--preset--color--navy);
}

/* マーク＝アイボリーのチップ＋藍金の二山（背景画像）。navy 地 3 種で共有。 */
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ring
	) > .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 2.6em;
	height: 1em;
	background-color: var(--wp--preset--color--ivory);
	background-image: var(--fuji-mark);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2em auto; /* 並座マーク（横長）をチップ内に余白を持たせて配置 */
	border-radius: 2px;
	transform: translateY(0);
	transition: transform 240ms ease;
}

/* ── ghost 地 3 種（fuji-cta-ghost / fuji-cta-ghost-still / fuji-cta-ghost-ring）── */
.wp-block-button:is(
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still,
		.is-style-fuji-cta-ghost-ring
	) > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--navy);
	border: 1.5px solid var(--wp--preset--color--navy);
}

.wp-block-button:is(
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still,
		.is-style-fuji-cta-ghost-ring
	) > .wp-block-button__link:hover,
.wp-block-button:is(
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still,
		.is-style-fuji-cta-ghost-ring
	) > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--gold);
}

/* マーク＝二山を地に直接（チップなし）。ghost 地 3 種で共有。 */
.wp-block-button:is(
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still,
		.is-style-fuji-cta-ghost-ring
	) > .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 2.2em;
	height: 0.66em;
	background: var(--fuji-mark) no-repeat center / contain;
	transform: translateY(0);
	transition: transform 240ms ease;
}

/* ── マークが動く系（標準のみ: fuji-cta / fuji-cta-ghost）───────
   still / ring はマークを静止させたままにするため、この 2 スタイルにだけ適用。 */
.wp-block-button:is(.is-style-fuji-cta, .is-style-fuji-cta-ghost)
	> .wp-block-button__link:hover::before,
.wp-block-button:is(.is-style-fuji-cta, .is-style-fuji-cta-ghost)
	> .wp-block-button__link:focus-visible::before {
	transform: translateY(-2px); /* マークがせり上がる */
}

/* ── 矢印あり系（ring 以外の 4 スタイル）─────────────────────── */
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still
	) > .wp-block-button__link::after {
	content: "\2192"; /* → */
	flex: 0 0 auto;
	color: var(--wp--preset--color--gold);
	transform: translateX(0);
	transition: transform 240ms ease;
}

.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still
	) > .wp-block-button__link:hover::after,
.wp-block-button:is(
		.is-style-fuji-cta,
		.is-style-fuji-cta-still,
		.is-style-fuji-cta-ghost,
		.is-style-fuji-cta-ghost-still
	) > .wp-block-button__link:focus-visible::after {
	transform: translateX(0.25em); /* 矢印が前進 */
}

/* ── 円環系（fuji-cta-ring / fuji-cta-ghost-ring）─────────────
   矢印を廃し、::after をマーク中心に重ねた円環として再利用する。
   conic-gradient を --fuji-ring（角度）でマスクし、hover で 0deg→360deg に
   遷移させることで「くるりと描かれる」演出にする。 */
.wp-block-button.is-style-fuji-cta-ring > .wp-block-button__link::after,
.wp-block-button.is-style-fuji-cta-ghost-ring > .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 50%;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--gold);
	--fuji-ring: 0deg;
	mask: conic-gradient(from -90deg, #000 var(--fuji-ring), transparent 0);
	-webkit-mask: conic-gradient(from -90deg, #000 var(--fuji-ring), transparent 0);
	opacity: 0; /* @property 非対応ブラウザ向けフォールバック（フェードインで劣化） */
	pointer-events: none;
	transition:
		--fuji-ring 400ms ease,
		opacity 400ms ease;
}

/* navy 版: マーク（チップ幅 2.6em、padding-left 1.5em）の中心に合わせる。 */
.wp-block-button.is-style-fuji-cta-ring > .wp-block-button__link::after {
	left: 2.8em;
	width: 2.9em;
	height: 2.9em;
	transform: translate(-50%, -50%);
}

/* ghost 版: マーク（幅 2.2em、padding-left 1.5em）の中心に合わせる。 */
.wp-block-button.is-style-fuji-cta-ghost-ring > .wp-block-button__link::after {
	left: 2.6em;
	width: 2.6em;
	height: 2.6em;
	transform: translate(-50%, -50%);
}

.wp-block-button.is-style-fuji-cta-ring > .wp-block-button__link:hover::after,
.wp-block-button.is-style-fuji-cta-ring > .wp-block-button__link:focus-visible::after,
.wp-block-button.is-style-fuji-cta-ghost-ring > .wp-block-button__link:hover::after,
.wp-block-button.is-style-fuji-cta-ghost-ring > .wp-block-button__link:focus-visible::after {
	--fuji-ring: 360deg;
	opacity: 1;
}

/* ── 動きに敏感なユーザー配慮 ───────────────── */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button:is(
			.is-style-fuji-cta,
			.is-style-fuji-cta-still,
			.is-style-fuji-cta-ring,
			.is-style-fuji-cta-ghost,
			.is-style-fuji-cta-ghost-still,
			.is-style-fuji-cta-ghost-ring
		) > .wp-block-button__link,
	.wp-block-button:is(
			.is-style-fuji-cta,
			.is-style-fuji-cta-still,
			.is-style-fuji-cta-ring,
			.is-style-fuji-cta-ghost,
			.is-style-fuji-cta-ghost-still,
			.is-style-fuji-cta-ghost-ring
		) > .wp-block-button__link::before,
	.wp-block-button:is(
			.is-style-fuji-cta,
			.is-style-fuji-cta-still,
			.is-style-fuji-cta-ring,
			.is-style-fuji-cta-ghost,
			.is-style-fuji-cta-ghost-still,
			.is-style-fuji-cta-ghost-ring
		) > .wp-block-button__link::after {
		transition: none; /* 円環は即時フル表示、マーク/矢印は即時移動なしに倒す */
	}

	/* マークが動く系: 位置移動そのものを止める（瞬間移動も禁止）。 */
	.wp-block-button:is(.is-style-fuji-cta, .is-style-fuji-cta-ghost)
		> .wp-block-button__link:hover::before,
	.wp-block-button:is(.is-style-fuji-cta, .is-style-fuji-cta-ghost)
		> .wp-block-button__link:focus-visible::before {
		transform: none;
	}

	/* 矢印あり系: 前進そのものを止める。 */
	.wp-block-button:is(
			.is-style-fuji-cta,
			.is-style-fuji-cta-still,
			.is-style-fuji-cta-ghost,
			.is-style-fuji-cta-ghost-still
		) > .wp-block-button__link:hover::after,
	.wp-block-button:is(
			.is-style-fuji-cta,
			.is-style-fuji-cta-still,
			.is-style-fuji-cta-ghost,
			.is-style-fuji-cta-ghost-still
		) > .wp-block-button__link:focus-visible::after {
		transform: none;
	}

	/* 円環系: transition を切ってあるので --fuji-ring / opacity の変化は即時反映される
	   （= ホバーで円環が一瞬でフル表示になる。translate(-50%,-50%) は静的配置なので維持）。 */
}