.home-intro {
	--home-intro-overlay-opacity: 0.2;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--color-ink);
}

/* 動画と同じ固定領域を覆い、ページ上端やスクロール時にも隙間を作らない。 */
.home-hero__media::after {
	position: absolute;
	z-index: 1;
	inset: 0;
	content: "";
	background: rgb(0 0 0 / var(--home-intro-overlay-opacity));
	pointer-events: none;
}

.home-hero__content,
.home-about {
	position: relative;
	z-index: 2;
}

/*
 * イントロの背景動画は position: fixed のため、親の overflow: hidden では切れず
 * 画面全体を覆う。イントロ以降のセクションは個別に背景色を持っていないものが
 * あり（Works・Creators・News・Recruit）、スクロール位置によっては動画が
 * 透けていた。以降のコンテンツはまとめて不透明にし、動画の上に重ねる。
 */
.home-body {
	position: relative;
	z-index: 2;
	background: var(--color-ink);
}

.home-hero {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.home-hero__media {
	position: fixed;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	pointer-events: none;
}

.home-intro--past .home-hero__media {
	visibility: hidden;
}

.home-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.home-hero__content {
	position: absolute;
	z-index: 2;
	left: max(40px, calc((100vw - var(--figma-stage-max)) / 2 + 40px));
	bottom: 12%;
	width: min(800px, calc(100% - 80px));
}

.home-hero__lead,
.home-hero__title,
.home-hero__en {
	margin: 0;
}

.home-hero__lead {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.home-hero__title {
	font-size: 120px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.home-hero__en {
	margin-top: 12px;
	font-family: var(--font-en);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

@media (max-width: 899px) {
	.home-hero__content {
		left: 20px;
		bottom: 20%;
		height: max-content;
		margin-block: auto;
		width: calc(100% - 40px);
	}

	.home-hero__lead {
		font-size: clamp(16px, calc(5.45vw - 2.4px), 18px);
		line-height: 1.6;
		white-space: nowrap;
	}

	.home-hero__title {
		font-size: clamp(44px, calc(16vw - 6.4px), 56px);
		white-space: nowrap;
	}

	.home-hero__en {
		font-size: 16px;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero__video {
		display: none;
	}

	.home-hero__media {
		background: url("../../images/home-hero.webp") center center / cover no-repeat;
	}
}