/**
 * css/components/marquee.css
 * ============================================================
 * A LEGEND 2：Marquee
 * ============================================================
 *
 * 役割：
 * - TOP Galleryなどで使う横流れ表示の共通CSSを定義します。
 * - 実際の横移動は js/components/marquee.js の requestAnimationFrame 制御へ委譲します。
 * - このCSSでは、Marqueeとして共通化できる構造・初期化状態・アクセシビリティ配慮だけを担当します。
 *
 * 設計方針：
 * - TOP Gallery固有のカード幅、余白、背景、見出しデザインはページCSSに残します。
 * - 共通Marqueeは data属性を正規インターフェースにします。
 * - 既存の .aleg2-marquee / .aleg2-marquee__track も後方互換として維持します。
 * - CSS keyframes ではなくJSの実測ループで動かすため、animation指定は持ちません。
 */

.aleg2-marquee,
[data-aleg2-marquee] {
	position: relative;
	overflow: hidden;
}

/**
 * 左右のフェード。
 *
 * 役割：
 * - 横流れ端の見切れを自然に見せます。
 * - 背景色はDesign Tokenを参照し、テーマ設定との整合を維持します。
 *
 * 注意：
 * - TOP Gallery以外でも使える共通表現として、背景色だけをtokenから取得します。
 * - セクション固有背景が強い場合は、ページCSS側で上書きできます。
 */
.aleg2-marquee::before,
.aleg2-marquee::after,
[data-aleg2-marquee]::before,
[data-aleg2-marquee]::after {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: min(16vw, 160px);
	pointer-events: none;
	content: "";
}

.aleg2-marquee::before,
[data-aleg2-marquee]::before {
	left: 0;
	background: linear-gradient(90deg, var(--aleg2-color-bg), transparent);
}

.aleg2-marquee::after,
[data-aleg2-marquee]::after {
	right: 0;
	background: linear-gradient(270deg, var(--aleg2-color-bg), transparent);
}

/**
 * 共通viewport。
 *
 * data属性を正規構造にしつつ、既存BEMクラスでも最低限同じ挙動になるようにします。
 */
.aleg2-marquee__viewport,
[data-aleg2-marquee-viewport] {
	overflow-x: hidden;
	overflow-y: visible;
}

/**
 * 共通track。
 *
 * JSが transform だけを更新できるよう、横並びとGPU向けの最低限の指定だけを持たせます。
 * gapの実際の値は利用側CSS、または --aleg2-marquee-gap で指定します。
 */
.aleg2-marquee__track,
[data-aleg2-marquee-track] {
	display: flex;
	width: max-content;
	gap: var(--aleg2-marquee-gap, var(--aleg2-space-5, 24px));
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/**
 * 共通item。
 *
 * カード幅は利用側CSSに委譲し、ここでは横流れで縮まないことだけを保証します。
 */
.aleg2-marquee__item,
[data-aleg2-marquee-item] {
	flex: 0 0 auto;
}

/**
 * 初期化状態。
 *
 * 画像やWebフォント読み込み後に実測してから動かすため、初期化中はtrackを不可視にします。
 * これにより、複製前の一瞬だけカード列が短く見えるチラつきを抑えます。
 */
[data-aleg2-marquee]:not(.is-marquee-ready) [data-aleg2-marquee-track],
.aleg2-marquee:not(.is-marquee-ready) .aleg2-marquee__track {
	visibility: hidden;
}

[data-aleg2-marquee].is-marquee-ready [data-aleg2-marquee-track],
.aleg2-marquee.is-marquee-ready .aleg2-marquee__track {
	visibility: visible;
}

/**
 * 静的表示。
 *
 * prefers-reduced-motion、設定OFF、または初期化不能時はJSがこの状態に寄せます。
 */
[data-aleg2-marquee].is-marquee-static [data-aleg2-marquee-track],
.aleg2-marquee.is-marquee-static .aleg2-marquee__track {
	transform: none !important;
	will-change: auto;
}

/**
 * reduced-motion。
 *
 * OS側で動きを減らす設定の場合は、CSS側でもtransformを無効化して安全側に倒します。
 */
@media (prefers-reduced-motion: reduce) {
	.aleg2-marquee__track,
	[data-aleg2-marquee-track] {
		transform: none !important;
		will-change: auto;
	}
}