/*
 * ✨ 自然流畅的页面切换效果 v3.0
 * 设计理念：
 * - 极致简洁，几乎无感知过渡
 * - 如同原生App般的流畅体验
 * - 导航栏绝对固定
 */

/* 移除遮罩概念，改用纯CSS动画 */
.page-transition-shade {
	display: none;  /* 完全不使用遮罩 */
}

/* ====== 导航栏：绝对固定 ====== */
header {
	position: fixed !important;
	z-index: 99999 !important;  /* 最高优先级 */
	pointer-events: auto !important;
}

/* 确保导航栏在任何情况下都不受影响 */
body[class*="page-"] > header,
body > header {
	animation: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	transition: none !important;
}

/* ====== 页面内容：极致自然的过渡 ====== */

/* 新页面进入 - 极简淡入（纯 opacity，无位移，避免底部黑块）
   同时匹配 html.page-entering（内联脚本提前设置，防闪烁）和 body.page-entering（page-transition.js 设置） */
html.page-entering > body > main,
html.page-entering > body > #view-box,
html.page-entering > body > .content-wrapper,
html.page-entering > body > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade),
body.page-entering > main,
body.page-entering > #view-box,
body.page-entering > .content-wrapper,
body.page-entering > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade) {
	animation: naturalFadeIn 0.4s ease-out both;
}

html.page-entering.from-left > body > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade),
html.page-entering.from-right > body > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade),
body.page-entering.from-left > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade),
body.page-entering.from-right > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade) {
	animation: naturalFadeIn 0.4s ease-out both;
}

/* 固定定位元素不参与位移动画，避免位移黑块 */
.vinyl-card,
.resume-modal,
.ipencil-modal {
	animation: none !important;
}

body.page-leaving .vinyl-card,
body.page-leaving-left .vinyl-card,
body.page-leaving-right .vinyl-card {
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease, visibility 0s linear .12s !important;
}

/* 旧页面离开 - 极简淡出（排除固定定位元素） */
body.page-leaving > main,
body.page-leaving > #view-box,
body.page-leaving > .content-wrapper,
body.page-leaving > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade),
body.page-leaving-left > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade),
body.page-leaving-right > *:not(header):not(.vinyl-card):not(.resume-modal):not(.ipencil-modal):not(.page-transition-shade) {
	animation: naturalFadeOut 0.3s ease-in both;
}

/* ====== 核心动画：自然呼吸感 ====== */

/**
 * 🌿 自然淡入 - 纯透明度过渡，无位移，避免底部黑块
 */
@keyframes naturalFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/**
 * 🍃 自然淡出 - 纯透明度过渡，无位移
 */
@keyframes naturalFadeOut {
	to {
		opacity: 0;
	}
}

/* ====== 兼容性保留 ====== */
@keyframes pageFadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pageFadeOutDown {
	to { opacity: 0; transform: translateY(15px); }
}

@keyframes page-enter-right {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes page-enter-left {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes page-leave-left {
	to { opacity: 0; transform: translateY(-5px); }
}

@keyframes page-leave-right {
	to { opacity: 0; transform: translateY(-5px); }
}

/* ====== 无障碍访问 ====== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-transition-shade,
	html.page-entering > body > *:not(.page-transition-shade),
	body.page-entering > *:not(.page-transition-shade),
	body.page-leaving-left > *:not(.page-transition-shade),
	body.page-leaving-right > *:not(.page-transition-shade) {
		animation: none;
		transition: none;
	}
}