/* =====================================
   品牌/关于我们页面样式 - Brand & About Page
   包含：糖果飘动动画、背景横幅、公司介绍、
         公司数字、发展历程、荣誉资质、响应式
   ===================================== */

/* ===== 糖果飘动容器 ===== */
.royal-brand-ani-g {
	overflow: hidden;
	position: relative;
}

/* ===== 糖果飘动层（第一层）- 使用::before伪元素绘制糖果并添加飘动+闪亮动画 ===== */
.royal-brand-ani-g::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
	background:
		/* 糖果1 - 圆形 */
		radial-gradient(circle at 30% 30%, #FF6B6B, #FF8E8E) no-repeat,
		/* 糖果2 - 方形 */
		linear-gradient(135deg, #FFD93D, #FFE66D) no-repeat,
		/* 糖果3 - 棒棒糖 */
		radial-gradient(circle at 50% 50%, #A8E6CF, #7FD8BE) no-repeat,
		/* 糖果4 - 药片形 */
		radial-gradient(ellipse at 50% 40%, #C786E8, #9B59B6) no-repeat,
		/* 糖果5 - 三角形糖果 */
		linear-gradient(45deg, #FFB347, #FFA07A) no-repeat,
		/* 糖果6 - 薄荷糖 */
		radial-gradient(circle at 50% 50%, #4ECDC4, #44B3A2) no-repeat;
	background-size: 30px 30px, 25px 35px, 28px 28px, 32px 28px, 26px 26px, 24px 24px;
	background-position:
		10% -50px,
		25% -80px,
		40% -30px,
		60% -100px,
		75% -40px,
		90% -70px;
	animation: candyFloatUpDown 20s ease-in-out infinite, candySparkle 3s infinite;
}

/* ===== 糖果飘动层（第二层）- 使用::after伪元素，更多糖果、反向动画 ===== */
.royal-brand-ani-g::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(circle at 50% 50%, #FF8CA3, #FF6B8B) no-repeat,
		linear-gradient(90deg, #95E77E, #6BCB5E) no-repeat,
		radial-gradient(ellipse at 50% 50%, #FFD93D, #FFC107) no-repeat,
		linear-gradient(135deg, #B980F0, #9B59B6) no-repeat,
		radial-gradient(circle at 50% 50%, #5DD9C1, #45B7A8) no-repeat,
		linear-gradient(45deg, #FF9F4A, #FF7F3F) no-repeat;
	background-size: 22px 22px, 20px 28px, 26px 26px, 24px 24px, 28px 28px, 20px 20px;
	background-position:
		15% -60px,
		35% -40px,
		50% -90px,
		68% -50px,
		82% -110px,
		95% -30px;
	animation: candyFloatUpDownReverse 24s ease-in-out infinite, candySparkle 3.5s infinite;
}

/* 确保内容层在糖果之上 */
.royal-brand-ani-g .royal-container {
	position: relative;
	z-index: 1;
}

/* ===== 糖果飘动动画 - 从上到下再循环 ===== */
@keyframes candyFloatUpDown {
	0% {
		background-position:
			10% -50px,
			25% -80px,
			40% -30px,
			60% -100px,
			75% -40px,
			90% -70px;
		opacity: 0;
	}
	5% {
		opacity: 0.6;
	}
	25% {
		background-position:
			8% 40%,
			22% 35%,
			38% 45%,
			58% 30%,
			73% 40%,
			88% 35%;
		opacity: 0.7;
		transform: rotate(2deg);
	}
	50% {
		background-position:
			12% 100%,
			28% 95%,
			42% 110%,
			62% 90%,
			78% 105%,
			92% 100%;
		opacity: 0.6;
		transform: rotate(5deg);
	}
	55% {
		opacity: 0.4;
	}
	75% {
		background-position:
			5% 50%,
			30% 45%,
			45% 55%,
			55% 40%,
			70% 50%,
			85% 45%;
		opacity: 0.7;
		transform: rotate(2deg);
	}
	95% {
		opacity: 0.5;
	}
	100% {
		background-position:
			10% -50px,
			25% -80px,
			40% -30px,
			60% -100px,
			75% -40px,
			90% -70px;
		opacity: 0;
		transform: rotate(0deg);
	}
}

/* ===== 糖果飘动反向动画 - 不同速度与偏移，营造层次感 ===== */
@keyframes candyFloatUpDownReverse {
	0% {
		background-position:
			15% -60px,
			35% -40px,
			50% -90px,
			68% -50px,
			82% -110px,
			95% -30px;
		opacity: 0;
	}
	5% {
		opacity: 0.5;
	}
	25% {
		background-position:
			18% 45%,
			32% 40%,
			48% 35%,
			65% 50%,
			80% 40%,
			92% 45%;
		opacity: 0.6;
		transform: rotate(-2deg);
	}
	50% {
		background-position:
			12% 105%,
			38% 100%,
			52% 115%,
			70% 90%,
			85% 100%,
			98% 95%;
		opacity: 0.5;
		transform: rotate(-5deg);
	}
	55% {
		opacity: 0.3;
	}
	75% {
		background-position:
			20% 55%,
			30% 50%,
			55% 45%,
			72% 40%,
			78% 50%,
			90% 55%;
		opacity: 0.6;
		transform: rotate(-2deg);
	}
	95% {
		opacity: 0.4;
	}
	100% {
		background-position:
			15% -60px,
			35% -40px,
			50% -90px,
			68% -50px,
			82% -110px,
			95% -30px;
		opacity: 0;
		transform: rotate(0deg);
	}
}

/* ===== 糖果闪亮效果 - 周期性亮度与光晕变化 ===== */
@keyframes candySparkle {
	0%, 100% {
		filter: brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0));
	}
	50% {
		filter: brightness(1.1) drop-shadow(0 0 5px rgba(255,255,255,0.5));
	}
}

/* ===== 关于我们 - 顶部横幅 ===== */
.royal-brand-banner {
	height: 800px;
}

.royal-brand-banner .royal-inner-banner-bg {
	background-position: center;
}

.royal-brand-banner::before {
	background: linear-gradient(30deg, #b4e1dc31 20%, #b4e1dc17 50%, #73d7dc36 60%, #0e9f7643 100%);
	z-index: 3;
}

.royal-brand-banner .royal-inner-banner-info {
	color: #fff;
}

.royal-brand-banner .royal-inner-banner-info h2 {
	font-size: 60px;
}

/* ===== 关于我们 - 公司介绍 ===== */
.royal-brand-g {
	padding: 80px 0 40px;
	overflow: hidden;
	background: #F0FFFD;
}

.royal-brand-title {
	font-size: 40px;
	text-transform: uppercase;
	font-weight: bold;
	color: #73D7DC;
	margin-bottom: 60px;
}

.royal-brand-title span {
	position: relative;
	padding-bottom: 20px;
}

.royal-brand-title span::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: #73D7DC;
	border-radius: 4px;
}

.royal-brand-txt {
	font-size: 16px;
	overflow: hidden;
	padding: 40px;
	border: 1px solid #e6e6e6;
	border-radius: 20px;
	border-left: 10px solid #73D7DC;
}

/* ===== 公司数字 - 关键指标展示 ===== */
.royal-brand-num-g {
	overflow: hidden;
	background: #F0FFFD;
	padding-bottom: 80px;
}

.royal-brand-num-g li {
	padding: 10px;
	text-align: center;
}

.royal-brand-num-item h2 {
	font-size: 48px;
	color: #73D7DC;
}

.royal-brand-num-item p {
	font-size: 20px;
}

/* ===== 公司历程 - 时间线交替布局 ===== */
.royal-brand-journey {
	padding: 80px 0 40px;
	overflow: hidden;
}

.royal-brand-journey-content {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0;
	position: relative;
}

/* 偶数项：信息框在左边，图片推到右边 */
.royal-brand-journey li:nth-of-type(2n) .royal-brand-journey-info {
	right: auto;
	left: 0;
}

.royal-brand-journey li:nth-of-type(2n) .royal-brand-journey-img {
	flex-shrink: 0;
	margin-left: auto;
}

.royal-brand-journey-info {
	padding: 40px;
	border-radius: 20px;
	width: 60%;
	background: #f0fffdfa;
	position: absolute;
	right: 0;
	z-index: 9;
	border: 1px solid #73D7DC;
	max-height: 480px;
}

.royal-brand-journey-txt {
	font-size: 18px;
	line-height: 1.6;
	overflow: hidden;
}

.royal-brand-journey-title {
	font-size: 24px;
	text-transform: uppercase;
	font-weight: bold;
	color: #73D7DC;
	margin-bottom: 20px;
}

.royal-brand-journey-img {
	position: relative;
	overflow: hidden;
	width: 70%;
}

.royal-brand-journey-img .royal-thumb-wrapper {
	padding-bottom: 60%;
}

.royal-brand-journey-img .royal-thumb-wrapper img:hover {
	transform: scale(1);
}

/* ===== 公司荣誉 - 卡片网格 ===== */
.royal-brand-advantages {
	overflow: hidden;
	padding-bottom: 60px;
}

.royal-brand-advantages-item {
	overflow: hidden;
	height: 100%;
	padding: 20px 0;
}

.royal-brand-advantages-img {
	padding-bottom: 133%;
	border-radius: 5px;
	background-color: #fff;
}

.royal-brand-advantages-img:hover {
	box-shadow: 0 20px 40px 10px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);
	transition: 0.5s ease;
}

.royal-brand-advantages-img img:hover {
	transform: scale(1);
}

/* ===== 响应式 - 平板及手机端适配 ===== */
@media (max-width: 992px) {
	.royal-brand-banner {
		height: 50vh;
	}

	.royal-brand-banner .royal-inner-banner-info h2 {
		font-size: 24px;
	}

	.royal-brand-g {
		padding: 20px 0;
	}

	.royal-brand-title {
		font-size: 24px;
		margin-bottom: 40px;
	}

	.royal-brand-txt {
		padding: 20px;
	}

	.royal-brand-num-g {
		padding-bottom: 20px;
	}

	.royal-brand-num-item h2 {
		font-size: 32px;
	}

	.royal-brand-num-item p {
		font-size: 16px;
	}

	.royal-brand-journey {
		padding: 20px 0;
	}

	.royal-brand-journey-content {
		display: block;
		background: #f0fffdcf;
		border: 1px solid #73D7DC;
		padding: 20px;
		border-radius: 20px;
		margin-bottom: 20px;
	}

	.royal-brand-journey-img {
		width: 100%;
	}

	.royal-brand-journey-info {
		width: 100%;
		position: relative;
		padding: 0;
		background: none;
		border: none;
		margin-bottom: 10px;
	}
}