/*
-------------------------------------------------------

focus visible

キーボード操作時にフォーカス位置を可視化する。
:focus ではなく :focus-visible を使うことで、
マウスクリック時には表示されず、キーボード操作時のみ表示される。
（WCAG 2.4.7 Focus Visible）

-------------------------------------------------------
*/

:where( a, button, input, select, textarea, summary, [tabindex]:not( [tabindex="-1"] ) ):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 背景がプライマリ色の要素はアウトラインが見えづらいため、白で縁取る */

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -4px;
}


/*
-------------------------------------------------------

prefers-reduced-motion

OS の「視差効果を減らす」設定に対応する。
移動をともなう演出は止め、フェードは残す方針。
GSAP は要素の位置を直接書き換えるため CSS だけでは止まらない。
JS 側の対応は assets/js/gsap.js と assets/js/script.js を参照。
（WCAG 2.3.3 Animation from Interactions）

-------------------------------------------------------
*/

@media ( prefers-reduced-motion: reduce ) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* スライダーの自動再生による無限の動きを止める */

	.slick-slider .slick-track {
		transition: none !important;
	}

}