/*
 * 默认态以海报作为完整舞台底图，标题区的品牌青绿通过遮罩向下连续渐隐。
 * 不能再拆成“纯色标题块 + 原生视频”两个相邻元素，否则会丢失 PSD 中天空、
 * 建筑和青绿滤色的融合关系，也会在浏览器预加载时露出原生控制条。
 */
.yumin-company-video {
	overflow: hidden;
	border-bottom: 13px solid #f5f5f5;
	color: #fff;
	background: #00afa8;
}

.yumin-company-video__stage {
	position: relative;
	isolation: isolate;
	/* PSD 的桌面视频视觉区为 1920:900，使用比例容器避免宽屏时画面被压扁。 */
	aspect-ratio: 1920 / 900;
	overflow: hidden;
	background: #008f8a;
}

.yumin-company-video__poster,
.yumin-company-video__media {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
}

.yumin-company-video__poster {
	z-index: 0;
}

/*
 * PSD 只在顶部短区域使用品牌青绿；色层从标题下方开始逐渐消退，
 * 约到舞台 60% 处完全透明。下半部不得叠加横向滤色，必须保留厂房原图色彩。
 */
.yumin-company-video__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 174, 168, .98) 0%, rgba(0, 174, 168, .94) 18%, rgba(0, 174, 168, .56) 35%, rgba(0, 174, 168, .18) 48%, rgba(0, 174, 168, 0) 60%);
}

.yumin-company-video__content {
	position: relative;
	z-index: 2;
	padding-top: clamp(44px, 4.1vw, 78px);
	padding-bottom: clamp(190px, 15.1vw, 290px);
}

.yumin-company-video h2 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-size: clamp(32px, 2.34vw, 45px);
	font-weight: 800;
	line-height: 1.12;
}

.yumin-company-video__description {
	max-width: 900px;
	margin: 18px 0 0;
	color: #fff;
	font-size: clamp(15px, 1.04vw, 20px);
	line-height: 1.55;
}

.yumin-company-video__play,
.yumin-company-video__close {
	position: absolute;
	border: 0;
	cursor: pointer;
}

.yumin-company-video__play {
	/* PSD 中播放圆心位于视频视觉区约 57% 的纵向位置。 */
	top: 57%;
	left: 50%;
	z-index: 3;
	display: grid;
	width: clamp(76px, 7.03vw, 135px);
	height: clamp(76px, 7.03vw, 135px);
	place-items: center;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(20, 49, 53, .74);
	box-shadow: 0 14px 34px rgba(0, 41, 43, .2);
	transition: transform 180ms ease, background-color 180ms ease;
}

/* 使用 CSS 绘制常见播放符号，避免文字字形在不同系统下改变三角形重心。 */
.yumin-company-video__play span {
	width: 0;
	height: 0;
	margin-left: 8%;
	border-top: clamp(13px, 1.35vw, 26px) solid transparent;
	border-bottom: clamp(13px, 1.35vw, 26px) solid transparent;
	border-left: clamp(20px, 2.08vw, 40px) solid #fff;
}

.yumin-company-video__play:hover,
.yumin-company-video__play:focus-visible {
	background: rgba(0, 104, 101, .92);
	transform: translate(-50%, -50%) scale(1.06);
}

.yumin-company-video__play:focus-visible,
.yumin-company-video__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 5px;
}

.yumin-company-video__player {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: #062e31;
}

.yumin-company-video__player[hidden] {
	display: none;
}

.yumin-company-video__media {
	position: absolute;
	z-index: 1;
	background: #062e31;
}

.yumin-company-video__close {
	top: 20px;
	right: 20px;
	z-index: 2;
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 28, 30, .72);
	font-size: 30px;
	line-height: 1;
}

.yumin-company-video__stage.is-playing .yumin-company-video__play {
	display: none;
}

@media (max-width: 700px) {
	.yumin-company-video {
		border-bottom-width: 8px;
	}

	.yumin-company-video__stage {
		min-height: 0;
		aspect-ratio: 1.3 / 1;
	}

	.yumin-company-video__content {
		width: calc(100% - 40px);
		padding-top: 42px;
		padding-bottom: 156px;
	}

	.yumin-company-video h2 {
		font-size: clamp(28px, 8.2vw, 36px);
	}

	.yumin-company-video__description {
		margin-top: 14px;
		font-size: 15px;
	}

	.yumin-company-video__play {
		top: 72%;
	}

	.yumin-company-video__close {
		top: 12px;
		right: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yumin-company-video__play {
		transition: none;
	}
}