/* =========================================================
 * §3・§7 トップ mp4 ヒーロー ── グラスコックピット(PFD/MFD)版
 * ------------------------------------------------------------------
 * 方針（§3）:
 *  ・計器・コクピット風（HUD枠・計器盤グリッド・等幅数値・細い罫線）
 *  ・アクセントは計器グリーン #3ddc97 の1色厳守／落ち着いた／動き最小限
 *  ・mp4 背景は後差し。未配置でも「暗いグラデーション＋計器盤グリッド」で成立
 *  ・HUDクロムは装飾ジオメトリのみ（事実情報は本文側で扱う）
 *
 * レイヤー(z-index): 0 media/video → 1 grid → 2 overlay → 3 HUD → 4 content
 * モバイルファースト。
 * ======================================================= */

.heli-hero {
	position: relative;
	min-height: 88vh;
	min-height: 88svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
	background: var(--heli-base);
	padding-block: clamp(56px, 14vh, 132px);
}

/* ---------------------------------------------------------
 * 0) 背景メディア層（poster / video / ダミー暗グラデーション）
 * ------------------------------------------------------- */
.heli-hero__media,
.heli-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.heli-hero__media {
	background-color: var(--heli-base);
	/* ダミー：沈んだ黒＋右上に水平線グリーン微光（動画未配置でも成立） */
	background-image:
		radial-gradient(130% 92% at 78% 6%, rgba(61, 220, 151, 0.14), transparent 55%),
		linear-gradient(180deg, #0b1411 0%, #0b0d10 46%, #08090b 100%);
	background-size: cover;
	background-position: center;
}
/* poster 配置後はダミーの手前に敷く（無ければ 404 で描画されずダミーが見える） */
.heli-hero__media[data-poster] {
	background-image:
		radial-gradient(130% 92% at 78% 6%, rgba(61, 220, 151, 0.14), transparent 55%),
		var(--heli-hero-poster, none),
		linear-gradient(180deg, #0b1411 0%, #0b0d10 46%, #08090b 100%);
}

.heli-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;              /* 再生開始まで透明→CSS背景を見せる */
	transition: opacity 0.6s ease;
}
.heli-hero__video.is-playing { opacity: 1; }

/* ---------------------------------------------------------
 * 1) 計器盤グリッド（細 48px＋粗 192px の2重・中心へ向け減衰）
 * ------------------------------------------------------- */
.heli-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(0deg,  rgba(61, 220, 151, 0.05) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(90deg, rgba(61, 220, 151, 0.05) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(0deg,  rgba(61, 220, 151, 0.08) 0 1px, transparent 1px 192px),
		repeating-linear-gradient(90deg, rgba(61, 220, 151, 0.08) 0 1px, transparent 1px 192px);
	-webkit-mask-image: radial-gradient(125% 100% at 50% 42%, #000 52%, transparent 100%);
	        mask-image: radial-gradient(125% 100% at 50% 42%, #000 52%, transparent 100%);
	opacity: 0.75;
}

/* ---------------------------------------------------------
 * 2) 暗いグラデーションオーバーレイ（白文字の可読性・§3必須）
 * ------------------------------------------------------- */
.heli-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(8, 9, 11, 0.28) 0%,
		rgba(8, 9, 11, 0.52) 52%,
		rgba(8, 9, 11, 0.90) 100%
	);
}

/* ---------------------------------------------------------
 * 3) HUD クロム（装飾ジオメトリのみ・pointer-events none）
 * ------------------------------------------------------- */
.heli-hero__hud {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
/* 四隅を結ぶヘアライン枠（低彩度） */
.heli-hero__hud::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(61, 220, 151, 0.16);
}

/* ①四隅の太い角枠（コーナーブラケット） */
.heli-hud__corner {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 0 solid var(--heli-accent);
	filter: drop-shadow(0 0 6px rgba(61, 220, 151, 0.35));
}
.heli-hud__corner--tl { top: 14px;    left: 14px;    border-top-width: 2px;    border-left-width: 2px; }
.heli-hud__corner--tr { top: 14px;    right: 14px;   border-top-width: 2px;    border-right-width: 2px; }
.heli-hud__corner--bl { bottom: 14px; left: 14px;    border-bottom-width: 2px; border-left-width: 2px; }
.heli-hud__corner--br { bottom: 14px; right: 14px;   border-bottom-width: 2px; border-right-width: 2px; }

/* 上辺中央：コンパス目盛テープ（方位計＝装飾。事実データではない） */
.heli-hud__compass {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	width: min(300px, 62vw);
	text-align: center;
}
.heli-hud__compass .ticks {
	height: 7px;
	background-image: repeating-linear-gradient(90deg, rgba(61, 220, 151, 0.5) 0 1px, transparent 1px 15px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.heli-hud__compass .labels {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	padding-inline: 8%;
	font-family: var(--heli-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	color: rgba(61, 220, 151, 0.55);
}
.heli-hud__compass .index {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid var(--heli-accent);
}

/* 左辺：短い目盛ラダー（罫線のみ・計器の縦スケール風） */
.heli-hud__ladder {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 9px;
	height: 132px;
}
.heli-hud__ladder--left { left: 14px; }
.heli-hud__ladder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(180deg, rgba(61, 220, 151, 0.45) 0 1px, transparent 1px 14px);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
	        mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}

/* ---------------------------------------------------------
 * 4) コンテンツ層
 * ------------------------------------------------------- */
.heli-hero .heli-wrap {
	position: relative;
	z-index: 4;
}

.heli-hero__title {
	margin: 0 0 22px;
	color: #fff;
	font-size: clamp(1.9rem, 7vw, 3.4rem);
	line-height: 1.28;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-wrap: balance;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.6);
}

/* サブ2行：計器グリーンの短い罫線マーカー付き（アナンシエータ風） */
.heli-hero__points {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.heli-hero__points li {
	position: relative;
	padding-left: 30px;
	color: var(--heli-text);
	font-size: clamp(0.95rem, 2.6vw, 1.1rem);
	line-height: 1.6;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.heli-hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 18px;
	height: 1px;
	background: var(--heli-accent);
}

/* CTA：計器グリーンのソリッド＋等幅の矢印 */
.heli-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--heli-accent);
	color: #06120d;
	font-weight: 700;
	padding: 14px 24px;
	border-radius: 2px;
}
.heli-hero__cta::after {
	content: "\203A";                 /* › */
	font-family: var(--heli-font-mono);
	font-size: 1.1em;
	line-height: 1;
}
.heli-hero__cta:hover { text-decoration: none; filter: brightness(1.06); }

/* 静かなロードフェード（§3 動き最小限） */
@media (prefers-reduced-motion: no-preference) {
	.heli-hero .heli-wrap > * { animation: heliHeroIn 0.6s ease both; }
	.heli-hero__title { animation-delay: 0.06s; }
	.heli-hero__lead  { animation-delay: 0.12s; }
	.heli-hero__cta   { animation-delay: 0.18s; }
	@keyframes heliHeroIn {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ---------------------------------------------------------
 * デスクトップ拡張（枠を広げ、角枠を大きく）
 * ------------------------------------------------------- */
@media (min-width: 768px) {
	.heli-hero { min-height: 90vh; min-height: 90svh; }
	.heli-hero__hud::before { inset: 26px; }
	.heli-hud__corner { width: 58px; height: 58px; }
	.heli-hud__corner--tl { top: 26px;    left: 26px; }
	.heli-hud__corner--tr { top: 26px;    right: 26px; }
	.heli-hud__corner--bl { bottom: 26px; left: 26px; }
	.heli-hud__corner--br { bottom: 26px; right: 26px; }
	.heli-hud__compass { top: 34px; width: 340px; }
	.heli-hud__ladder--left { left: 26px; }
	.heli-hud__ladder { height: 180px; }
}