/* ================================================================
   core/button — Block Styles
   Figma: type=Primary/White/Outline/Outline-White/CV
   ================================================================ */

/* ── 共通（全スタイル共通）──────────────────────────── */
.wp-block-button .wp-block-button__link {
	border-radius: 9999px;
	font-size: var(--wp--preset--font-size--font-18);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	padding: var(--wp--preset--spacing--size-12) var(--wp--preset--spacing--size-48);
	padding-right: calc(var(--wp--preset--spacing--size-48) * 0.80);
	transition: background var(--duration-base) var(--ease-base),
		color var(--duration-base) var(--ease-base),
		border-color var(--duration-base) var(--ease-base),
		box-shadow var(--duration-base) var(--ease-base);
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--size-8);
}

/* Font Awesome アイコン（<i> タグ） */
.wp-block-button .wp-block-button__link i {
	font-size: var(--wp--preset--font-size--font-18);
	line-height: 1;
}

/* ── Primary（単色ティール）────────────────────────── */
:root .wp-block-button.is-style-primary .wp-block-button__link {
	background: var(--wp--preset--color--primary-700);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-700);
	border-color: var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-primary .wp-block-button__link:active {
	background: var(--wp--preset--color--primary-800);
	border-color: var(--wp--preset--color--primary-800);
	color: var(--wp--preset--color--white);
}

/* ── CV（グラデーション・主要CTA）──────────────────── */
/* グラデーション間の transition は ::after + opacity で実現 */
:root .wp-block-button.is-style-cv .wp-block-button__link {
	background: linear-gradient(90deg,
			var(--wp--preset--color--primary-500) 0%,
			var(--wp--preset--color--primary-800) 100%);
	background-size: 200% 100%;
	/* keyframes kw-gradient-shift は全ページ常時読み込みの style.css で定義 */
	animation: kw-gradient-shift 6s ease-in-out infinite;
	color: var(--wp--preset--color--white);
	border: none;
	box-shadow: 0 0 4px rgba(73, 185, 208, 0.30);
	letter-spacing: 0.05em;
	position: relative;
	isolation: isolate;
	transition: box-shadow var(--duration-base) var(--ease-base),
		filter var(--duration-base) var(--ease-base);
}

/* アクセシビリティ：視差効果を減らす設定ではアニメーション停止 */
@media (prefers-reduced-motion: reduce) {
	:root .wp-block-button.is-style-cv .wp-block-button__link {
		animation: none;
	}
}

:root .wp-block-button.is-style-cv .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: linear-gradient(270deg,
			var(--wp--preset--color--primary-500) 0%,
			var(--wp--preset--color--primary-800) 100%);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-base);
	z-index: -1;
}

:root .wp-block-button.is-style-cv .wp-block-button__link:hover::after {
	opacity: 1;
}

:root .wp-block-button.is-style-cv .wp-block-button__link:hover {
	box-shadow: 0 0 8px rgba(73, 185, 208, 0.50);
	color: var(--wp--preset--color--white);
	filter: brightness(125%);
}

/* ── White（白背景・暗い背景上で使用）──────────────── */
:root .wp-block-button.is-style-white .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-700);
	border: 2px solid var(--wp--preset--color--white);
}

:root .wp-block-button.is-style-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-700);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

:root .wp-block-button.is-style-white .wp-block-button__link:active {
	background: var(--wp--preset--color--primary-100);
	color: var(--wp--preset--color--primary-800);
	border-color: var(--wp--preset--color--primary-100);
}

/* ── Outline（枠線・明るい背景用）──────────────────── */
:root .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-700);
	border: 2px solid var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-700);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-outline .wp-block-button__link:active {
	background: transparent;
	color: var(--wp--preset--color--primary-800);
	border-color: var(--wp--preset--color--primary-800);
}

/* ── Outline-White（枠線・暗い背景用）──────────────── */
:root .wp-block-button.is-style-outline-white .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
}

:root .wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-outline-white .wp-block-button__link:active {
	color: var(--wp--preset--color--primary-100);
	border-color: var(--wp--preset--color--primary-100);
}

/* ================================================================
   スライドインバリアント（::before で左→右スライド）
   各スタイルに ::before のプロパティをすべて直書き（特異性の競合を避けるため）
   ================================================================ */

/* ── Primary Slide（ティール→白スライドイン）────────── */
:root .wp-block-button.is-style-primary-slide .wp-block-button__link {
	background: var(--wp--preset--color--primary-700);
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary-700);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

:root .wp-block-button.is-style-primary-slide .wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-base) var(--ease-base);
	z-index: -1;
}

:root .wp-block-button.is-style-primary-slide .wp-block-button__link:hover::before {
	transform: scaleX(1);
}

:root .wp-block-button.is-style-primary-slide .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-primary-slide .wp-block-button__link:active {
	background: var(--wp--preset--color--primary-800);
	border-color: var(--wp--preset--color--primary-800);
	color: var(--wp--preset--color--white);
}

/* ── White Slide（白→ティールスライドイン）──────────── */
:root .wp-block-button.is-style-white-slide .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary-700);
	border: 2px solid var(--wp--preset--color--white);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

:root .wp-block-button.is-style-white-slide .wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary-700);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-base) var(--ease-base);
	z-index: -1;
}

:root .wp-block-button.is-style-white-slide .wp-block-button__link:hover::before {
	transform: scaleX(1);
}

:root .wp-block-button.is-style-white-slide .wp-block-button__link:hover {
	color: var(--wp--preset--color--white);
}

:root .wp-block-button.is-style-white-slide .wp-block-button__link:active {
	background: var(--wp--preset--color--primary-100);
	color: var(--wp--preset--color--primary-800);
	border-color: var(--wp--preset--color--primary-100);
}

/* ── Outline Slide（透明→ティール塗りスライドイン）────── */
:root .wp-block-button.is-style-outline-slide .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary-700);
	border: 2px solid var(--wp--preset--color--primary-700);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

:root .wp-block-button.is-style-outline-slide .wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary-700);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-base) var(--ease-base);
	z-index: -1;
}

:root .wp-block-button.is-style-outline-slide .wp-block-button__link:hover::before {
	transform: scaleX(1);
}

:root .wp-block-button.is-style-outline-slide .wp-block-button__link:hover {
	color: var(--wp--preset--color--white);
}

:root .wp-block-button.is-style-outline-slide .wp-block-button__link:active {
	color: var(--wp--preset--color--primary-800);
	border-color: var(--wp--preset--color--primary-800);
}

/* ── Outline-White Slide（透明→白塗りスライドイン）────── */
:root .wp-block-button.is-style-outline-white-slide .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--white);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

:root .wp-block-button.is-style-outline-white-slide .wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duration-base) var(--ease-base);
	z-index: -1;
}

:root .wp-block-button.is-style-outline-white-slide .wp-block-button__link:hover::before {
	transform: scaleX(1);
}

:root .wp-block-button.is-style-outline-white-slide .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary-700);
}

:root .wp-block-button.is-style-outline-white-slide .wp-block-button__link:active {
	color: var(--wp--preset--color--primary-100);
	border-color: var(--wp--preset--color--primary-100);
}