@charset "UTF-8";

/* ==========================================================================
   §1. HERO 섹션 전용 스타일 (hero.css)
   - 풀스크린 다크 그라디언트 배경
   - 네트워크 캔버스 + 글로우 + FirstPet 로고
   - 모드 토글과 무관하게 항상 다크 톤 유지 (라이트 모드는 헤더/푸터에만)
   ========================================================================== */

#hero {
	min-height: calc(100vh - var(--footer-height));
	/*
	 * 본 배경: 세로 방향 (180deg) 그라디언트.
	 * - 좌우 색상 차이 없이 균일.
	 * - 진한 파란 액센트는 ::before / ::after 글로우 효과에서 처리.
	 * - 끝 색상(#1a1f3a)이 ideology 시작 색상과 일치.
	 */
	background: linear-gradient(180deg,
		var(--dark) 0%,
		#0f1838 40%,
		#1a1f3a 100%);
	color: white;
	display: flex;
	align-items: center;        /* 수직 중앙 정렬 (마더기업 스타일) */
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	/* 헤더 영역 만큼 위쪽 패딩 + 위아래 균형 있는 여백 */
	padding: var(--header-height) var(--page-padding-x) 60px;
}

/* 배경 네트워크 캔버스 */
#network-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.6;
	pointer-events: none;
}

/* 배경 글로우 - 우측 상단 */
#hero::before {
	content: '';
	position: absolute;
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(0, 217, 255, 0.18) 0%, transparent 60%);
	top: -300px;
	right: -200px;
	border-radius: 50%;
	animation: heroFloat1 12s ease-in-out infinite;
}

/* 배경 글로우 - 좌측 하단 */
#hero::after {
	content: '';
	position: absolute;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(0, 102, 204, 0.25) 0%, transparent 60%);
	bottom: -200px;
	left: -150px;
	border-radius: 50%;
	animation: heroFloat2 10s ease-in-out infinite;
}

@keyframes heroFloat1 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-50px, 30px); }
}

@keyframes heroFloat2 {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(40px, -30px); }
}

/* --------------------------------------------------------------------------
   히어로 콘텐츠
   -------------------------------------------------------------------------- */
.hero-content {
	position: relative;
	z-index: 3;
	padding: 0 20px;
	max-width: 1000px;
}

/* 진입 페이드인 - 자식 요소들이 순차적으로 등장 */
.hero-content > * {
	opacity: 0;
	transform: translateY(30px);
	animation: heroFadeUp 1s forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.3s; }
.hero-content > *:nth-child(3) { animation-delay: 0.5s; }

@keyframes heroFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   FirstPet 브랜드 마크 (헤드라인 위)
   -------------------------------------------------------------------------- */
.hero-product-mark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 28px;
}

.hero-product-mark svg {
	height: 64px;
	width: auto;
	filter: drop-shadow(0 6px 24px rgba(0, 217, 255, 0.4));
	margin-bottom: 4px;
	/* 로고의 시각적 무게가 우측 상단(고양이 귀)으로 쏠려서
	   살짝 왼쪽으로 밀어 광학적 중심을 맞춤 */
	transform: translateX(-3%);
}

.hero-product-tagline {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.hero-product-tagline::before,
.hero-product-tagline::after {
	content: '';
	width: 24px;
	height: 1px;
	background: rgba(0, 217, 255, 0.5);
}

/* --------------------------------------------------------------------------
   메인 카피
   -------------------------------------------------------------------------- */
.hero-headline {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -1px;
	color: white;
	margin-bottom: 24px;
}

.hero-headline-accent {
	color: var(--accent);
	display: block;
	margin-top: 6px;
}

.hero-sub {
	font-size: var(--fs-base);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.8);
	max-width: 700px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   반응형
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	#hero {
		padding-top: calc(var(--header-height) + 40px);
	}
	.hero-product-mark svg {
		height: 62px;
	}
	.hero-product-tagline {
		letter-spacing: 3.5px;
	}
	.hero-product-tagline::before,
	.hero-product-tagline::after {
		width: 21px;
	}
}

@media (max-width: 767px) {
	#hero {
		padding-top: calc(var(--header-height) + 60px);
	}
	.hero-product-mark svg {
		height: 60px;
	}
	.hero-product-tagline {
		font-size: var(--fs-xs);
		letter-spacing: 3px;
	}
	.hero-product-tagline::before,
	.hero-product-tagline::after {
		width: 18px;
	}
	.hero-sub br {
		display: none;
	}
}
/* --------------------------------------------------------------------------
   스크롤 다운 인디케이터 (Hero 하단 중앙)
   - 시각적 안내 전용 (클릭/호버 인터랙션 없음)
   - 위아래 바운스 애니메이션으로 시선 유도
   -------------------------------------------------------------------------- */
.hero-scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.5);
	pointer-events: none;       /* 마우스 이벤트 무시 - 단순 시각 표시 */
	z-index: 5;
	animation: heroScrollBounce 2s ease-in-out infinite;
}

.hero-scroll-text {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
}

.hero-scroll-icon {
	width: 20px;
	height: 20px;
	stroke-width: 1.5;
}

@keyframes heroScrollBounce {
	0%, 100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(8px);
	}
}

/* 태블릿 - 스크롤 인디케이터 중간 크기 */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero-scroll {
		bottom: 28px;
	}
	.hero-scroll-text {
		letter-spacing: 2.75px;
	}
	.hero-scroll-icon {
		width: 19px;
		height: 19px;
	}
}

/* 모바일 - 스크롤 인디케이터 살짝 작게 */
@media (max-width: 767px) {
	.hero-scroll {
		bottom: 24px;
	}
	.hero-scroll-text {
		font-size: var(--fs-2xs);
		letter-spacing: 2.5px;
	}
	.hero-scroll-icon {
		width: 18px;
		height: 18px;
	}
}
/* ==========================================================================
   §1. HERO - CTA 버튼 (PROJECTS ↓ 단일)
   - 컴팩트 + 직사각형 (border-radius 0)
   ========================================================================== */

.hero-buttons {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 36px;
}

/* PROJECTS ↓ 버튼 - §4 TECHNOLOGY 섹션으로 스크롤 */
.hero-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 28px;                          /* 16/32 → 11/28 컴팩트 */
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: white;
	font-size: var(--fs-xs);                      /* 14 → 13 */
	font-weight: 600;
	letter-spacing: 2px;
	text-decoration: none;
	transition: all 0.3s ease;
	border-radius: 0;                             /* 4 → 0 직사각형 */
}

.hero-button:hover {
	background: white;
	color: var(--dark);
	border-color: white;
}

/* 반응형 - 태블릿 (768px ~ 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
	.hero-buttons {
		gap: 14px;
		margin-top: 32px;
	}

	.hero-button {
		padding: 10px 24px;
	}
}

/* 반응형 - 모바일 (767px 이하) */
@media (max-width: 767px) {
	.hero-buttons {
		gap: 12px;
		margin-top: 28px;
	}

	.hero-button {
		justify-content: center;
		padding: 10px 22px;                       /* 더 컴팩트 */
		font-size: var(--fs-2xs);
	}
}