/* 首页下方 · 水面涟漪展开（砸石子一圈圈铺开）
 * 红线：未挂 JS 时内容必须可见，禁止默认 opacity:0 导致「往下滚什么都没有」
 */
.dui-home-ripple {
	position: relative;
}
/* 仅 JS 就绪后、尚未展开的区块才藏起来等涟漪 */
html.dui-ripple-on .dui-home-ripple.dui-ripple-wait {
	opacity: 0;
	-webkit-clip-path: circle(0% at 50% 42%);
	clip-path: circle(0% at 50% 42%);
	will-change: clip-path, opacity;
}
html.dui-ripple-on .dui-home-ripple.dui-ripple-wait.is-in {
	opacity: 1;
	-webkit-clip-path: circle(160% at 50% 42%);
	clip-path: circle(160% at 50% 42%);
	transition:
		opacity .2s ease,
		-webkit-clip-path .95s cubic-bezier(.22, 1, .36, 1),
		clip-path .95s cubic-bezier(.22, 1, .36, 1);
}
.dui-home-ripple.is-ready,
html.dui-ripple-on .dui-home-ripple.is-ready {
	opacity: 1 !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	will-change: auto;
}
.dui-home-ripple .dui-ripple-ring {
	position: absolute;
	left: 50%;
	top: 42%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 2px solid var(--dui-ripple-color, rgba(80, 140, 200, .55));
	border-radius: 50%;
	pointer-events: none;
	z-index: 6;
	opacity: 0;
	box-sizing: border-box;
}
.dui-home-ripple.is-in .dui-ripple-ring {
	animation: duiHomeRippleRing .9s ease-out forwards;
}
.dui-home-ripple.is-in .dui-ripple-ring.r2 {
	animation-delay: .12s;
	border-color: var(--dui-ripple-color-2, rgba(80, 140, 200, .35));
}
.dui-home-ripple.is-in .dui-ripple-ring.r3 {
	animation-delay: .24s;
	border-color: var(--dui-ripple-color-3, rgba(80, 140, 200, .22));
}
@keyframes duiHomeRippleRing {
	0% {
		opacity: .75;
		transform: scale(.2);
	}
	70% {
		opacity: .35;
	}
	100% {
		opacity: 0;
		transform: scale(28);
	}
}
/* 懒背景：仅在 JS 标记等待时才清空，避免无 JS 时空壳 */
html.dui-ripple-on .dui-lazy-bg.dui-ripple-wait:not(.is-bg-on) {
	background-image: none !important;
}
@media (prefers-reduced-motion: reduce) {
	html.dui-ripple-on .dui-home-ripple.dui-ripple-wait {
		opacity: 1;
		-webkit-clip-path: none;
		clip-path: none;
	}
	.dui-home-ripple .dui-ripple-ring {
		display: none;
	}
}