@charset "UTF-8";
/* MV（ヒーロー）+ 統計バー — Figma PC `130:3191` / SP `149:5140` */

.mv {
	position: relative;
	color: #fff;
	background-color: #132f4d;
	/* Figma の 40px グリッド（1px #B3CEED）。実物は薄く敷かれているだけなので不透明度を落とす */
	background-image:
		repeating-linear-gradient(to right, rgba(179, 206, 237, 0.08) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(to bottom, rgba(179, 206, 237, 0.08) 0 1px, transparent 1px 40px);
}

.mv__body {
	display: flex;
	gap: 104px;
	align-items: flex-start;
	/* MV 上端 136 → eyebrow 203 / 本文下端 732 → 統計バー 805 */
	padding-top: 67px;
	padding-bottom: 73px;
}

.mv__content {
	flex: 1;
	min-width: 0;
}

/* --- 見出しまわり --- */

/* MV だけ「Di1 — Edge AI Camera SoC」と原文どおりの大小混在
   （セクション側の eyebrow は Figma で uppercase 指定） */
.mv__eyebrow {
	color: var(--c-accent);
	text-transform: none;
}

.mv__title {
	/* eyebrow 下端 230 → 見出し 261 */
	margin-top: 31px;
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	font-feature-settings: "palt" 1;
}

.mv__title-accent {
	color: var(--c-accent);
}

.mv__lead {
	/* 見出し下端 409 → リード 452 */
	margin-top: 43px;
	font-size: 18px;
	line-height: 1.7;
	color: #fff;
}

/* 太字部分の下半分に敷かれたマーカー（Figma では独立した矩形 #2565AA） */
.mv__mark {
	font-weight: 700;
	background-image: linear-gradient(
		transparent 42%,
		#2565aa 42%,
		#2565aa 94%,
		transparent 94%
	);
}

/* --- タグピル --- */

.mv__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	/* リード下端 514 → タグ 551 */
	margin-top: 37px;
}

.mv__tag {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 10px 20px;
	font-size: var(--fs-body);
	line-height: 1.2;
	color: #fff;
	background: #1a3c5d;
	border: 1px solid #2e5f87;
	border-radius: var(--radius-pill);
}

/* 6px の点。グロー付き SVG（20.6px）を中央からはみ出させる */
.mv__tag-dot {
	position: relative;
	flex: none;
	width: 6px;
	height: 6px;
}

.mv__tag-dot img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20.6px;
	height: 20.6px;
	max-width: none;
	transform: translate(-50%, -50%);
}

/* --- CTA --- */

.mv__actions {
	display: flex;
	gap: 15px;
	align-items: center;
	/* タグ下端 589 → ボタン 618 */
	margin-top: 29px;
}

.mv__button {
	width: 233px;
	min-height: 63px;
	font-size: var(--fs-lead);
	border-radius: 5px;
}

.mv__button--primary {
	color: #fff;
	background: linear-gradient(to bottom, #0880cb 0%, #2170b7 100%);
}

.mv__button--primary:hover {
	background: linear-gradient(to bottom, #0a72b5 0%, #1c63a3 100%);
}

.mv .btn--outline-white {
	border-color: rgba(255, 255, 255, 0.5);
}

.mv__note {
	/* ボタン下端 681 → 注記 708 */
	margin-top: 27px;
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	line-height: 1.7;
	color: #fff;
}

/* --- 右のモックアップ（インライン SVG + CSS アニメーション） ---
   絵柄は assets/img/mv-mockup.svg。動きはここで付ける。
   走査線・検出枠の明滅・LIVE ドットの 3 つだけで、いずれもループ。
   枠のサイズは差し替え前の mv-mockup.png と同じ 536 × 403。 */

.mv__visual {
	flex: none;
	width: 536px;
	/* eyebrow 203 → 画像 263 */
	margin-top: 60px;
}

.mv__mockup {
	position: relative;
	aspect-ratio: 536 / 403;
	overflow: hidden;
	background: linear-gradient(160deg, #0e3a5e, #06243f);
	border-radius: var(--radius-card);
}

/* base.css の `svg { height: auto }` を打ち消して枠いっぱいに敷く */
.mv__mockup .mv-mockup__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* 実写を差し込んだときは背景イラストを隠し、HUD だけ残す */
.mv__mockup--photo #mv-scene {
	display: none;
}

.mv__mockup-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 検出ラベル。インライン展開しているのでテーマの Space Mono が効く */
.mv-mockup__det-label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
}

.mv-mockup__det-label--sm {
	font-size: 10px;
}

/* 検出枠がゆっくり明滅する（推論が走り続けている感じ） */
.mv-mockup__det {
	animation: mv-det-pulse 2.4s ease-in-out infinite;
}

@keyframes mv-det-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.55;
	}
}

/* 上から下へ抜ける走査線。高さは枠の 25%（元の 360 に対する 90px）。
   top ではなく transform を動かすので、動きを止めると枠の外（上）で止まる。 */
.mv__mockup-scan {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 25%;
	background: linear-gradient(
		to bottom,
		transparent,
		rgba(52, 179, 239, 0.16),
		transparent
	);
	transform: translateY(-100%);
	animation: mv-scan 4.6s linear infinite;
	pointer-events: none;
}

@keyframes mv-scan {
	from {
		transform: translateY(-100%);
	}

	to {
		/* 自身の高さの 4 倍 = 枠の 100% ぶん下 */
		transform: translateY(400%);
	}
}

.mv__mockup-fps,
.mv__mockup-meta {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.06em;
}

.mv__mockup-fps {
	top: 12px;
	right: 14px;
	display: flex;
	gap: 6px;
	align-items: center;
	color: var(--c-accent);
}

/* 録画中を示す点。点滅は色ではなく不透明度で */
.mv__mockup-fps::before {
	content: "";
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	animation: mv-blink 1.4s ease-in-out infinite;
}

@keyframes mv-blink {
	50% {
		opacity: 0.25;
	}
}

.mv__mockup-meta {
	bottom: 12px;
	left: 14px;
	color: #8aa0b6;
}

/* 動きを減らす設定では静止画と同じ見え方にする */
@media (prefers-reduced-motion: reduce) {
	.mv-mockup__det,
	.mv__mockup-scan,
	.mv__mockup-fps::before {
		animation: none;
	}
}

/* --- 統計バー（全幅 4 分割） --- */

.mv__stats {
	display: grid;
	/* Figma 実測 391 / 324 / 324 / 401（合計 1440） */
	grid-template-columns: 391fr 324fr 324fr 401fr;
}

/* セル内の字下げは Figma 実測（123 / 42 / 48 / 44px）。
   padding の % はセル幅に対して解くので、列が fr で伸び縮みしても比率が保たれる。 */
.mv__stat {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-height: 130px;
	padding: 30px 24px;
	background: #19395b;
	border: 1px solid #35516f;
}

.mv__stat:nth-child(1) {
	padding-left: 31.46%; /* 123 / 391 — ページ左端の余白に合わせる */
}

.mv__stat:nth-child(2) {
	padding-left: 12.96%; /* 42 / 324 */
}

.mv__stat:nth-child(3) {
	padding-left: 14.81%; /* 48 / 324 */
}

.mv__stat:nth-child(4) {
	padding-left: 10.97%; /* 44 / 401 */
}

.mv__stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.mv__stat-value--mono {
	font-family: var(--font-mono);
	font-size: 30px;
}

/* 「用途」「地域」だけ小さく淡いブルー */
.mv__stat-unit {
	font-size: var(--fs-label);
	color: var(--c-accent);
}

.mv__stat-text {
	font-size: 13px;
	line-height: 1.5;
	color: #fff;
}

.mv__stat-text span {
    white-space: nowrap;
}

@media (max-width: 767px) {
	.mv__body {
		flex-direction: column;
		gap: 32px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.mv__title {
		margin-top: 20px;
	}

	.mv__lead {
		margin-top: 24px;
		font-size: var(--fs-lead);
	}

	.mv__tags {
		gap: 8px;
		margin-top: 24px;
	}

	.mv__tag {
		padding: 8px 14px;
		font-size: var(--fs-small);
	}

	.mv__actions {
		flex-direction: column;
		align-items: stretch;
		margin-top: 24px;
	}

	.mv__button {
		width: 100%;
		min-height: 56px;
	}

	.mv__note {
		margin-top: 20px;
		font-size: 12px;
	}

	.mv__visual {
		width: 100%;
		margin-top: 0;
	}

	/* SP は枠が 335px ほどまで縮むので、HUD の文字も 1 段落とす */
	.mv__mockup-fps,
	.mv__mockup-meta {
		font-size: 10px;
	}

	.mv__mockup-fps {
		top: 10px;
		right: 10px;
	}

	.mv__mockup-meta {
		bottom: 10px;
		left: 10px;
	}

	/* SP は 2 列 2 段 */
	.mv__stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.mv__stat,
	.mv__stat:nth-child(1),
	.mv__stat:nth-child(2),
	.mv__stat:nth-child(3),
	.mv__stat:nth-child(4) {
		min-height: 0;
		padding: 16px 20px;
	}

	/* JAは短い語句なのでnowrapで問題無いが、EN訳は
	   "and automotive (aftermarket)" のように長い塊になりセルからはみ出すため、
	   SPでは全セルでラップを許可する（4番目セルのみの対応だと3番目セル等が
	   横スクロール／レイアウト崩れを起こす）。 */
	.mv__stat-text span {
		white-space: wrap;
	}
}