* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html {

	-webkit-text-size-adjust: 100%;

	scroll-behavior: smooth;

}



body {

	background: linear-gradient(180deg, #fef5f7 0%, rgba(190, 252, 255, 0.45) 40%, #fff8f0 100%);

	min-height: 100vh;

	min-height: 100dvh;

	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;

	color: #333;

	padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));

	-webkit-tap-highlight-color: transparent;

	overflow-x: hidden;

}



body.is-loading {

	overflow: hidden;

}



body.is-ready {

	overflow-x: hidden;

}



a {

	text-decoration: none;

	color: inherit;

}



/* ===== 背景光晕 ===== */

.bg-glow {

	position: fixed;

	inset: 0;

	pointer-events: none;

	z-index: 0;

	background:

		radial-gradient(ellipse 60% 40% at 15% 10%, rgba(255, 180, 195, 0.35), transparent 70%),

		radial-gradient(ellipse 50% 35% at 85% 25%, rgba(190, 252, 255, 0.3), transparent 70%),

		radial-gradient(ellipse 45% 30% at 50% 90%, rgba(255, 220, 200, 0.25), transparent 70%);

	animation: glowFloat 10s ease-in-out infinite alternate;

}



@keyframes glowFloat {

	0% { transform: translate(0, 0) scale(1); opacity: 0.85; }

	100% { transform: translate(0, -12px) scale(1.03); opacity: 1; }

}



#canvas {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	pointer-events: none;

	z-index: 0;

}



#total {

	position: relative;

	z-index: 1;

}



/* ===== 滚动渐入动画 ===== */

.reveal {

	opacity: 0;

	transform: translateY(40px);

	transition:

		opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),

		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);

}



.reveal.visible {

	opacity: 1;

	transform: translateY(0);

}



.reveal-hero {

	transform: translateY(30px) scale(0.96);

}



.reveal-hero.visible {

	transform: translateY(0) scale(1);

}



.reveal .section-title,

.reveal .section-subtitle {

	opacity: 0;

	transform: translateY(16px);

	transition:

		opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),

		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}



.reveal.visible .section-title {

	opacity: 1;

	transform: translateY(0);

	transition-delay: 0.1s;

}



.reveal.visible .section-subtitle {

	opacity: 1;

	transform: translateY(0);

	transition-delay: 0.2s;

}



.reveal.visible .section-subtitle:nth-of-type(2) {

	transition-delay: 0.3s;

}



.reveal .photo-row img,

.reveal .video-row video {

	opacity: 0;

	transform: translateY(24px) scale(0.95);

	transition:

		opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),

		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),

		box-shadow 0.35s ease;

}



.reveal.visible .photo-row img,

.reveal.visible .video-row video {

	opacity: 1;

	transform: translateY(0) scale(1);

}



.reveal.visible .photo-row img:nth-child(1),

.reveal.visible .video-row video:nth-child(1) { transition-delay: 0.15s; }

.reveal.visible .photo-row img:nth-child(2),

.reveal.visible .video-row video:nth-child(2) { transition-delay: 0.28s; }

.reveal.visible .photo-row img:nth-child(3),

.reveal.visible .video-row video:nth-child(3) { transition-delay: 0.41s; }



/* ===== 主容器 ===== */

.page-container {

	max-width: 1100px;

	margin: 0 auto;

	padding: 0 24px 40px;

}



/* ===== 顶图 ===== */

.hero {

	text-align: center;

	padding: 20px 0 10px;

}



.hero-img {

	max-width: 100%;

	width: 900px;

	height: auto;

	border-radius: 16px;

	box-shadow: 0 12px 40px rgba(255, 100, 120, 0.18);

	border: 4px solid rgba(255, 255, 255, 0.85);

	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;

}



.hero-img:hover {

	transform: scale(1.015) translateY(-4px);

	box-shadow: 0 20px 50px rgba(255, 100, 120, 0.28);

}



/* ===== 内容区块 ===== */

.content-section {

	margin-top: 48px;

	text-align: center;

	position: relative;

}



.content-section + .content-section::before {

	content: '♥';

	display: block;

	font-size: 12px;

	color: rgba(232, 69, 69, 0.35);

	margin-bottom: 8px;

	letter-spacing: 0;

}



.section-title {

	font-size: 22px;

	line-height: 1.8;

	color: #444;

	margin-bottom: 8px;

	letter-spacing: 2px;

	position: relative;

}



.section-title::after {

	content: '';

	display: block;

	width: 48px;

	height: 2px;

	margin: 10px auto 0;

	background: linear-gradient(90deg, transparent, #e84545, transparent);

	border-radius: 2px;

	transform: scaleX(0);

	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;

}



.reveal.visible .section-title::after {

	transform: scaleX(1);

}



.section-subtitle {

	font-size: 20px;

	line-height: 1.8;

	color: #666;

	margin-bottom: 6px;

	letter-spacing: 2px;

}



.heart {

	color: #e84545;

	font-weight: bold;

	margin-right: 8px;

	display: inline-block;

	animation: heartBeat 2s ease-in-out infinite;

}



@keyframes heartBeat {

	0%, 100% { transform: scale(1); }

	14% { transform: scale(1.22); }

	28% { transform: scale(1); }

	42% { transform: scale(1.12); }

	56% { transform: scale(1); }

}



/* ===== 图片排列 ===== */

.photo-row {

	display: flex;

	justify-content: center;

	align-items: flex-start;

	flex-wrap: wrap;

	gap: 24px;

	margin-top: 28px;

}



.photo-row img {

	border-radius: 10px;

	object-fit: cover;

	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

	border: 3px solid rgba(255, 255, 255, 0.9);

	outline: 1px solid rgba(232, 69, 69, 0.12);

	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;

}



.photo-row img:hover {

	transform: translateY(-6px) scale(1.02);

	box-shadow: 0 14px 32px rgba(255, 100, 120, 0.22);

}



.photo-row--3 img {

	width: 220px;

	height: 330px;

}



.photo-row--2 img {

	width: 350px;

	height: 230px;

}



/* ===== 视频区 ===== */

.video-row {

	display: flex;

	justify-content: center;

	flex-wrap: wrap;

	gap: 32px;

	margin-top: 28px;

}



.video-row video {

	width: 320px;

	height: 360px;

	border-radius: 12px;

	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);

	background: #000;

	border: 3px solid rgba(255, 255, 255, 0.85);

	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;

}



.video-row video:hover {

	transform: translateY(-4px);

	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);

}



/* ===== 页脚 ===== */

.bottom {

	margin-top: 60px;

	color: #fff;

	font-weight: 700;

	font-size: 18px;

	text-align: center;

	background: linear-gradient(90deg, #ff5064, #ff7a8e, #ff5064);

	background-size: 200% auto;

	animation: footerShimmer 5s linear infinite;

	border-radius: 10px;

	padding: 18px 16px;

	overflow: hidden;

	box-shadow: 0 8px 24px rgba(255, 80, 100, 0.25);

}



@keyframes footerShimmer {

	0% { background-position: 0% center; }

	100% { background-position: 200% center; }

}



.bottom-content {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	align-items: center;

	gap: 6px 8px;

	line-height: 1.8;

	max-width: 100%;

	margin: 0 auto;

}



.bottom-main {

	letter-spacing: 3px;

	white-space: normal;

	word-break: keep-all;

}



.bottom-deco {

	letter-spacing: 0;

	flex-shrink: 0;

	opacity: 0.85;

}



/* ===== 返回顶部按钮 ===== */

.back-top {

	position: fixed;

	right: 32px;

	bottom: 96px;

	z-index: 998;

	width: 48px;

	height: 48px;

	border: none;

	border-radius: 50%;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #fff;

	background: linear-gradient(135deg, #ff6b8a, #e84545);

	box-shadow: 0 4px 16px rgba(232, 69, 69, 0.4);

	opacity: 0;

	visibility: hidden;

	transform: translateY(16px) scale(0.85);

	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease;

}



.back-top.visible {

	opacity: 1;

	visibility: visible;

	transform: translateY(0) scale(1);

}



.back-top:hover {

	background: linear-gradient(135deg, #ff8099, #ff5060);

	box-shadow: 0 6px 24px rgba(232, 69, 69, 0.55);

	transform: translateY(-3px) scale(1.05);

}



.back-top:active {

	transform: translateY(0) scale(0.95);

}



/* ===== 音乐控制条 ===== */

.music-player {

	position: fixed;

	bottom: 0;

	left: 0;

	right: 0;

	z-index: 999;

	background: rgba(255, 255, 255, 0.92);

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

	border-top: 1px solid rgba(255, 120, 140, 0.2);

	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);

	transform: translateY(100%);

	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}



body.is-ready .music-player {

	transform: translateY(0);

}



.music-player-inner {

	max-width: 1100px;

	margin: 0 auto;

	padding: 10px 24px;

	display: flex;

	align-items: center;

	gap: 12px;

}



.music-btn {

	width: 36px;

	height: 36px;

	border: none;

	border-radius: 50%;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #e84545;

	background: rgba(232, 69, 69, 0.08);

	transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);

	flex-shrink: 0;

}



.music-btn:hover {

	background: rgba(232, 69, 69, 0.18);

	transform: scale(1.1);

}



.music-btn.active {

	color: #fff;

	background: #e84545;

	box-shadow: 0 2px 10px rgba(232, 69, 69, 0.35);

}



.music-info {

	display: flex;

	flex-direction: column;

	min-width: 80px;

	flex-shrink: 0;

}



.music-title {

	font-size: 14px;

	font-weight: 600;

	color: #333;

	white-space: nowrap;

}



.music-time {

	font-size: 11px;

	color: #999;

	margin-top: 2px;

}



.music-progress-wrap {

	flex: 1;

	height: 6px;

	background: rgba(232, 69, 69, 0.12);

	border-radius: 3px;

	cursor: pointer;

	position: relative;

	min-width: 60px;

	transition: height 0.2s ease;

}



.music-progress-wrap:hover {

	height: 8px;

}



.music-progress-bar {

	height: 100%;

	width: 0%;

	background: linear-gradient(90deg, #ff8fa3, #e84545);

	border-radius: 3px;

	transition: width 0.1s linear;

	position: relative;

}



.music-progress-bar::after {

	content: '';

	position: absolute;

	right: -5px;

	top: 50%;

	transform: translateY(-50%);

	width: 12px;

	height: 12px;

	border-radius: 50%;

	background: #e84545;

	box-shadow: 0 1px 4px rgba(232, 69, 69, 0.4);

	opacity: 0;

	transition: opacity 0.2s;

}



.music-progress-wrap:hover .music-progress-bar::after {

	opacity: 1;

}



.music-volume-wrap {

	display: flex;

	align-items: center;

	gap: 6px;

	color: #999;

	flex-shrink: 0;

}



.music-volume {

	width: 72px;

	height: 4px;

	-webkit-appearance: none;

	appearance: none;

	background: rgba(232, 69, 69, 0.15);

	border-radius: 2px;

	outline: none;

	cursor: pointer;

}



.music-volume::-webkit-slider-thumb {

	-webkit-appearance: none;

	width: 12px;

	height: 12px;

	border-radius: 50%;

	background: #e84545;

	cursor: pointer;

	transition: transform 0.15s ease;

}



.music-volume::-webkit-slider-thumb:hover {

	transform: scale(1.2);

}



.music-volume::-moz-range-thumb {

	width: 12px;

	height: 12px;

	border-radius: 50%;

	background: #e84545;

	border: none;

	cursor: pointer;

}



/* ===== 减少动画（无障碍） ===== */

@media (prefers-reduced-motion: reduce) {

	html { scroll-behavior: auto; }



	.reveal,

	.reveal .section-title,

	.reveal .section-subtitle,

	.reveal .photo-row img,

	.reveal .video-row video {

		opacity: 1;

		transform: none;

		transition: none;

	}



	.heart,

	.bg-glow,

	.bottom {

		animation: none;

	}



	.music-player {

		transform: none;

	}

}



/* ===== 响应式 - 平板 ===== */

@media (max-width: 768px) {

	.page-container {

		padding: 0 16px 32px;

	}



	.content-section {

		margin-top: 36px;

	}



	.section-title {

		font-size: 17px;

		letter-spacing: 1px;

		padding: 0 4px;

		word-break: break-all;

	}



	.section-subtitle {

		font-size: 15px;

		letter-spacing: 1px;

		padding: 0 4px;

		word-break: break-all;

	}



	.photo-row {

		gap: 16px;

		margin-top: 20px;

	}



	.photo-row--3 img {

		width: calc(33.33% - 12px);

		min-width: 100px;

		max-width: 160px;

		height: auto;

		aspect-ratio: 2 / 3;

	}



	.photo-row--2 img {

		width: calc(50% - 10px);

		min-width: 140px;

		max-width: 280px;

		height: auto;

		aspect-ratio: 35 / 23;

	}



	.video-row {

		gap: 20px;

	}



	.video-row video {

		width: calc(50% - 12px);

		min-width: 140px;

		max-width: 320px;

		height: auto;

		aspect-ratio: 8 / 9;

	}



	.bottom {

		font-size: clamp(12px, 3.2vw, 15px);

		padding: 16px 10px;

	}



	.bottom-content {

		flex-direction: column;

		gap: 4px;

	}



	.bottom-main {

		letter-spacing: 1px;

	}



	.bottom-deco {

		display: none;

	}



	.bottom-content::before,

	.bottom-content::after {

		content: '———';

		display: block;

		width: 100%;

		text-align: center;

		opacity: 0.85;

		line-height: 1.4;

	}



	.back-top {

		right: calc(12px + env(safe-area-inset-right, 0px));

		bottom: calc(80px + env(safe-area-inset-bottom, 0px));

		width: 42px;

		height: 42px;

	}



	.music-player {

		padding-bottom: env(safe-area-inset-bottom, 0px);

	}



	.music-player-inner {

		padding: 8px 12px;

		gap: 8px;

	}



	.music-info {

		min-width: 60px;

	}



	.music-title {

		font-size: 13px;

		max-width: 72px;

		overflow: hidden;

		text-overflow: ellipsis;

	}



	.music-volume-wrap {

		display: none;

	}



	.hero-img:hover,

	.photo-row img:hover,

	.video-row video:hover {

		transform: none;

	}

}



/* ===== 响应式 - 手机 ===== */

@media (max-width: 480px) {

	.section-title {

		font-size: 15px;

		line-height: 1.9;

	}



	.section-subtitle {

		font-size: 14px;

		line-height: 1.9;

	}



	.photo-row--3 {

		flex-direction: column;

		align-items: center;

	}



	.photo-row--3 img {

		width: 78vw;

		max-width: 280px;

		height: auto;

		aspect-ratio: 2 / 3;

	}



	.photo-row--2 {

		flex-direction: column;

		align-items: center;

	}



	.photo-row--2 img {

		width: 85vw;

		max-width: 340px;

		height: auto;

		aspect-ratio: 35 / 23;

	}



	.video-row {

		flex-direction: column;

		align-items: center;

	}



	.video-row video {

		width: 88vw;

		max-width: 360px;

		height: auto;

	}



	.bottom {

		font-size: clamp(11px, 3.5vw, 13px);

		padding: 14px 8px;

	}



	.bottom-main {

		letter-spacing: 0.5px;

		line-height: 2;

	}



	.music-info {

		display: none;

	}



	.music-progress-wrap {

		height: 8px;

	}



	.music-btn {

		width: 40px;

		height: 40px;

	}

}



/* ===== 响应式 - 超小屏 ===== */

@media (max-width: 360px) {

	.section-title {

		font-size: 14px;

	}



	.section-subtitle {

		font-size: 13px;

	}



	.bottom {

		font-size: 12px;

		padding: 12px 6px;

	}

}