/* ==========================================================================
   01 HERO
   背景は「画像 / Canvas / 光 / ヴェール」の4層。画像が無くても成立する。
   ========================================================================== */

.aa-hero{
	overflow:hidden;
	justify-content:flex-end;
	padding-bottom:clamp(72px,12svh,140px);
}

.aa-hero__stage{ position:absolute; inset:0; z-index:-1 }
.aa-hero__layer{ position:absolute; inset:0 }

/* 画像レイヤー（未登録時はプレースホルダーが入る） */
.aa-hero__layer--image{
	background:
		radial-gradient(72% 58% at 24% 22%, rgb(127 168 255/.30), transparent 62%),
		radial-gradient(64% 60% at 82% 32%, rgb(184 166 245/.26), transparent 62%),
		radial-gradient(90% 70% at 50% 108%, rgb(231 236 243/.9), transparent 70%),
		linear-gradient(178deg,#fbfcfe 0%,#eef2f8 58%,#e3e9f2 100%);
	will-change:transform;
}
.aa-hero__media,
.aa-hero__media .aa-media__img{ width:100%; height:100% }
.aa-hero__media{ position:absolute; inset:0; opacity:.9 }

.aa-hero__layer--canvas{ width:100%; height:100% }

/* マウス位置に反応する光 */
.aa-hero__layer--glow{
	background:radial-gradient(340px 340px at var(--mx,50%) var(--my,42%),
		rgb(255 255 255/.55), rgb(127 168 255/.16) 42%, transparent 72%);
	transition:background 500ms linear;
	mix-blend-mode:screen;
}
/* 下端を白へ落とし、次セクションへ地続きにする */
.aa-hero__layer--veil{
	background:linear-gradient(180deg,transparent 62%,rgb(255 255 255/.55) 78%,rgb(255 255 255/.9) 100%);
}

.aa-hero__inner{ display:grid; gap:clamp(18px,3svh,34px); max-width:min(1180px,100%) }

.aa-hero__eyebrow{ display:flex; align-items:center; gap:.7em; color:var(--fg-sub) }
.aa-hero__times{ opacity:.4 }

/* タイトルは行ごとにマスクから立ち上がる */
.aa-hero__title .aa-line{ overflow:hidden }
.aa-hero__title .aa-line::before{ content:"" }
.aa-hero__title.is-visible{ opacity:1 }
[data-aa-reveal].aa-hero__title{ filter:none; transform:none; opacity:1 }
.aa-hero__title .aa-line{
	transform:translateY(105%);
	transition:transform 1200ms var(--ease-out);
	transition-delay:calc(var(--i,0) * 130ms + 180ms);
}
.aa-hero__title.is-visible .aa-line{ transform:none }

.aa-hero__lead{ max-width:44ch }

.aa-hero__brands{
	display:flex;
	flex-wrap:wrap;
	gap:clamp(20px,3vw,56px);
	margin-top:clamp(4px,1.5svh,16px);
	padding-top:clamp(16px,2.4svh,28px);
	border-top:1px solid rgb(11 18 32 / .1);
}
.aa-hero__brand-name{
	font-family:var(--font-display);
	font-weight:600;
	font-size:clamp(1rem,1.4vw,1.3rem);
	letter-spacing:.1em;
}
.aa-hero__brand-desc{ color:var(--fg-sub); margin-top:.35em }

@media (max-width:599px){
	.aa-hero{ justify-content:center; padding-bottom:96px }
	.aa-hero__lead{ font-size:.95rem }
}