/* 设置基准字体大小 */
/* html {
	font-size: 62.5%; */
/* 1rem = 10px */
/* } */

.game-banner-warp {
	height: 100vh;
	position: relative;
}

.game-banner-warp * {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

.game-banner-warp .game-banner-info {
	width: 48%;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	left: 5%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.game-banner-warp .game-banner-info .game-banner-info_title {
	max-width: 32.5rem; /* 520px ÷ 16 = 32.5rem */
	/* width: 90%; */
	/* max-width: 90%; */
	padding: 0;
	margin: 0;
}

.game-banner-warp .game-banner-info .game-banner-info_text {
	color: white;
	line-height: 1.4;
	padding: 0;
	margin: 0;
	font-size: 1.125rem; /* 18px ÷ 16 = 1.125rem */
	font-family: 'Source Han Sans CN';
	text-indent: 0.125rem; /* 2px ÷ 16 = 0.125rem */
	font-weight: 400;
}

.game-banner-warp .game-banner-info .game-banner-info-phone {
	margin-top: 2.5rem; /* 40px ÷ 16 = 2.5rem */
	display: flex;
	background: url('../image/game-input-bg.png');
	/* background-size: cover; */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	/* width: 22.8125rem; 365px ÷ 16 = 22.8125rem */
	height: 4.1875rem; /* 67px ÷ 16 = 4.1875rem */
	padding: 1.125rem; /* 18px ÷ 16 = 1.125rem */
}

.game-banner-warp .game-banner-info .game-banner-info-phone .game-banner-info-phone_input {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	background-color: transparent;
	padding-left: 1.25rem; /* 20px ÷ 16 = 1.25rem */
	font-size: 0.875rem; /* 14px ÷ 16 = 0.875rem */
}

.game-banner-warp .game-banner-info .game-banner-info-phone .game-banner-info-phone_input::placeholder {
	color: #b8b0bb;
	font-weight: 400;
}

.game-banner-warp .game-banner-info .game-banner-info-phone .game-banner-info-phone_button {
	background-color: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	white-space: nowrap;
	clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%);
	background: #cb259f;
	padding: 0 1.25rem; /* 20px ÷ 16 = 1.25rem */
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 1rem; /* 16px ÷ 16 = 1rem */
	transition: all 0.3s ease;
}

/* 鼠标经过效果 */
.game-banner-warp .game-banner-info .game-banner-info-phone .game-banner-info-phone_button:hover {
	background: #da28aa;
	box-shadow: 0 0.25rem 0.9375rem rgba(203, 37, 159, 0.6); /* 0 4px 15px */
	transform: translateY(-0.0625rem); /* -1px ÷ 16 = -0.0625rem */
}

/* 点击效果 */
.game-banner-warp .game-banner-info .game-banner-info-phone .game-banner-info-phone_button:active {
	background: #a01d7a;
	transform: translateY(0);
	box-shadow: 0 0.125rem 0.5rem rgba(203, 37, 159, 0.4); /* 0 2px 8px */
}

.game-banner-warp .game-banner-imgs {
	background: url('../image/game-bg.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.game-banner-imgs-computers {
	width: 52%;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
}

.game-banner-imgs-computers img {
	width: 3.125rem; /* 50px ÷ 16 = 3.125rem */
	position: absolute;
}

.game-banner-imgs-computers img:nth-child(1) {
	top: 2vh; /* 更灵活的垂直定位 */
	left: 7%; /* 相对于容器宽度 */
	width: 12vw; /* 相对于视口宽度，自适应缩放 */
	min-width: 8rem; /* 设置最小宽度，避免过小 */
	max-width: 10.625rem; /* 170px ÷ 16 = 10.625rem，避免过大 */
	animation: float-up-down 3s ease-in-out infinite;
	animation-delay: 0s;
}

.game-banner-imgs-computers img:nth-child(2) {
	top: 8vh;
	right: 10%;
	width: 12vw;
	min-width: 8rem;
	max-width: 10.625rem;
	animation: float-up-down 3.5s ease-in-out infinite;
	animation-delay: 0.5s;
}

.game-banner-imgs-computers img:nth-child(3) {
	top: 45%;
	left: 5%;
	width: 13vw;
	min-width: 9rem;
	max-width: 11.875rem; /* 190px ÷ 16 */
	transform: translateY(-50%);
	animation: float-up-down-center 4s ease-in-out infinite;
	animation-delay: 1s;
}

.game-banner-imgs-computers img:nth-child(4) {
	bottom: -5%;
	right: -5%;
	width: 22vw;
	min-width: 18rem;
	max-width: 25rem; /* 400px ÷ 16 */
	animation: float-up-down 3.2s ease-in-out infinite;
	animation-delay: 0.3s;
}

/* 定义上下浮动动画 */
@keyframes float-up-down {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1.25rem); /* -20px ÷ 16 = -1.25rem */
	}
}

/* 定义上下浮动动画（带居中） */
@keyframes float-up-down-center {
	0%,
	100% {
		transform: translateY(-50%);
	}
	50% {
		transform: translateY(calc(-50% - 1.25rem)); /* -20px ÷ 16 = -1.25rem */
	}
}

/* 闪电效果 */
.game-banner-imgs-computers img.lightning {
	z-index: 10;
	animation: lightning-fade 3s ease-in-out infinite;
}

/* 第一个闪电 */
.game-banner-imgs-computers img.lightning-1 {
	top: 10%;
	right: 20%;
	width: 15.625rem; /* 250px ÷ 16 = 15.625rem */
	animation-delay: 0s;
}

/* 第二个闪电 */
.game-banner-imgs-computers img.lightning-2 {
	top: 50%;
	left: 20%;
	width: 7.5rem; /* 200px ÷ 16 = 12.5rem */
	transform: translateY(-60%);
	animation-delay: 1.5s;
}

/* 第三个闪电（雪碧图） */
.game-banner-imgs-computers .lightning-3 {
	position: absolute;
	bottom: 30%;
	right: 35%;
	width: 16rem; /* 256px ÷ 16 = 16rem */
	height: 4rem; /* 64px ÷ 16 = 4rem */
	background-image: url('../image/banner/911a01ab85b27d451442636445c4402db382c2ef46d4b-HUuJfb_fw658webp(1).png');
	background-size: 16rem 16rem; /* 256px ÷ 16 = 16rem */
	background-repeat: no-repeat;
	background-position: 0 0;
	animation: lightning-sprite-combined 3s infinite;
	animation-delay: 0.8s;
	z-index: 10;
}

/* 合并的雪碧图动画（帧切换+渐隐渐显） */
@keyframes lightning-sprite-combined {
	0%,
	1.9% {
		background-position: 0 0;
		opacity: 0;
	}
	2%,
	3.9% {
		background-position: 0 0;
		opacity: 1;
	}
	4%,
	5.9% {
		background-position: 0 -4rem; /* -64px ÷ 16 = -4rem */
		opacity: 1;
	}
	6%,
	7.9% {
		background-position: 0 -8rem; /* -128px ÷ 16 = -8rem */
		opacity: 1;
	}
	8%,
	9.9% {
		background-position: 0 -12rem; /* -192px ÷ 16 = -12rem */
		opacity: 1;
	}
	10%,
	100% {
		background-position: 0 0;
		opacity: 0;
	}
}

/* 定义闪电渐隐渐显动画 */
@keyframes lightning-fade {
	0% {
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	30% {
		opacity: 0;
	}
	45% {
		opacity: 0.8;
	}
	60% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* 响应式布局：屏幕宽度小于1080px */
@media screen and (max-width: 1080px) {
	/* 隐藏右侧图片区域 */
	.game-banner-imgs-computers {
		display: none;
	}

	/* 左侧信息区域居中显示 */
	.game-banner-warp .game-banner-info {
		left: 50%;
		transform: translate(-50%, -50%);
		align-items: center;
		text-align: center;
		width: 100%;
	}

	/* 标题居中 */
	.game-banner-warp .game-banner-info .game-banner-info_title {
		text-align: center;
	}

	/* 文字居中 */
	.game-banner-warp .game-banner-info .game-banner-info_text {
		text-align: center;
	}
}

/* 更小屏幕适配：小于768px */
@media screen and (max-width: 768px) {
	.game-banner-warp .game-banner-info .game-banner-info_title {
		max-width: 90%;
	}

	.game-banner-warp .game-banner-info .game-banner-info_text {
		font-size: 1rem; /* 稍微缩小字体 */
		padding: 0 1rem;
	}

	.game-banner-warp .game-banner-info .game-banner-info-phone {
		width: 90%;
		max-width: 22.8125rem;
	}
}

/* 移动端适配：小于480px */
@media screen and (max-width: 480px) {
	.game-banner-warp .game-banner-info .game-banner-info_text {
		font-size: 0.875rem;
	}

	.game-banner-warp .game-banner-info .game-banner-info-phone {
		width: 95%;
		/* flex-direction: column; */
		height: auto;
		padding: 1rem;
	}

	.game-banner-warp .game-banner-info .game-banner-info-phone .game-banner-info-phone_input {
		width: 100%;
		padding: 0.75rem;
		/* margin-bottom: 0.5rem; */
		/* text-align: center; */
	}
}

/* 抖音风格的故障抖动效果（间歇性抖动） */
.game-banner-warp .game-banner-info .game-banner-info_title img {
	animation: glitch-shake-interval 4s ease-out infinite;
	position: relative;
}

/* 间歇性抖动动画 */
@keyframes glitch-shake-interval {
	0%,
	100% {
		transform: translate(0);
		opacity: 1;
	}

	/* 开始抖动 */
	5% {
		transform: translate(-3px, 2px);
	}
	5.5% {
		transform: translate(3px, -2px);
	}
	6% {
		transform: translate(-2px, -1px);
	}
	6.5% {
		transform: translate(2px, 1px);
	}
	7% {
		transform: translate(-1px, -1px);
	}
	7.5% {
		transform: translate(1px, 1px);
	}
	8%,
	99% {
		transform: translate(0);
		opacity: 1;
	}
}