/* =====================================
   动画定义 - Animation Keyframes
   包含：imageZoom（图片缩放）、float（浮动）、gradientFlow（渐变流动）、
         pulse（脉冲）、gradientMove（渐变移动）、waveMove（波浪移动）、
         logoShine（Logo扫光）
   ===================================== */

/* ===== 图片缩放动画 - 从原始大小放大到1.1倍 ===== */
@keyframes imageZoom {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
}

@-webkit-keyframes imageZoom {
	0%, 100% {
		-webkit-transform: scale(1);
	}
	50% {
		-webkit-transform: scale(1.1);
	}
}

/* ===== 浮动动画 - 元素上下轻轻飘动8px ===== */
@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
	100% {
		transform: translateY(0);
	}
}

@-webkit-keyframes float {
	0% {
		-webkit-transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-8px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}

/* ===== 渐变色流动动画 - 背景位置左右循环移动（营造流光效果）===== */
@keyframes gradientFlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@-webkit-keyframes gradientFlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* ===== 脉冲动画 - 宽度与透明度周期性变化（常用于指示器）===== */
@keyframes pulse {
	0% {
		width: 40px;
		opacity: 0.5;
	}
	50% {
		width: 50px;
		opacity: 1;
		background: #1ed7e1;
	}
	100% {
		width: 40px;
		opacity: 1;
	}
}

@-webkit-keyframes pulse {
	0% {
		width: 40px;
		opacity: 0.5;
	}
	50% {
		width: 50px;
		opacity: 1;
		background: #1ed7e1;
	}
	100% {
		width: 40px;
		opacity: 1;
	}
}

/* ===== 渐变移动动画 - 背景位置循环移动（与gradientFlow类似，用于不同场景）===== */
@keyframes gradientMove {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

@-webkit-keyframes gradientMove {
	0%, 100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* ===== 波浪移动动画 - 水平方向无限平移（用于波浪背景）===== */
@keyframes waveMove {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@-webkit-keyframes waveMove {
	0% {
		-webkit-transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-50%);
	}
}

/* ===== Logo扫光动画 - 使用translateX实现高性能扫光效果 ===== */
@keyframes logoShine {
	0%, 20% {
		transform: translateX(-100%);
	}
	50%, 70% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(100%);
	}
}

@-webkit-keyframes logoShine {
	0%, 20% {
		-webkit-transform: translateX(-100%);
	}
	50%, 70% {
		-webkit-transform: translateX(100%);
	}
	100% {
		-webkit-transform: translateX(100%);
	}
}

/* =====================================
   配套工具类 - Animation Utility Classes
   将动画绑定到具体类名上，方便在HTML中直接使用
   ===================================== */

/* 图片缩放 */
.royal-animate-image-zoom {
	-webkit-animation: imageZoom 3s ease-in-out infinite;
	animation: imageZoom 3s ease-in-out infinite;
}

/* 浮动 */
.royal-animate-float {
	-webkit-animation: float 2s ease-in-out infinite;
	animation: float 2s ease-in-out infinite;
}

/* 渐变流动 */
.royal-animate-gradient-flow {
	background-size: 200% auto;
	-webkit-animation: gradientFlow 5s ease infinite;
	animation: gradientFlow 5s ease infinite;
}

/* 脉冲 */
.royal-animate-pulse {
	-webkit-animation: pulse 1.2s ease-in-out infinite;
	animation: pulse 1.2s ease-in-out infinite;
}

/* 渐变移动 */
.royal-animate-gradient-move {
	background-size: 200% auto;
	-webkit-animation: gradientMove 4s ease infinite;
	animation: gradientMove 4s ease infinite;
}

/* 波浪移动 */
.royal-animate-wave-move {
	-webkit-animation: waveMove 2s linear infinite;
	animation: waveMove 2s linear infinite;
}

/* Logo扫光 - 需配合::after伪元素使用 */
.royal-animate-logo-shine {
	position: relative;
	overflow: hidden;
}

.royal-animate-logo-shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
		transparent,
		rgba(255, 255, 255, 0.6),
		transparent);
	-webkit-animation: logoShine 3s ease-in-out infinite;
	animation: logoShine 3s ease-in-out infinite;
	pointer-events: none;
}