/**
 * 首页「环绕」动效区块
 *
 * 结构由 functions.php 的 jiuhao_orbit_section() 输出，位置计算在 orbit.js。
 * 这里只定尺寸、外观和静态降级形态。
 *
 * 设计令牌沿用 dark.css 里那套（--jh-card / --jh-border-soft / --jh-accent …），
 * 缓动曲线沿用现有的两条：
 *   入场 cubic-bezier(.16,.84,.32,1)
 *   交互 cubic-bezier(.2,.8,.25,1)
 */

.jh-orbit__stage {
	position: relative;
	/*
	 * 350 而不是 400：物品实际只占中间一条横带（纵向铺开幅度由 JS 的
	 * latSpread × ry 决定），400 会在上下各留一大片空。
	 */
	height: 350px;
	margin-top: 8px;
	/*
	 * 比正文栏更宽：环绕要的是横向铺开的空间感，缩在 1200px 的正文栏里
	 * 物品会挤在中间一小片。这里撑到视口宽度（留一点边距），再用
	 * 负外边距把加宽的部分向两侧摊平，视觉上仍是居中的。
	 */
	width: min(1560px, calc(100vw - 32px));
	margin-left: 50%;
	transform: translateX(-50%);
	/* 让环绕的物品有远近感；数值不宜太大，否则边缘的卡片会糊 */
	perspective: 1100px;
	overflow: hidden;
	/* 上下的内容在边缘淡出，避免被 overflow 硬切 */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* 两条轨道都叠在中心，物品由 JS 用 transform 摆位 */
.jh-orbit__ring {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.jh-orbit__ring > * {
	position: absolute;
	top: 50%;
	left: 50%;
	/* 用 margin 把自身中心对到轨道中心，JS 只负责叠加位移 */
	margin: 0;
	transform-origin: 50% 50%;
	will-change: transform, opacity;
	pointer-events: auto;
}

/* ---------------- 内圈：分类卡片 ---------------- */

.jh-orbit__cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 116px;
	padding: 14px 12px 12px;
	background: var(--jh-card);
	border: 1px solid var(--jh-border-soft);
	border-radius: var(--jh-radius);
	box-shadow: var(--jh-shadow-lg);
	text-decoration: none;
	transform: translate(-50%, -50%);
	transition: border-color .4s ease, box-shadow .4s ease;
}

.jh-orbit__cat-thumb {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.jh-orbit__cat-name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--jh-text);
	text-align: center;
	letter-spacing: .3px;
}

/* 悬停时点亮，并暂停整条轨道的自转（由 JS 读 :hover 判断） */
.jh-orbit__cat:hover,
.jh-orbit__cat:focus-visible {
	border-color: var(--jh-accent-soft);
	box-shadow: var(--jh-shadow-lg), var(--jh-glow);
}

.jh-orbit__cat:hover .jh-orbit__cat-name,
.jh-orbit__cat:focus-visible .jh-orbit__cat-name {
	color: #8fb6ff;
}

/* ---------------- 外圈：商品缩略图 ---------------- */

.jh-orbit__prod {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--jh-border-soft);
	background: var(--jh-bg-elev);
	transform: translate(-50%, -50%);
	transition: border-color .3s ease, box-shadow .3s ease;
}

.jh-orbit__prod img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jh-orbit__prod:hover {
	border-color: var(--jh-accent-soft);
	box-shadow: 0 0 20px rgba(77, 141, 255, .3);
}

/*
 * ---------------- 中心光核 ----------------
 *
 * 原来是 132px 的双层径向渐变 + blur(6px)，在深色底上是一小块边缘生硬的
 * 深蓝，看着不像设计元素、更像没渲染完。改成一大片很淡的氛围光：
 * 范围放大到 380px、blur 加到 26px、中心透明度降到 .18 —— 作用是
 * 「球体背后有光」，而不是自己成为一个图形。
 *
 * 注意 blur 大了以后渐变边缘会溢出到物品上，所以这里不加 z-index，
 * 由物品自己的 z-index（JS 按深度给 0～100）压在它上面。
 */

.jh-orbit__core {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 380px;
	height: 380px;
	margin: -190px 0 0 -190px;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient(circle at 46% 46%, rgba(77, 141, 255, .18), transparent 62%),
		radial-gradient(circle at 58% 56%, rgba(139, 92, 255, .12), transparent 58%);
	filter: blur(26px);
	animation: jh-orbit-breathe 9s ease-in-out infinite;
}

/*
 * ---------------- 轨道线 ----------------
 *
 * JS 把物品摆在两个椭圆轨道上，但画面上只有物品在动，看不出「沿着什么在转」——
 * 加上这两条极淡的椭圆，环绕的路径就成立了，静止看也知道这是个球体。
 *
 * 尺寸要和 orbit.js 里的比例对得上：
 *   rx 是「舞台宽度的比例」，ry 是「舞台高度的比例」，椭圆整宽 = 2 × rx。
 *   cats     rx .25 / ry .20  →  50% × 40%
 *   products rx .38 / ry .16  →  76% × 32%
 * 改了 JS 里那组比例，这里要跟着改。
 */

.jh-orbit__ring::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(77, 141, 255, .13);
	border-radius: 50%;
	pointer-events: none;
}

.jh-orbit__ring--cats::before {
	width: 50%;
	height: 40%;
	border-color: rgba(139, 92, 255, .16);
}

.jh-orbit__ring--products::before {
	width: 76%;
	height: 32%;
}

/*
 * 手机端：舞台更窄，orbit.js 会切到 rxNarrow 那组更大的横向比例
 * （cats .42 / products .46），这里要跟着放大，否则轨道线会比物品小一圈。
 * 纵向比例（ry）两端一致，不用改。
 */
@media (max-width: 760px) {
	.jh-orbit__ring--cats::before { width: 84%; height: 40%; }
	.jh-orbit__ring--products::before { width: 92%; height: 32%; }
}

@keyframes jh-orbit-breathe {
	0%, 100% { transform: scale(1);    opacity: .85; }
	50%      { transform: scale(1.12); opacity: 1; }
}

/* ---------------- 入场 ---------------- */

/* 区块整体跟着现有的 .jh-reveal 契约走（motion.js 会自动打标），
   物品本身不需要再各自动一次，否则和环绕运动叠加会很乱 */

/* ---------------- 窄屏 ---------------- */

@media (max-width: 760px) {
	.jh-orbit__stage {
		height: 320px;
		perspective: 800px;
		/* 窄屏不再外扩，交给容器自身的宽度 */
		width: 100%;
		margin-left: 0;
		transform: none;
	}
	.jh-orbit__cat {
		width: 96px;
		padding: 11px 9px 10px;
	}
	.jh-orbit__cat-thumb {
		width: 60px;
		height: 60px;
	}
	.jh-orbit__cat-name {
		font-size: 12.5px;
	}
	.jh-orbit__prod {
		width: 48px;
		height: 48px;
	}
	.jh-orbit__core {
		width: 100px;
		height: 100px;
		margin: -50px 0 0 -50px;
	}
}

/* ---------------- 降级 ----------------
   关闭动画时（系统「减弱动态效果」或 JS 未加载），
   物品由 JS 摆好位置；没有 JS 时退回一排静态排列，保证内容始终可点可用。 */

@media (prefers-reduced-motion: reduce) {
	.jh-orbit__core {
		animation: none;
	}
}

/* 没有 JS：把两条轨道摊成静态网格 */
html:not(.js) .jh-orbit__stage {
	height: auto;
	width: 100%;
	margin-left: 0;
	transform: none;
	display: flex;
	flex-direction: column;
	gap: 22px;
	perspective: none;
	-webkit-mask-image: none;
	mask-image: none;
}

html:not(.js) .jh-orbit__ring {
	position: static;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

html:not(.js) .jh-orbit__ring > * {
	position: static;
	transform: none !important;
}

html:not(.js) .jh-orbit__core {
	display: none;
}