/* ===== 濮衣回收 - 自定义增强样式 ===== */

/* ---------- 1. 鼠标跟随光晕 ---------- */
.mouse-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle at center,
		rgba(91, 140, 90, 0.06) 0%,
		rgba(201, 106, 78, 0.04) 30%,
		transparent 70%);
	transform: translate(-50%, -50%);
	will-change: transform;
	transition: opacity 0.6s ease;
}

@media (max-width: 768px) {
	.mouse-glow { display: none; }
}

/* ---------- 2. 入场动画 ---------- */
.fade-in-section {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out,
	            transform 0.6s ease-out;
}

.fade-in-section.visible {
	opacity: 1;
	transform: translateY(0);
}

.fade-in-stagger > *:nth-child(1) { transition-delay: 0s; }
.fade-in-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.fade-in-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.fade-in-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.fade-in-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.fade-in-stagger > *:nth-child(6) { transition-delay: 0.5s; }

/* ---------- 3. 数据统计栏增强 ---------- */
.stats-bar {
	position: relative;
	overflow: hidden;
}

.stat-item {
	transition: transform 0.3s ease;
}

.stat-item:hover {
	transform: translateY(-2px);
}

/* ---------- 4. 卡片增强 ---------- */
.category-card {
	transition: transform 0.35s ease,
	            box-shadow 0.35s ease,
	            border-color 0.35s ease;
}

.category-icon {
	transition: transform 0.35s ease,
	            background 0.35s ease;
}

.category-card:hover .category-icon {
	transform: scale(1.05);
}

/* ---------- 5. 流程步骤增强 ---------- */
.step-number {
	transition: transform 0.3s ease,
	            box-shadow 0.3s ease;
}

.step:hover .step-number {
	transform: scale(1.1);
	box-shadow: 0 4px 16px rgba(91, 140, 90, 0.25);
}

/* ---------- 6. 联系卡片增强 ---------- */
.contact-card {
	transition: transform 0.35s ease,
	            box-shadow 0.35s ease;
}

.contact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.contact-icon {
	transition: transform 0.35s ease;
}

.contact-card:hover .contact-icon {
	transform: scale(1.1);
}

/* ---------- 7. CTA 区域增强 ---------- */
.cta-section {
	position: relative;
	overflow: hidden;
}

.cta-section::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle at center,
		rgba(255, 255, 255, 0.03) 0%,
		transparent 60%);
	animation: cta-rotate 20s linear infinite;
}

@keyframes cta-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ---------- 8. 模态框增强 ---------- */
.modal-overlay {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.modal-content {
	animation: modal-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modal-in {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ---------- 9. 输入框聚焦增强 ---------- */
input:focus,
textarea:focus,
select:focus {
	box-shadow: 0 0 0 3px rgba(91, 140, 90, 0.15);
}

/* ---------- 10. 移动端优化 ---------- */
@media (max-width: 768px) {
	.cta-section::before { display: none; }
	.contact-card:hover { transform: none; }
}

/* ---------- 11. 无障碍 - 减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}