/**
 * 科技感 Hero 区域样式
 * 简洁优雅的背景效果
 */

/* ===== 光线扫过动画 ===== */
@keyframes light-sweep {
	0% {
		transform: translateX(-150%) rotate(-45deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(150%) rotate(-45deg);
		opacity: 0;
	}
}

.tech-light-sweep {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}

.tech-light-sweep::before {
	content: '';
	position: absolute;
	width: 200%;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(217, 119, 87, 0.8) 20%,
		rgba(255, 255, 255, 0.9) 50%,
		rgba(217, 119, 87, 0.8) 80%,
		transparent 100%
	);
	box-shadow:
		0 0 10px rgba(217, 119, 87, 0.5),
		0 0 20px rgba(217, 119, 87, 0.3),
		0 0 30px rgba(217, 119, 87, 0.2);
	animation: light-sweep 4s ease-out forwards;
	transform: translateX(-150%) rotate(-45deg);
}

/* ===== 首页 Hero Section ===== */
.hero-section {
	position: relative;
	background: linear-gradient(135deg, #faf8f5 0%, #f5f0e8 50%, #faf8f5 100%);
	padding: 100px 20px;
	text-align: center;
	overflow: hidden;
}

/* 细微网格背景 */
.hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(rgba(217, 119, 87, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(217, 119, 87, 0.1) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
}

/* 浮动光晕 */
.hero-section .glow-effect {
	position: absolute;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(217, 119, 87, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	top: -150px;
	right: -100px;
	animation: float-glow 8s ease-in-out infinite;
	pointer-events: none;
}

.hero-section .glow-effect-secondary {
	position: absolute;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(196, 106, 77, 0.06) 0%, transparent 70%);
	border-radius: 50%;
	bottom: -100px;
	left: -80px;
	animation: float-glow 10s ease-in-out infinite reverse;
	pointer-events: none;
}

@keyframes float-glow {
	0%, 100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(20px, -20px) scale(1.05);
	}
}

.hero-section h1,
.hero-section .slogan,
.hero-section .description {
	position: relative;
	z-index: 1;
}

/* ===== About 页面 ===== */
.about-hero {
	position: relative;
	background: linear-gradient(135deg, #faf8f5 0%, #f5f0e8 50%, #faf8f5 100%);
	padding: 80px 20px;
	text-align: center;
	overflow: hidden;
	border-radius: 16px;
	margin-bottom: 40px;
}

.about-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(rgba(217, 119, 87, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(217, 119, 87, 0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	pointer-events: none;
}

.about-hero::after {
	content: '';
	position: absolute;
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, rgba(217, 119, 87, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	top: -100px;
	right: -100px;
	animation: float-glow 8s ease-in-out infinite;
	pointer-events: none;
}

.about-hero .glow-left {
	position: absolute;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(196, 106, 77, 0.05) 0%, transparent 70%);
	border-radius: 50%;
	bottom: -100px;
	left: -60px;
	animation: float-glow 10s ease-in-out infinite reverse;
	pointer-events: none;
}

.about-hero .logo-large,
.about-hero h1,
.about-hero .slogan {
	position: relative;
	z-index: 1;
}

/* ===== ClawStudio 首页 intro ===== */
.intro-section {
	position: relative;
	background: linear-gradient(135deg, #f8f5f0 0%, #f0ebe3 50%, #f8f5f0 100%);
	padding: 60px 20px;
	overflow: hidden;
	border-radius: 16px;
}

.intro-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(rgba(46, 125, 50, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(46, 125, 50, 0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	pointer-events: none;
}

.intro-section::after {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(46, 125, 50, 0.06) 0%, transparent 70%);
	border-radius: 50%;
	top: -100px;
	right: -60px;
	animation: float-glow 7s ease-in-out infinite;
	pointer-events: none;
}

.intro-section .glow-left {
	position: absolute;
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(217, 119, 87, 0.04) 0%, transparent 70%);
	border-radius: 50%;
	bottom: -60px;
	left: -40px;
	animation: float-glow 9s ease-in-out infinite reverse;
	pointer-events: none;
}

.intro-section img,
.intro-section h1,
.intro-section h2,
.intro-section p {
	position: relative;
	z-index: 1;
}

/* ===== 工作室页面 profession-hero ===== */
.profession-hero {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 60px 30px;
}

/* 细微网格 */
.profession-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
	background-size: 50px 50px;
	pointer-events: none;
}

/* 光晕效果 */
.profession-hero::after {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
	border-radius: 50%;
	top: -100px;
	right: -60px;
	pointer-events: none;
}

.profession-hero .icon,
.profession-hero h1,
.profession-hero p {
	position: relative;
	z-index: 1;
}

/* 营养师 - 绿色渐变 */
.profession-hero.nutritionist {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

/* 心理咨询师 - 紫色渐变 */
.profession-hero.counselor {
	background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

/* 律师 - 蓝色渐变 */
.profession-hero.lawyer {
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

/* 职业规划师 - 橙色渐变 */
.profession-hero.career {
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

/* 旅游咨询师 - 青色渐变 */
.profession-hero.travel {
	background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
}

/* 财务顾问 - 浅绿渐变 */
.profession-hero.financial {
	background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%);
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
	.hero-section {
		padding: 60px 15px;
	}

	.hero-section .glow-effect,
	.hero-section .glow-effect-secondary {
		width: 250px;
		height: 250px;
	}

	.about-hero::after,
	.about-hero .glow-left,
	.intro-section::after,
	.intro-section .glow-left {
		width: 200px;
		height: 200px;
	}

	.profession-hero {
		padding: 40px 20px;
	}

	.profession-hero::after {
		width: 200px;
		height: 200px;
	}
}