/* ============================================================
   旧好 · 动效层  v1.1
   现代滚动动画 + 微交互 + 3D 卡片
   所有动画在 prefers-reduced-motion: reduce 下自动关闭
   ============================================================ */

/* ------------------------------------------------------------
   0. 关键：只有 JS 可用时才把元素设为透明
   ------------------------------------------------------------
   之前用 CSS 滚动驱动动画（animation-timeline: view()），
   长区块会停在半透明的中间态，看起来「比别的区块暗」。
   现在改为：html.js 存在时才有入场态，且由 IntersectionObserver
   提前触发，保证任何情况下内容都是完整可见的。
   ------------------------------------------------------------ */

@keyframes jh-rise {
	from { opacity: 0; transform: translate3d(0, 30px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes jh-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes jh-pop {
	0%   { opacity: 0; transform: scale(.92) translateY(8px); }
	60%  { transform: scale(1.015) translateY(-1px); }
	100% { opacity: 1; transform: none; }
}

html.js .jh-reveal { opacity: 0; }
html.js .jh-stagger > * { opacity: 0; }

.jh-reveal.jh-in {
	animation: jh-rise .75s cubic-bezier(.16,.84,.32,1) forwards;
}
.jh-stagger.jh-in > * {
	animation: jh-rise .7s cubic-bezier(.16,.84,.32,1) forwards;
}
.jh-trust.jh-in .jh-trust__item,
.jh-stagger.jh-in > * { opacity: 1; }

/* 安全网：页面加载 3 秒后仍未触发的元素直接显示，杜绝永久留白 */
html.js .jh-reveal.jh-force,
html.js .jh-stagger.jh-force > * { opacity: 1 !important; animation: none !important; }

/* 错峰延迟 */
.jh-stagger.jh-in > *:nth-child(1)  { animation-delay: .00s; }
.jh-stagger.jh-in > *:nth-child(2)  { animation-delay: .06s; }
.jh-stagger.jh-in > *:nth-child(3)  { animation-delay: .12s; }
.jh-stagger.jh-in > *:nth-child(4)  { animation-delay: .18s; }
.jh-stagger.jh-in > *:nth-child(5)  { animation-delay: .24s; }
.jh-stagger.jh-in > *:nth-child(6)  { animation-delay: .30s; }
.jh-stagger.jh-in > *:nth-child(7)  { animation-delay: .36s; }
.jh-stagger.jh-in > *:nth-child(8)  { animation-delay: .42s; }
.jh-stagger.jh-in > *:nth-child(n+9){ animation-delay: .48s; }

/* ------------------------------------------------------------
   1. 顶部滚动进度条
   ------------------------------------------------------------ */

.jh-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	width: 0;
	z-index: 10000;
	background: linear-gradient(90deg, #4d8dff, #8b5cff, #ff5c9e);
	box-shadow: 0 0 12px rgba(77,141,255,.7);
	transition: width .08s linear;
	pointer-events: none;
}

/* ------------------------------------------------------------
   2. 页面入场
   ------------------------------------------------------------ */

@keyframes jh-page-in {
	from { opacity: 0; transform: translate3d(0, 10px, 0); }
	to   { opacity: 1; transform: none; }
}
body.jh-dark .site-content { animation: jh-page-in .55s ease-out both; }

/*
 * 顶栏滚动状态
 *
 * ⚠️ 这里**不能**过渡 padding。
 *
 * 原来的写法是滚动时把 padding-top 从 62px 收到 4px，并给 padding 加过渡 ——
 * 等于每滚一帧就让整个页头重新排版一次，页头下面所有内容跟着位移。
 * 这是滚动卡顿最典型的来源；而且 58px 的位移是在用户手指底下发生的，
 * 内容会「跳」一下。
 *
 * 现在改成只改 paint 层面的属性（底色 + 阴影），不动尺寸，
 * 滚动时没有任何布局计算，视觉上也照样有反馈。
 */
body.jh-dark .site-header {
	transition: background .3s ease, box-shadow .3s ease;
}
body.jh-dark .site-header.jh-scrolled {
	background: rgba(10, 12, 17, .96) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------
   3. 渐变流光标题
   ------------------------------------------------------------ */

@keyframes jh-gradient-pan {
	0%   { background-position:   0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position:   0% 50%; }
}

body.jh-dark .section-title,
body.jh-dark .storefront-product-section .section-title {
	background: linear-gradient(100deg, #e9ecf3 10%, #6fa2ff 34%, #b18cff 56%, #e9ecf3 86%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: jh-gradient-pan 8s ease-in-out infinite;
}

body.jh-dark .site-branding .site-title a {
	background: linear-gradient(100deg, #4d8dff, #8b5cff);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	letter-spacing: 2px;
}

/* 区块标题下的小装饰线 */
body.jh-dark .storefront-product-section .section-title {
	position: relative;
	display: inline-block;
	padding-bottom: 12px;
	margin-bottom: 26px;
}
body.jh-dark .storefront-product-section .section-title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 56px; height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #4d8dff, #8b5cff);
	box-shadow: 0 0 14px rgba(77,141,255,.6);
	/*
	 * 用 scaleX 而不是 width：width 每帧都要重新排版，
	 * scaleX 只在合成层做缩放。56px × 1.964 ≈ 110px。
	 * 缩放会让那 2px 圆角横向略微拉长，3px 高的细线上看不出来。
	 */
	transform: scaleX(1);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.2,.8,.25,1);
}
body.jh-dark .storefront-product-section:hover .section-title::after {
	transform: scaleX(1.96);
}

/* ------------------------------------------------------------
   4. 商品卡片：3D 倾斜 + 光晕边框
   ------------------------------------------------------------ */

body.jh-dark ul.products li.product {
	position: relative;
	transform-style: preserve-3d;
	will-change: transform;
}

/* 跟随鼠标的高光 */
body.jh-dark ul.products li.product::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--jh-radius);
	background: radial-gradient(
		340px circle at var(--jh-mx, 50%) var(--jh-my, 0%),
		rgba(120,170,255,.16),
		transparent 62%
	);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
	z-index: 3;
}
body.jh-dark ul.products li.product:hover::before { opacity: 1; }

/* 渐变描边（悬停时点亮） */
body.jh-dark ul.products li.product::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: calc(var(--jh-radius) + 1px);
	padding: 1px;
	background: linear-gradient(135deg, rgba(77,141,255,.85), rgba(139,92,255,.65), transparent 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
	z-index: 2;
}
body.jh-dark ul.products li.product:hover::after { opacity: 1; }

/* 卡片内容置于高光之上 */
body.jh-dark ul.products li.product > * { position: relative; z-index: 4; }

/* 加入购物车按钮：悬停时从底部滑出 */
body.jh-dark ul.products li.product .button {
	transform: translateY(6px);
	opacity: .92;
	transition: transform .34s cubic-bezier(.2,.8,.25,1), opacity .34s ease,
	            box-shadow .3s ease, filter .3s ease;
}
body.jh-dark ul.products li.product:hover .button {
	transform: translateY(0);
	opacity: 1;
}

/* ------------------------------------------------------------
   5. 按钮微交互
   ------------------------------------------------------------ */

body.jh-dark .button,
body.jh-dark .woocommerce a.button,
body.jh-dark .woocommerce button.button,
body.jh-dark input[type="submit"] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

body.jh-dark .button::after,
body.jh-dark .woocommerce a.button::after,
body.jh-dark .woocommerce button.button::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-130%) skewX(-18deg);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
	transition: transform .68s cubic-bezier(.2,.8,.25,1);
	pointer-events: none;
}
body.jh-dark .button:hover::after,
body.jh-dark .woocommerce a.button:hover::after,
body.jh-dark .woocommerce button.button:hover::after {
	transform: translateX(130%) skewX(-18deg);
}
body.jh-dark .button:active,
body.jh-dark .woocommerce a.button:active { transform: translateY(0) scale(.975); }

/* ------------------------------------------------------------
   6. 信任条入场
   ------------------------------------------------------------ */

.jh-trust.jh-in .jh-trust__item {
	animation: jh-pop .6s cubic-bezier(.2,.9,.3,1.15) both;
}
.jh-trust.jh-in .jh-trust__item:nth-child(1) { animation-delay: .05s; }
.jh-trust.jh-in .jh-trust__item:nth-child(2) { animation-delay: .13s; }
.jh-trust.jh-in .jh-trust__item:nth-child(3) { animation-delay: .21s; }
.jh-trust.jh-in .jh-trust__item:nth-child(4) { animation-delay: .29s; }

/* ------------------------------------------------------------
   7. 特价价格脉冲
   ------------------------------------------------------------ */

@keyframes jh-pulse-glow {
	0%, 100% { text-shadow: 0 0 0 rgba(255,92,124,0); }
	50%      { text-shadow: 0 0 18px rgba(255,92,124,.5); }
}
body.jh-dark ul.products li.product .price ins,
body.jh-dark .single-product .price ins {
	animation: jh-pulse-glow 2.8s ease-in-out infinite;
}

/* ------------------------------------------------------------
   8. 分类卡片
   ------------------------------------------------------------ */

body.jh-dark ul.products li.product-category {
	transition: transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease;
}
body.jh-dark ul.products li.product-category:hover {
	transform: translateY(-6px);
	box-shadow: var(--jh-shadow-lg), var(--jh-glow);
}
body.jh-dark ul.products li.product-category img {
	transition: transform .6s cubic-bezier(.2,.8,.25,1);
}
body.jh-dark ul.products li.product-category:hover img { transform: scale(1.06); }
body.jh-dark ul.products li.product-category .woocommerce-loop-category__title {
	background: var(--jh-card) !important;
	color: var(--jh-text) !important;
}

/* ------------------------------------------------------------
   9. 语言切换器入场
   ------------------------------------------------------------ */

.jh-lang { animation: jh-fade .7s ease-out .3s both; }

/* ------------------------------------------------------------
   10. 光标跟随光晕（全局氛围）
   ------------------------------------------------------------ */

.jh-cursor-glow {
	position: fixed;
	top: 0; left: 0;
	width: 520px; height: 520px;
	margin: -260px 0 0 -260px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	background: radial-gradient(
		circle,
		rgba(77,141,255,.10) 0%,
		rgba(139,92,255,.06) 38%,
		transparent 68%
	);
	transition: opacity .5s ease;
	will-change: transform;
}
html.jh-has-cursor .jh-cursor-glow { opacity: 1; }

/* ------------------------------------------------------------
   11. 区块入场：模糊 → 清晰 + 轻微放大
   ------------------------------------------------------------ */

@keyframes jh-unblur {
	from { opacity: 0; filter: blur(14px); transform: scale(.985) translateY(18px); }
	to   { opacity: 1; filter: blur(0);    transform: none; }
}

html.js .jh-reveal.jh-unblur-in { opacity: 0; }
.jh-reveal.jh-in { animation: jh-unblur .85s cubic-bezier(.16,.84,.32,1) forwards; }

/* ------------------------------------------------------------
   12. 商品图：悬停视差（图片随光标反向位移）
   ------------------------------------------------------------ */

body.jh-dark ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	overflow: hidden;
}
body.jh-dark ul.products li.product img {
	transform: scale(1.02);
	transition: transform .75s cubic-bezier(.2,.8,.25,1);
}
body.jh-dark ul.products li.product:hover img {
	transform: scale(1.10) translate(var(--jh-px, 0px), var(--jh-py, 0px));
}

/* ------------------------------------------------------------
   13. 分类卡片：更强的 3D 抬升
   ------------------------------------------------------------ */

body.jh-dark ul.products li.product-category {
	transform-style: preserve-3d;
	will-change: transform;
}
body.jh-dark ul.products li.product-category::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--jh-radius);
	box-shadow: inset 0 0 0 1px rgba(77,141,255,0);
	transition: box-shadow .4s ease, background .4s ease;
	pointer-events: none;
}
body.jh-dark ul.products li.product-category:hover::after {
	box-shadow: inset 0 0 0 1px rgba(77,141,255,.55), 0 0 34px rgba(77,141,255,.22);
}

/* ------------------------------------------------------------
   14. 标题下划线：从左向右扫出
   ------------------------------------------------------------ */

body.jh-dark .storefront-product-section .section-title {
	position: relative;
}
body.jh-dark .storefront-product-section .section-title::before {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 3px;
	border-radius: 2px;
	background: rgba(77,141,255,.10);
	transform: scaleX(0);
	transform-origin: left;
	animation: none;
}
.jh-reveal.jh-in .section-title::before,
.storefront-product-section.jh-in .section-title::before {
	animation: jh-sweep .9s cubic-bezier(.16,.84,.32,1) .18s forwards;
}
@keyframes jh-sweep {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ------------------------------------------------------------
   15. 数字滚动（价格）—— 悬停时轻微上浮
   ------------------------------------------------------------ */

body.jh-dark ul.products li.product .price {
	transition: transform .35s cubic-bezier(.2,.8,.25,1), color .3s ease;
}
body.jh-dark ul.products li.product:hover .price {
	transform: translateX(2px);
}

/* ------------------------------------------------------------
   16. 无障碍
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	html.js .jh-reveal,
	html.js .jh-stagger > *,
	.jh-trust .jh-trust__item,
	body.jh-dark ul.products li.product img {
		opacity: 1 !important;
		transform: none !important;
	}
}