footer {
	background: linear-gradient(135deg, #ffe0ef 0%, #f0f8ff 100%);
	padding: 1.5rem 0;
	margin-top: 2rem;
	position: relative;
}

.footer-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.footer-left {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.footer-logo {
	width: 50px;
	height: 50px;
	object-fit: contain;
	border-radius: 8px;
}

.footer-nav h4 {
	margin-bottom: 0.5rem;
	color: #ff6f91;
	font-size: 1rem;
	font-weight: 600;
}

.footer-nav nav {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.footer-nav nav a {
	text-decoration: none;
	color: #666;
	font-weight: 500;
	font-size: 0.9rem;
	transition: color 0.3s ease;
}

.footer-nav nav a:hover {
	color: #ff6f91;
}

.footer-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.8rem;
}

.footer-content {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer-text {
	text-align: right;
}

.footer-text p {
	font-size: 0.9rem;
	color: #666;
	margin: 0;
	font-style: italic;
}

.music-player {
	position: relative;
}

.music-player::before {
	content: '';
	position: absolute;
	top: 45%;
	left: 60%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	background-image: url('images/footer.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	z-index: 10;
	opacity: 0.9;
	border-radius: 50%;
}

.custom-audio-player {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ff6f91 0%, #ff4d79 100%), url('images/logo.png');
	background-size: 30px 30px, cover;
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-blend-mode: overlay;
	outline: none;
	border: none;
	box-shadow: 0 4px 12px rgba(255, 111, 145, 0.3);
	transition: all 0.3s ease;
	cursor: pointer;
}

.custom-audio-player:hover {
	box-shadow: 0 6px 20px rgba(255, 111, 145, 0.4);
	transform: scale(1.1);
}

.custom-audio-player::-webkit-media-controls-panel {
	background: transparent;
	border-radius: 50%;
}

.custom-audio-player::-webkit-media-controls-play-button {
	background-image: url(images/footer.png);
	border-radius: 50%;
	color: white;
}

.custom-audio-player::-webkit-media-controls-current-time-display,
.custom-audio-player::-webkit-media-controls-time-remaining-display,
.custom-audio-player::-webkit-media-controls-timeline,
.custom-audio-player::-webkit-media-controls-volume-slider-container,
.custom-audio-player::-webkit-media-controls-volume-slider,
.custom-audio-player::-webkit-media-controls-seek-back-button,
.custom-audio-player::-webkit-media-controls-seek-forward-button,
.custom-audio-player::-webkit-media-controls-fullscreen-button,
.custom-audio-player::-webkit-media-controls-rewind-button,
.custom-audio-player::-webkit-media-controls-return-to-realtime-button,
.custom-audio-player::-webkit-media-controls-toggle-closed-captions-button {
	display: none;
}



.custom-audio-player::-webkit-media-controls-play-button {
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	margin: 4px;
}

.custom-audio-player::-webkit-media-controls-play-button:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.custom-audio-player::-webkit-media-controls-current-time-display,
.custom-audio-player::-webkit-media-controls-time-remaining-display {
	color: white;
	font-size: 0.7rem;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.custom-audio-player::-webkit-media-controls-timeline {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	margin: 0 5px;
}

.custom-audio-player::-webkit-media-controls-volume-slider {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}


.custom-audio-player::-moz-range-track {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}

.custom-audio-player::-moz-range-thumb {
	background: white;
	border-radius: 50%;
	border: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


@media (max-width: 768px) {
	.footer-flex {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
	
	.footer-left {
		flex-direction: column;
		gap: 1rem;
	}
	
	.footer-info {
		text-align: center;
		align-items: center;
	}
	
	.footer-content {
		flex-direction: column;
		gap: 0.8rem;
		align-items: center;
	}
	
	.footer-text {
		text-align: center;
	}
	
	.custom-audio-player {
		width: 50px;
		height: 50px;
	}
}

.banner .hero-badge span {
	color: #222 !important;
}

::-webkit-scrollbar {
	width: 10px;
	background: #ffe0ef;
}
::-webkit-scrollbar-thumb {
	background: #ff6f91;
	border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
	background: #ffb6d5;
}

.petal {
	position: fixed;
	pointer-events: none;
	width: 24px;
	height: 24px;
	background: url('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu/petal.png') no-repeat center/contain;
	opacity: 0.85;
	z-index: 9999;
	animation: petal-fall 1.2s linear forwards;
}
@keyframes petal-fall {
	0% { transform: scale(1) translateY(0); opacity: 1; }
	80% { opacity: 1; }
	100% { transform: scale(0.7) translateY(80px); opacity: 0; }
}

.banner-section, .banner, .banner-slide, .banner-slide .container, .banner-slide .hero-title, .banner-slide .hero-description, .banner-slide .hero-badge, .banner-slide .hero-badge span {
	color: #fff !important;
}
a.logo, .logo .sitename, .logo:visited, .logo:active, .logo:focus, .logo:hover {
	text-decoration: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}
html, body {
	overflow-x: hidden;
	max-width: 100vw;
}

body {
	overflow-y: auto;
}

main, .main {
	min-height: 100vh;
	box-sizing: border-box;
}

.container, .container-xl {
	box-sizing: border-box;
	max-width: 1200px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1rem;
	padding-left: 1rem;
	overflow-x: hidden;
}

.header {
	max-width: 100vw;
	overflow-x: hidden;
}
.container,
.container-xl {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1rem;
	padding-left: 1rem;
	max-width: 1200px;
}
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.5rem;
	margin-left: -0.5rem;
}
.col-lg-5, .col-lg-7, .col-lg-8, .col-lg-6, .col-lg-4, .col-lg-3, .col-md-6 {
	position: relative;
	width: 100%;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
}
@media (min-width: 992px) {
	.col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}
@media (min-width: 768px) {
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.text-center { text-align: center !important; }
.me-auto { margin-right: auto !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-5 { margin-top: 3rem !important; }
.gy-5 { row-gap: 3rem !important; }
.mb-lg-0 { margin-bottom: 0 !important; }
@media (max-width: 991.98px) {
	.mb-lg-0 { margin-bottom: 1.5rem !important; }
}
:root {
	scroll-behavior: smooth;
}

html {
	scroll-behavior: smooth;
}

body {
	scroll-behavior: smooth;
}

section, .section {
	transition: box-shadow 0.4s cubic-bezier(.4,2,.6,1), background 0.4s cubic-bezier(.4,2,.6,1), border-radius 0.4s cubic-bezier(.4,2,.6,1), transform 0.5s cubic-bezier(.4,2,.6,1);
	padding-top: 140px; 
}

.banner.section {
	padding-top: 0;
}

#about, section#about, .about, .about.section {
	padding-top: 140px !important;
}

.faq-item {
	background: #fff;
	border-radius: 16px;
	margin-bottom: 1rem;
	box-shadow: 0 4px 16px rgba(255, 182, 213, 0.2);
	overflow: hidden;
	transition: all 0.3s ease;
}

.faq-item:hover {
	box-shadow: 0 6px 20px rgba(255, 182, 213, 0.3);
	transform: translateY(-2px);
}

.faq-toggle {
	display: none;
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 2rem;
	cursor: pointer;
	background: linear-gradient(135deg, #fff8dc 0%, #ffe0ef 50%, #f0f8ff 100%);
	transition: background 0.3s ease;
}

.faq-question:hover {
	background: linear-gradient(135deg, #fff0d0 0%, #ffd0e5 50%, #e0f0ff 100%);
}

.faq-question span {
	font-weight: 600;
	font-size: 1.1rem;
	color: #ff6f91;
}

.faq-icon {
	font-size: 1.5rem;
	font-weight: bold;
	color: #ff6f91;
	transition: transform 0.3s ease;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	background: #fff;
}

.faq-answer p {
	color: #666;
	line-height: 1.7;
	margin: 0;
}

.faq-toggle:checked + .faq-question .faq-icon {
	transform: rotate(45deg);
}

.faq-toggle:checked ~ .faq-answer {
	max-height: 200px;
	padding: 1.5rem 2rem;
}

section:target, .section:target {
	box-shadow: 0 8px 32px rgba(255,111,145,0.12), 0 1.5px 8px rgba(160,160,200,0.10);
	transform: translateY(0px) scale(1.02);
	z-index: 2;
}

.intro.section {
	padding: 4rem 0;
	background: linear-gradient(135deg, #ffe0ef 0%, #fff8dc 100%);
	position: relative;
	overflow: hidden;
}

.intro-gifs {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.intro-gif {
	position: absolute;
	width: 80px;
	height: 80px;
	opacity: 0.6;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(255,182,213,0.3);
	object-fit: cover;
}

.intro-gif[src*="gif1"], .intro-gif[src*="gif2"], .intro-gif[src*="gif3"], .intro-gif[src*="gif4"] {
	background: linear-gradient(45deg, #ff6f91, #ffb6d5, #ffe0ef, #ff6f91);
	background-size: 400% 400%;
	animation: gradient-bg 3s ease infinite;
}

.intro-gif[src*="gif1"]::before {
	content: "🌸";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
}

.intro-gif[src*="gif2"]::before {
	content: "🌿";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
}

.intro-gif[src*="gif3"]::before {
	content: "✨";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
}

.intro-gif[src*="gif4"]::before {
	content: "🎋";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
}

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

.intro-gif:nth-child(1) {
	top: 10%;
	left: 10%;
	animation: float 4s ease-in-out infinite;
}

.intro-gif:nth-child(2) {
	top: 20%;
	right: 15%;
	animation: float 4s ease-in-out infinite 1.5s;
}

.intro-gif:nth-child(3) {
	bottom: 20%;
	left: 20%;
	animation: float 4s ease-in-out infinite 3s;
}

.intro-gif:nth-child(4) {
	bottom: 15%;
	right: 10%;
	animation: float 4s ease-in-out infinite 2s;
}

@keyframes float {
	0%, 100% { transform: translateY(0px) rotate(0deg); }
	50% { transform: translateY(-20px) rotate(5deg); }
}

.intro-content {
	position: relative;
	z-index: 2;
}

.intro-title {
	font-family: 'Pacifico', 'Segoe Script', 'Comic Sans MS', cursive, sans-serif;
	font-size: 2.5rem;
	color: #ff6f91;
	text-align: center;
	margin-bottom: 2rem;
	text-shadow: 2px 2px 4px rgba(255,182,213,0.3);
	letter-spacing: 2px;
	background: linear-gradient(45deg, #ff6f91, #ffb6d5, #ff6f91);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: gradient-text 3s ease infinite;
}

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


.intro-text {
	font-size: 1.3rem;
	line-height: 1.8;
	color: #666;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 1rem;
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

.intro-text.typewriter {
	overflow: hidden;
	border-right: 3px solid #ff6f91;
	white-space: nowrap;
	margin: 0 auto;
	animation: 
		typing 4s steps(120, end) 1.5s forwards,
		blink-caret 0.75s step-end infinite 1.5s;
	width: 0;
	max-width: fit-content;
}

@keyframes typing {
	from { width: 0; }
	to { width: 100%; }
}

@keyframes blink-caret {
	from, to { border-color: transparent; }
	50% { border-color: #ff6f91; }
}

.intro-text.typewriter {
	animation: 
		typing 4s steps(120, end) 1.5s forwards,
		blink-caret 0.75s step-end infinite 1.5s,
		remove-caret 0.1s ease-in-out 6s forwards,
		restore-wrap 0.1s ease-in-out 6s forwards;
}

@keyframes remove-caret {
	to { border-right: none; }
}

@keyframes restore-wrap {
	to { 
		white-space: normal;
		max-width: 800px;
	}
}

.intro-text strong {
	color: #ff6f91;
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(255,182,213,0.5);
}

/* Remove auto animation for intro text */

/* About Section Styles */
.about.section {
	padding: 4rem 0;
	padding-top: 140px !important; 
	background: #f8f9fa;
}

.about-content {
	text-align: justify !important;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.about-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
}

.about-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(255,182,213,0.3) !important;
}

.about-card h3 {
	font-family: 'Pacifico', 'Segoe Script', 'Comic Sans MS', cursive, sans-serif;
	font-size: 1.3rem;
	letter-spacing: 1px;
}

.about-card p {
	font-size: 1rem;
	margin: 0;
}

/* Section Subtitle Styles */
.section-subtitle {
	font-style: italic;
	letter-spacing: 0.5px;
	font-weight: 400;
}

/* Remove the problematic opacity 0 for about cards - let them show normally */
.about-card {
	transform: translateY(30px);
	will-change: opacity, transform;
	transition: all 0.6s ease-out;
	opacity: 1;
}

* {
	scroll-behavior: smooth;
}

.scroll-animate-book {
	transform: translateY(50px) scale(0.9);
	will-change: opacity, transform;
	transition: all 0.8s ease-out;
	opacity: 1;
}

.books-multi .book {
	transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.8s ease-out;
}

.books-multi .book:hover {
	transform: translateY(-5px) scale(1.02);
	box-shadow: 0 8px 24px rgba(255,182,213,0.2);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Auto-animate About cards with staggered delays */
.about-card:nth-child(1) {
  animation: fadeInUp 1s ease-out 0.5s both;
}
.about-card:nth-child(2) {
  animation: fadeInUp 1s ease-out 0.8s both;
}
.about-card:nth-child(3) {
  animation: fadeInUp 1s ease-out 1.1s both;
}

/* Auto-animate Timeline items with smooth entrance */
.timeline-item:nth-child(1) {
  animation: slideInLeft 1s ease-out 1.5s both;
}
.timeline-item.right:nth-child(2) {
  animation: slideInRight 1s ease-out 1.8s both;
}
.timeline-item:nth-child(3) {
  animation: slideInLeft 1s ease-out 2.1s both;
}

/* Auto-animate Memory books with scale effect */
@keyframes bookFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.scroll-animate-book:nth-child(1) {
  animation: bookFadeIn 1s ease-out 2.5s both;
}
.scroll-animate-book:nth-child(2) {
  animation: bookFadeIn 1s ease-out 2.7s both;
}
.scroll-animate-book:nth-child(3) {
  animation: bookFadeIn 1s ease-out 2.9s both;
}
.scroll-animate-book:nth-child(4) {
  animation: bookFadeIn 1s ease-out 3.1s both;
}
.scroll-animate-book:nth-child(5) {
  animation: bookFadeIn 1s ease-out 3.3s both;
}
.scroll-animate-book:nth-child(6) {
  animation: bookFadeIn 1s ease-out 3.5s both;
}

@media (max-width: 768px) {
	.intro-title {
		font-size: 2rem;
	}
	
	.intro-text {
		font-size: 1.1rem;
		padding: 0 1.5rem;
	}
	
	.intro-text.typewriter {
		animation: 
			typing 5s steps(80, end) 1.5s forwards,
			blink-caret 0.75s step-end infinite 1.5s,
			remove-caret 0.1s ease-in-out 7s forwards,
			restore-wrap 0.1s ease-in-out 7s forwards;
	}
	
	.intro-gif {
		width: 60px;
		height: 60px;
	}
	
	.scroll-top-pure-css {
		width: 40px;
		height: 40px;
		right: 10px;
		bottom: 10px;
	}
	
	.scroll-top-pure-css i {
		font-size: 18px;
	}
}
	
	.about-content {
		max-width: 100%;
		padding: 0 1rem;
		overflow: hidden;
	}
	
	.about-card {
		padding: 1.5rem !important;
		margin-bottom: 1rem !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	
	.about-card h3 {
		font-size: 1.2rem;
	}
	
	.about-card p {
		font-size: 0.95rem;
		word-wrap: break-word;
	}

:root {
	--primary: #ff6f91;
	--primary-light: #ffe0ef;
	--accent: #a8edea;
	--heading: #ff6f91;
	--surface: #fff;
	--shadow: 0 2px 16px rgba(160, 160, 200, 0.08);
	--radius: 18px;
	--font-main: 'Poppins', 'Segoe UI', Arial, sans-serif;
}

body {
	font-family: var(--font-main);
	background: #fff;
	color: #222;
	margin: 0;
	scroll-behavior: smooth;
}

.header {
	background: #fff;
	position: fixed;
		top: 60px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 92vw;
	max-width: 1240px;
	z-index: 1000;
	min-height: 60px;
	box-shadow: 0 8px 32px rgba(160, 160, 200, 0.10), 0 1.5px 8px rgba(160,160,200,0.06);
	border-radius: 50px;
	overflow: visible;
	transition: box-shadow 0.3s, border-radius 0.3s, top 0.3s;
}
@media (max-width: 991.98px) {
	.header {
		border-radius: 30px;
		top: 8px;
		width: 98vw;
		max-width: 99vw;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		transform: none;
	}
	.header-container {
		border-radius: 0;
		padding: 10px 12px;
	}
}
.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 32px;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}
.logo.d-flex.align-items-center.me-auto.me-xl-0 {
	margin-right: auto !important;
}
.btn-getstarted {
	margin-left: 24px;
	margin-right: 0 !important;
}
@media (max-width: 991.98px) {
	.header {
		border-radius: 30px;
		top: 8px;
		width: 98vw;
		max-width: 99vw;
		left: 50%;
		transform: translateX(-50%);
	}
	.header-container {
		border-radius: 0;
		padding: 10px 12px;
	}
}
@media (max-width: 991.98px) {
	.header {
		border-radius: 0 0 30px 30px;
		top: 8px;
	}
	.header-container {
		border-radius: 0;
		padding: 10px 12px;
	}
}
.logo .sitename {
	font-size: 2.2rem;
	font-weight: 500;
	color: #ff6f91;
	letter-spacing: 2px;
	margin: 0;
	font-family: 'Pacifico', 'Segoe Script', 'Comic Sans MS', cursive, sans-serif;
	text-decoration: none !important;
	line-height: 1.1;
	text-shadow: 0 2px 8px rgba(160,160,200,0.08);
	border: none;
	box-shadow: none;
}
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
.navmenu ul {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
}
.navmenu a {
	text-decoration: none;
	color: #333;
	font-weight: 500;
	transition: color 0.2s, background 0.2s;
	padding: 6px 18px;
	border-radius: 20px;
	position: relative;
}
.navmenu a.active,
.navmenu a:focus {
	background: var(--primary-light);
	color: var(--primary);
	font-weight: bold;
	box-shadow: 0 2px 8px #ffb6d5aa;
}
.navmenu a:hover {
	color: var(--primary);
	background: var(--primary-light);
}

.mobile-nav-toggle {
	display: none;
	color: var(--primary);
	font-size: 28px;
	cursor: pointer;
	transition: color 0.3s;
}

@media (max-width: 1199px) {
	.mobile-nav-toggle {
		display: block;
	}
}

#banner:target ~ header .navmenu a[href="#banner"],
#memories:target ~ header .navmenu a[href="#memories"],
#timeline:target ~ header .navmenu a[href="#timeline"],
#contact:target ~ header .navmenu a[href="#contact"] {
	background: var(--primary-light);
	color: var(--primary);
	font-weight: bold;
	box-shadow: 0 2px 8px #ffb6d5aa;
}

.navmenu a[href="#banner"] {
	background: var(--primary-light);
	color: var(--primary);
	font-weight: bold;
	box-shadow: 0 2px 8px #ffb6d5aa;
}

#memories:target ~ header .navmenu a[href="#banner"],
#timeline:target ~ header .navmenu a[href="#banner"],
#contact:target ~ header .navmenu a[href="#banner"] {
	background: transparent;
	color: #333;
	font-weight: 500;
	box-shadow: none;
}
.btn-getstarted {
	background: var(--primary);
	color: #fff;
	border-radius: 50px;
	padding: 8px 24px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	margin-left: 24px;
	transition: background 0.2s;
	box-shadow: 0 4px 16px var(--shadow);
	border: none;
}
.btn-getstarted:hover {
	background: #ff4f7a;
}
@media (max-width: 991.98px) {
	.header {
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
	}
	.header-container {
		border-radius: 30px;
		padding: 10px 12px;
	}
}

/* Banner Section */
.banner {
	background: var(--primary-light);
	margin-bottom: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	border: 15px solid transparent;
	border-image: url('images/border1.png') 30 repeat;
	box-sizing: border-box;
}

.banner-carousel {
	height: 100vh;
	min-height: 600px;
}

.banner-slide {
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	position: relative;
}

.banner-slide::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

.banner-slide .container {
	position: relative;
	z-index: 2;
}

.banner-carousel-manual, .banner-slides {
  min-height: 440px;
}
.banner-slide.manual-slide {
  min-height: 440px;
  height: 440px;
  background-size: cover;
  background-position: center;
  margin-top: 24px;
}

.banner-carousel .swiper-pagination {
	bottom: 30px;
}

.banner-carousel .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.6);
	opacity: 1;
	width: 12px;
	height: 12px;
	margin: 0 6px;
}

.banner-carousel .swiper-pagination-bullet-active {
	background: var(--primary);
	transform: scale(1.2);
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--surface);
	padding: 8px 20px;
	border-radius: 50px;
	margin-bottom: 32px;
	box-shadow: 0 4px 20px rgba(160,160,200,0.08);
	border: 1px solid var(--primary-light);
	font-size: 1rem;
	color: var(--primary);
}
.hero-badge i {
	color: #FFD700;
}
.hero-title {
	font-size: 3rem;
	color: var(--heading);
	margin-bottom: 1rem;
	letter-spacing: 2px;
}
.hero-description {
	font-size: 1.3rem;
	color: #b47b8c;
	margin-bottom: 2rem;
}
.hero-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 40px;
}
.btn, .btn-primary {
	display: inline-block;
	background: var(--primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px 32px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
	box-shadow: 0 4px 16px var(--shadow);
	cursor: pointer;
}
.btn-primary:hover {
	background: #ff4f7a;
}

/* Video Section */
.video {
	background: #fff;
	margin-bottom: 32px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 60px 0;
	text-align: center;
}
.video-content h2 {
	color: var(--primary);
	margin-bottom: 1.5rem;
	font-size: 2rem;
}
.video-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}
.video-wrapper video {
	width: 100%;
	max-width: 700px;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.video-scroll-list {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding: 32px 0 24px 0;
  scroll-behavior: smooth;
  cursor: grab;
}
.video-scroll-list::-webkit-scrollbar {
  height: 10px;
  background: #ffe0ef;
}
.video-scroll-list::-webkit-scrollbar-thumb {
  background: #ff6f91;
  border-radius: 8px;
}
.video-scroll-list:active {
  cursor: grabbing;
}
.video-item {
  min-width: 360px;
  max-width: 360px;
  height: 220px;
  flex: 0 0 auto;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 18px #ffb6d540;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  background: #222;
  border: none;
  outline: none;
  display: block;
}

.video-timeline-line {
  width: 100%;
  height: 16px;
  background: repeating-linear-gradient(90deg, #ffb6d5 0 16px, #fff 16px 32px);
  opacity: 0.7;
  border-radius: 8px;
  margin: 0 auto;
}
.video-timeline-section .top-line {
  margin-bottom: 0;
}
.video-timeline-section .bottom-line {
  margin-top: 0;
}

/* About Section */
.about {
	background: #fff;
	margin-bottom: 32px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 60px 0;
	padding-top: 140px !important; /* 确保about section有足够的顶部空间 */
	overflow: hidden;
	max-width: 100%;
	box-sizing: border-box;
}
.about h2 {
	color: var(--primary);
	margin-bottom: 1.5rem;
	font-size: 2rem;
}
.company-badge {
	display: inline-block;
	background-color: var(--accent);
	color: var(--primary);
	padding: 0.5rem 1.25rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}
.about .intro-text {
	font-size: 1rem;
	line-height: 1.7;
	color: #b47b8c;
	margin: 0;
}

.memories {
	background: #fff;
	margin-bottom: 32px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 60px 0;
}
.memories .row {
	display: flex !important;
	align-items: center !important;
	gap: 2rem;
	flex-wrap: nowrap !important;
}
.memories .col-lg-5 {
	flex: 0 0 55% !important;
	max-width: 55% !important;
	width: 55% !important;
}
.memories .col-lg-7 {
	flex: 0 0 45% !important;
	max-width: 45% !important;
	width: 45% !important;
}

.memories .carousel-section {
	position: relative;
}
.memories .memories-carousel {
	height: 500px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.memories .carousel-image {
	height: 100%;
	overflow: hidden;
}
.memories .carousel-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.memories .carousel-image:hover img {
	transform: scale(1.05);
}

.memories .swiper-button-next,
.memories .swiper-button-prev {
	display: none;
}

.memories .swiper-pagination {
	bottom: 20px;
}
.memories .swiper-pagination-bullet {
	background: rgba(255, 255, 255, 0.6);
	opacity: 1;
	width: 12px;
	height: 12px;
	margin: 0 6px;
}
.memories .swiper-pagination-bullet-active {
	background: var(--primary);
	transform: scale(1.2);
}

.memories .content-section {
	padding-left: 1rem;
}
.memories .section-intro h2 {
	color: var(--primary);
	margin-bottom: 1.5rem;
	font-size: 1.8rem;
	white-space: nowrap;
	line-height: 1.2;
}
.memories .intro-content {
	margin-top: 1.5rem;
}
.memories .intro-text-en {
	font-size: 1rem;
	line-height: 1.7;
	color: #333;
	margin-bottom: 1.5rem;
	font-style: italic;
	text-align: justify;
	text-justify: inter-word;
}
.memories .intro-text-zh {
	font-size: 1rem;
	line-height: 1.7;
	color: #b47b8c;
	margin: 0;
	text-align: justify;
	text-justify: inter-word;
}

@media (max-width: 768px) {
	.memories .row {
		flex-direction: column !important;
	}
	.memories .col-lg-5,
	.memories .col-lg-7 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.memories .content-section {
		padding-left: 0;
		margin-top: 2rem;
	}
	.memories .memories-carousel {
		height: 350px;
	}
	.memories .section-intro h2 {
		white-space: normal;
		font-size: 1.6rem;
	}
}

.timeline.section {
	background: transparent;
	margin-bottom: 32px;
	padding: 60px 0;
	position: relative;
}

.timeline-header {
	text-align: center;
	margin-bottom: 3rem;
	z-index: 1;
	position: relative;
}

.timeline-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}

.timeline-scroll-container::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(to bottom, #ffb6d5 0%, #ffe0ef 100%);
	transform: translateX(-50%);
	z-index: 0;
}

.timeline-item-scroll {
	position: relative;
	margin-bottom: 4rem;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.timeline-item-scroll.left {
	width: calc(50% - 2rem); 
	margin-right: auto;
	padding-right: 2rem;
}

.timeline-item-scroll.right {
	width: calc(50% - 2rem); 
	margin-left: auto;
	padding-left: 2rem;
}

.timeline-year {
	font-size: 2.2rem;
	font-weight: bold;
	color: #ff6f91;
	font-family: 'Pacifico', cursive;
	margin-bottom: 1rem;
	position: relative;
	z-index: 5;
	white-space: nowrap;
	text-align: center;
	line-height: 1.2;
}

.timeline-item-scroll.left .timeline-year {
	align-self: flex-end;
}

.timeline-item-scroll.right .timeline-year {
	align-self: flex-start;
}

.timeline-scroll {
	margin-bottom: 1rem;
}

.timeline-item-scroll.left .timeline-scroll {
	align-self: flex-end;
}

.timeline-item-scroll.right .timeline-scroll {
	align-self: flex-start;
}

.timeline-checkbox {
	display: none;
}

.scroll-timeline {
	position: relative;
	width: 450px;
	height: 95px; 
	cursor: pointer;
	overflow: hidden;
	border-radius: 10px;
	background: #d8d1c2;
	box-shadow: 0 6px 12px rgba(0,0,0,0.25);
	transition: height 1.2s cubic-bezier(.25,.8,.25,1);
	display: block;
}

.scroll-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: linear-gradient(to bottom, #bca98b, #d8d1c2);
	border-bottom: 2px solid rgba(0,0,0,0.25);
	border-radius: 10px 10px 0 0;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
	z-index: 3;
}

.scroll-timeline::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: linear-gradient(to top, #bca98b, #d8d1c2);
	border-top: 2px solid rgba(0,0,0,0.25);
	border-radius: 0 0 10px 10px;
	box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
	z-index: 3;
	transform: translateY(100%); /* 初始隐藏在下方 */
	transition: transform 1.2s cubic-bezier(.25,.8,.25,1);
}

.scroll-timeline video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: top center;
	transform: scaleY(0.2);
	transition: transform 1.2s cubic-bezier(.25,.8,.25,1);
	border-radius: 10px;
}

.timeline-checkbox:checked + .scroll-timeline {
	height: 220px;
}

.timeline-checkbox:checked + .scroll-timeline video {
	transform: scaleY(1);
}

.timeline-checkbox:checked + .scroll-timeline::after {
	transform: translateY(0);
}

.timeline-description {
	width: 430px; 
	font-size: 1.1rem;
	color: #666;
	line-height: 1.7; 
	margin: 0;
	background: rgba(255, 255, 255, 0.8);
	padding: 1rem;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	text-align: justify !important; 
	text-justify: inter-word; 
	hyphens: auto; 
}

.timeline-item-scroll.left .timeline-description {
	align-self: flex-end;
}

.timeline-item-scroll.right .timeline-description {
	align-self: flex-start;
}

.timeline-item-scroll::before {
	content: "";
	position: absolute;
	top: 3rem; 
	width: 16px;
	height: 16px;
	background: #ff6f91;
	border: 4px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(255, 111, 145, 0.3);
	z-index: 10;
}

.timeline-item-scroll.left::before {
	right: -1.5rem; 
	transform: translateX(50%);
}

.timeline-item-scroll.right::before {
	left: -0.1rem; 
	transform: translateX(-50%);
}

.timeline-item-scroll:nth-child(1)::before {
	animation: dotPulse 0.6s ease-out 1s both;
}
.timeline-item-scroll:nth-child(2)::before {
	animation: dotPulse 0.6s ease-out 1.3s both;
}
.timeline-item-scroll:nth-child(3)::before {
	animation: dotPulse 0.6s ease-out 1.6s both;
}
.timeline-item-scroll:nth-child(4)::before {
	animation: dotPulse 0.6s ease-out 1.9s both;
}

@keyframes dotPulse {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.2);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

@media (max-width: 900px) {
	.timeline-container {
		padding: 0 1rem;
	}
	
	.scroll-timeline {
		width: 300px;
		height: 50px;
	}
	
	.timeline-checkbox:checked + .scroll-timeline {
		height: 180px;
	}
	
	.timeline-year {
		font-size: 1.8rem;
		white-space: nowrap;
	}
	
	.timeline-description {
		width: 300px;
		font-size: 1rem;
	}
}

@media (max-width: 768px) {
	.timeline-scroll-container::before {
		left: 2rem;
		transform: none;
	}
	
	.timeline-year {
		font-size: 1.6rem;
		white-space: nowrap;
	}
	
	.timeline-item-scroll.left,
	.timeline-item-scroll.right {
		align-items: flex-start;
		width: auto;
		margin: 0;
		padding-left: 4rem;
		padding-right: 1rem;
	}
	
	.timeline-item-scroll.left::before,
	.timeline-item-scroll.right::before {
		left: 2rem;
		right: auto;
		transform: translateX(-50%);
		top: 3rem;
	}
	
	.scroll-timeline {
		width: 100%;
		max-width: 340px;
	}
	
	.timeline-description {
		width: 100%;
		max-width: 340px;
	}
}

@media (max-width: 480px) {
	.timeline-container {
		padding: 0 0.5rem;
	}
	
	.timeline-year {
		font-size: 1.4rem;
		white-space: nowrap;
	}
	
	.timeline-item-scroll.left,
	.timeline-item-scroll.right {
		padding-left: 3rem;
		padding-right: 0.5rem;
	}
	
	.timeline-item-scroll.left::before,
	.timeline-item-scroll.right::before {
		left: 1.5rem;
		right: auto;
		transform: translateX(-50%);
	}
	
	.timeline-scroll-container::before {
		left: 1.5rem;
	}
	
	.scroll-timeline {
		height: 45px;
	}
	
	.timeline-checkbox:checked + .scroll-timeline {
		height: 160px;
	}
	
	.timeline-description {
		font-size: 0.95rem;
		padding: 0.8rem;
	}
}

.contact p {
	font-size: 1.1rem;
	color: #555;
}

.footer {
	background: #fce4ec;
	text-align: center;
	padding: 24px 0;
	color: #b47b8c;
	font-size: 1rem;
	margin-top: 32px;
}

.scroll-top-pure-css {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	background-color: var(--primary);
	width: 44px;
	height: 44px;
	border-radius: 50px;
	text-decoration: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(255, 111, 145, 0.3);
	transition: all 0.4s ease;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
}

.scroll-top-pure-css i {
	font-size: 20px;
	line-height: 0;
}

.scroll-top-pure-css:hover {
	background-color: #ff4f7a;
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(255, 111, 145, 0.4);
}

@keyframes fadeInScrollBtn {
	0% {
		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

.scroll-top-pure-css {
	animation: fadeInScrollBtn 0.5s ease-in-out 2s forwards;
}

@media (max-width: 700px) {
	.navbar {
		flex-direction: column;
		gap: 1rem;
		padding: 24px 4vw 0 4vw;
	}
	.banner-content h1 {
		font-size: 2rem;
	}
	.container {
		padding: 40px 4vw;
	}
	.timeline-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.banner {
		padding: 0;
	}
	.banner-carousel {
		height: 70vh;
		min-height: 400px;
	}
	.video {
		padding: 30px 0;
	}
	.header {
		border-bottom-left-radius: 0 0 30px 30px/0 0 20px 20px;
		border-bottom-right-radius: 0 0 30px 30px/0 0 20px 20px;
	}
	.scroll-top {
		width: 40px;
		height: 40px;
		right: 10px;
		bottom: 10px;
	}
	.scroll-top i {
		font-size: 20px;
	}
}

.banner-carousel-manual {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  min-height: 340px;
}
.banner-slides {
  position: relative;
  width: 100%;
  min-height: 340px;
}
.banner-slide.manual-slide {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  width: 100%;
  transition: opacity 0.5s;
  background: transparent;
}
#banner-slide1:checked ~ .banner-slides .slide1,
#banner-slide2:checked ~ .banner-slides .slide2,
#banner-slide3:checked ~ .banner-slides .slide3 {
  display: block;
  position: relative;
  opacity: 1;
  z-index: 2;
}
.banner-pagination {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}
.petal-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffe0ef;
  border: 2px solid #ff6f91;
  cursor: pointer;
  position: relative;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px #ffb6d5a0;
}
.petal-dot:hover, .petal-dot:active {
  background: #ff6f91;
  border-color: #ffb6d5;
  animation: petal-burst 0.5s;
}
.petal-dot:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  background: url('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/waifu/petal.png') no-repeat center/contain;
  opacity: 0;
  transform: translate(-50%,-50%) scale(0.7);
  pointer-events: none;
}
.petal-dot:hover:after, .petal-dot:active:after {
  opacity: 1;
  animation: petal-float 0.5s;
}
@keyframes petal-burst {
  0% { box-shadow: 0 0 0 0 #ffb6d5a0; }
  80% { box-shadow: 0 0 0 12px #ffb6d520; }
  100% { box-shadow: 0 2px 8px #ffb6d5a0; }
}
@keyframes petal-float {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
  60% { opacity: 1; transform: translate(-50%,-80%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%,-120%) scale(0.8); }
}

.banner .hero-badge, .banner-carousel-manual .hero-badge {
  margin-top: 48px;
}

.banner.section, .banner-carousel-manual {
  margin-top: 100px;
}

.banner.section {
  padding-bottom: 120px;
}

.banner .hero-title {
  font-family: 'Segoe Script', cursive !important;
  font-size: 2.3rem !important;
  color: #fff !important;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(160,160,200,0.08);
}

.book {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
  perspective: 1200px;
}
.page {
  width: 300px;
  height: 400px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  margin: 0 10px;
  padding: 1rem;
  transform-origin: left;
  transition: transform 1s;
}
.page:hover {
  transform: rotateY(-15deg);
}
.memory-card {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0;
  transition: transform 0.5s, box-shadow 0.5s;
}
.memory-card:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 15px #ff9a9e, 0 0 30px #fad0c4;
}

.memories .book {
  width: 300px;
  height: 400px;
  perspective: 1200px;
  position: relative;
  margin: 0 auto 2rem auto;
  display: block;
}
.memories .book input[type="checkbox"] {
  display: none;
}
.memories .book .flip-label {
  position: absolute;
  width: 300px;
  height: 400px;
  left: 0;
  top: 0;
  z-index: 3;
  cursor: pointer;
}
.memories .page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: transform 1s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.12);
  backface-visibility: hidden;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 1.5rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.memories .page.front {
  z-index: 2;
  background: #fff8dc;
}
.memories .page.back {
  background: #d0f0c0;
  transform: rotateY(180deg);
  z-index: 1;
}
.memories .book #flip:checked ~ .front {
  transform: rotateY(-180deg);
}
.memories .book #flip:checked ~ .back {
  transform: rotateY(0deg);
  z-index: 2;
}
.memories .memory-card {
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0 0.5rem 0;
  transition: transform 0.5s, box-shadow 0.5s;
  width: 100%;
  box-sizing: border-box;
}
.memories .memory-card:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 15px #ff9a9e, 0 0 30px #fad0c4;
}

.books-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.books-multi .book {
  width: calc(33.333% - 16px);
  min-width: 280px;
  max-width: 320px;
  height: 400px;
  perspective: 1200px;
  position: relative;
  margin: 0;
  display: block;
}
.books-multi .book input[type="checkbox"] {
  display: none;
}
.books-multi .book .flip-label {
  position: absolute;
  width: 300px;
  height: 400px;
  left: 0;
  top: 0;
  z-index: 3;
  cursor: pointer;
}
.books-multi .page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: transform 1s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.12);
  backface-visibility: hidden;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 1.2rem 0.8rem 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}
.books-multi .page.front {
  z-index: 2;
  background: #fff8dc;
}
.books-multi .page.back {
  background: #d0f0c0;
  transform: rotateY(180deg);
  z-index: 1;
}
.books-multi .book input[type="checkbox"]:checked ~ .front {
  transform: rotateY(-180deg);
}
.books-multi .book input[type="checkbox"]:checked ~ .back {
  transform: rotateY(0deg);
  z-index: 2;
}
.books-multi .memory-card {
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 0.8rem;
  margin: 0.8rem 0 0.4rem 0;
  transition: transform 0.5s, box-shadow 0.5s;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.books-multi .memory-card:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 15px #ff9a9e, 0 0 30px #fad0c4;
}

.books-multi .page.back h3 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  text-align: center;
  width: 100%;
  color: #333;
}

.books-multi .page.back {
  padding: 1rem 0.6rem 0.8rem 0.6rem;
}

@media (max-width: 1200px) {
  .books-multi .book {
    width: calc(33.333% - 20px);
    min-width: 260px;
  }
}

@media (max-width: 900px) {
  .books-multi {
    gap: 20px;
  }
  .books-multi .book {
    width: calc(50% - 10px);
    min-width: 280px;
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  .books-multi {
    gap: 16px;
  }
  .books-multi .book {
    width: 100%;
    max-width: 320px;
    height: 380px;
  }
  .books-multi .book .flip-label,
  .books-multi .page {
    width: 100%;
    height: 100%;
  }
}

.timeline.section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section {
  display: block;
  align-items: unset;
  flex-direction: unset;
}

#timeline.section {
  margin-bottom: 64px;
}

.contact-section-title {
  text-align: center;
  font-family: 'Pacifico','Segoe Script','Comic Sans MS',cursive,sans-serif;
  font-size: 1.6rem;
  color: #ff6f91;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

section, .section, .memories, .timeline, .contact, .video {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.contact-flex {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

#banner, #intro, #video, #memories {
	scroll-margin-top: 80px;
}

#timeline, #contact {
	scroll-margin-top: 130px; 
}

.petals {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.petals span {
  position: absolute;
  top: -10%;
  width: 15px;
  height: 15px;
  background: pink;
  border-radius: 50% 50% 50% 0;
  opacity: 0.8;
  animation: fall 10s linear infinite;
}

@keyframes fall {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(200px) translateY(110vh) rotate(360deg);
    opacity: 0.5;
  }
}
.petals span:nth-child(1) { left: 2%; animation-duration: 10s; animation-delay: 0s; }
.petals span:nth-child(2) { left: 7%; animation-duration: 12s; animation-delay: 2s; }
.petals span:nth-child(3) { left: 12%; animation-duration: 8s; animation-delay: 4s; }
.petals span:nth-child(4) { left: 17%; animation-duration: 14s; animation-delay: 1s; }
.petals span:nth-child(5) { left: 22%; animation-duration: 10s; animation-delay: 3s; }
.petals span:nth-child(6) { left: 27%; animation-duration: 11s; animation-delay: 1.5s; }
.petals span:nth-child(7) { left: 32%; animation-duration: 13s; animation-delay: 2.5s; }
.petals span:nth-child(8) { left: 37%; animation-duration: 9s; animation-delay: 3.5s; }
.petals span:nth-child(9) { left: 42%; animation-duration: 12s; animation-delay: 0.5s; }
.petals span:nth-child(10) { left: 47%; animation-duration: 10s; animation-delay: 2.2s; }
.petals span:nth-child(11) { left: 52%; animation-duration: 14s; animation-delay: 1.2s; }
.petals span:nth-child(12) { left: 57%; animation-duration: 8s; animation-delay: 4.2s; }
.petals span:nth-child(13) { left: 62%; animation-duration: 13s; animation-delay: 2.8s; }
.petals span:nth-child(14) { left: 67%; animation-duration: 11s; animation-delay: 1.8s; }
.petals span:nth-child(15) { left: 72%; animation-duration: 9s; animation-delay: 3.8s; }
.petals span:nth-child(16) { left: 77%; animation-duration: 12s; animation-delay: 0.8s; }
.petals span:nth-child(17) { left: 82%; animation-duration: 10s; animation-delay: 2.8s; }
.petals span:nth-child(18) { left: 87%; animation-duration: 14s; animation-delay: 1.8s; }
.petals span:nth-child(19) { left: 92%; animation-duration: 8s; animation-delay: 4.8s; }
.petals span:nth-child(20) { left: 97%; animation-duration: 13s; animation-delay: 2.2s; }

.book {
  width: 250px;
  padding: 20px;
  background: #fffafc;
  border: 2px solid #f5a6c7;
  clip-path: polygon(
    5% 0%, 95% 0%, 100% 10%, 100% 90%, 
    95% 100%, 5% 100%, 0% 90%, 0% 10%
  );
  box-shadow: 3px 3px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}
.book:hover {
  box-shadow: 6px 6px 16px rgba(245,166,199,0.18);
}

.books-multi .page {
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.77,0,0.18,1);
}
.books-multi .book input[type="checkbox"]:checked ~ .front {
  transform: rotateY(-180deg);
  z-index: 1;
}
.books-multi .book input[type="checkbox"]:checked ~ .back {
  transform: rotateY(0deg);
  z-index: 2;
}

.book .memory-card {
  clip-path: polygon(
    6% 0%, 94% 0%, 100% 12%, 100% 88%,
    94% 100%, 6% 100%, 0% 88%, 0% 12%
  );
  border: 2px solid #f5a6c7;
  background: #eafbe7;
  box-shadow: 2px 2px 8px rgba(245,166,199,0.10);
}

.book .memory-card {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.banner.section {
    background: url(images/bg4.png)!important;
}