/* --------------------------------
	Reset
-------------------------------- */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	width: 100%;
}

body {
	background: #000;
	color: #fff;
	font-family:
		Arial,
		Helvetica,
		sans-serif;
}


/* --------------------------------
	INTRO
-------------------------------- */

.intro {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
}

.intro-inner {
	text-align: center;
}

.intro p {
	margin-bottom: 20px;
	font-size: 14px;
	letter-spacing: 0.2em;
}

.intro h1 {
	font-size: clamp(70px, 12vw, 180px);
	line-height: 1;
}


/* --------------------------------
	EARTH
-------------------------------- */

.earth-section {
	position: relative;
	width: 100%;
	height: 300vh;
	background: #000;
}

.earth-sticky {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}


/* Three.js */

#three-canvas {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: 1;
}

#three-canvas canvas {
	display: block;

	width: 100%;
	height: 100%;
}


/* --------------------------------
	テキスト
-------------------------------- */

.earth-content {
	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 2;

	text-align: center;

	pointer-events: none;
}

.earth-subtitle {
	margin-bottom: 15px;

	font-size: 14px;
	letter-spacing: 0.3em;
}

.earth-title {
	font-size: clamp(80px, 15vw, 220px);
	line-height: 1;

	color: rgba(255, 255, 255, 0.8);
}


/* --------------------------------
	NEXT
-------------------------------- */

.next-section {
	width: 100%;
	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #eee;
	color: #111;
}

.next-inner {
	text-align: center;
}

.next-inner p {
	margin-bottom: 15px;

	font-size: 13px;
	letter-spacing: 0.2em;
}

.next-inner h2 {
	font-size: clamp(40px, 7vw, 100px);
}