/**
 * css/components/back-to-top.css
 * ============================================================
 * A LEGEND 2：Back To Top
 * ============================================================
 *
 * 役割：
 * - template-parts/components/back-to-top.php の固定ボタンを装飾します。
 * - ページ最上部では隠し、JSが .is-visible を付与した時だけ表示します。
 * - JSが更新する --aleg2-back-to-top-footer-offset を使い、
 *   フッター接近時にボタンを上へ逃がします。
 *
 * 方針：
 * - 色、角丸、影、z-index は固定値ではなく既存のDesign Tokenへ接続します。
 * - iPhoneなどのsafe-areaを考慮し、画面下部UIと干渉しにくくします。
 * - モバイルドロワーや印刷時には表示しません。
 * - アイコンはSVG前提で装飾し、フォント依存のテキスト記号による見た目のブレを避けます。
 */

.aleg2-back-to-top {
	/**
	 * コンポーネント内変数。
	 *
	 * 将来、管理画面から表示位置やサイズを設定化する場合も、
	 * ここを入口にすればCSS全体へ影響を広げずに調整できます。
	 */
	--aleg2-back-to-top-size: clamp(44px, 4.2vw, 56px);
	--aleg2-back-to-top-offset-inline: clamp(16px, 2.8vw, 28px);
	--aleg2-back-to-top-offset-block: clamp(16px, 2.8vw, 28px);
	--aleg2-back-to-top-footer-offset: 0px;
	--aleg2-back-to-top-icon-size: clamp(20px, 2.2vw, 24px);
	--aleg2-back-to-top-icon-stroke: 2.45;

	position: fixed;
	inset-inline-end: var(--aleg2-back-to-top-offset-inline);
	inset-block-end: calc(
		var(--aleg2-back-to-top-offset-block)
		+ var(--aleg2-back-to-top-footer-offset)
		+ env(safe-area-inset-bottom, 0px)
	);
	z-index: calc(var(--aleg2-z-header, 80) - 1);

	display: inline-grid;
	place-items: center;
	inline-size: var(--aleg2-back-to-top-size);
	block-size: var(--aleg2-back-to-top-size);
	padding: 0;
	overflow: hidden;

	color: var(--aleg2-color-on-primary, #061018);

	/**
	 * background / borderは先に素直なfallbackを置き、
	 * color-mix() 対応ブラウザでは下の装飾グラデーションへ上書きします。
	 */
	background: var(--aleg2-color-primary, #8ee6ff);
	background:
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--aleg2-color-primary, #8ee6ff) 100%, transparent),
			color-mix(in srgb, var(--aleg2-color-secondary, var(--aleg2-color-primary, #8ee6ff)) 34%, var(--aleg2-color-primary, #8ee6ff))
		);
	border: 1px solid var(--aleg2-color-border, rgba(255, 255, 255, 0.18));
	border-color: color-mix(in srgb, currentColor 20%, transparent);
	border-radius: var(--aleg2-radius-pill, 999px);
	box-shadow: var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, 0.22));
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 10px, 0) scale(0.96);
	transition:
		opacity 0.22s var(--aleg2-ease-standard, ease),
		visibility 0.22s var(--aleg2-ease-standard, ease),
		transform 0.22s var(--aleg2-ease-standard, ease),
		inset-block-end 0.18s var(--aleg2-ease-standard, ease),
		box-shadow 0.22s var(--aleg2-ease-standard, ease);
}

/**
 * ボタン上部に薄い光沢を重ねます。
 *
 * 疑似要素は固定色ではなく currentColor を薄く混ぜるため、
 * primary色やプリセット変更に追従しながら、単調なベタ塗り感を抑えます。
 */
.aleg2-back-to-top::before {
	position: absolute;
	inset: 1px 1px auto;
	block-size: 42%;
	border-radius: inherit;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, currentColor 28%, transparent),
			transparent
		);
	content: "";
	opacity: 0.42;
	pointer-events: none;
}

/**
 * ボタン内側にごく薄いリングを入れ、SVGアイコンが浮きすぎないようにします。
 */
.aleg2-back-to-top::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
	content: "";
	pointer-events: none;
}

.aleg2-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0) scale(1);
}

.aleg2-back-to-top__icon {
	position: relative;
	z-index: 1;
	display: inline-grid;
	place-items: center;
	inline-size: var(--aleg2-back-to-top-icon-size);
	block-size: var(--aleg2-back-to-top-icon-size);
}

/**
 * SVGは currentColor を継承します。
 *
 * HTML側で stroke="currentColor" にしているため、
 * ここではサイズ・線幅・アニメーションだけを担当します。
 * 文字アイコン用の font-size / font-weight に依存しないことで、
 * OSやブラウザのフォント差による見た目のブレを避けます。
 */
.aleg2-back-to-top__svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	stroke-width: var(--aleg2-back-to-top-icon-stroke);
	transform: translate3d(0, 0, 0);
	transition:
		transform 0.22s var(--aleg2-ease-standard, ease),
		stroke-width 0.22s var(--aleg2-ease-standard, ease);
}

.aleg2-back-to-top:hover,
.aleg2-back-to-top:focus-visible {
	transform: translate3d(0, -2px, 0) scale(1.02);
	box-shadow:
		var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, 0.22)),
		var(--aleg2-shadow-glow-primary, 0 0 42px rgba(142, 230, 255, 0.24));
}

/**
 * hover / focus時は、ボタン全体だけでなくアイコンも少し上へ抜けるようにします。
 * 移動量は控えめにし、操作UIとしての品を保ちます。
 */
.aleg2-back-to-top:hover .aleg2-back-to-top__svg,
.aleg2-back-to-top:focus-visible .aleg2-back-to-top__svg {
	--aleg2-back-to-top-icon-stroke: 2.6;

	transform: translate3d(0, -2px, 0);
}

.aleg2-back-to-top:focus-visible {
	outline: 0;
	box-shadow:
		var(--aleg2-focus-ring, 0 0 0 3px rgba(142, 230, 255, 0.28)),
		var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, 0.22));
}

/**
 * モバイルドロワーが開いている間は、操作面で競合しないよう非表示にします。
 * z-indexはdrawerより下にしていますが、状態クラスでも明示的に隠します。
 */
html.aleg2-mobile-menu-open .aleg2-back-to-top,
body.aleg2-mobile-menu-open .aleg2-back-to-top {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 10px, 0) scale(0.96);
}

/**
 * motionを減らす設定のユーザーには、表示切り替えやアイコンhoverの移動感を抑えます。
 */
@media (prefers-reduced-motion: reduce) {
	.aleg2-back-to-top,
	.aleg2-back-to-top__svg {
		transition:
			opacity 0.01ms linear,
			visibility 0.01ms linear;
		transform: none;
	}

	.aleg2-back-to-top.is-visible,
	.aleg2-back-to-top:hover,
	.aleg2-back-to-top:focus-visible,
	.aleg2-back-to-top:hover .aleg2-back-to-top__svg,
	.aleg2-back-to-top:focus-visible .aleg2-back-to-top__svg {
		transform: none;
	}
}

/**
 * 印刷時に固定UIは不要です。
 */
@media print {
	.aleg2-back-to-top {
		display: none !important;
	}
}