/*
 * 共通アニメーション（スクロール表示・hover）
 *
 * スクロール表示（assets/js/animation.js が画面内に入った要素へ .is-inview を付与）
 *   .u-reveal        … 要素を下からフェードアップ
 *   .u-reveal-group  … 直下の子要素をまとめてフェードアップ（カード一覧など。後から追加された子は動かさず表示）
 *   .u-switch-in     … 表示されるたびに短くフェードイン（タブパネルの中身）
 *
 * hover（.u-hover を付けたリンク／ボタンを起点に、自身または子孫の対象が変化する）
 *   .u-hover            … 起点。hover と :focus-visible で同じ見た目になる
 *   .u-hover--office    … 強調色をオフィスの緑にする（起点に付ける）
 *   .u-hover-zoom       … 画像を枠内で拡大。親要素に overflow: hidden が必要
 *   .u-hover-accent     … 文字色を強調色に
 *   .u-hover-shift      … 右へ 4px 移動（矢印アイコン用）
 *   .u-hover-tint       … 強調色の薄い背景を敷く（一覧行など）
 *   .u-hover-underline  … 下線を左から伸ばす（テキストリンク）
 *
 * アクセシビリティのため、薄くなるだけ（opacity のみ）の hover は使わない。
 * c-button は全ボタン共通で塗りと白抜きを反転させる（クラス付与不要）。
 */

:root {
	--motion-duration-hover: 250ms;
	--motion-duration-reveal: 900ms;
	--motion-delay-initial: 200ms;   /* 読み込み時に既に画面内にある要素は、描画が落ち着いてから動かす */
	--motion-duration-switch: 350ms;
	--motion-distance-switch: 8px;
	--motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
	--motion-distance: 24px;
}

/* スクロール表示
   JS が無効な環境（html.js が付かない）や動きを減らす設定、印刷時（未スクロール部分が透明のまま出る）は、初期状態から表示したままにする */
@media screen and (prefers-reduced-motion: no-preference) {
	.js .u-reveal,
	.js .u-reveal-group > * {
		opacity: 0;
		translate: 0 var(--motion-distance);
		transition:
			opacity var(--motion-duration-reveal) var(--motion-ease-out),
			translate var(--motion-duration-reveal) var(--motion-ease-out);
	}

	.js .u-reveal.is-initial,
	.js .u-reveal-group.is-initial > * {
		transition-delay: var(--motion-delay-initial);
	}

	.js .u-reveal.is-inview,
	.js .u-reveal-group.is-inview > * {
		opacity: 1;
		translate: 0 0;
	}
}

/* 切り替え表示：display: none から表示されるたびに再生される */
@keyframes u-switch-in {
	from {
		opacity: 0;
		translate: 0 var(--motion-distance-switch);
	}
}

@media screen and (prefers-reduced-motion: no-preference) {
	.js .u-switch-in {
		animation: u-switch-in var(--motion-duration-switch) var(--motion-ease-out) both;
	}
}

/* hover */
.u-hover {
	--u-hover-accent: var(--color-primary);
	--u-hover-tint: var(--color-primary-hover);
}

.u-hover--office {
	--u-hover-accent: var(--color-office);
	--u-hover-tint: var(--color-office-hover);
}

.u-hover-zoom {
	transition: scale 600ms var(--motion-ease-out);
}

.u-hover-accent {
	transition: color var(--motion-duration-hover) var(--motion-ease);
}

.u-hover-shift {
	transition: translate var(--motion-duration-hover) var(--motion-ease);
}

.u-hover-tint {
	transition: background-color var(--motion-duration-hover) var(--motion-ease);
}

.u-hover-underline {
	padding-bottom: 2px;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 300ms var(--motion-ease-out);
}

/* タッチ端末ではタップ後に hover 表示が残るため、:hover は対応端末のみ */
@media (hover: hover) {
	.u-hover-zoom:is(.u-hover:hover *) {
		scale: 1.06;
	}

	.u-hover-accent:is(.u-hover:hover, .u-hover:hover *) {
		color: var(--u-hover-accent);
	}

	.u-hover-shift:is(.u-hover:hover *) {
		translate: 4px 0;
	}

	.u-hover-tint:is(.u-hover:hover, .u-hover:hover *) {
		background-color: var(--u-hover-tint);
	}

	.u-hover-underline:is(.u-hover:hover, .u-hover:hover *) {
		background-size: 100% 1px;
	}
}

.u-hover-zoom:is(.u-hover:focus-visible *) {
	scale: 1.06;
}

.u-hover-accent:is(.u-hover:focus-visible, .u-hover:focus-visible *) {
	color: var(--u-hover-accent);
}

.u-hover-shift:is(.u-hover:focus-visible *) {
	translate: 4px 0;
}

.u-hover-tint:is(.u-hover:focus-visible, .u-hover:focus-visible *) {
	background-color: var(--u-hover-tint);
}

.u-hover-underline:is(.u-hover:focus-visible, .u-hover:focus-visible *) {
	background-size: 100% 1px;
}

/* ボタン：塗り ⇄ 白抜きの反転＋矢印の移動
   枠線の無い塗りボタンは白背景で輪郭が消えるため、inset の影で枠を描く */
.c-button {
	transition:
		background-color var(--motion-duration-hover) var(--motion-ease),
		color var(--motion-duration-hover) var(--motion-ease),
		box-shadow var(--motion-duration-hover) var(--motion-ease);
}

.c-button__arrow {
	transition: translate var(--motion-duration-hover) var(--motion-ease);
}

@media (hover: hover) {
	.c-button--primary:hover {
		background: var(--color-bg);
		color: var(--color-primary);
		box-shadow: inset 0 0 0 1px currentColor;
	}

	.c-button--office:hover {
		background: var(--color-bg);
		color: var(--color-office);
		box-shadow: inset 0 0 0 1px currentColor;
	}

	.c-button--outline-white:hover {
		background: var(--color-bg);
		color: var(--color-primary);
	}

	.c-button--outline-primary:hover {
		background: var(--color-primary);
		color: #fff;
	}

	.c-button:hover .c-button__arrow {
		translate: 4px 0;
	}

	.c-button:hover .c-button__arrow--left {
		translate: -4px 0;
	}
}

.c-button--primary:focus-visible {
	background: var(--color-bg);
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px currentColor;
}

.c-button--office:focus-visible {
	background: var(--color-bg);
	color: var(--color-office);
	box-shadow: inset 0 0 0 1px currentColor;
}

.c-button--outline-white:focus-visible {
	background: var(--color-bg);
	color: var(--color-primary);
}

.c-button--outline-primary:focus-visible {
	background: var(--color-primary);
	color: #fff;
}

.c-button:focus-visible .c-button__arrow {
	translate: 4px 0;
}

.c-button:focus-visible .c-button__arrow--left {
	translate: -4px 0;
}

@media (prefers-reduced-motion: reduce) {
	.u-hover-zoom,
	.u-hover-shift,
	.c-button__arrow {
		transition: none;
	}
}