/* ============================================
   common-intro.css — 5개 서브페이지 공통 인트로 CSS
   philosophy(ph) / first-best(fb) / future(fo) / 80-years(ey) / sp-samhwa(sp)
   ============================================ */

/* ── Intro Section: Layout ── */
.ph-intro,
.fb-intro,
.fo-intro,
.ey-intro,
.sp-intro,
.ar-intro {
	position: relative;
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
}

/* ── BG Wrapper ── */
.ph-intro__bg-wrapper,
.fb-intro__bg-wrapper,
.fo-intro__bg-wrapper,
.ey-intro__bg-wrapper,
.sp-intro__bg-wrapper,
.ar-intro__bg-wrapper {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	z-index: 0;
	/* 1536 기준: 460×400 (29.95vw × 26.04vw) */
	width: min(29.95vw, 574px);
	height: min(26.04vw, 500px);
	will-change: width, height;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ── BG Inner ── */
.ph-intro__bg,
.fb-intro__bg,
.fo-intro__bg,
.ey-intro__bg,
.sp-intro__bg,
.ar-intro__bg {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.fb-intro__bg,
.fo-intro__bg,
.ey-intro__bg,
.sp-intro__bg,
.ar-intro__bg {
	transform-origin: center bottom;
	will-change: transform;
	overflow: hidden;
}

/* fb / fo / ey / sp 에만 있는 추가 속성 — ph-intro__bg 는 이 속성이 없으므로 별도 선언 */
.fb-intro__bg,
.fo-intro__bg,
.ey-intro__bg,
.sp-intro__bg {
	transform-origin: center bottom;
	will-change: transform;
	overflow: hidden;
}

/* ── BG Image ── */
.ph-intro__bg-img,
.fb-intro__bg-img,
.fo-intro__bg-img,
.ey-intro__bg-img,
.sp-intro__bg-img,
.ar-intro__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;
}

.fb-intro__bg-img,
.fo-intro__bg-img,
.ey-intro__bg-img,
.sp-intro__bg-img,
.ar-intro__bg-img {
	display: block;
}

/* fb / fo / ey / sp 에만 display:block — philosophy 는 없음 */
.fb-intro__bg-img,
.fo-intro__bg-img,
.ey-intro__bg-img,
.sp-intro__bg-img {
	display: block;
}

/* ── Content Overlay ── */
.ph-intro__content,
.fb-intro__content,
.fo-intro__content,
.ey-intro__content,
.sp-intro__content,
.ar-intro__content {
	position: absolute;
	left: 50%;
	top: calc(var(--header-h, 90px) + 15vh);
	z-index: 2;
	text-align: center;
	white-space: nowrap;
}

.ph-intro__title,
.fb-intro__title,
.fo-intro__title,
.ey-intro__title,
.sp-intro__title,
.ar-intro__title {
	font-size: clamp(48px, 5.21vw, 100px);
	font-weight: 600;
	line-height: 100%;
	margin: 0 0 clamp(16px, 1.56vw, 30px);
	overflow: hidden;
}

.ph-intro__subtitle,
.fb-intro__subtitle,
.fo-intro__subtitle,
.ey-intro__subtitle,
.sp-intro__subtitle,
.ar-intro__subtitle {
	font-size: clamp(18px, 1.25vw, 24px);
	font-weight: 400;
	line-height: 130%;
	margin: 0;
	overflow: hidden;
}

/* ── Text Reveal Animation (is-revealed) ── */
.ph-intro__title > span,
.ph-intro__subtitle > span,
.fb-intro__title > span,
.fb-intro__subtitle > span,
.fo-intro__title > span,
.fo-intro__subtitle > span,
.ey-intro__title > span,
.ey-intro__subtitle > span,
.sp-intro__title > span,
.sp-intro__subtitle > span {
	display: inline-block;
	transform: translateY(100%);
}

.ph-intro.is-revealed .ph-intro__title > span,
.fb-intro.is-revealed .fb-intro__title > span,
.fo-intro.is-revealed .fo-intro__title > span,
.ey-intro.is-revealed .ey-intro__title > span,
.sp-intro.is-revealed .sp-intro__title > span {
	transform: translateY(0);
	transition: transform 1.2s cubic-bezier(0.39, 0, 0.12, 0.99);
}

.ph-intro.is-revealed .ph-intro__subtitle > span,
.fb-intro.is-revealed .fb-intro__subtitle > span,
.fo-intro.is-revealed .fo-intro__subtitle > span,
.ey-intro.is-revealed .ey-intro__subtitle > span,
.sp-intro.is-revealed .sp-intro__subtitle > span {
	transform: translateY(0);
	transition: transform 1.2s cubic-bezier(0.39, 0, 0.12, 0.99) 0.2s;
}

/* ── Scroll CTA (공통 구조) ── */
.ph-intro__scroll-cta,
.fb-intro__scroll-cta,
.fo-intro__scroll-cta,
.ey-intro__scroll-cta,
.sp-intro__scroll-cta {
	position: absolute;
	bottom: 34px;
	text-align: center;
	color: #fff;
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 18px;
	font-weight: 300;
	pointer-events: none;
	z-index: 3;
}

/* ── Intro Spacer (pinSpacing:false 보정) ── */
.ph-intro-spacer,
.fo-intro-spacer,
.ey-intro-spacer,
.sp-intro-spacer {
	position: relative;
	pointer-events: none;
}

/* ── Dimmed Overlay (ey / sp) ── */
.ey-intro__dimmed,
.sp-intro__dimmed {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	z-index: 3;
	pointer-events: none;
	will-change: opacity;
}

/* ── Ruler Base (ey / sp) ── */
.ey-intro__ruler,
.sp-intro__ruler {
	position: absolute;
	left: 0;
	width: 100%;
	height: 30px;
	overflow: hidden;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	will-change: opacity, transform;
}

.ey-intro__ruler--top,
.sp-intro__ruler--top {
	top: 20px;
}

.ey-intro__ruler--bottom,
.sp-intro__ruler--bottom {
	bottom: 20px;
}