/* ==========================================================================
   5. 动画效果
   --------------------------------------------------------------------------
   HTML 上加这些属性就有效果（程序在 assets/js/fx.js）：

     data-reveal            滑到画面内才出现（往上浮）
     data-reveal="scale"    由小放大出现
     data-reveal="clip"     由一道斜线展开出现
     data-stagger           放在外层：里面的 data-reveal 一个接一个出现
     data-split             标题拆成一个一个字，依序弹上来（"chars" = 每个字母）
     data-count="990"       数字由 0 跑到 990
     data-tilt              滑鼠移上去，卡片会 3D 倾斜，并有一团光跟着滑鼠
     data-magnet            按钮会被滑鼠轻轻吸过去
     data-parallax="-0.1"   往下滑时以不同速度移动（视差）
     data-scene             很高的区块，里面黏住不动，往下滑时切换内容
     data-countdown         优惠倒数计时

   只有 <html> 有 rx-js 时才先把东西藏起来（inc/setup.php 加的）。
   访客的电脑设定「减少动态效果」时，全部动画关掉，内容直接显示。
   ========================================================================== */

/* ── 滑到画面内才出现 ── */
.rx-js [data-reveal] {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity var(--rx-slow) var(--rx-ease),
		transform var(--rx-slow) var(--rx-ease),
		clip-path 1.1s var(--rx-ease-snap);
	transition-delay: calc(var(--d, 0s) + var(--si, 0) * 0.08s);
}

.rx-js [data-reveal="scale"] {
	transform: scale(0.92);
}

.rx-js [data-reveal="clip"] {
	opacity: 1;
	transform: none;
	clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.rx-js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

.rx-js [data-reveal="clip"].is-in {
	clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%);
}

/* ── 标题拆字：每个字从下面弹上来，带一点模糊 ── */
.rx-split__w {
	display: inline-block;
	white-space: nowrap;
}

.rx-split__c {
	display: inline-block;
	will-change: transform;
}

.rx-js [data-split] .rx-split__c {
	opacity: 0;
	transform: translateY(0.6em) rotateX(-70deg);
	filter: blur(6px);
	color: var(--rx-cyan);
	transition:
		opacity 0.7s var(--rx-ease),
		transform 0.9s var(--rx-ease),
		filter 0.7s var(--rx-ease),
		color 1.4s var(--rx-ease);
	transition-delay: calc(var(--ci) * 0.025s + var(--d, 0s));
}

/* 每个字出现时先是青色，再慢慢变回白色 */
.rx-js [data-split].is-in .rx-split__c {
	opacity: 1;
	transform: none;
	filter: none;
	color: inherit;
}

/* ── 跑马灯（首页）── */
.rx-marquee {
	position: relative;
	padding-block: 26px;
	border-block: 1px solid var(--rx-line);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.rx-marquee__track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	animation: rx-marquee 36s linear infinite;
}

.rx-marquee span {
	font-family: var(--rx-display);
	font-size: clamp(32px, 5vw, 64px);
	font-weight: 600;
	color: transparent;
	-webkit-text-stroke: 1px rgba(160, 200, 255, 0.4);
	white-space: nowrap;
	transition: color 0.3s;
}

.rx-marquee span:nth-of-type(3n + 1) {
	color: var(--rx-frost);
	-webkit-text-stroke: 0;
}

.rx-marquee i {
	width: 12px;
	height: 12px;
	background: var(--rx-cyan);
	transform: rotate(45deg);
	box-shadow: 0 0 12px var(--rx-cyan);
	flex: none;
}

.rx-marquee:hover .rx-marquee__track {
	animation-play-state: paused;
}

/* ── 3D 倾斜（fx.js 设定 --rx / --ry）── */
[data-tilt] {
	transform-style: preserve-3d;
	transition: transform 0.5s var(--rx-ease);
}

[data-tilt].is-tilting {
	transition: transform 0.12s linear;
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}

/* data-reveal 和 data-tilt 一起用时，出现后才倾斜 */
.rx-js [data-reveal][data-tilt].is-in.is-tilting {
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 0.12s linear;
}

/* ── 黏住的长区块（scene）──
   外层高度 = 几个萤幕高（--steps），里面 .rx-scene__sticky 黏在萤幕上。
   fx.js 设定 --p（0 到 1 的进度）和 data-step（第几步）。 */
.rx-scene {
	position: relative;
	height: calc(100vh * (var(--steps, 1) + 1));
}

.rx-scene__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* ── 404 的故障闪烁 ── */
.rx-glitch {
	position: relative;
	display: inline-block;
	font-family: var(--rx-display);
	font-size: clamp(120px, 26vw, 320px);
	font-weight: 700;
	line-height: 0.9;
	background: var(--rx-signal);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rx-glitch::before,
.rx-glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	clip-path: inset(0 0 100% 0);
}

/* 每隔一阵子，红色和蓝色的碎片左右闪一下 */
.rx-glitch::before {
	color: var(--rx-ember);
	animation: rx-glitch-a 2.4s steps(1) infinite;
}

.rx-glitch::after {
	color: var(--rx-blue);
	animation: rx-glitch-b 2.4s steps(1) infinite;
}

/* ──────────────────────────────────────────────────────────────
   所有动画的关键影格
   ────────────────────────────────────────────────────────────── */
@keyframes rx-sheen {
	0%, 60% { transform: translateX(-120%); }
	100% { transform: translateX(120%); }
}

@keyframes rx-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(255, 77, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
}

@keyframes rx-ripple {
	0% { transform: scale(1); opacity: 0.8; }
	100% { transform: scale(1.7); opacity: 0; }
}

@keyframes rx-word-sweep {
	0% { background-position: 150% 0; }
	60%, 100% { background-position: -50% 0; }
}

@keyframes rx-title-sweep {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

@keyframes rx-blink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0.25; }
}

@keyframes rx-spin {
	to { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(360deg); }
}

@keyframes rx-grid-flow {
	from { background-position: 0 0, 0 0; }
	to { background-position: 0 80px, 0 0; }
}

@keyframes rx-drip {
	0% { transform: translateY(-100%); }
	60%, 100% { transform: translateY(100%); }
}

@keyframes rx-kenburns {
	from { transform: scale(1.12); }
	to { transform: scale(1); }
}

@keyframes rx-fill {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes rx-tick {
	0% { color: var(--rx-cyan); transform: translateY(-4px); }
	100% { color: inherit; transform: none; }
}

@keyframes rx-pan {
	0%, 10% { transform: translateY(0); }
	90%, 100% { transform: translateY(calc(-100% + 260px)); }
}

@keyframes rx-marquee {
	to { transform: translateX(-50%); }
}

@keyframes rx-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

@keyframes rx-glitch-a {
	0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
	88% { clip-path: inset(20% 0 55% 0); transform: translateX(-6px); }
	91% { clip-path: inset(60% 0 12% 0); transform: translateX(5px); }
	94% { clip-path: inset(40% 0 40% 0); transform: translateX(-3px); }
}

@keyframes rx-glitch-b {
	0%, 87%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
	89% { clip-path: inset(70% 0 5% 0); transform: translateX(6px); }
	92% { clip-path: inset(10% 0 70% 0); transform: translateX(-5px); }
	95% { clip-path: inset(48% 0 30% 0); transform: translateX(4px); }
}

/* ──────────────────────────────────────────────────────────────
   减少动态效果：访客电脑有这个设定，就把所有动画关掉
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

.rx-reduced [data-reveal],
.rx-reduced [data-split] .rx-split__c {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}