/* =========================
   Intro Cover (FULL)
   ========================= */

#intro-cover {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: linear-gradient(180deg, #2b2d6e, #1d1f4f);
	overflow: hidden;
	transform: translateY(0);
	opacity: 1;
}

/* 클릭 종료: 스프링 튕김 후 커튼처럼 위로 */
#intro-cover.closing {
	animation: curtainSpringUp 1.05s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes curtainSpringUp {
	0% {
		transform: translateY(0);
	}

	18% {
		transform: translateY(10px);
	}

	/* 살짝 아래로 툭 */
	38% {
		transform: translateY(-14px);
	}

	/* 튕김 */
	56% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-110%);
	}
}

.intro-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

/* =========================
   Logo (중앙 크게 → 좌측 상단)
   ========================= */
.intro-logo {
	position: absolute;
	z-index: 20;
	/* 이미지보다 항상 위 */
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.35);
	will-change: transform, top, left, opacity;
	pointer-events: none;
}

.intro-logo img {
	height: 64px;
	/* 필요하면 조정 */
	display: block;
}

#intro-cover.ready .intro-logo {
	animation: logoPopIn 1.1s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes logoPopIn {
	from {
		opacity: 0;
		transform: translate(-50%, -45%) scale(1.55);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.35);
	}
}

/* 로고 이동 후에도 계속 보이도록 "opacity 유지" */
#intro-cover.logo-move .intro-logo {
	animation: logoToLeftTop .95s cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes logoToLeftTop {
	to {
		top: 42px;
		left: 56px;
		opacity: 1;
		transform: translate(0, 0) scale(.9);
	}
}

/* =========================
   Visual (이미지 1장만 표시)
   ========================= */
.intro-visual {
	position: absolute;
	z-index: 10;
	top: 52%;
	left: 50%;

	/* 네가 올린 예시 이미지처럼 가로로 긴 배너 비율에 맞춰 */
	width: min(1100px, 84vw);
	aspect-ratio: 1149 / 728;
	/* 01.png 비율 */

	transform: translate(-50%, -50%);
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);

	opacity: 0;
	filter: blur(12px);
	transition: opacity .7s ease, filter .7s ease;
}

/* 로고 이동 후 이미지 영역이 스르륵 등장 */
#intro-cover.show-visual .intro-visual {
	opacity: 1;
	filter: blur(0);
}

.intro-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 배너형은 cover가 안정적 */
	display: block;

	/* 기본은 선명 */
	filter: none;
	image-rendering: auto;

	transition:
		filter .9s cubic-bezier(.22, .61, .36, 1),
		transform .9s cubic-bezier(.22, .61, .36, 1);
}

/* 전환 순간: "모자이크(픽셀 크게)" 느낌 */
#intro-cover.mosaic .intro-visual img {
	filter: blur(6px);
	transform: scale(1.03);
	image-rendering: pixelated;
}

/* =========================
   Guide
   ========================= */
.intro-guide {
	position: absolute;
	z-index: 30;
	bottom: 56px;
	width: 100%;
	text-align: center;
	color: #fff;
	opacity: .85;
	font-size: 14px;
	letter-spacing: -0.01em;
	text-shadow: 0 8px 24px rgba(0, 0, 0, .35);
	pointer-events: none;
}

/* =========================
   Reduce motion 대응
   ========================= */
@media (prefers-reduced-motion: reduce) {
	#intro-cover.closing {
		animation: none;
		transform: translateY(-110%);
	}

	#intro-cover.ready .intro-logo,
	#intro-cover.logo-move .intro-logo {
		animation: none;
		opacity: 1;
		top: 42px;
		left: 56px;
		transform: translate(0, 0) scale(.9);
	}

	.intro-visual {
		transition: none;
		opacity: 1;
		filter: none;
	}

	.intro-visual img {
		transition: none;
		filter: none;
		transform: none;
	}
}

/* =========================
   Mosaic Tile Overlay (30x30)
   ========================= */

/* 오버레이 컨테이너 */
.intro-mosaic {
	position: absolute;
	inset: 0;
	z-index: 15;
	/* img(기본)보다 위 */
	pointer-events: auto;
	display: block;
	opacity: 1;
	transition: opacity 420ms ease;
	/* ← 여기서 부드럽게 */
}


.intro-mosaic.fadeout {
	opacity: 0;
}


/* 타일 1개 */
.intro-mosaic .tile {
	position: absolute;
	opacity: 0;
	transform: scale(1);
	will-change: opacity, transform;
	background-repeat: no-repeat;

}

/* 타일이 하나씩 나타나는 애니메이션 */
.intro-mosaic.play .tile {
	animation: tileIn 520ms cubic-bezier(.22, .61, .36, 1) forwards;
}

@keyframes tileIn {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* (선택) 타일 경계가 살짝 보이게 하고 싶으면 주석 해제 */
/*
.intro-mosaic .tile{
  outline: 0.5px solid rgba(255,255,255,0.03);
}
*/