/* =========================================================
   VONA LANDING
========================================================= */

.vona-landing {
	background:#080808;
	color:#fff;
	overflow:hidden;
}

.vona-container {
	width:calc(100% - 160px);
	max-width:1600px;
	margin:0 auto;
}


/* =========================================================
   COMMON
========================================================= */

.vona-eyebrow {
	margin:0 0 32px;
	font-size:12px;
	font-weight:600;
	letter-spacing:.18em;
	line-height:1;
	color:#f5c400;
}

.vona-section {
	position:relative;
	padding:180px 0;
}

.vona-section-head h2 {
	margin:0;
	font-size:clamp(48px, 6vw, 100px);
	font-weight:700;
	line-height:.95;
	letter-spacing:-.055em;
}

.vona-section-head h2 span {
	color:#f5c400;
}

.vona-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:56px;
	padding:0 32px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em;
	text-decoration:none;
	transition:.25s ease;
}

.vona-btn-yellow {
	background:#f5c400;
	color:#080808;
}

.vona-btn-yellow:hover {
	background:#fff;
}

.vona-btn-line {
	margin-left:8px;
	border:1px solid rgba(255,255,255,.4);
	color:#fff;
}

.vona-btn-line:hover {
	border-color:#fff;
	background:#fff;
	color:#080808;
}


/* =========================================================
   HERO
========================================================= */

.vona-hero {
	position:relative;
	height:100vh;
	min-height:760px;
	display:flex;
	align-items:center;
	overflow:hidden;
}

.vona-hero-bg,
.vona-hero-overlay {
	position:absolute;
	inset:0;
}

.vona-hero-bg img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.vona-hero-overlay {
	background:
		linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.2) 100%),
		linear-gradient(0deg,rgba(0,0,0,.65),transparent 50%);
}

.vona-hero-inner {
	position:relative;
	height:100%;
	display:flex;
	align-items:center;
}

.vona-hero-copy {
	max-width:900px;
}

.vona-hero-copy h1 {
	margin:0;
	font-size:clamp(58px,8vw,138px);
	font-weight:700;
	line-height:.88;
	letter-spacing:-.065em;
}

.vona-hero-copy h1 span {
	color:#f5c400;
}

.vona-hero-desc {
	margin:42px 0 0;
	font-size:18px;
	line-height:1.6;
	color:rgba(255,255,255,.72);
}

.vona-hero-action {
	margin-top:42px;
}

.vona-hero-scroll {
	position:absolute;
	left:0;
	bottom:42px;
	display:flex;
	align-items:center;
	gap:16px;
	font-size:10px;
	letter-spacing:.16em;
	color:rgba(255,255,255,.55);
}

.vona-hero-scroll i {
	display:block;
	width:50px;
	height:1px;
	background:#f5c400;
}


/* =========================================================
   ERA
========================================================= */

.vona-era {
	padding-top:220px;
	padding-bottom:220px;
}

.vona-era-content {
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:120px;
	align-items:center;
	margin-top:130px;
}

.vona-era-image img {
	display:block;
	width:100%;
	height:auto;
}

.vona-era-copy {
	max-width:500px;
}

.vona-big-text {
	margin:0 0 42px;
	font-size:38px;
	line-height:1.15;
	letter-spacing:-.04em;
}

.vona-era-copy > p:not(.vona-big-text) {
	margin:0 0 22px;
	font-size:16px;
	line-height:1.8;
	color:rgba(255,255,255,.55);
}


/* =========================================================
   STAGE
========================================================= */

.vona-stage {
	height:900px;
	padding:0;
	display:flex;
	align-items:center;
	overflow:hidden;
}

.vona-stage-image,
.vona-stage-overlay {
	position:absolute;
	inset:0;
}

.vona-stage-image img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.vona-stage-overlay {
	background:rgba(0,0,0,.55);
}

.vona-stage-inner {
	position:relative;
}

.vona-stage-inner h2 {
	margin:0;
	font-size:clamp(60px,8vw,130px);
	line-height:.88;
	letter-spacing:-.065em;
}

.vona-stage-inner h2 span {
	color:#f5c400;
}

.vona-stage-desc {
	margin-top:45px;
	font-size:17px;
	line-height:1.7;
	color:rgba(255,255,255,.7);
}


/* =========================================================
   HOW
========================================================= */

.vona-how {
	background:#f5c400;
	color:#080808;
}

.vona-how .vona-eyebrow {
	color:#080808;
}

.vona-how .vona-section-head h2 span {
	color:#fff;
}

.vona-how-list {
	margin-top:130px;
	border-top:1px solid rgba(0,0,0,.25);
}

.vona-how-item {
	display:grid;
	grid-template-columns:100px 1fr;
	gap:50px;
	padding:52px 0;
	border-bottom:1px solid rgba(0,0,0,.25);
}

.vona-how-num {
	font-size:14px;
	font-weight:700;
}

.vona-how-item h3 {
	margin:0;
	font-size:54px;
	line-height:1;
	letter-spacing:-.05em;
}

.vona-how-item p {
	margin:15px 0 0;
	font-size:15px;
	line-height:1.6;
	opacity:.65;
}


/* =========================================================
   ARTISTS
========================================================= */

.vona-section-head-row {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:60px;
}

.vona-section-side-copy {
	margin:0 0 5px;
	font-size:14px;
	line-height:1.7;
	color:rgba(255,255,255,.5);
}

.vona-artist-grid {
	display:grid;
	grid-template-columns:1.35fr 1fr 1fr;
	gap:24px;
	margin-top:110px;
}

.vona-artist-image {
	overflow:hidden;
	background:#111;
}

.vona-artist-image img {
	display:block;
	width:100%;
	aspect-ratio:1 / 1.15;
	object-fit:cover;
	transition:transform .7s ease;
}

.vona-artist-card-large .vona-artist-image img {
	aspect-ratio:1 / 1.08;
}

.vona-artist-card:hover img {
	transform:scale(1.035);
}

.vona-artist-info {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:18px 0 0;
}

.vona-artist-info span {
	font-size:9px;
	letter-spacing:.15em;
	color:#f5c400;
}

.vona-artist-info strong {
	font-size:17px;
	letter-spacing:.03em;
}


/* =========================================================
   ECOSYSTEM
========================================================= */

.vona-ecosystem {
	background:#101010;
}

.vona-ecosystem-flow {
	display:flex;
	align-items:center;
	margin-top:140px;
}

.vona-flow-item {
	flex:1;
}

.vona-flow-item strong {
	display:block;
	font-size:24px;
	letter-spacing:-.03em;
}

.vona-flow-item span {
	display:block;
	margin-top:12px;
	font-size:10px;
	letter-spacing:.16em;
	color:rgba(255,255,255,.4);
}

.vona-flow-highlight strong {
	color:#f5c400;
}

.vona-ecosystem-flow > i {
	width:70px;
	height:1px;
	background:rgba(255,255,255,.2);
}


/* =========================================================
   JOIN
========================================================= */

.vona-join {
	height:820px;
	padding:0;
	display:flex;
	align-items:center;
	overflow:hidden;
}

.vona-join-bg,
.vona-join-overlay {
	position:absolute;
	inset:0;
}

.vona-join-bg img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.vona-join-overlay {
	background:rgba(0,0,0,.62);
}

.vona-join-inner {
	position:relative;
}

.vona-join-inner h2 {
	margin:0 0 55px;
	font-size:clamp(55px,7vw,120px);
	line-height:.9;
	letter-spacing:-.065em;
}

.vona-join-inner h2 span {
	color:#f5c400;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:1024px) {

	.vona-container {
		width:calc(100% - 60px);
	}

	.vona-section {
		padding:120px 0;
	}

	.vona-era-content {
		grid-template-columns:1fr;
		gap:60px;
		margin-top:80px;
	}

	.vona-artist-grid {
		grid-template-columns:1fr 1fr;
	}

	.vona-artist-card-large {
		grid-column:1 / -1;
	}

	.vona-ecosystem-flow {
		flex-wrap:wrap;
		gap:30px;
	}

	.vona-ecosystem-flow > i {
		display:none;
	}

	.vona-flow-item {
		flex:0 0 calc(50% - 15px);
	}

}


@media (max-width:640px) {

	.vona-container {
		width:calc(100% - 40px);
	}

	.vona-hero {
		min-height:680px;
	}

	.vona-hero-copy h1 {
		font-size:16vw;
	}

	.vona-hero-desc {
		font-size:14px;
		margin-top:30px;
	}

	.vona-hero-action {
		margin-top:30px;
	}

	.vona-btn {
		height:50px;
		padding:0 22px;
	}

	.vona-section {
		padding:90px 0;
	}

	.vona-section-head h2 {
		font-size:13vw;
	}

	.vona-eyebrow {
		margin-bottom:22px;
	}

	.vona-era {
		padding-top:110px;
		padding-bottom:110px;
	}

	.vona-era-content {
		margin-top:60px;
	}

	.vona-big-text {
		font-size:28px;
	}

	.vona-stage {
		height:650px;
	}

	.vona-stage-inner h2 {
		font-size:15vw;
	}

	.vona-how-list {
		margin-top:70px;
	}

	.vona-how-item {
		grid-template-columns:45px 1fr;
		gap:15px;
		padding:35px 0;
	}

	.vona-how-item h3 {
		font-size:38px;
	}

	.vona-section-head-row {
		display:block;
	}

	.vona-section-side-copy {
		margin-top:30px;
	}

	.vona-artist-grid {
		grid-template-columns:1fr;
		margin-top:60px;
	}

	.vona-artist-card-large {
		grid-column:auto;
	}

	.vona-ecosystem-flow {
		margin-top:70px;
	}

	.vona-flow-item {
		flex:0 0 100%;
	}

	.vona-join {
		height:650px;
	}

	.vona-join-inner h2 {
		font-size:14vw;
		margin-bottom:40px;
	}

}


/* =========================================================
   HERO
========================================================= */

.vona-hero {
	position: relative;
	height: 100vh;
	min-height: 720px;
	background: #080808;
	color: #fff;
	overflow: hidden;
}

/* ---------------------------------------------------------
   BACKGROUND
--------------------------------------------------------- */

.vona-hero-bg {
	position: absolute;
	inset: -40px;
	z-index: 0;
	overflow: hidden;
}

.vona-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;

	transform: scale(1.08);
	transition:
		transform 1.8s cubic-bezier(.16, 1, .3, 1);

	will-change: transform;
}

/* 화면 진입 시 */
.vona-hero.is-loaded .vona-hero-bg img {
	transform: scale(1.03);
}


/* ---------------------------------------------------------
   OVERLAY
--------------------------------------------------------- */

.vona-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			90deg,
			rgba(0, 0, 0, .82) 0%,
			rgba(0, 0, 0, .58) 30%,
			rgba(0, 0, 0, .20) 65%,
			rgba(0, 0, 0, .35) 100%
		);

	pointer-events: none;
}


/* ---------------------------------------------------------
   INNER
--------------------------------------------------------- */

.vona-hero-inner {
	position: relative;
	z-index: 2;
	height: 100%;

	display: flex;
	align-items: center;
}


/* ---------------------------------------------------------
   COPY
--------------------------------------------------------- */

.vona-hero-copy {
	padding-top: 40px;
}

.vona-hero-copy .vona-eyebrow,
.vona-hero-copy h1,
.vona-hero-copy .vona-hero-desc,
.vona-hero-copy .vona-hero-action {
	opacity: 0;
	transform: translateY(35px);
}


/* 등장 순서 */

.vona-hero.is-loaded .vona-hero-copy .vona-eyebrow {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .7s ease .15s,
		transform .8s cubic-bezier(.16, 1, .3, 1) .15s;
}

.vona-hero.is-loaded .vona-hero-copy h1 {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .8s ease .3s,
		transform .9s cubic-bezier(.16, 1, .3, 1) .3s;
}

.vona-hero.is-loaded .vona-hero-copy .vona-hero-desc {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .7s ease .55s,
		transform .8s cubic-bezier(.16, 1, .3, 1) .55s;
}

.vona-hero.is-loaded .vona-hero-copy .vona-hero-action {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .7s ease .7s,
		transform .8s cubic-bezier(.16, 1, .3, 1) .7s;
}


/* ---------------------------------------------------------
   HEADLINE
--------------------------------------------------------- */

.vona-hero-copy h1 {
	letter-spacing: -0.045em;
}

.vona-hero-copy h1 span {
	display: inline-block;
	color: #f5d500;

	transition:
		transform .5s cubic-bezier(.16, 1, .3, 1);
}

.vona-hero:hover .vona-hero-copy h1 span {
	transform: translateX(5px);
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.vona-hero-action {
	display: flex;
	align-items: center;
	gap: 12px;
}

.vona-btn {
	position: relative;
	overflow: hidden;

	transition:
		transform .35s cubic-bezier(.16, 1, .3, 1),
		background-color .35s ease,
		border-color .35s ease,
		color .35s ease;
}

.vona-btn::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;

	width: 100%;
	height: 0;

	background: #f5d500;

	transition: height .35s cubic-bezier(.16, 1, .3, 1);
	z-index: -1;
}

.vona-btn:hover {
	transform: translateY(-4px);
}

.vona-btn-yellow:hover {
	background: #fff;
	color: #111;
}

.vona-btn-line:hover {
	border-color: #f5d500;
	color: #f5d500;
}


/* ---------------------------------------------------------
   SCROLL
--------------------------------------------------------- */

.vona-hero-scroll {
	position: absolute;
	left: 0;
	bottom: 42px;

	display: flex;
	align-items: center;
	gap: 18px;

	opacity: 0;
	transform: translateY(15px);
}

.vona-hero.is-loaded .vona-hero-scroll {
	opacity: 1;
	transform: translateY(0);

	transition:
		opacity .8s ease 1.1s,
		transform .8s cubic-bezier(.16, 1, .3, 1) 1.1s;
}

.vona-hero-scroll span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	opacity: .55;
}

.vona-hero-scroll i {
	position: relative;

	display: block;
	width: 48px;
	height: 1px;

	background: #f5d500;
	overflow: hidden;
}

.vona-hero-scroll i::after {
	content: "";

	position: absolute;
	top: 0;
	left: -100%;

	width: 100%;
	height: 100%;

	background: #fff;

	animation: vonaScrollLine 2s ease-in-out infinite;
}

@keyframes vonaScrollLine {

	0% {
		left: -100%;
	}

	50% {
		left: 0;
	}

	100% {
		left: 100%;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.vona-hero {
		min-height: 680px;
		height: 100svh;
	}

	.vona-hero-bg {
		inset: -15px;
	}

	.vona-hero-bg img {
		object-position: 62% center;
	}

	.vona-hero-overlay {
		background:
			linear-gradient(
				180deg,
				rgba(0, 0, 0, .25) 0%,
				rgba(0, 0, 0, .45) 45%,
				rgba(0, 0, 0, .88) 100%
			);
	}

	.vona-hero-copy {
		padding-top: 80px;
	}

	.vona-hero-copy h1 {
		letter-spacing: -0.055em;
	}

	.vona-hero-scroll {
		bottom: 28px;
	}

}

/* =========================================================
   HERO → NEXT SECTION SEPARATION
========================================================= */

.vona-hero {
	position: relative;
	z-index: 1;
}

.vona-era {
	position: relative;
	z-index: 2;

	background: #0b0b0b;
	padding-top: 180px;
	padding-bottom: 180px;
}


/* Hero와 ERA 사이의 포인트 */

.vona-era::before {
	content: "";

	display: block;

	width: 48px;
	height: 2px;

	background: #f5d500;

	margin-bottom: 48px;
}


/* 섹션 헤드 */

.vona-era .vona-section-head {
	max-width: 1100px;
}


/* Hero와 확실히 다른 타이포 스케일 */

.vona-era .vona-section-head h2 {
	margin-top: 18px;
}


/* 이미지 영역도 여유 있게 */

.vona-era-content {
	margin-top: 100px;
}

.vona-section-marker {
	display: flex;
	align-items: center;
	gap: 14px;

	margin-bottom: 52px;
}

.vona-section-marker i {
	display: block;

	width: 48px;
	height: 2px;

	background: #f5d500;
}

.vona-section-marker span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .15em;
	color: rgba(255,255,255,.4);
}

/* =========================================================
   VONA ERA MOTION
========================================================= */


/* ---------------------------------------------------------
   INITIAL STATE
--------------------------------------------------------- */

.vona-era .vona-section-head,
.vona-era .vona-era-image,
.vona-era .vona-era-copy {
	opacity: 0;
}


/* 타이틀 */

.vona-era .vona-section-head {
	transform: translateY(45px);
	transition:
		opacity .9s ease,
		transform 1s cubic-bezier(.16, 1, .3, 1);
}


/* 이미지 */

.vona-era .vona-era-image {
	transform: translateY(50px) scale(1.04);

	transition:
		opacity 1s ease .25s,
		transform 1.2s cubic-bezier(.16, 1, .3, 1) .25s;
}


/* 본문 */

.vona-era .vona-era-copy {
	transform: translateY(35px);

	transition:
		opacity .9s ease .45s,
		transform 1s cubic-bezier(.16, 1, .3, 1) .45s;
}


/* ---------------------------------------------------------
   VISIBLE
--------------------------------------------------------- */

.vona-era.is-visible .vona-section-head {
	opacity: 1;
	transform: translateY(0);
}


.vona-era.is-visible .vona-era-image {
	opacity: 1;
	transform: translateY(0) scale(1);
}


.vona-era.is-visible .vona-era-copy {
	opacity: 1;
	transform: translateY(0);
}

/* =========================================================
   VONA STAGE MOTION
========================================================= */

.vona-stage {
	overflow: hidden;
}


/* ---------------------------------------------------------
   BACKGROUND
--------------------------------------------------------- */

.vona-stage-image {
	overflow: hidden;
}

.vona-stage-image img {
	transform: scale(1.08);
	transition:
		transform 2s cubic-bezier(.16, 1, .3, 1);
}


/* ---------------------------------------------------------
   OVERLAY
--------------------------------------------------------- */

.vona-stage-overlay {
	opacity: .85;
	transition: opacity 1.8s ease;
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.vona-stage-inner .vona-eyebrow,
.vona-stage-inner h2,
.vona-stage-inner .vona-stage-desc {
	opacity: 0;
	transform: translateX(-35px);
}


/* eyebrow */

.vona-stage.is-visible .vona-stage-inner .vona-eyebrow {
	opacity: 1;
	transform: translateX(0);

	transition:
		opacity .8s ease,
		transform .9s cubic-bezier(.16, 1, .3, 1);
}


/* title */

.vona-stage.is-visible .vona-stage-inner h2 {
	opacity: 1;
	transform: translateX(0);

	transition:
		opacity 1s ease .15s,
		transform 1s cubic-bezier(.16, 1, .3, 1) .15s;
}


/* description */

.vona-stage.is-visible .vona-stage-inner .vona-stage-desc {
	opacity: 1;
	transform: translateX(0);

	transition:
		opacity .9s ease .35s,
		transform 1s cubic-bezier(.16, 1, .3, 1) .35s;
}


/* background */

.vona-stage.is-visible .vona-stage-image img {
	transform: scale(1);
}

.vona-stage.is-visible .vona-stage-overlay {
	opacity: 1;
}

/* =========================================================
   HOW VONA WORKS MOTION
========================================================= */

.vona-how-list {
	position: relative;
}







/* ---------------------------------------------------------
   ITEM
--------------------------------------------------------- */

.vona-how-item {
	position: relative;
	z-index: 1;

	opacity: 0;
	transform: translateY(35px);

	transition:
		opacity .7s ease,
		transform .8s cubic-bezier(.16, 1, .3, 1);
}


/* 순차 등장 */

.vona-how.is-visible .vona-how-item:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .1s;
}

.vona-how.is-visible .vona-how-item:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .35s;
}

.vona-how.is-visible .vona-how-item:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .6s;
}

.vona-how.is-visible .vona-how-item:nth-child(4) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: .85s;
}


/* 라인 */

.vona-how.is-visible .vona-how-list::after {
	width: 100%;
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.vona-how-num {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	margin-bottom: 30px;

	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;

	background: #0b0b0b;

	font-size: 11px;
	letter-spacing: .1em;

	color: rgba(255,255,255,.45);

	transition:
		border-color .5s ease,
		background .5s ease,
		color .5s ease;
}


/* 활성화 */

.vona-how.is-visible .vona-how-item:nth-child(1) .vona-how-num,
.vona-how.is-visible .vona-how-item:nth-child(2) .vona-how-num,
.vona-how.is-visible .vona-how-item:nth-child(3) .vona-how-num,
.vona-how.is-visible .vona-how-item:nth-child(4) .vona-how-num {
	border-color: #f5d500;
	color: #f5d500;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.vona-how-item h3 {
	transition:
		color .5s ease;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.vona-how-item p {
	opacity: .55;
	transition:
		opacity .5s ease;
}


.vona-artist-image {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #111;
}

.vona-artist-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}