/* 央国企一站式服务屏（位于「高端就业赋能」与「最U职简介」之间） */

#page-soe {
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	min-height: 100vh;
	height: auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

#page-soe .casoe-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		125deg,
		rgba(12, 38, 88, 0.92) 0%,
		rgba(18, 52, 108, 0.72) 32%,
		rgba(18, 52, 108, 0.38) 55%,
		rgba(18, 52, 108, 0.12) 78%,
		transparent 100%
	);
}

#page-soe .casoe-inner {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 82%;
	max-width: none;
	margin-left: 0;
	margin-right: auto;
	padding: clamp(64px, 9.5vh, 120px) 5.5% 32px 5.5%;
	box-sizing: border-box;
	will-change: transform;
	transform: translateY(12px);
}

#page-soe .casoe-title {
	position: relative;
	display: block;
	font-size: 0;
	line-height: 0;
	text-align: left;
	margin: 0 0 0.8em;
	padding-bottom: 18px;
	will-change: transform, opacity;
	transform-style: preserve-3d;
	transform-origin: 50% 85%;
}

/* 金色下划线装饰（入场后从左向右展开） */
#page-soe .casoe-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 6px;
	width: min(100%, 960px);
	border-radius: 3px;
	background: linear-gradient(
		90deg,
		rgba(255, 236, 180, 0.95) 0%,
		#e8a820 42%,
		rgba(232, 168, 32, 0.15) 100%
	);
	box-shadow: 0 0 16px rgba(240, 200, 80, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
}

/* 与首帧 keyframe 对齐，避免滚入视口瞬间未加 class 时标题先露全字 */
#page-soe:not(.casoe--shown) .casoe-title {
	opacity: 0;
	transform: perspective(880px) rotateX(26deg) translate3d(0, 56px, -50px) scale(0.92);
}

#page-soe .casoe-title .casoe-title-img {
	display: block;
	width: min(100%, 1040px);
	max-width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform, opacity, filter;
}

#page-soe .casoe-lines {
	position: relative;
	text-align: left;
	padding-left: 1.15em;
	margin-top: 0.42em;
	max-width: none;
	width: 100%;
}

/* 左侧竖向金条（高度生长） */
#page-soe .casoe-lines::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 5px;
	height: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, #ffe9a8 0%, #e8a820 45%, rgba(232, 168, 32, 0.25) 100%);
	box-shadow: 0 0 12px rgba(255, 210, 100, 0.45);
	opacity: 0;
}

#page-soe .casoe-line {
	font-size: clamp(17px, 1.95vw, 25px);
	font-weight: 700;
	color: #fff;
	line-height: 1.68;
	margin: 0;
	max-width: none;
	will-change: transform, opacity, filter;
	opacity: 0;
	transform: translateY(44px) scale(0.94);
	filter: blur(10px);
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.48), 0 3px 16px rgba(0, 0, 0, 0.3);
}

#page-soe .casoe-line--head {
	margin-bottom: 0.42em;
	white-space: nowrap;
	font-size: clamp(19px, 2.2vw, 30px);
	font-weight: 700;
}

/* 第二行：整句单行（与参考图两行白字一致） */
#page-soe .casoe-line--detail {
	font-weight: 700;
	font-size: clamp(16px, 1.85vw, 25px);
	white-space: nowrap;
}

/* 整块文案区轻微下落归位（自上方入场） */
@keyframes casoeInnerFloatIn {
	0% {
		transform: translateY(12px);
	}
	100% {
		transform: translateY(0);
	}
}

/* 入场：3D 仰角归位 + 轻微回弹 */
@keyframes casoeTitle3dIn {
	0% {
		opacity: 0;
		transform: perspective(880px) rotateX(26deg) translate3d(0, 56px, -50px) scale(0.92);
	}
	70% {
		opacity: 1;
		transform: perspective(880px) rotateX(-4deg) translate3d(0, -6px, 0) scale(1.02);
	}
	100% {
		opacity: 1;
		transform: perspective(880px) rotateX(0deg) translate3d(0, 0, 0) scale(1);
	}
}

@keyframes casoeUnderlineIn {
	0% {
		transform: scaleX(0);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	100% {
		transform: scaleX(1);
		opacity: 1;
	}
}

/* 标题字图：落稳后轻微外发光呼吸 */
@keyframes casoeTitleImgGlowPulse {
	0%,
	100% {
		filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.45))
			drop-shadow(0 0 18px rgba(255, 200, 80, 0.28));
	}
	50% {
		filter: drop-shadow(0 5px 18px rgba(0, 0, 0, 0.4))
			drop-shadow(0 0 28px rgba(255, 214, 120, 0.42));
	}
}

/* 字图自身：清晰化 + 上浮归位（与整标题 3D 入场叠加） */
@keyframes casoeTitleImgReveal {
	0% {
		opacity: 0;
		transform: translate3d(0, 20px, 0) scale(0.96);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes casoeAccentBarGrow {
	0% {
		height: 0;
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	100% {
		height: calc(100% - 0.35em);
		opacity: 1;
	}
}

@keyframes casoeLineRiseBlur {
	0% {
		opacity: 0;
		transform: translateY(48px) scale(0.93);
		filter: blur(12px);
	}
	55% {
		opacity: 1;
		filter: blur(3px);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@keyframes casoeLineRiseBlurLate {
	0% {
		opacity: 0;
		transform: translateY(36px) translateX(-12px) scale(0.96);
		filter: blur(10px);
	}
	60% {
		opacity: 1;
		filter: blur(2px);
	}
	100% {
		opacity: 1;
		transform: translateY(0) translateX(0) scale(1);
		filter: blur(0);
	}
}

#page-soe.casoe--shown .casoe-inner {
	animation: casoeInnerFloatIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#page-soe.casoe--shown .casoe-title {
	animation: casoeTitle3dIn 1.12s cubic-bezier(0.33, 1.15, 0.52, 1) both;
}

#page-soe.casoe--shown .casoe-title::after {
	animation: casoeUnderlineIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.88s both;
}

#page-soe.casoe--shown .casoe-title .casoe-title-img {
	animation: casoeTitleImgReveal 0.88s cubic-bezier(0.25, 1, 0.48, 1) 0.18s both,
		casoeTitleImgGlowPulse 4.2s ease-in-out 1.05s infinite;
}

#page-soe.casoe--shown .casoe-lines::before {
	animation: casoeAccentBarGrow 0.85s cubic-bezier(0.25, 1, 0.5, 1) 0.72s forwards;
}

#page-soe.casoe--shown .casoe-line:nth-child(1) {
	animation: casoeLineRiseBlur 0.88s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}

#page-soe.casoe--shown .casoe-line:nth-child(2) {
	animation: casoeLineRiseBlurLate 0.92s cubic-bezier(0.28, 1, 0.42, 1) 0.62s both;
}

@media (prefers-reduced-motion: reduce) {
	#page-soe .casoe-inner {
		transform: none;
	}
	#page-soe:not(.casoe--shown) .casoe-title {
		opacity: 1;
		transform: none;
	}
	#page-soe.casoe--shown .casoe-inner,
	#page-soe.casoe--shown .casoe-title,
	#page-soe.casoe--shown .casoe-title::after,
	#page-soe.casoe--shown .casoe-lines::before,
	#page-soe.casoe--shown .casoe-line {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
	#page-soe.casoe--shown .casoe-title::after {
		transform: scaleX(1);
	}
	#page-soe.casoe--shown .casoe-lines::before {
		height: calc(100% - 0.35em);
		opacity: 1;
	}
	#page-soe.casoe--shown .casoe-title .casoe-title-img {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}

@media (max-width: 640px) {
	#page-soe .casoe-line--head,
	#page-soe .casoe-line--detail {
		white-space: normal;
	}
}

@media only screen and (max-width: 767px) {
	#page-soe .casoe-inner {
		width: 92%;
		padding: clamp(52px, 8vh, 88px) 4.5% 20px 4.5%;
	}
	#page-soe .casoe-title .casoe-title-img {
		width: 100%;
	}
	#page-soe .casoe-overlay {
		background: linear-gradient(
			165deg,
			rgba(18, 52, 108, 0.9) 0%,
			rgba(18, 52, 108, 0.5) 50%,
			rgba(18, 52, 108, 0.15) 100%
		);
	}
}