/* ============================================================
   hero.css — TOP Hero セクション（front-page.php 専用）
   Design System 準拠 / Dark Hero / Primary Gradient は最小限 / ノイズなし
   ※ フロントページでのみ読み込む（functions.php で条件付き enqueue）
   ============================================================ */

/* -------- Hero 全体（Dark） -------- */
.da-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 640px;
	padding-block: var(--da-space-80);
	background: var(--da-secondary);   /* Dark */
	color: var(--da-text-invert);
	overflow: hidden;
}
/* Primary の淡いグロー（単一の radial・最小限。ノイズは使わない） */
.da-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(55% 55% at 82% 18%, rgba(37, 99, 235, .28), transparent 70%);
	pointer-events: none;
}

.da-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;         /* モバイル: 縦積み */
	gap: var(--da-space-40);
	align-items: center;
	width: 100%;
}

/* -------- 左: コピー -------- */
.da-hero__overline {
	margin: 0 0 var(--da-space-16);
	font-size: var(--da-fs-h6);
	font-weight: var(--da-fw-bold);
	letter-spacing: var(--da-ls-wide);
	text-transform: uppercase;
	color: var(--da-accent);
}
.da-hero__title {
	margin: 0 0 var(--da-space-24);
	font-family: var(--da-font-base);
	font-size: 34px;                    /* モバイル基準（PCで拡大） */
	font-weight: var(--da-fw-bold);
	line-height: var(--da-lh-tight);
	letter-spacing: var(--da-ls-tight);
	color: #fff;
	text-wrap: balance;                 /* 対応ブラウザは2行を均等化。未対応は通常折返し（無視される） */
}
.da-hero__lead {
	margin: 0 0 var(--da-space-32);
	max-width: 44em;                    /* 1行あたり概ね 40〜48 文字で可読性を確保 */
}
.da-hero__lead p {
	margin: 0 0 var(--da-space-16);
	font-size: 16px;
	line-height: var(--da-lh-body);
	color: var(--da-gray-300);
}
.da-hero__lead p:last-child { margin-bottom: 0; }

.da-hero__actions {
	display: flex;
	gap: var(--da-space-16);
	flex-wrap: wrap;
}

/* Reveal の軽いスタッガー（順に出現） */
.da-hero__content .da-reveal:nth-child(1) { --da-reveal-delay: 0ms; }
.da-hero__content .da-reveal:nth-child(2) { --da-reveal-delay: 70ms; }
.da-hero__content .da-reveal:nth-child(3) { --da-reveal-delay: 140ms; }
.da-hero__content .da-reveal:nth-child(4) { --da-reveal-delay: 210ms; }
.da-hero__visual { --da-reveal-delay: 160ms; }

/* -------- 右: 実画面ショーケース（Deep Studio 実物） -------- */
.da-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 320px;                 /* CLS対策：領域を確保 */
}
.da-shot {
	position: relative;
	width: 100%;
	max-width: 480px;
}
/* ダーク背景でも浮くよう、Primary/Accent の淡いグローを敷く（控えめ） */
.da-shot::before {
	content: "";
	position: absolute;
	inset: -10% -8% -14% -8%;
	z-index: 0;
	border-radius: var(--da-radius-2xl);
	background: radial-gradient(60% 60% at 50% 40%, rgba(37, 99, 235, .30), rgba(16, 185, 129, .10) 55%, transparent 78%);
	filter: blur(2px);
}

/* タブレット（オーナー用ダッシュボード）＝主役。わずかに傾け、浮遊感のある影 */
.da-shot__tablet {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--da-secondary-700);
	box-shadow: 0 46px 80px -30px rgba(0, 0, 0, .60), 0 14px 30px -18px rgba(0, 0, 0, .45);
	transform: rotate(-1.4deg);
}

/* スマホ（会員アプリ）＝重ねて配置。逆方向に傾ける */
.da-shot__phone {
	position: absolute;
	z-index: 2;
	right: -7%;
	bottom: -6%;
	display: block;
	width: 27%;
	min-width: 96px;
	height: auto;
	border-radius: 18px;
	border: 4px solid #0B1220;
	box-shadow: 0 30px 56px -20px rgba(0, 0, 0, .60);
	transform: rotate(3.2deg);
}

@media (max-width: 639px) {
	.da-shot { max-width: 400px; }
	.da-shot__phone { width: 30%; right: -4%; bottom: -4%; }
}

/* -------- スクロール誘導（下部中央・静的：Reveal/Hover 以外の演出は不使用） -------- */
.da-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: var(--da-space-24);
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--da-space-4);
	color: var(--da-gray-400);
	text-decoration: none;
	font-size: var(--da-fs-caption);
	letter-spacing: var(--da-ls-wide);
	text-transform: uppercase;
	transition: color var(--da-dur-fast) var(--da-ease-standard);
}
.da-hero__scroll:hover { color: #fff; }
.da-hero__scroll-arrow { font-size: 16px; line-height: 1; }

/* -------- レスポンシブ -------- */
/* Tablet 以上で本文を少し大きく */
@media (min-width: 768px) {
	.da-hero__title { font-size: 40px; }
	.da-hero__lead p { font-size: 18px; }
	.da-shot { max-width: 460px; }
}
/* Desktop: 左右2カラム */
@media (min-width: 1024px) {
	.da-hero { min-height: 88vh; max-height: 860px; }
	.da-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--da-space-64); }
	.da-hero__title { font-size: var(--da-fs-h1); }  /* 44px */
}

/* -------- No-JS フォールバック（Reveal を即表示） -------- */
@media (scripting: none) {
	.da-reveal { opacity: 1 !important; transform: none !important; }
}