/**
 * css/pages/top-hero.css
 * ============================================================
 * A LEGEND 2：TOP Hero
 * ============================================================
 *
 * 役割：
 * - Hero Visual Engine のDOMを装飾します。
 * - none / image / video / three / image-three の各表示モードで
 *   違う印象になるよう、CSS fallbackとレイヤー演出を定義します。
 * - 歪みは表示モードではなく、切り替え専用canvasの演出として扱います。
 * - 画像・動画・WebGLが未設定または失敗しても、黒画面にならない背景を常に維持します。
 *
 * デザイン設定との接続：
 * - 色、背景、文字、枠線、角丸、影、ガラス表現、ボタンは固定値で決めず、
 *   foundation/tokens.css が公開する Design Token を参照します。
 * - Hero固有CSSは「演出・配置・レイヤー制御」を担当し、
 *   基本デザインの決定権は管理画面のデザイン設定へ戻します。
 * - これにより、プリセット変更、背景色変更、文字色変更、角丸変更、
 *   ボタンデザイン変更がTOP Heroにも自然に反映されます。
 */

.aleg2-top-hero {
	/* ------------------------------------------------------------
	 * Hero runtime variables
	 * ------------------------------------------------------------
	 * JS側のHero Visual Engineが更新する値です。
	 * CSS側では必ずfallbackを持たせ、JS未実行でも表示が成立するようにします。
	 */
	--aleg2-hero-pointer-x: 50%;
	--aleg2-hero-pointer-y: 42%;
	--aleg2-hero-parallax-y: 0px;

	/*
	 * Mouse follow derived variables
	 * ------------------------------------------------------------
	 * top.hero.motion.intensity はHero全体の共通強度です。
	 * ここではマウス追従用に、移動量・拡大率・光量・光の範囲へ分解します。
	 * 直値を各レイヤーへ散らさないことで、将来 mouse_follow_strength を追加する場合も
	 * この派生変数の入口だけを差し替えれば済む構造にしています。
	 */
	--aleg2-hero-pointer-factor: clamp(0, var(--aleg2-hero-intensity, 1), 3);
	--aleg2-hero-pointer-move-x: calc(.016 + (var(--aleg2-hero-pointer-factor) * .006));
	--aleg2-hero-pointer-move-y: calc(.014 + (var(--aleg2-hero-pointer-factor) * .005));
	--aleg2-hero-pointer-scale: calc(1.026 + (var(--aleg2-hero-pointer-factor) * .006));
	--aleg2-hero-pointer-light-opacity: calc(.54 + (var(--aleg2-hero-pointer-factor) * .11));
	--aleg2-hero-pointer-light-core: calc(18% + (var(--aleg2-hero-pointer-factor) * 5%));
	--aleg2-hero-pointer-light-size: calc(26% + (var(--aleg2-hero-pointer-factor) * 3%));
	--aleg2-hero-pointer-light-blur: calc(1px + (var(--aleg2-hero-pointer-factor) * .75px));

	/* ------------------------------------------------------------
	 * Design-token aliases
	 * ------------------------------------------------------------
	 * Hero内で使う意味名です。
	 * 値は必ず既存のDesign Tokenを入口にし、固定ダーク前提を避けます。
	 */
	--aleg2-hero-bg: var(--aleg2-color-bg, #070911);
	--aleg2-hero-bg-soft: var(--aleg2-color-bg-soft, #101521);
	--aleg2-hero-surface: var(--aleg2-color-surface, rgba(255, 255, 255, 0.06));
	--aleg2-hero-surface-strong: var(--aleg2-color-surface-strong, rgba(255, 255, 255, 0.12));
	--aleg2-hero-heading: var(--aleg2-color-heading, var(--aleg2-color-text, #f7f7fb));
	--aleg2-hero-text: var(--aleg2-color-text, #f7f7fb);
	--aleg2-hero-muted: var(--aleg2-color-text-muted, rgba(247, 247, 251, 0.72));
	--aleg2-hero-faint: var(--aleg2-color-text-faint, rgba(247, 247, 251, 0.48));
	--aleg2-hero-primary: var(--aleg2-color-primary, #8ee6ff);
	--aleg2-hero-secondary: var(--aleg2-color-secondary, #b68cff);
	--aleg2-hero-accent: var(--aleg2-color-accent, var(--aleg2-hero-primary));
	--aleg2-hero-border: var(--aleg2-color-border, rgba(255, 255, 255, 0.14));
	--aleg2-hero-border-strong: var(--aleg2-color-border-strong, rgba(255, 255, 255, 0.28));
	--aleg2-hero-panel-bg: var(--aleg2-glass-bg, var(--aleg2-hero-surface));
	--aleg2-hero-panel-bg-strong: var(--aleg2-glass-bg-strong, var(--aleg2-hero-surface-strong));
	--aleg2-hero-panel-shadow: var(--aleg2-shadow-panel, 0 18px 60px rgba(0, 0, 0, 0.22));
	--aleg2-hero-card-shadow: var(--aleg2-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.28));
	--aleg2-hero-glow-primary: var(--aleg2-glow-primary, rgba(142, 230, 255, 0.12));
	--aleg2-hero-glow-secondary: var(--aleg2-glow-secondary, rgba(182, 140, 255, 0.12));
	--aleg2-hero-glow-accent: var(--aleg2-glow-accent, rgba(255, 207, 90, 0.08));

	/*
	 * Hero overlay aliases
	 * ------------------------------------------------------------
	 * overlayの色決定は inc/design/css-vars.php と tokens.css に委譲します。
	 * ここでは「Heroで使う意味名」として参照するだけにし、
	 * 白基調プリセットでも固定黒フィルターが残らないようにします。
	 */
	--aleg2-hero-filter: var(--aleg2-hero-overlay, linear-gradient(90deg, color-mix(in srgb, var(--aleg2-hero-bg) 82%, transparent), color-mix(in srgb, var(--aleg2-hero-bg) 36%, transparent) 52%, color-mix(in srgb, var(--aleg2-hero-bg) 12%, transparent)));
	--aleg2-hero-filter-strong: var(--aleg2-hero-overlay-strong, linear-gradient(180deg, color-mix(in srgb, var(--aleg2-hero-bg) 10%, transparent), color-mix(in srgb, var(--aleg2-hero-bg) 72%, transparent)));
	--aleg2-hero-filter-soft: var(--aleg2-hero-overlay-soft, linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 48%, rgba(255, 255, 255, .04)));
	--aleg2-hero-filter-glow: var(--aleg2-hero-surface-glow, radial-gradient(circle at 74% 28%, var(--aleg2-hero-glow-secondary), transparent 34%), radial-gradient(circle at 22% 74%, var(--aleg2-hero-glow-primary), transparent 36%));
	--aleg2-hero-filter-vignette: var(--aleg2-hero-vignette, radial-gradient(circle at 50% 48%, transparent 52%, color-mix(in srgb, var(--aleg2-hero-bg) 58%, transparent) 100%));
	--aleg2-hero-readable-bg: var(--aleg2-hero-readable-surface, var(--aleg2-hero-panel-bg));
	--aleg2-hero-readable-shadow: var(--aleg2-hero-text-shadow, 0 2px 24px rgba(0, 0, 0, .42));

	/* ------------------------------------------------------------
	 * Hero layout safe area
	 * ------------------------------------------------------------
	 * 背景レイヤーはHero上端から全面に敷き、
	 * テキスト・ブランド・フレーズだけを安全領域へ配置します。
	 * 通常セクション用のcontainer paddingへ依存しすぎると、
	 * 巨大タイトルが画面端へ寄ったり、画像モードだけ崩れたりするため、
	 * Hero専用のsafe areaをここで定義します。
	 */
	--aleg2-hero-safe-x: clamp(48px, 7.4vw, 150px);
	--aleg2-hero-safe-top: max(
		clamp(116px, 14svh, 188px),
		calc(var(--aleg2-header-height, 84px) + var(--wp-admin--admin-bar--height, 0px) + clamp(32px, 5svh, 72px))
	);
	--aleg2-hero-safe-bottom: clamp(76px, 9.5svh, 142px);
	--aleg2-hero-content-max: min(780px, calc(100vw - (var(--aleg2-hero-safe-x) * 2)));
	--aleg2-hero-brand-max: min(390px, calc(100vw - (var(--aleg2-hero-safe-x) * 2)));

	position: relative;
	isolation: isolate;
	min-height: clamp(680px, 100svh, 1080px);
	color: var(--aleg2-hero-text);
	background: linear-gradient(135deg, var(--aleg2-hero-bg), var(--aleg2-hero-bg-soft));
	background:
		/* fallback：color-mix非対応環境でも既存Design Tokenの光を維持します。 */
		radial-gradient(circle at var(--aleg2-hero-pointer-x) var(--aleg2-hero-pointer-y), var(--aleg2-hero-glow-primary), transparent var(--aleg2-hero-pointer-light-size)),
		radial-gradient(circle at 82% 18%, var(--aleg2-hero-glow-secondary), transparent 36%),
		radial-gradient(circle at 16% 86%, var(--aleg2-hero-glow-accent), transparent 34%),
		linear-gradient(135deg, var(--aleg2-hero-bg), var(--aleg2-hero-bg-soft));
	overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
	.aleg2-top-hero {
		/*
		 * PCなど細かいポインターを持つ環境では、最大強度3が体感できるよう
		 * 移動量と光の中心を強めます。タッチ端末向けの控えめなfallbackは
		 * root側の値をそのまま使います。
		 */
		--aleg2-hero-pointer-move-x: calc(.034 + (var(--aleg2-hero-pointer-factor) * .015));
		--aleg2-hero-pointer-move-y: calc(.030 + (var(--aleg2-hero-pointer-factor) * .013));
		--aleg2-hero-pointer-scale: calc(1.036 + (var(--aleg2-hero-pointer-factor) * .012));
		--aleg2-hero-pointer-light-opacity: calc(.60 + (var(--aleg2-hero-pointer-factor) * .13));
		--aleg2-hero-pointer-light-core: calc(22% + (var(--aleg2-hero-pointer-factor) * 7%));
		--aleg2-hero-pointer-light-size: calc(28% + (var(--aleg2-hero-pointer-factor) * 5%));
		--aleg2-hero-pointer-light-blur: calc(2px + (var(--aleg2-hero-pointer-factor) * 1.1px));
	}
}

.admin-bar .aleg2-top-hero {
	/*
	 * 管理バー表示時も背景レイヤーはHero全面を維持します。
	 * 高さを縮めると、画像・動画の上端に隙間が見えやすくなるため、
	 * 管理バー分の回避はコンテンツsafe-top側で行います。
	 */
	min-height: clamp(680px, 100svh, 1080px);
}

.aleg2-top-hero__stage {
	position: relative;
	min-height: inherit;

	/*
	 * 以前はstage全体へparallax transformを当てていましたが、
	 * stageには背景だけでなくテキスト・ブランド・フレーズも含まれるため、
	 * 画像モード時にコンテンツ全体がズレたり、上端に隙間が見える原因になります。
	 * 背景とコンテンツを分離するため、stage自体は動かしません。
	 */
	transform: none;
}

.aleg2-top-hero__media,
.aleg2-top-hero__image,
.aleg2-top-hero__video,
.aleg2-top-hero__canvas,
.aleg2-top-hero__transition-canvas,
.aleg2-top-hero__particles,
.aleg2-top-hero__grid,
.aleg2-top-hero__glow,
.aleg2-top-hero__overlay,
.aleg2-top-hero__noise {
	position: absolute;
	inset: 0;
}

/* ------------------------------------------------------------
 * Hero layer contract
 * ------------------------------------------------------------
 * 背景素材層：image / video / image-three canvas / displacement transition canvas
 * 背景装飾層：particles / grid / glow
 * フィルター層：overlay / noise
 * 前景層：content / UI
 *
 * 歪み遷移canvasは背景素材です。
 * overlay / noise より前へ出すと、切り替え中だけ既存フィルターが消えて明るく見えるため、
 * ここでレイヤー責務を明示します。
 */
.aleg2-top-hero__image,
.aleg2-top-hero__video,
.aleg2-top-hero__canvas,
.aleg2-top-hero__transition-canvas {
	z-index: 0;
}

.aleg2-top-hero__particles,
.aleg2-top-hero__grid,
.aleg2-top-hero__glow {
	z-index: 1;
}

.aleg2-top-hero__overlay,
.aleg2-top-hero__noise {
	z-index: 2;
}

.aleg2-top-hero__media {
	z-index: -1;
	overflow: hidden;

	/*
	 * 背景レイヤーは常にHeroの上端から全面に敷きます。
	 * parallax用のCSS変数で背景を動かす場合も、stageやcontentは動かさず、
	 * 背景側だけを控えめに動かします。
	 */
	transform: translate3d(0, calc(var(--aleg2-hero-parallax-y) * .28), 0) scale(1.018);
	transform-origin: center center;
	background: var(--aleg2-hero-bg-soft);
	background:
		linear-gradient(115deg, var(--aleg2-hero-surface), transparent 28%, var(--aleg2-hero-surface-strong) 64%, transparent),
		radial-gradient(circle at 18% 72%, var(--aleg2-hero-glow-primary), transparent 36%),
		linear-gradient(135deg, var(--aleg2-hero-bg), var(--aleg2-hero-bg-soft));
}

/* ------------------------------------------------------------
 * Mode personality
 * ------------------------------------------------------------
 * 表示モードごとに演出の主役を変えます。
 * 色はすべてDesign Token由来のHero aliasを使い、固定色でモードを閉じ込めません。
 */
.aleg2-top-hero--none .aleg2-top-hero__grid {
	opacity: .42;
	background-size: 72px 72px;
}

.aleg2-top-hero--image .aleg2-top-hero__overlay {
	/*
	 * imageモードでも固定黒fallbackは使いません。
	 * 現在のデザインプリセットから生成されたHero filterをそのまま使います。
	 */
	background: var(--aleg2-hero-filter);
}

.aleg2-top-hero--video .aleg2-top-hero__glow {
	mix-blend-mode: screen;
	opacity: .78;
}

.aleg2-top-hero--three .aleg2-top-hero__grid {
	opacity: .68;
	transform: perspective(900px) rotateX(58deg) translateY(8%);
	transform-origin: center bottom;
	background-size: 54px 54px;
	filter: contrast(1.12);
}

.aleg2-top-hero--three .aleg2-top-hero__glow {
	/*
	 * three / WebGL は画像を使わない抽象表現です。
	 * 粒子OFFでもWebGLらしさが出るよう、装飾光を他モードより強めます。
	 */
	opacity: .96;
	filter: blur(3px) saturate(1.38) contrast(1.08);
	mix-blend-mode: screen;
}

.aleg2-top-hero--three .aleg2-top-hero__overlay {
	/*
	 * threeモード固有の抽象光だけを重ね、土台の暗さ・明るさはHero filterへ委譲します。
	 * これにより、白基調プリセットでWebGL系へ切り替えても黒い幕へ戻りません。
	 */
	background:
		var(--aleg2-hero-filter-glow),
		var(--aleg2-hero-filter);
}

.aleg2-top-hero--three.is-webgl-fallback .aleg2-top-hero__grid,
.aleg2-top-hero--three.is-webgl-fallback .aleg2-top-hero__glow {
	/*
	 * WebGLが使えない環境でも、threeモードは画像fallbackに戻さず
	 * 装飾背景で成立させます。
	 */
	opacity: .86;
}

.aleg2-top-hero--image-three .aleg2-top-hero__overlay {
	backdrop-filter: saturate(1.18) contrast(1.08);
}

.aleg2-top-hero.has-displacement-transition .aleg2-top-hero__glow {
	filter: blur(4px) saturate(1.24);
}

/* ------------------------------------------------------------
 * Image layer
 * ------------------------------------------------------------
 * 今回の重要方針：
 * - 画像は image モードの主役、または video / WebGL 失敗時のfallbackとしてだけ表示します。
 * - 以前のように「画像1を常時うっすら残す」指定は使いません。
 * - 表示中の主役レイヤーは data-aleg2-hero-visual-layer で管理し、旧素材の残像を防ぎます。
 */
.aleg2-top-hero__image {
	background-position: center center;
	background-size: cover;
	opacity: 0;
	transform: scale(1.08) translate3d(0, 0, 0);
	filter: saturate(1.08) contrast(1.08);
	transition:
		opacity var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease),
		transform calc(var(--aleg2-hero-interval-ms, 6200ms) * .92) var(--aleg2-ease-standard, ease),
		filter var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease);
	will-change: opacity, transform;
}

.aleg2-top-hero__image--a {
	background-image: var(--aleg2-hero-image-1);
}

.aleg2-top-hero__image--b {
	background-image: var(--aleg2-hero-image-2);
}

.aleg2-top-hero[data-aleg2-hero-visual-layer="image"] .aleg2-top-hero__image.is-active,
.aleg2-top-hero[data-aleg2-hero-visual-layer="fallback"] .aleg2-top-hero__image.is-active {
	opacity: 1;
	transform: scale(var(--aleg2-hero-pointer-scale)) translate3d(
		calc((var(--aleg2-hero-pointer-x) - 50%) * var(--aleg2-hero-pointer-move-x)),
		calc((var(--aleg2-hero-pointer-y) - 50%) * var(--aleg2-hero-pointer-move-y)),
		0
	);
}

/*
 * JS起動前・初期boot中の黒画面対策です。
 * ready後は data-aleg2-hero-visual-layer で制御するため、画像1が背面に残り続けることはありません。
 */
.aleg2-top-hero.is-hero-booting.has-image:not(.is-visual-ready) .aleg2-top-hero__image--a {
	opacity: 1;
}

.aleg2-top-hero.is-image-switching[data-aleg2-hero-visual-layer="image"] .aleg2-top-hero__image.is-active {
	filter: saturate(1.28) contrast(1.16);
}

/* ------------------------------------------------------------
 * Video layer
 * ------------------------------------------------------------
 * 動画成功時はvideoだけを主役にします。
 * 画像はfallback時だけ表示し、動画の背面へ薄く残す演出は行いません。
 */
.aleg2-top-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.035);
	filter: saturate(1.08) contrast(1.08);
	transition:
		opacity var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease),
		transform var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease),
		filter var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease);
}

.aleg2-top-hero[data-aleg2-hero-visual-layer="video"] .aleg2-top-hero__video.is-active {
	opacity: 1;
	transform: scale(var(--aleg2-hero-pointer-scale)) translate3d(
		calc((var(--aleg2-hero-pointer-x) - 50%) * var(--aleg2-hero-pointer-move-x)),
		calc((var(--aleg2-hero-pointer-y) - 50%) * var(--aleg2-hero-pointer-move-y)),
		0
	);
}

.aleg2-top-hero.is-video-fallback .aleg2-top-hero__video,
.aleg2-top-hero[data-aleg2-hero-visual-layer="fallback"] .aleg2-top-hero__video {
	opacity: 0;
}

/* ------------------------------------------------------------
 * WebGL / canvas layer
 * ------------------------------------------------------------
 * WebGL系表示モードは .aleg2-top-hero__canvas を主役にします。
 * 歪み遷移は表示モードではないため、専用の transition-canvas を重ねます。
 */
.aleg2-top-hero__canvas,
.aleg2-top-hero__transition-canvas {
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 900ms var(--aleg2-ease-standard, ease), filter 900ms var(--aleg2-ease-standard, ease);
}

.aleg2-top-hero__canvas {
	/* three / image_three 表示モード用の常設canvasだけに、既存のWebGL表示補正を残します。 */
	filter: saturate(1.15) contrast(1.06);
}

.aleg2-top-hero--three .aleg2-top-hero__canvas {
	filter: saturate(1.45) contrast(1.2) brightness(1.08);
}

.aleg2-top-hero__transition-canvas {
	/*
	 * 歪み遷移canvasは画像・動画と同じ背景素材層です。
	 * ここで専用filterを掛けると、切り替え中だけ色味が変わるため、
	 * 明るさ・暗さ・ノイズは常に上位のoverlay/noiseへ任せます。
	 */
	pointer-events: none;
	z-index: 0;
}

.aleg2-top-hero[data-aleg2-hero-visual-layer="canvas"] .aleg2-top-hero__canvas.is-active,
.aleg2-top-hero[data-aleg2-hero-visual-layer="canvas"].is-webgl-ready .aleg2-top-hero__canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="canvas"].is-three-ready .aleg2-top-hero__canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="transition"] .aleg2-top-hero__transition-canvas.is-active {
	opacity: 1;
}

.aleg2-top-hero.is-webgl-fallback .aleg2-top-hero__canvas,
.aleg2-top-hero.is-webgl-fallback .aleg2-top-hero__transition-canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="fallback"] .aleg2-top-hero__canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="fallback"] .aleg2-top-hero__transition-canvas {
	opacity: 0;
}

/*
 * 主役レイヤーの排他制御です。
 * JS側のactive漏れが万一あっても、CSS側で旧レイヤーが透けないように最後の防波堤を置きます。
 */
.aleg2-top-hero[data-aleg2-hero-visual-layer="video"] .aleg2-top-hero__image,
.aleg2-top-hero[data-aleg2-hero-visual-layer="video"] .aleg2-top-hero__canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="video"] .aleg2-top-hero__transition-canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="canvas"] .aleg2-top-hero__image,
.aleg2-top-hero[data-aleg2-hero-visual-layer="canvas"] .aleg2-top-hero__video,
.aleg2-top-hero[data-aleg2-hero-visual-layer="canvas"] .aleg2-top-hero__transition-canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="image"] .aleg2-top-hero__video,
.aleg2-top-hero[data-aleg2-hero-visual-layer="image"] .aleg2-top-hero__canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="image"] .aleg2-top-hero__transition-canvas,
.aleg2-top-hero[data-aleg2-hero-visual-layer="transition"] .aleg2-top-hero__image,
.aleg2-top-hero[data-aleg2-hero-visual-layer="transition"] .aleg2-top-hero__video,
.aleg2-top-hero[data-aleg2-hero-visual-layer="transition"] .aleg2-top-hero__canvas {
	opacity: 0;
}

/* ------------------------------------------------------------
 * Decorative fallback layers
 * ------------------------------------------------------------
 * 素材がない時もHeroを成立させるための装飾レイヤーです。
 * overlay / glow / grid もDesign Tokenを入口にして、背景色設定へ追従します。
 */
.aleg2-top-hero__overlay {
	/*
	 * 共通overlay。
	 * 色の判断はDesign Tokenへ集約し、ここでは生成済みfilterを使うだけにします。
	 */
	background: var(--aleg2-hero-filter);
}

.aleg2-top-hero__overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * strong overlay と vignette を分離して重ねます。
	 * ヘッダー境界・次セクションへのつながりを、将来token側だけで調整しやすくします。
	 */
	background:
		var(--aleg2-hero-filter-vignette),
		var(--aleg2-hero-filter-strong);
}

.aleg2-top-hero__grid {
	background-image:
		linear-gradient(var(--aleg2-hero-border) 1px, transparent 1px),
		linear-gradient(90deg, var(--aleg2-hero-border) 1px, transparent 1px);
	background-size: 78px 78px;
	mask-image: radial-gradient(circle at 50% 46%, black, transparent 72%);
	opacity: .32;
	transition: opacity .6s var(--aleg2-ease-standard, ease), transform .8s var(--aleg2-ease-standard, ease);
}

.aleg2-top-hero__glow {
	/*
	 * マウス周辺の光はopacityだけで強めると白飛びしやすいため、
	 * 中心光・範囲・ぼかしを派生変数で分けて制御します。
	 * まず既存Design Tokenだけのfallbackを出し、color-mix対応環境では
	 * 次のbackground宣言で中心光をさらに強めます。
	 */
	background:
		radial-gradient(circle at var(--aleg2-hero-pointer-x) var(--aleg2-hero-pointer-y), var(--aleg2-hero-glow-primary), transparent var(--aleg2-hero-pointer-light-size)),
		radial-gradient(circle at 78% 20%, var(--aleg2-hero-glow-secondary), transparent 36%),
		radial-gradient(circle at 20% 82%, var(--aleg2-hero-glow-accent), transparent 34%);
	background:
		radial-gradient(circle at var(--aleg2-hero-pointer-x) var(--aleg2-hero-pointer-y), var(--aleg2-hero-glow-primary), transparent var(--aleg2-hero-pointer-light-size)),
		radial-gradient(circle at var(--aleg2-hero-pointer-x) var(--aleg2-hero-pointer-y), color-mix(in srgb, var(--aleg2-hero-primary) var(--aleg2-hero-pointer-light-core), transparent), transparent var(--aleg2-hero-pointer-light-size)),
		radial-gradient(circle at 78% 20%, var(--aleg2-hero-glow-secondary), transparent 36%),
		radial-gradient(circle at 20% 82%, var(--aleg2-hero-glow-accent), transparent 34%);
	mix-blend-mode: screen;
	opacity: .86;
	opacity: min(.98, var(--aleg2-hero-pointer-light-opacity));
	filter: blur(var(--aleg2-hero-pointer-light-blur)) saturate(calc(1.02 + (var(--aleg2-hero-pointer-factor) * .08)));
	transition: opacity var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease), filter var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease);
}

.aleg2-top-hero.is-hero-transitioning .aleg2-top-hero__glow {
	opacity: min(.98, calc(var(--aleg2-hero-pointer-light-opacity) + .08));
	filter: blur(calc(var(--aleg2-hero-pointer-light-blur) + 1px)) saturate(calc(1.12 + (var(--aleg2-hero-pointer-factor) * .08)));
}


/*
 * 共通Pointer Glow併用時の二重発光抑制。
 *
 * サイト全体のポインター光は css/components/pointer-glow.css が担当します。
 * TOP Hero側のグローは、背景の空気感とHero固有の表示モード演出として残しますが、
 * 共通グローが有効な時は過剰に明るくならないよう控えめにします。
 */
.has-aleg2-pointer-glow .aleg2-top-hero__glow {
	opacity: min(.52, var(--aleg2-hero-pointer-light-opacity));
	filter: blur(calc(var(--aleg2-hero-pointer-light-blur) + 1px)) saturate(1.02);
}

.aleg2-top-hero__noise {
	background-image: repeating-radial-gradient(circle at 20% 30%, var(--aleg2-hero-border) 0 1px, transparent 1px 4px);
	/*
	 * 白基調ではnoiseが汚れに見えやすいため、opacityもHero tokenへ委譲します。
	 */
	opacity: var(--aleg2-hero-noise-opacity, calc(.08 * var(--aleg2-bg-grain, 1)));
	mix-blend-mode: overlay;
}

.aleg2-top-hero__particles {
	/* ------------------------------------------------------------
	 * Particle / Orb / Halo Layer
	 * ------------------------------------------------------------
	 * JSは small / medium / orb / halo の粒子タイプ、tone、位置、
	 * サイズ倍率、速度、遅延、揺れ量だけを出力します。
	 *
	 * 今回の重要方針：
	 * - 大きい要素を「球体オブジェクト」として主張させず、
	 *   背景に溶ける halo / glow を主役にします。
	 * - orbは削除せず、将来の表現拡張に備えて「遠景の淡い光点」として残します。
	 * - haloは輪郭を持つ球ではなく、空間ににじむ大きな光だまりとして扱います。
	 * - 粒子全体へ強い filter: blur() をかけません。
	 *   要素の外接ボックスがにじむと四角い画像のように見えるためです。
	 * - 色は固定せず、Design Token由来のHero aliasを使います。
	 *
	 * 注意：
	 * - 装飾専用なので pointer-events / user-select は必ず無効化します。
	 * - 大きな光はテキストより背面に置き、可読性とクリック操作を邪魔しません。
	 */
	pointer-events: none;
	user-select: none;
	z-index: 1;
	overflow: hidden;
	contain: layout paint;
}

.aleg2-top-hero__particle {
	/* ------------------------------------------------------------
	 * Particle base
	 * ------------------------------------------------------------
	 * span本体は、位置・サイズ・移動だけを担当します。
	 * 光の質感は ::before / ::after へ分離し、CSS側で調整できるようにします。
	 */
	--particle-size: 4px;
	--particle-core: var(--aleg2-hero-primary);
	--particle-shade: var(--aleg2-hero-secondary);
	--particle-glow: var(--aleg2-hero-accent);
	--particle-highlight: var(--aleg2-hero-heading);

	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	display: block;
	width: var(--particle-size);
	height: var(--particle-size);
	border-radius: 50%;
	opacity: var(--alpha, .4);
	transform: translate3d(-50%, -50%, 0) scale(var(--s, 1));
	transform-origin: center;
	animation: aleg2HeroParticleFloat var(--d, 14s) var(--aleg2-ease-in-out, ease-in-out) var(--delay, 0s) infinite alternate;
	will-change: transform, opacity;
}

.aleg2-top-hero__particle::before,
.aleg2-top-hero__particle::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
}

/* JSが付与するtoneをCSS変数へ変換します。色設定変更へ追従させるため、直接色は持ちません。 */
.aleg2-top-hero__particle[data-tone="primary"] {
	--particle-core: var(--aleg2-hero-primary);
	--particle-shade: var(--aleg2-hero-secondary);
	--particle-glow: var(--aleg2-hero-primary);
}

.aleg2-top-hero__particle[data-tone="secondary"] {
	--particle-core: var(--aleg2-hero-secondary);
	--particle-shade: var(--aleg2-hero-accent);
	--particle-glow: var(--aleg2-hero-secondary);
}

.aleg2-top-hero__particle[data-tone="accent"] {
	--particle-core: var(--aleg2-hero-accent);
	--particle-shade: var(--aleg2-hero-primary);
	--particle-glow: var(--aleg2-hero-accent);
}

/* 既存の星屑。小さい粒子は残し、背景の密度と空気感を担当します。 */
.aleg2-top-hero__particle--small {
	--particle-size: clamp(2px, .24vw, 4px);
	mix-blend-mode: screen;
}

.aleg2-top-hero__particle--small::before {
	inset: 0;
	background:
		radial-gradient(circle, var(--particle-highlight) 0 16%, var(--particle-glow) 28%, transparent 72%);
	box-shadow: 0 0 calc(7px * var(--glow, 1)) color-mix(in srgb, var(--particle-glow) 34%, transparent);
}

.aleg2-top-hero__particle--small::after {
	inset: -130%;
	background:
		radial-gradient(circle, color-mix(in srgb, var(--particle-glow) 14%, transparent) 0 12%, transparent 58%);
}

/* 中粒子。粒として見えるサイズにしつつ、球体オブジェクトには寄せません。 */
.aleg2-top-hero__particle--medium {
	--particle-size: clamp(6px, .58vw, 11px);
	mix-blend-mode: screen;
}

.aleg2-top-hero__particle--medium::before {
	inset: 0;
	background:
		radial-gradient(circle at 42% 36%,
			color-mix(in srgb, var(--particle-highlight) 58%, transparent) 0 5%,
			color-mix(in srgb, var(--particle-core) 48%, transparent) 20%,
			color-mix(in srgb, var(--particle-shade) 24%, transparent) 46%,
			transparent 76%
		);
	box-shadow:
		0 0 calc(10px * var(--glow, 1)) color-mix(in srgb, var(--particle-glow) 18%, transparent);
}

.aleg2-top-hero__particle--medium::after {
	inset: -150%;
	background:
		radial-gradient(circle, color-mix(in srgb, var(--particle-glow) 11%, transparent) 0 14%, transparent 58%);
}

/*
 * orbは「大きい球体」ではなく、遠景の淡い光点です。
 * 型は残すことで、将来のプリセットや演出追加で球体表現を戻しやすくします。
 */
.aleg2-top-hero__particle--orb {
	--particle-size: clamp(16px, 1.45vw, 34px);
	opacity: calc(var(--alpha, .14) * .74);
	mix-blend-mode: screen;
}

.aleg2-top-hero__particle--orb::before {
	/* 中心光は弱くし、輪郭を作らず早めに透明へ抜きます。 */
	inset: 10%;
	background:
		radial-gradient(circle at 42% 38%,
			color-mix(in srgb, var(--particle-highlight) 20%, transparent) 0 4%,
			color-mix(in srgb, var(--particle-core) 22%, transparent) 18%,
			color-mix(in srgb, var(--particle-shade) 12%, transparent) 38%,
			transparent 68%
		);
}

.aleg2-top-hero__particle--orb::after {
	/* 外側グローも弱め、背景の奥にある光点として見せます。 */
	inset: -210%;
	background:
		radial-gradient(circle,
			color-mix(in srgb, var(--particle-glow) 12%, transparent) 0 12%,
			color-mix(in srgb, var(--particle-core) 7%, transparent) 30%,
			transparent 58%
		);
	opacity: calc(.42 * var(--glow, 1));
}

/*
 * haloは球ではなく、背景に溶ける光だまりです。
 * 低opacity・大きめ・低速で、空間のにじみを作ります。
 */
.aleg2-top-hero__particle--halo {
	--particle-size: clamp(118px, 15vw, 300px);
	opacity: calc(var(--alpha, .12) * .68);
	mix-blend-mode: screen;
}

.aleg2-top-hero__particle--halo::before {
	inset: 0;
	background:
		radial-gradient(circle,
			color-mix(in srgb, var(--particle-glow) 12%, transparent) 0 9%,
			color-mix(in srgb, var(--particle-core) 8%, transparent) 26%,
			color-mix(in srgb, var(--particle-shade) 5%, transparent) 42%,
			transparent 58%
		);
}

.aleg2-top-hero__particle--halo::after {
	inset: 12%;
	background:
		radial-gradient(circle,
			color-mix(in srgb, var(--particle-highlight) 4%, transparent) 0 8%,
			transparent 42%
		);
	opacity: .24;
}

/*
 * color-mix() 非対応ブラウザ用の保険です。
 * 完全な同一表現ではありませんが、輪郭を強く出さない光表現は維持します。
 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.aleg2-top-hero__particle--small::before {
		background: radial-gradient(circle, var(--particle-highlight) 0 16%, var(--particle-glow) 28%, transparent 72%);
		box-shadow: 0 0 8px var(--particle-glow);
	}

	.aleg2-top-hero__particle--medium::before {
		background: radial-gradient(circle at 42% 36%, var(--particle-highlight) 0 5%, var(--particle-core) 20%, var(--particle-shade) 46%, transparent 76%);
	}

	.aleg2-top-hero__particle--orb::before {
		background: radial-gradient(circle, var(--particle-core) 0 18%, transparent 68%);
		opacity: .32;
	}

	.aleg2-top-hero__particle--medium::after,
	.aleg2-top-hero__particle--orb::after,
	.aleg2-top-hero__particle--halo::before {
		background: radial-gradient(circle, var(--particle-glow) 0 10%, transparent 58%);
		opacity: .18;
	}
}

/* ------------------------------------------------------------
 * Content
 * ------------------------------------------------------------ */
.aleg2-top-hero__inner {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 34vw);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
	box-sizing: border-box;
	width: min(calc(100% - (var(--aleg2-hero-safe-x) * 2)), var(--aleg2-container-lg, 1280px));
	min-height: inherit;
	margin-inline: auto;
	padding-block-start: var(--aleg2-hero-safe-top);
	padding-block-end: var(--aleg2-hero-safe-bottom);
}

.aleg2-top-hero__content {
	position: relative;
	z-index: 12;
	min-width: 0;
	max-width: var(--aleg2-hero-content-max);
	/*
	 * 背景画像の明暗差に左右されるHero本文の可読性を、
	 * デザイン配色から生成されたshadowで補助します。
	 */
	text-shadow: var(--aleg2-hero-readable-shadow);
}

.aleg2-top-hero__eyebrow {
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, serif));
	font-size: var(--aleg2-font-size-sm, clamp(.82rem, .78rem + .22vw, .95rem));
	font-weight: 700;
	line-height: var(--aleg2-line-height-heading, 1.18);
	letter-spacing: var(--aleg2-letter-spacing-wider, .18em);
	text-transform: uppercase;
	color: var(--aleg2-hero-accent);
}

.aleg2-top-hero__title {
	margin: .18em 0;
	max-width: min(100%, 9.6em);
	font-family: var(--aleg2-font-heading, serif);

	/*
	 * デザイン設定のHero文字サイズを尊重しつつ、
	 * viewportに対する安全上限を設けます。
	 * これにより、画像・動画モードでも巨大タイトルが画面外へ食い込みません。
	 */
	font-size: min(var(--aleg2-font-size-hero, clamp(3rem, 1.8rem + 7vw, 8.6rem)), clamp(4.2rem, 8vw, 8.4rem));
	line-height: max(.86, calc(var(--aleg2-line-height-heading, 1.18) - .28));
	letter-spacing: var(--aleg2-letter-spacing-tight, -.04em);
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: normal;
	word-break: keep-all;
	color: var(--aleg2-hero-heading);
}

.aleg2-top-hero__char {
	display: inline-block;
	opacity: 0;
	transform: translateY(.36em) rotateX(58deg);
	animation: aleg2HeroChar .78s var(--aleg2-ease-emphasized, cubic-bezier(.16, 1, .3, 1)) forwards;
	animation-delay: calc(var(--i) * 34ms);
}

.is-text-ready .aleg2-top-hero__char {
	animation-play-state: running;
}

.aleg2-top-hero__lead {
	max-width: 680px;
	font-family: var(--aleg2-font-body, sans-serif);
	font-size: var(--aleg2-font-size-lg, clamp(1.15rem, 1.05rem + .55vw, 1.45rem));
	line-height: var(--aleg2-line-height-body, 1.8);
	color: var(--aleg2-hero-muted);
}

/**
 * Hero CTAの位置調整だけを担当します。
 * 色・角丸・枠線・hoverは css/components/button.css の共通ボタンへ委譲します。
 */
.aleg2-top-hero__button {
	margin-top: var(--aleg2-space-8, 32px);
}

/* ------------------------------------------------------------
 * Brand sign / message phrases
 * ------------------------------------------------------------
 * Hero右側の情報要素は、カードUIではなくキービジュアルに溶け込む
 * 「メッセージ」と「ロゴサイン」として扱います。
 *
 * - phrases：右側中段〜やや下で、世界観を伝えるメッセージブロック。
 * - brand：右下で、旧テーマのようなロゴサイン。
 *
 * ここでは見た目と配置だけを担当し、設定キー・出力HTML・切り替えJSには触れません。
 * これにより、既存設定を維持したまま将来のHeroレイアウトプリセット化にも繋げられます。
 */
.aleg2-top-hero__brand {
	position: absolute;
	z-index: 12;
	right: 0;
	bottom: clamp(34px, 5.8svh, 82px);
	width: min(34vw, var(--aleg2-hero-brand-max));
	max-width: 420px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--aleg2-hero-text);
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	text-align: right;
	pointer-events: none;
	text-shadow: var(--aleg2-hero-readable-shadow);
}

.aleg2-top-hero__brand-label,
.aleg2-top-hero__brand-sub-label,
.aleg2-top-hero__brand-sub {
	display: block;
	font-family: var(--aleg2-font-body, sans-serif);
	line-height: var(--aleg2-line-height-body, 1.8);
	color: var(--aleg2-hero-muted);
	overflow-wrap: anywhere;
}

.aleg2-top-hero__brand-label,
.aleg2-top-hero__brand-sub-label {
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, serif));
	font-size: clamp(.72rem, .66rem + .28vw, .92rem);
	font-weight: 700;
	letter-spacing: clamp(.12em, .5vw, .28em);
	text-transform: uppercase;
}

.aleg2-top-hero__brand-label {
	color: var(--aleg2-hero-heading);
}

.aleg2-top-hero__brand-sub-label {
	margin-top: .18em;
	color: var(--aleg2-hero-faint);
}

.aleg2-top-hero__brand-large {
	display: block;
	margin-block: .12em;
	font-family: var(--aleg2-font-latin, var(--aleg2-font-heading, serif));
	font-size: clamp(2.5rem, 4.6vw, 5.4rem);
	line-height: .88;
	letter-spacing: clamp(.04em, .8vw, .16em);
	text-transform: uppercase;
	word-break: keep-all;
	overflow-wrap: normal;
	color: var(--aleg2-hero-heading);
}

.aleg2-top-hero__brand-sub {
	font-size: clamp(.78rem, .72rem + .28vw, .98rem);
	letter-spacing: clamp(.08em, .35vw, .18em);
	color: var(--aleg2-hero-muted);
}

.aleg2-top-hero__brand-lines {
	list-style: none;
	padding: 0;
	margin: clamp(10px, 1.8vw, 20px) 0 0;
	display: grid;
	gap: clamp(4px, .7vw, 8px);
	justify-items: end;
}

.aleg2-top-hero__brand-lines li {
	max-width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-family: var(--aleg2-font-latin, var(--aleg2-font-body, sans-serif));
	font-size: clamp(.68rem, .62rem + .24vw, .82rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: clamp(.08em, .32vw, .2em);
	text-transform: uppercase;
	color: var(--aleg2-hero-muted);
	background: transparent;
	overflow-wrap: anywhere;
}

.aleg2-top-hero__phrases {
	position: absolute;
	z-index: 12;
	right: 0;
	top: 56%;
	width: min(420px, 34vw);
	min-height: clamp(118px, 16svh, 190px);
	transform: translateY(-50%);
	pointer-events: none;
}

.aleg2-top-hero__phrase {
	position: absolute;
	inset: 0;
	padding: 0 0 0 clamp(20px, 2vw, 32px);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	opacity: 0;
	transform: translate3d(18px, 0, 0);
	transition: opacity var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease), transform var(--aleg2-hero-fade-ms, 900ms) var(--aleg2-ease-standard, ease);
	text-shadow: var(--aleg2-hero-readable-shadow);
}

.aleg2-top-hero__phrase::before {
	content: "";
	position: absolute;
	left: 0;
	top: .08em;
	bottom: .1em;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix(in srgb, var(--aleg2-hero-heading) 76%, transparent),
		color-mix(in srgb, var(--aleg2-hero-accent) 64%, transparent),
		transparent
	);
	box-shadow: 0 0 24px var(--aleg2-hero-glow-primary);
	opacity: .9;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.aleg2-top-hero__phrase::before {
		background: linear-gradient(to bottom, transparent, var(--aleg2-hero-border-strong), var(--aleg2-hero-accent), transparent);
	}
}

.aleg2-top-hero__phrase.is-active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.aleg2-top-hero__phrase-text {
	display: block;
	font-family: var(--aleg2-font-heading, serif);
	font-size: clamp(1.8rem, 3.6vw, 3.7rem);
	font-weight: 800;
	line-height: max(.95, calc(var(--aleg2-line-height-heading, 1.18) - .1));
	letter-spacing: clamp(.02em, .22vw, .1em);
	text-wrap: balance;
	overflow-wrap: anywhere;
	color: var(--aleg2-hero-heading);
}

.aleg2-top-hero__phrase-sub {
	display: block;
	margin-top: var(--aleg2-space-2, 8px);
	font-family: var(--aleg2-font-body, sans-serif);
	font-size: clamp(.92rem, .84rem + .32vw, 1.08rem);
	line-height: var(--aleg2-line-height-body, 1.8);
	letter-spacing: clamp(.04em, .18vw, .12em);
	color: var(--aleg2-hero-muted);
	overflow-wrap: anywhere;
}

.aleg2-top-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 28px;
	width: 1px;
	height: 54px;
	background: var(--aleg2-hero-border);
}

.aleg2-top-hero__scroll span {
	display: block;
	width: 100%;
	height: 18px;
	background: var(--aleg2-hero-accent);
	animation: aleg2HeroScroll 1.8s var(--aleg2-ease-in-out, ease-in-out) infinite;
}

.aleg2-top-hero.is-hero-paused *,
.aleg2-top-hero.is-motion-disabled * {
	animation-play-state: paused;
}

@keyframes aleg2HeroChar {
	to {
		opacity: 1;
		transform: translateY(0) rotateX(0);
	}
}

@keyframes aleg2HeroParticleFloat {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(var(--s, 1));
		opacity: calc(var(--alpha, .4) * .62);
	}

	48% {
		transform: translate3d(
			calc(-50% + (var(--drift-x, 22px) * .48)),
			calc(-50% + (var(--drift-y, -28px) * .48)),
			0
		) scale(calc(var(--s, 1) * 1.06));
		opacity: var(--alpha, .4);
	}

	100% {
		transform: translate3d(
			calc(-50% + var(--drift-x, 22px)),
			calc(-50% + var(--drift-y, -28px)),
			0
		) scale(calc(var(--s, 1) * .94));
		opacity: calc(var(--alpha, .4) * .82);
	}
}

@keyframes aleg2HeroScroll {
	0% {
		transform: translateY(0);
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	100% {
		transform: translateY(36px);
		opacity: 0;
	}
}

@media (max-width: 900px) {
	.aleg2-top-hero {
		min-height: max(680px, 100svh);

		/* SPでは安全余白を画面幅に合わせて圧縮します。 */
		--aleg2-hero-safe-x: clamp(22px, 6vw, 42px);
		--aleg2-hero-safe-top: max(
			clamp(104px, 15svh, 148px),
			calc(var(--aleg2-header-height, 72px) + var(--wp-admin--admin-bar--height, 0px) + 24px)
		);
		--aleg2-hero-safe-bottom: clamp(48px, 7svh, 82px);
	}

	/* SPでは遠景光点とhaloを控えめにし、文字の可読性と描画負荷を守ります。 */
	.aleg2-top-hero__particle--orb {
		--particle-size: clamp(10px, 3.2vw, 20px);
		opacity: calc(var(--alpha, .12) * .58);
	}

	.aleg2-top-hero__particle--halo {
		--particle-size: clamp(70px, 22vw, 148px);
		opacity: calc(var(--alpha, .12) * .5);
	}

	.aleg2-top-hero__inner {
		grid-template-columns: 1fr;
		align-items: end;
		width: min(calc(100% - (var(--aleg2-hero-safe-x) * 2)), var(--aleg2-container-lg, 1280px));
	}

	.aleg2-top-hero__title {
		font-size: min(var(--aleg2-font-size-hero, clamp(3rem, 15vw, 5.8rem)), clamp(3.4rem, 15vw, 5.8rem));
		max-width: 100%;
	}

	.aleg2-top-hero__brand {
		right: 0;
		bottom: clamp(24px, 5.5svh, 58px);
		width: min(46vw, 260px);
	}

	.aleg2-top-hero__brand-large {
		font-size: clamp(2rem, 6.6vw, 3.6rem);
	}

	.aleg2-top-hero__phrases {
		position: relative;
		right: auto;
		top: auto;
		width: min(100%, 430px);
		min-height: clamp(104px, 18svh, 154px);
		margin: clamp(28px, 6vw, 48px) 0 calc(var(--aleg2-hero-safe-bottom) + clamp(86px, 16vw, 132px)) auto;
		transform: none;
	}

	.aleg2-top-hero--three .aleg2-top-hero__grid {
		transform: none;
	}
}

@media (max-width: 560px) {
	.aleg2-top-hero {
		--aleg2-hero-safe-x: clamp(18px, 5.8vw, 30px);
		--aleg2-hero-safe-top: max(
			clamp(96px, 14svh, 132px),
			calc(var(--aleg2-header-height, 68px) + var(--wp-admin--admin-bar--height, 0px) + 20px)
		);
	}

	.aleg2-top-hero__brand {
		width: min(58vw, 210px);
		bottom: clamp(18px, 5svh, 38px);
	}

	.aleg2-top-hero__brand-label,
	.aleg2-top-hero__brand-sub-label,
	.aleg2-top-hero__brand-lines li {
		font-size: clamp(.58rem, 2.4vw, .72rem);
	}

	.aleg2-top-hero__brand-large {
		font-size: clamp(1.65rem, 9vw, 2.75rem);
	}

	.aleg2-top-hero__brand-sub {
		font-size: clamp(.66rem, 2.7vw, .82rem);
	}

	.aleg2-top-hero__phrases {
		width: 100%;
		min-height: clamp(96px, 20svh, 140px);
		margin: clamp(24px, 7vw, 38px) 0 calc(var(--aleg2-hero-safe-bottom) + clamp(78px, 22vw, 118px));
	}

	.aleg2-top-hero__phrase {
		padding-left: clamp(16px, 5vw, 24px);
	}

	.aleg2-top-hero__phrase-text {
		font-size: clamp(1.35rem, 8vw, 2.3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aleg2-top-hero {
		--aleg2-hero-pointer-move-x: 0;
		--aleg2-hero-pointer-move-y: 0;
		--aleg2-hero-pointer-scale: 1;
		--aleg2-hero-pointer-light-opacity: .46;
		--aleg2-hero-pointer-light-size: 28%;
		--aleg2-hero-pointer-light-blur: 0px;
	}

	.aleg2-top-hero *,
	.aleg2-top-hero *::before,
	.aleg2-top-hero *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}

	.aleg2-top-hero__particle {
		transform: translate3d(-50%, -50%, 0) scale(var(--s, 1));
		opacity: calc(var(--alpha, .4) * .7);
	}

	.aleg2-top-hero__image,
	.aleg2-top-hero__video,
	.aleg2-top-hero__canvas,
	.aleg2-top-hero__transition-canvas {
		transform: none !important;
	}
}

/* ------------------------------------------------------------
 * Hero social links
 * ------------------------------------------------------------
 * SNSリンク本体は css/components/social-links.css の共通コンポーネントです。
 * Hero側では、背景・コピー・ブランド装飾・切り替えフレーズを邪魔しない
 * 「外周UI」としての配置だけを担当します。
 *
 * 重要：
 * - .aleg2-top-hero__phrases / .aleg2-top-hero__brand は右側のメッセージ領域です。
 * - SNSを同じ右カラム中央へ固定すると、PC幅でも文字と重なるため、
 *   十分な外側余白がある広いPCだけ右端サイドレーンに縦積みします。
 * - 通常PC以下では、SNSをHero下部の左側安全領域へ逃がし、
 *   最大8個でも横並び・折り返しで破綻しないようにします。
 */
.aleg2-top-hero__social {
	position: absolute;
	top: 50%;

	/*
	 * 広いPC用の外周サイドレーンです。
	 * 以前のように container 右端へ寄せると、Hero右側のブランド装飾や
	 * 切り替えフレーズと同じレーンに入ってしまいます。
	 * ここではviewport外周側へ寄せ、右側情報領域との責務を分離します。
	 */
	right: clamp(22px, 2.4vw, 48px);
	z-index: 13;
	max-height: calc(100svh - var(--aleg2-hero-safe-top, 120px) - var(--aleg2-hero-safe-bottom, 96px));
	transform: translateY(-50%);
	pointer-events: auto;
}

.aleg2-top-hero__social::before,
.aleg2-top-hero__social::after {
	display: block;
	width: 1px;
	height: clamp(18px, 3svh, 36px);
	margin-inline: auto;
	content: "";
	background: linear-gradient(
		to bottom,
		transparent,
		color-mix(in srgb, var(--aleg2-hero-heading, var(--aleg2-color-heading)) 52%, transparent),
		transparent
	);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.aleg2-top-hero__social::before,
	.aleg2-top-hero__social::after {
		background: linear-gradient(to bottom, transparent, var(--aleg2-hero-border, var(--aleg2-color-border)), transparent);
	}
}

.aleg2-top-hero__social::before {
	margin-bottom: clamp(8px, 1vw, 12px);
}

.aleg2-top-hero__social::after {
	margin-top: clamp(8px, 1vw, 12px);
}

/*
 * 通常PC以下：
 * A LEGEND 2 のHeroは 1280px コンテナを基準に右側メッセージ領域を持つため、
 * viewportが 1440px 以下になると、外周サイドレーンの余白が不足しやすくなります。
 * その幅では縦積みを維持せず、下部左側の安全領域へ横並びで逃がします。
 */
@media (max-width: 1440px) {
	.aleg2-top-hero__social {
		top: auto;
		right: auto;
		bottom: clamp(26px, 4.6svh, 54px);
		left: var(--aleg2-hero-safe-x, 32px);
		max-width: min(
			calc(100% - (var(--aleg2-hero-safe-x, 32px) * 2)),
			min(560px, 46vw)
		);
		max-height: none;
		transform: none;
	}

	.aleg2-top-hero__social::before,
	.aleg2-top-hero__social::after {
		display: none;
	}

	.aleg2-top-hero__social.aleg2-social-links--hero .aleg2-social-links__list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}

/*
 * Tablet/SP：
 * 下部横並びを維持しつつ、Heroコピー・スクロール誘導・右下ブランド装飾と
 * 競合しないよう、左側安全領域内で折り返します。
 */
@media (max-width: 900px) {
	.aleg2-top-hero__social {
		bottom: clamp(22px, 4.5svh, 42px);
		left: var(--aleg2-hero-safe-x, 24px);
		max-width: calc(100% - (var(--aleg2-hero-safe-x, 24px) * 2));
	}
}

@media (max-width: 560px) {
	.aleg2-top-hero__social {
		bottom: clamp(18px, 4svh, 32px);
	}
}