@layer components {
	/* ============================================================
	 * ヒーロー共通ベース：青バナー＋斜め光線を静的グラデで再現（.hero-beam）。
	 * 詳細ヒーロー（project-hero）はこのベースをそのまま使う。
	 * 下層共通ヒーロー（page-hero）は下で #003c8a 単色＋写真＋beam.js 光線に
	 * 上書きする（beam.js は page-hero で前倒し導入済み）。
	 * ============================================================ */
	.hero-beam {
		position: relative;
		overflow: hidden;
		isolation: isolate;
		background: radial-gradient(
				120% 140% at 85% -20%,
				var(--wp--preset--color--secondary) 0%,
				transparent 55%
			),
			linear-gradient(
				160deg,
				var(--wp--preset--color--primary) 0%,
				var(--wp--preset--color--blue-950) 100%
			);
		color: var(--wp--preset--color--base);
	}

	/* 斜めの光線（右上へ流れる淡い筋）。装飾のためコンテンツ下に敷く。 */
	.hero-beam::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: repeating-linear-gradient(
			118deg,
			transparent 0 46px,
			rgba(255, 255, 255, 0.05) 46px 48px
		);
		mask-image: radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 70%);
	}
}