/* 首页 hero 展台幻灯（2026-10-24 用户需求：右舞台轮播，最多五张，序号按张数动态算，UI 高级感）。
   仅首页加载；标记由 blocks/views/hero.php 输出，行为在 assets/js/theme.js。
   与定稿静态舞台的刻意差异：图片改层叠容器 .stage-media、底部 2px 进度线、悬停出现的切换箭头。 */

.sj .stage-media {
	position: relative;
	border-radius: 17px;
	overflow: hidden;
	background: #F6F8F6;
	aspect-ratio: 1.2 / 1;
}

/* 图片层叠交叉淡入：进场从 1.06 缓慢收到 1（图片自身的呼吸感），缓动走长尾曲线 */
.sj .stage-media .hero-controller {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .85s cubic-bezier(.33, .66, .24, 1), transform 5.6s cubic-bezier(.2, .6, .25, 1);
	will-change: opacity, transform;
}
.sj .stage-media .hero-controller.is-current {
	opacity: 1;
	transform: scale(1);
}

/* 文案切换：状态徽标与标题副题一起轻微下坠淡出、再淡入 */
.sj .stage-status,
.sj .stage-copy {
	transition: opacity .3s ease, transform .3s ease;
}
.sj .stage-status.is-swapping,
.sj .stage-copy.is-swapping {
	opacity: 0;
	transform: translateY(7px);
}

/* 序号滚动：当前页码在自身行高内上滑出、下滑入 */
.sj .stage-index [data-sj-index-current] {
	display: inline-block;
	transition: opacity .3s ease, transform .3s ease;
}
.sj .stage-index [data-sj-index-current].is-out-up {
	opacity: 0;
	transform: translateY(-.55em);
}
.sj .stage-index [data-sj-index-current].is-in-down {
	opacity: 0;
	transform: translateY(.55em);
	transition: none;
}

/* 进度线：图片底部一条 2px 发丝线，按节奏走满即切下一张 */
.sj .stage-progress {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 12px;
	height: 2px;
	border-radius: 2px;
	background: rgba(8, 54, 40, .10);
	overflow: hidden;
	pointer-events: none;
}
.sj .stage-progress span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: var(--green);
}
.sj .product-stage.is-single .stage-progress,
.sj .product-stage.is-single .stage-nav {
	display: none;
}

/* 切换箭头：悬停浮现，浅玻璃底；触屏常显 */
.sj .stage-nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 34px;
	height: 34px;
	padding: 0; /* Astra 按钮内边距（15px 30px）会渗入，把 34px 圆压成 61.6×34 的椭圆 */
	min-width: 0;
	line-height: 1;
	display: grid;
	place-items: center;
	border: 1px solid rgba(221, 232, 225, .9);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(6px);
	color: var(--green-dark);
	cursor: pointer;
	opacity: 0;
	box-shadow: 0 6px 18px rgba(8, 54, 40, .12);
	transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.sj .stage-nav svg {
	width: 16px;
	height: 16px;
}
.sj .stage-nav--prev {
	left: 12px;
	transform: translate(-4px, 0);
}
.sj .stage-nav--next {
	right: 12px;
	transform: translate(4px, 0);
}
.sj .product-stage:hover .stage-nav,
.sj .stage-nav:focus-visible {
	opacity: 1;
	transform: translate(0, 0);
}
.sj .stage-nav:hover {
	background: var(--white);
}
@media (hover: none) {
	.sj .stage-nav {
		opacity: .85;
		transform: none;
	}
}

/* 静态兜底与减弱动效：不做位移缩放，只保留必要的状态切换 */
@media (prefers-reduced-motion: reduce) {
	.sj .stage-media .hero-controller,
	.sj .stage-status,
	.sj .stage-copy,
	.sj .stage-index [data-sj-index-current],
	.sj .stage-nav {
		transition: none !important;
	}
	.sj .stage-media .hero-controller {
		transform: none;
	}
	/* 不自动播时进度条没有意义；否则 draw() 会用页面运行时长算出错误进度 */
	.sj .stage-progress {
		display: none;
	}
}