* {
	margin: 0;
	padding: 0;
	border: none;
	font-family: "Microsoft Yahei";
}
html, body {
	width: 100%;
	background-color: #f1f1f1;
	overflow: hidden;
}
body {
	min-height: 100vh;
}
/* 缩放舞台：手机端透明全屏（等同原 body 全屏，.content 仍相对全屏）；桌面端由 JS 设宽度 + scale */
#stage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 通用容器：移动端居中，最大 600px
 * 高度由宽度按背景图比例推算（aspect-ratio），背景 100% auto 铺满不变形，
 * 按钮百分比定位因此始终与背景卡片对齐，不再受屏幕高度影响；手机过短则整体滚动。 */
.content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
	height: 100%;
	background-size: 100% auto;
	background-position: top;
	background-repeat: no-repeat;
}

/* 第 1 页背景：750 × 1625 */
.page1 {
	background-image: url('../images/06.png');
	background-color: #439dff;
}
/* 第 2 页背景：750 × 1334 */
.page2 {
	background-image: url('../images/13.png');
	background-color: #c1e3f7;
}
/* 老浏览器 aspect-ratio 不支持时的兜底：用 ::before 撑出高度 */
@supports not (aspect-ratio: 1 / 1) {
	.page1::before,
	.page2::before {
		content: '';
		display: block;
	}
	.page1::before { padding-top: 216.6667%; }
	.page2::before { padding-top: 177.8667%; }
}

/* 顶部 LOGO / 标语 / 标题 */
.logo {
	position: absolute;
	top: 2%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
}
.slogan {
	position: absolute;
	bottom: 4%;
	right: 5%;
	width: 40%;
}
.title {
	position: absolute;
	top: 6%;
	left: 50%;
	transform: translateX(-50%);
	width: 76%;
}

/* 身份选择按钮
 * 票内白区约 y 50.7% ~ 75.4%，按钮按中心点定位，top 即按钮中心，
 * 这样两张橙色按钮始终稳定叠在 06.png 的票内。 */
.btn-type {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 50%;
}
.btn-type img {
	display: block;
	width: 100%;
}
.btn-employee {
	top: 62%;
}
.btn-other {
	top: 70%;
	left: 48%;
}

/* 第 2 页：设备机器 + 输入框 */
.machine {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
}
.machine img {
	display: block;
	width: 100%;
}
.mobile-input {
	position: absolute;
	top: 81%;
	left: 19%;
	width: 62%;
	height: 55px;
	font-size: 30px;
	color: #16335f;
	text-align: center;
	background: transparent;
	border: 0;
	outline: none;
}
.mobile-input::placeholder {
	color: #9bb0d0;
}

/* 提交按钮 */
.submit-btn {
	position: absolute;
	left: 50%;
	top: 104%;
	transform: translateX(-50%);
	display: block;
	width: 45%;
}
.submit-btn img {
	display: block;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
}

/* 海报结果遮罩 */
#poster {
	position: fixed;
	width: 100%;
	max-width: 600px;
	height: 100%;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: none;
	background-color: #a1d6f6;
	overflow-y: auto;
}
#poster > img {
	display: block;
	width: 100%;
}
#poster > .tip {
	position: fixed;
	width: 200px;
	height: 44px;
	left: 0;
	right: 0;
	bottom: 10vw;
	margin: auto;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	line-height: 44px;
	background: rgb(254 124 28);
	pointer-events: none;
	animation: btn_scale 2s infinite;
}
#poster > .back {
	position: fixed;
	bottom: 6vw;
	left: 0;
	right: 0;
	margin: auto;
	width: 140px;
	height: 40px;
	border-radius: 40px;
	background: #f4c52e;
	color: #16335f;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	line-height: 40px;
	text-decoration: none;
}

@keyframes btn_scale {
	0%   { transform: scale(0.85); }
	50%  { transform: scale(1); }
	100% { transform: scale(0.85); }
}

@media screen and (max-width: 768px) {
	.btn-employee { top: 135vw; }
	.btn-other    { top: 151vw; }
	.machine      { top: 7%; width: 95%; }
	.submit-btn   { top: 104%; width: 45%; }
	.mobile-input {height: 44px; font-size: 20px;}
}

/* ============================================================
   动画（仅用 transform / opacity，不影响已调好的绝对定位布局）
   ============================================================ */

/* 7. 减弱动效偏好：系统开启后关闭所有动画，且保证次屏仍可见 */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
	#screen2 { opacity: 1 !important; transform: none !important; }
}

/* 关键帧：保持各元素原始居中 transform，仅叠加透明度/位移 */
@keyframes fade_in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* translateX(-50%) 组：从下方淡入（title / machine / submit） */
@keyframes enter_x_up {
	from { opacity: 0; transform: translateX(-50%) translateY(20px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* translateX(-50%) 组：从上方淡入（logo） */
@keyframes enter_x_down {
	from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* translate(-50%,-50%) 组（身份按钮） */
@keyframes enter_xy_up {
	from { opacity: 0; transform: translate(-50%, -50%) translateY(20px); }
	to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
/* 5. 提交按钮呼吸脉冲（作用在 img 上，保留 wrapper 居中） */
@keyframes img_pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.06); }
}
/* 4. 海报出现 */
@keyframes poster_in {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* 标题左右晃动（保留 translateX(-50%) 居中，左右各 8px 摆动） */
/* 标题「摇头」式晃动：绕竖轴左右转头（rotateY + perspective 模拟 3D 转向，保留居中 translateX(-50%)） */
@keyframes title_sway {
	0%, 100% { transform: translateX(-50%) perspective(500px) rotateY(0deg); }
	25%      { transform: translateX(-50%) perspective(500px) rotateY(-13deg); }
	75%      { transform: translateX(-50%) perspective(500px) rotateY(13deg); }
}
/* 点击反馈：一次性下压回弹（作用在 wrapper，由 JS 在切屏前用内联 animation 触发，避免被入场动画覆盖） */
@keyframes btn_pop {
	0%   { transform: translate(-50%, -50%) scale(1); }
	40%  { transform: translate(-50%, -50%) scale(0.9); }
	100% { transform: translate(-50%, -50%) scale(1); }
}

/* 1. 首屏入场（加载即播，错落延迟） */
#screen1 .logo   { animation: enter_x_down .6s ease both; }
#screen1 .title  { animation: enter_x_up .6s ease both .15s, title_sway 3s ease-in-out infinite 1s; }
#screen1 .slogan { animation: fade_in      .8s ease both .3s; }
#screen1 .btn-employee { animation: enter_xy_up .55s ease both .3s; }
#screen1 .btn-other    { animation: enter_xy_up .55s ease both .45s; }

/* 2. 按钮按压反馈（缩放，保留居中 transform） */
.btn-type:active   { transform: translate(-50%, -50%) scale(0.95); }
.submit-btn:active { transform: translateX(-50%) scale(0.95); }

/* 点击反馈：一次性 pop（由 JS 在切屏前用内联 animation 触发，避免被入场动画覆盖） */
.btn-type.pop { animation: btn_pop .38s ease both; }

/* 5. 提交按钮呼吸脉冲 */
.submit-btn img { animation: img_pulse 1.8s ease-in-out infinite; }

/* 3. 屏幕切换过渡：次屏淡入 + 轻微上移（容器层；靠 .show 触发） */
#screen2 {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .35s ease, transform .35s ease;
}
#screen2.show {
	opacity: 1;
	transform: translateY(0);
}
/* 次屏内部元素入场（每次切到次屏时由 .show 触发重放） */
#screen2.show .machine      { animation: enter_x_up .5s ease both; }
#screen2.show .mobile-input { animation: fade_in    .5s ease both .15s; }
#screen2.show .submit-btn   { animation: enter_x_up .5s ease both .3s; }

/* 4. 海报出现动画（每次显示遮罩时播放） */
#poster img { animation: poster_in .5s ease both; }

/* ============================================================
   背景音乐开关按钮（左上角，常驻最顶层）
   ============================================================ */
.music-btn {
	position: fixed;
	top: 50px;
	right: 12px;
	z-index: 200;            /* 高于海报遮罩(100)，两屏与海报表均常驻可点 */
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(22, 51, 95, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.music-btn svg { display: block; }
/* 默认静音态：只显示 ic-off；开启态：只显示 ic-on */
.music-btn .ic-on  { display: none; }
.music-btn .ic-off { display: block; }
.music-btn.on  .ic-on  { display: block; }
.music-btn.on  .ic-off { display: none; }
/* 开启态轻微呼吸，提示正在播放 */
.music-btn.on {
	animation: music_spin 3s linear infinite;
}
@keyframes music_spin {
	0%   { box-shadow: 0 0 0 0 rgba(254, 124, 28, 0.5); }
	70%  { box-shadow: 0 0 0 8px rgba(254, 124, 28, 0); }
	100% { box-shadow: 0 0 0 0 rgba(254, 124, 28, 0); }
}

/* 桌面端整体等比缩放舞台：固定设计稿宽度，由 JS 计算 scale 居中；海报提示改为相对海报绝对定位 */
@media (min-width: 768px) {
	#stage {
		width: 375px;
		height: 812px;          /* 初值，JS 会按当前屏比例覆盖 */
		transform-origin: top left;
	}
	#poster > .tip {
		position: absolute;
		bottom: 20px;
	}
}