/* 首页环境生物：盒面几何 / UV 与 figures.css 小人同一套，避免镂空接不上
 *
 * 与旧版的两处关键差别：
 *   1. 每个盒体带自己的 transform-origin（胯、翅根、肩、尾根枢轴），
 *      所以腿是绕胯摆、翅是绕翅根振，不再是绕自身中心乱转；
 *   2. 关键帧里保留了平移与「基础姿态旋转」，
 *      僵尸前伸的双臂、蜜蜂后掠的翅膀在动画期间不会被拉回原位。
 */

.otm-wildlife-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	overflow: clip;
	contain: layout paint style;
	pointer-events: none;
}

.otm-wl-entity {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	will-change: transform;
	user-select: none;
	transform-style: preserve-3d;
}

.otm-wl-stage {
	position: absolute;
	inset: 0;
	perspective: calc(150 * var(--s, 2.6) * 1px);
	perspective-origin: 50% 42%;
	transform-style: preserve-3d;
}

.otm-wl--bee .otm-wl-stage {
	/* 蜜蜂更近的透视，避免看起来像一张纸 */
	perspective: calc(110 * var(--s, 3.4) * 1px);
	perspective-origin: 50% 45%;
}
.otm-wl--ocelot .otm-wl-stage {
	perspective: calc(120 * var(--s, 3) * 1px);
}

/* 骨骼组容器：组内盒体共用这个枢轴 */
.otm-wl-group {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
}

.otm-wl-model {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.otm-wl-rig {
	position: absolute;
	left: 50%;
	top: 0;
	transform-style: preserve-3d;
	/* 初始姿态：相机俯角 -10° + 朝向 -140°（正面在 -z）。
	   运行时由脚本按行进方向改写朝向角。 */
	transform: translateX(-50%) rotateX(-10deg) rotateY(-140deg);
	transform-origin: 50% 50%;
}

/* 部位盒 */
.otm-wl-box {
	position: absolute;
	left: 0;
	top: 0;
	transform-style: preserve-3d;
}

/* 六个面：贴图直接挂在面上，并隐藏背面。
   CSS 3D 对同一个盒体六个面的深度排序并不可靠（浏览器按 DOM 顺序画，
   反而会把背面的面糊到前面来）。直接隐藏背面最稳：
   朝向观察者的面照常画，背对的面根本不画，既不穿帮也不透色。 */
.otm-wl-box > b {
	position: absolute;
	display: block;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	background-image: var(--skin);
	background-repeat: no-repeat;
	background-size: calc(var(--tw) * var(--s) * 1px) calc(var(--th) * var(--s) * 1px);
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* ---------------------------------------------------------------------------
 * 走路：腿绕胯部枢轴前后摆（transform-origin 由脚本按枢轴写入）
 * ------------------------------------------------------------------------- */
.otm-wl-entity.is-walking .otm-wl-legA {
	animation: otm-wl-leg-a .46s ease-in-out infinite;
}
.otm-wl-entity.is-walking .otm-wl-legB {
	animation: otm-wl-leg-b .46s ease-in-out infinite;
}
@keyframes otm-wl-leg-a {
	0%, 100% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateX(calc(var(--rx, 0deg) + 24deg)); }
	50% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateX(calc(var(--rx, 0deg) - 24deg)); }
}
@keyframes otm-wl-leg-b {
	0%, 100% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateX(calc(var(--rx, 0deg) - 24deg)); }
	50% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateX(calc(var(--rx, 0deg) + 24deg)); }
}

/* ---------------------------------------------------------------------------
 * 僵尸：双臂前伸（基础旋转 −90°，关键帧里保留），并轻微左右晃
 * ------------------------------------------------------------------------- */
.otm-wl--zombie .otm-wl-arm {
	animation: otm-wl-arm 1.6s ease-in-out infinite;
}
@keyframes otm-wl-arm {
	0%, 100% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateX(var(--rx, -90deg)) rotateZ(calc(var(--rz, 0deg) + 4deg)); }
	50% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateX(var(--rx, -90deg)) rotateZ(calc(var(--rz, 0deg) - 4deg)); }
}

/* ---------------------------------------------------------------------------
 * 蜜蜂：翅膀绕翅根振动；关键帧保留后掠的基础旋转
 * ------------------------------------------------------------------------- */
.otm-wl--bee .otm-wl-wingR {
	animation: otm-wl-wing-r .1s steps(2, end) infinite;
}
.otm-wl--bee .otm-wl-wingL {
	animation: otm-wl-wing-l .1s steps(2, end) infinite;
}
@keyframes otm-wl-wing-r {
	0%, 100% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateZ(calc(var(--rz, 0deg) + 28deg)); }
	50% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateZ(calc(var(--rz, 0deg) - 28deg)); }
}
@keyframes otm-wl-wing-l {
	0%, 100% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateZ(calc(var(--rz, 0deg) - 28deg)); }
	50% { transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateZ(calc(var(--rz, 0deg) + 28deg)); }
}
.otm-wl--bee.is-flying .otm-wl-model {
	animation: otm-wl-bee-bob .36s ease-in-out infinite;
}
@keyframes otm-wl-bee-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

/* ---------------------------------------------------------------------------
 * 豹猫：尾巴翘起轻摆
 * ------------------------------------------------------------------------- */
/* 摆尾：整组绕尾根摆动。以前是让两段各自绕自己的枢轴转，
   结果第二段的枢轴不跟着第一段末端走，一动尾巴就断开。 */
.otm-wl--ocelot .otm-wl-group--tail {
	animation: otm-wl-tail 1.1s ease-in-out infinite;
}
@keyframes otm-wl-tail {
	0%, 100% { transform: translate3d(var(--gx, 0px), var(--gy, 0px), var(--gz, 0px)) rotateX(-10deg); }
	50% { transform: translate3d(var(--gx, 0px), var(--gy, 0px), var(--gz, 0px)) rotateX(12deg); }
}

@media (prefers-reduced-motion: reduce) {
	.otm-wl-entity { display: none !important; }
}