/**
 * 共通 hover モーション。
 *
 * ガイドライン「ホバーエフェクトルール」に準拠。
 *
 * 標準軸: data-hover-bg / text / border / icon-color / icon-move / icon-scale /
 *         icon-rotate / icon-swap / image-alpha / image-scale / image-filter /
 *         bg-slide / underline / text-move
 * サイト固有: data-hover-icon-rotate（360°回転）
 * 例外属性: data-hover-action（カード等の __action。動く要素自身に付与）
 *
 * 判定:
 * - :hover … @media (hover: hover) and (pointer: fine) の中のみ
 * - :focus-visible … メディアクエリ外（キーボード操作用・常時有効）
 * - .is-preview-hover … 本番 CSS には含めない（hover-preview.css）
 *
 * セレクタの起点:
 * - 単体（ボタン等）: [data-hover-*]:hover — 属性を付けた要素自身がトリガー
 * - 複合（カード等）: .card__link:hover [data-hover-*] — トリガーは __link
 *
 * invert はコンポーネント側で --hover-invert-a（表面）/ --hover-invert-b（インク）。
 * border の行先は --hover-invert-border（未指定時は a）で上書き可。
 *
 * data-hover-action 値（領域外 → hover で元の位置）:
 *   in-down / in-right / in-up / in-left
 * overflow・絶対配置はコンポーネント CSS（card.css の .card__action）側。
 */

:root {
	--hover-duration: 0.3s;
	/* through-*（抜けて戻る）は CodePen 相当の尺。invert 系より長め。 */
	--hover-icon-move-duration: 0.6s;
	--hover-icon-rotate-duration: 0.6s;
	--hover-icon-scale-up: 1.2;
	--hover-scale-up: 1.05;
	--hover-filter-saturate: 0.7;
	--hover-scale-duration: 0.7s;
	/* bg-slide の台形（斜辺）。overhang は skew による欠けを埋める余白 */
	--hover-bg-slide-skew: -15deg;
	--hover-bg-slide-overhang: 0.75em;
}

/* --- 共通（静止・トランジション） --- */

[data-hover-text="change"] {
	transition: color var(--hover-duration);
	color: inherit;
}

[data-hover-bg="change"] {
	transition: background-color var(--hover-duration);
}

[data-hover-bg="invert"],
[data-hover-text="invert"],
[data-hover-border="invert"] {
	transition:
		background-color var(--hover-duration),
		color var(--hover-duration),
		border-color var(--hover-duration);
}

[data-hover-icon-color="invert"] .icon {
	transition: color var(--hover-duration);
}

[data-hover-icon-color="change"] .icon {
	transition: color var(--hover-duration);
}

/* through-*: 単一 SVG をキーフレームで退出→テレポート→入場 */
[data-hover-icon-move^="through"] .icon {
	overflow: hidden;
}

[data-hover-icon-scale] .icon svg {
	transition: transform var(--hover-duration);
}

[data-hover-icon-swap="on"] .icon {
	position: relative;
}

[data-hover-icon-swap="on"] .icon .icon__swap-item {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	transition: opacity var(--hover-duration);
}

[data-hover-icon-swap="on"] .icon .icon__swap-item:nth-child(2) {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* bg-slide: ボタン同寸の擬似要素をスライドさせて背景色を差し込む（斜辺 ≈15°） */
[data-hover-bg-slide] {
	isolation: isolate;
	overflow: hidden;
}

[data-hover-bg-slide="ltr"]::before,
[data-hover-bg-slide="rtl"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--hover-bg-slide-overhang));
	right: calc(-1 * var(--hover-bg-slide-overhang));
	z-index: -1;
	background-color: var(--hover-invert-b);
	transition: transform var(--hover-duration);
	pointer-events: none;
}

[data-hover-bg-slide="ltr"]::before {
	transform: translateX(-100%) skewX(var(--hover-bg-slide-skew));
}

[data-hover-bg-slide="rtl"]::before {
	transform: translateX(100%) skewX(var(--hover-bg-slide-skew));
}

[data-hover-bg-slide="center"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--hover-bg-slide-overhang));
	right: calc(-1 * var(--hover-bg-slide-overhang));
	z-index: -1;
	background-color: var(--hover-invert-b);
	transform: scaleX(0) skewX(var(--hover-bg-slide-skew));
	transform-origin: center;
	transition: transform var(--hover-duration);
	pointer-events: none;
}

[data-hover-image-alpha="on"] {
	transition: opacity var(--hover-duration);
}

[data-hover-action] {
	transition: transform var(--hover-duration);
}

[data-hover-action="in-down"] {
	transform: translateY(-100%);
}

[data-hover-action="in-right"] {
	transform: translateX(-100%);
}

[data-hover-action="in-up"] {
	transform: translateY(100%);
}

[data-hover-action="in-left"] {
	transform: translateX(100%);
}

/* --- 静止・キーフレーム（インタラクションは下部） --- */
[data-hover-underline] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label) {
	position: relative;
	display: inline-block;
}

[data-hover-underline] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(-1 * var(--wp--custom--atom--xs, 0.25rem));
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transition: transform var(--hover-duration);
	pointer-events: none;
}

[data-hover-underline="ltr"] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
	transform-origin: left center;
}

[data-hover-underline="rtl"] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
	transform-origin: right center;
}

[data-hover-underline="center"] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
	left: 10%;
	width: 80%;
	transform-origin: center center;
}

/* text-move: ラベル文字だけ抜けて戻る（icon-move through-* と同キーフレーム） */
[data-hover-text-move] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label) {
	display: inline-block;
	overflow: hidden;
}

[data-hover-text-move] :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text) {
	display: inline-block;
}

[data-hover-image-scale] img,
[data-hover-image-filter] img {
	transition:
		transform var(--hover-scale-duration),
		filter var(--hover-scale-duration);
}

@keyframes hover-icon-move-through-right {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	40% {
		transform: translateX(100%);
		opacity: 0;
	}
	40.01% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes hover-icon-move-through-left {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	40% {
		transform: translateX(-100%);
		opacity: 0;
	}
	40.01% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes hover-icon-move-through-down {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	40% {
		transform: translateY(100%);
		opacity: 0;
	}
	40.01% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes hover-icon-move-through-up {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	40% {
		transform: translateY(-100%);
		opacity: 0;
	}
	40.01% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes hover-icon-rotate {
	to {
		transform: rotate(360deg);
	}
}

@keyframes hover-icon-scale-up-rotate {
	to {
		transform: scale(var(--hover-icon-scale-up)) rotate(360deg);
	}
}

@keyframes hover-icon-scale-down-rotate {
	to {
		transform: scale(0.95) rotate(360deg);
	}
}

/* scale + rotate は transform を合成（個別指定が上書きし合わないように） */

/* --- 複合：__link（または全体を囲む要素）がトリガー、属性は子 --- */

/* --- 単体・複合：:hover（fine pointer のみ） --- */
@media (hover: hover) and (pointer: fine) {
	[data-hover-text="change"]:hover {
		color: var(--wp--preset--color--logo-blue);
	}

	[data-hover-bg="invert"]:hover {
		background-color: var(--hover-invert-b);
	}

	[data-hover-bg-slide][data-hover-bg="invert"]:hover {
		background-color: var(--hover-invert-a);
	}

	[data-hover-bg-slide="ltr"]:hover::before,
	[data-hover-bg-slide="rtl"]:hover::before {
		transform: translateX(0) skewX(var(--hover-bg-slide-skew));
	}

	[data-hover-bg-slide="center"]:hover::before {
		/* overhang で skew 欠けを埋める。足りない場合は scaleX を 1 より大きくする */
		transform: scaleX(1) skewX(var(--hover-bg-slide-skew));
	}

	[data-hover-underline]:hover :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
		transform: scaleX(1);
	}

	[data-hover-text-move="through-down"]:hover :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text) {
		animation: hover-icon-move-through-down var(--hover-icon-move-duration) forwards;
	}

	[data-hover-text-move="through-up"]:hover :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text) {
		animation: hover-icon-move-through-up var(--hover-icon-move-duration) forwards;
	}

	[data-hover-image-scale="up"]:hover img {
		transform: scale(var(--hover-scale-up));
	}

	[data-hover-image-filter="saturate"]:hover img {
		filter: saturate(var(--hover-filter-saturate));
	}

	[data-hover-text="invert"]:hover {
		color: var(--hover-invert-a);
	}

	[data-hover-border="invert"]:hover {
		border-color: var(--hover-invert-border, var(--hover-invert-a));
	}

	[data-hover-icon-color="invert"]:hover .icon,
	[data-hover-icon-color="invert"]:hover .icon[data-fill="on"] {
		color: var(--hover-invert-a);
	}

	[data-hover-icon-color="change"]:hover .icon {
		color: var(--wp--preset--color--logo-blue);
	}

	[data-hover-icon-move="through-right"]:hover .icon svg {
		animation: hover-icon-move-through-right var(--hover-icon-move-duration) forwards;
	}

	[data-hover-icon-move="through-left"]:hover .icon svg {
		animation: hover-icon-move-through-left var(--hover-icon-move-duration) forwards;
	}

	[data-hover-icon-move="through-down"]:hover .icon svg {
		animation: hover-icon-move-through-down var(--hover-icon-move-duration) forwards;
	}

	[data-hover-icon-move="through-up"]:hover .icon svg {
		animation: hover-icon-move-through-up var(--hover-icon-move-duration) forwards;
	}

	[data-hover-icon-scale="up"]:hover .icon svg {
		transform: scale(var(--hover-icon-scale-up));
	}

	[data-hover-icon-scale="down"]:hover .icon svg {
		transform: scale(0.95);
	}

	[data-hover-icon-rotate="on"]:hover .icon svg {
		animation: hover-icon-rotate var(--hover-icon-rotate-duration) forwards;
	}

	[data-hover-icon-scale="up"][data-hover-icon-rotate="on"]:hover .icon svg {
		transform: none;
		animation: hover-icon-scale-up-rotate var(--hover-icon-rotate-duration) forwards;
	}

	[data-hover-icon-scale="down"][data-hover-icon-rotate="on"]:hover .icon svg {
		transform: none;
		animation: hover-icon-scale-down-rotate var(--hover-icon-rotate-duration) forwards;
	}

	[data-hover-icon-swap="on"]:hover .icon .icon__swap-item:nth-child(1) {
		opacity: 0;
	}

	[data-hover-icon-swap="on"]:hover .icon .icon__swap-item:nth-child(2) {
		opacity: 1;
	}

	.card__link:hover [data-hover-text="change"],
	.card-link:hover [data-hover-text="change"] {
		color: var(--wp--preset--color--logo-blue);
	}

	.card__link:hover [data-hover-image-alpha="on"],
	.card-link:hover [data-hover-image-alpha="on"] {
		opacity: var(--wp--custom--opacity--50);
	}

	.card__link:hover [data-hover-action="in-down"],
	.card__link:hover [data-hover-action="in-right"],
	.card__link:hover [data-hover-action="in-up"],
	.card__link:hover [data-hover-action="in-left"],
	.card-link:hover [data-hover-action="in-down"],
	.card-link:hover [data-hover-action="in-right"],
	.card-link:hover [data-hover-action="in-up"],
	.card-link:hover [data-hover-action="in-left"] {
		transform: translate(0);
	}

}

/* --- :focus-visible（端末によらず常時有効） --- */

[data-hover-text="change"]:focus-visible {
	color: var(--wp--preset--color--logo-blue);
}

[data-hover-bg="invert"]:focus-visible {
	background-color: var(--hover-invert-b);
}

[data-hover-bg-slide][data-hover-bg="invert"]:focus-visible {
	background-color: var(--hover-invert-a);
}

[data-hover-bg-slide="ltr"]:focus-visible::before,
[data-hover-bg-slide="rtl"]:focus-visible::before {
	transform: translateX(0) skewX(var(--hover-bg-slide-skew));
}

[data-hover-bg-slide="center"]:focus-visible::before {
	/* overhang で skew 欠けを埋める。足りない場合は scaleX を 1 より大きくする */
	transform: scaleX(1) skewX(var(--hover-bg-slide-skew));
}

[data-hover-underline]:focus-visible :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
	transform: scaleX(1);
}

[data-hover-text-move="through-down"]:focus-visible :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text) {
	animation: hover-icon-move-through-down var(--hover-icon-move-duration) forwards;
}

[data-hover-text-move="through-up"]:focus-visible :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text) {
	animation: hover-icon-move-through-up var(--hover-icon-move-duration) forwards;
}

[data-hover-image-scale="up"]:focus-visible img {
	transform: scale(var(--hover-scale-up));
}

[data-hover-image-filter="saturate"]:focus-visible img {
	filter: saturate(var(--hover-filter-saturate));
}

[data-hover-text="invert"]:focus-visible {
	color: var(--hover-invert-a);
}

[data-hover-border="invert"]:focus-visible {
	border-color: var(--hover-invert-border, var(--hover-invert-a));
}

[data-hover-icon-color="invert"]:focus-visible .icon,
[data-hover-icon-color="invert"]:focus-visible .icon[data-fill="on"] {
	color: var(--hover-invert-a);
}

[data-hover-icon-color="change"]:focus-visible .icon {
	color: var(--wp--preset--color--logo-blue);
}

[data-hover-icon-move="through-right"]:focus-visible .icon svg {
	animation: hover-icon-move-through-right var(--hover-icon-move-duration) forwards;
}

[data-hover-icon-move="through-left"]:focus-visible .icon svg {
	animation: hover-icon-move-through-left var(--hover-icon-move-duration) forwards;
}

[data-hover-icon-move="through-down"]:focus-visible .icon svg {
	animation: hover-icon-move-through-down var(--hover-icon-move-duration) forwards;
}

[data-hover-icon-move="through-up"]:focus-visible .icon svg {
	animation: hover-icon-move-through-up var(--hover-icon-move-duration) forwards;
}

[data-hover-icon-scale="up"]:focus-visible .icon svg {
	transform: scale(var(--hover-icon-scale-up));
}

[data-hover-icon-scale="down"]:focus-visible .icon svg {
	transform: scale(0.95);
}

[data-hover-icon-rotate="on"]:focus-visible .icon svg {
	animation: hover-icon-rotate var(--hover-icon-rotate-duration) forwards;
}

[data-hover-icon-scale="up"][data-hover-icon-rotate="on"]:focus-visible .icon svg {
	transform: none;
	animation: hover-icon-scale-up-rotate var(--hover-icon-rotate-duration) forwards;
}

[data-hover-icon-scale="down"][data-hover-icon-rotate="on"]:focus-visible .icon svg {
	transform: none;
	animation: hover-icon-scale-down-rotate var(--hover-icon-rotate-duration) forwards;
}

[data-hover-icon-swap="on"]:focus-visible .icon .icon__swap-item:nth-child(1) {
	opacity: 0;
}

[data-hover-icon-swap="on"]:focus-visible .icon .icon__swap-item:nth-child(2) {
	opacity: 1;
}

.card__link:focus-visible:where(:not([data-focus="pointer"])) [data-hover-text="change"],
.card-link:focus-visible [data-hover-text="change"] {
	color: var(--wp--preset--color--logo-blue);
}

.card__link:focus-visible:where(:not([data-focus="pointer"])) [data-hover-image-alpha="on"],
.card-link:focus-visible [data-hover-image-alpha="on"] {
	opacity: var(--wp--custom--opacity--50);
}

.card__link:focus-visible:where(:not([data-focus="pointer"])) [data-hover-action="in-down"],
.card__link:focus-visible:where(:not([data-focus="pointer"])) [data-hover-action="in-right"],
.card__link:focus-visible:where(:not([data-focus="pointer"])) [data-hover-action="in-up"],
.card__link:focus-visible:where(:not([data-focus="pointer"])) [data-hover-action="in-left"],
.card-link:focus-visible [data-hover-action="in-down"],
.card-link:focus-visible [data-hover-action="in-right"],
.card-link:focus-visible [data-hover-action="in-up"],
.card-link:focus-visible [data-hover-action="in-left"] {
	transform: translate(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-hover-text="change"],
	[data-hover-bg="change"],
	[data-hover-bg="invert"],
	[data-hover-text="invert"],
	[data-hover-border="invert"],
	[data-hover-icon-color="invert"] .icon,
	[data-hover-icon-color="change"] .icon,
	[data-hover-action],
	[data-hover-image-alpha="on"],
	[data-hover-icon-scale] .icon svg,
	[data-hover-icon-rotate="on"] .icon svg,
	[data-hover-icon-swap="on"] .icon .icon__swap-item,
	[data-hover-bg-slide="ltr"]::before,
	[data-hover-bg-slide="rtl"]::before,
	[data-hover-bg-slide="center"]::before {
		transition: none;
	}

	[data-hover-icon-move^="through"]:hover .icon svg,
	[data-hover-icon-move^="through"]:focus-visible .icon svg,
	[data-hover-icon-rotate="on"]:hover .icon svg,
	[data-hover-icon-rotate="on"]:focus-visible .icon svg {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	[data-hover-icon-scale]:hover .icon svg,
	[data-hover-icon-scale]:focus-visible .icon svg {
		transform: none !important;
	}

	[data-hover-icon-swap="on"] .icon .icon__swap-item:nth-child(2) {
		display: none;
	}

	[data-hover-icon-swap="on"]:hover .icon .icon__swap-item:nth-child(1),
	[data-hover-icon-swap="on"]:focus-visible .icon .icon__swap-item:nth-child(1) {
		opacity: 1 !important;
	}

	[data-hover-underline] :is(.btn__label, .menu-link__label, .toc__label, .drawer-submenu__label, .drawer__label, .sidebar__label, .breadcrumb__label, .pagination__label, .footer__label)::after {
		transition: none;
	}

	[data-hover-text-move]:hover :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text),
	[data-hover-text-move]:focus-visible :is(.btn__label-text, .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text), .menu-link__label-text, .toc__label-text, .drawer-submenu__label-text, .drawer__label-text, .sidebar__label-text, .breadcrumb__label-text, .pagination__label-text, .footer__label-text) {
		animation: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	[data-hover-image-scale] img,
	[data-hover-image-filter] img {
		transition: none;
	}

	[data-hover-image-scale="up"]:hover img,
	[data-hover-image-scale="up"]:focus-visible img{
		transform: none;
	}

	[data-hover-image-filter="saturate"]:hover img,
	[data-hover-image-filter="saturate"]:focus-visible img{
		filter: none;
	}
}