/* ========================================
   Maxene's Backyardigans Invitation
   Colors: Orange, Blue, Green, Pink, Purple, Yellow
   ======================================== */

/* ---------- General ---------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Nunito', sans-serif;
	background-color: #e8f5e9;
	color: #333;
	overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
}

/* ---------- Floating Decorations ---------- */
.floating-decoration {
	position: fixed;
	font-size: 2.2rem;
	opacity: 0.2;
	z-index: 0;
	pointer-events: none;
	animation: floatAround 7s ease-in-out infinite;
}
.d1 { top: 8%; left: 4%; animation-delay: 0s; }
.d2 { top: 22%; right: 6%; animation-delay: 1s; }
.d3 { top: 45%; left: 2%; animation-delay: 2.5s; }
.d4 { top: 65%; right: 4%; animation-delay: 4s; }
.d5 { top: 80%; left: 8%; animation-delay: 1.5s; }
.d6 { top: 35%; right: 10%; animation-delay: 5s; }
.d7 { top: 55%; left: 6%; animation-delay: 3.5s; }
.d8 { top: 15%; right: 15%; animation-delay: 2s; }

@keyframes floatAround {
	0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
	25% { transform: translateY(-15px) rotate(5deg) scale(1.05); }
	50% { transform: translateY(-25px) rotate(-5deg) scale(1); }
	75% { transform: translateY(-10px) rotate(8deg) scale(1.05); }
}

/* ---------- Hero Section ---------- */
#hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(180deg,
			#87CEEB 0%,
			#B0E0FF 40%,
			#C8EDFF 60%,
			#90D874 60%,
			#6BBF4E 100%
		);
	overflow: hidden;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 80%, rgba(255,200,50,0.15) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(255,100,150,0.1) 0%, transparent 50%);
}

/* Grass hills */
.grass-hills {
	position: absolute;
	bottom: 0;
	left: -5%;
	width: 110%;
	height: 200px;
	background:
		radial-gradient(ellipse 50% 100% at 15% 100%, #5DAE3B 0%, transparent 70%),
		radial-gradient(ellipse 40% 100% at 50% 100%, #6BBF4E 0%, transparent 70%),
		radial-gradient(ellipse 45% 100% at 85% 100%, #5DAE3B 0%, transparent 70%);
	z-index: 0;
}

.grass-hills-2 {
	height: 140px;
	background:
		radial-gradient(ellipse 35% 100% at 30% 100%, #4CAF50 0%, transparent 70%),
		radial-gradient(ellipse 30% 100% at 70% 100%, #4CAF50 0%, transparent 70%);
	z-index: 0;
}

.hero-content {
	position: relative;
	z-index: 1;
	padding: 2rem;
}

.hero-subtitle {
	font-family: 'Bubblegum Sans', cursive;
	font-size: 1.3rem;
	letter-spacing: 1px;
	color: #FF6F00;
	margin-bottom: 0.5rem;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.hero-title {
	font-family: 'Fredoka One', cursive;
	font-size: 5.5rem;
	color: #E84D8A;
	margin-bottom: 0.25rem;
	text-shadow:
		3px 3px 0 #fff,
		5px 5px 0 rgba(232, 77, 138, 0.2);
	letter-spacing: 2px;
}

.hero-event {
	font-family: 'Fredoka One', cursive;
	font-size: 1.8rem;
	font-weight: 400;
	color: #4A90D9;
	letter-spacing: 1px;
	text-shadow: 2px 2px 0 rgba(255,255,255,0.6);
}

.divider {
	margin: 1.5rem auto;
	width: 220px;
	height: 4px;
	background: linear-gradient(to right, #FF6F00, #E84D8A, #9B59B6, #4A90D9, #6BBF4E);
	border-radius: 4px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.divider span {
	background: transparent;
	padding: 0 1rem;
	font-size: 1.8rem;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.hero-tagline {
	font-family: 'Nunito', sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: #5D4037;
	margin-bottom: 2rem;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.btn-invitation {
	background: linear-gradient(135deg, #FF6F00, #FF9800);
	color: #fff;
	border: none;
	padding: 14px 36px;
	border-radius: 50px;
	font-family: 'Fredoka One', cursive;
	font-size: 1.1rem;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(255, 111, 0, 0.4);
}

.btn-invitation:hover {
	background: linear-gradient(135deg, #FF9800, #FFB300);
	color: #fff;
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 8px 25px rgba(255, 111, 0, 0.5);
}

/* ---------- Section Labels ---------- */
.section-label {
	font-family: 'Bubblegum Sans', cursive;
	font-size: 1.8rem;
	color: #FF6F00;
	margin-bottom: 0;
}

.section-title {
	font-family: 'Fredoka One', cursive;
	font-size: 2.4rem;
	color: #4A90D9;
	margin-bottom: 1rem;
}

/* ---------- About Section ---------- */
#about {
	background:
		linear-gradient(180deg, #FFF9C4 0%, #FFECB3 50%, #FFE0B2 100%);
	position: relative;
	z-index: 1;
}

.photo-frame {
	position: relative;
	display: inline-block;
	padding: 8px;
	background: linear-gradient(135deg, #FF6F00, #E84D8A, #9B59B6, #4A90D9, #6BBF4E);
	border-radius: 50%;
	box-shadow: 0 10px 40px rgba(255, 111, 0, 0.25);
	animation: photoGlow 3s ease-in-out infinite;
}

@keyframes photoGlow {
	0%, 100% { box-shadow: 0 10px 40px rgba(255, 111, 0, 0.25); }
	50% { box-shadow: 0 10px 50px rgba(232, 77, 138, 0.35); }
}

.baby-photo {
	width: 280px;
	height: 280px;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid #fff;
}

.about-description {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #5D4037;
	font-weight: 600;
}

/* ---------- Save the Date / Details Section ---------- */
#details {
	background:
		linear-gradient(180deg, #E1F5FE 0%, #B3E5FC 50%, #E1F5FE 100%);
	position: relative;
	z-index: 1;
}

.detail-card.save-the-date-card {
	background: #fff;
	border-radius: 24px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(74, 144, 217, 0.15);
	border: 3px solid #4A90D9;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-card.save-the-date-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 50px rgba(74, 144, 217, 0.25);
}

.save-date-header {
	background: linear-gradient(135deg, #4A90D9, #5C6BC0, #9B59B6);
	padding: 2rem;
	text-align: center;
	color: #fff;
}

.save-date-icon {
	font-size: 3rem;
	margin-bottom: 0.5rem;
}

.save-date-header h3 {
	font-family: 'Fredoka One', cursive;
	font-size: 2.2rem;
	margin: 0;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.save-date-sub {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0.25rem 0 0;
	opacity: 0.9;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.event-block {
	background: #f8f9fa;
	border-radius: 16px;
	padding: 1.5rem;
	text-align: center;
	border: 2px dashed #ddd;
	transition: all 0.3s ease;
}

.event-block:hover {
	transform: scale(1.02);
}

.christening-block {
	border-color: #9B59B6;
	background: linear-gradient(180deg, #F3E5F5, #fff);
}

.birthday-block {
	border-color: #FF6F00;
	background: linear-gradient(180deg, #FFF3E0, #fff);
}

.event-icon {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
}

.event-block h4 {
	font-family: 'Fredoka One', cursive;
	font-size: 1.3rem;
	margin-bottom: 0.75rem;
}

.christening-block h4 {
	color: #9B59B6;
}

.birthday-block h4 {
	color: #FF6F00;
}

.event-time,
.event-venue {
	font-family: 'Nunito', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #555;
	margin-bottom: 0.3rem;
}

.event-time i,
.event-venue i {
	margin-right: 0.4rem;
	color: #4A90D9;
}

/* ---------- Gallery Section ---------- */
#gallery {
	background:
		linear-gradient(180deg, #C8E6C9 0%, #A5D6A7 50%, #C8E6C9 100%);
	position: relative;
	z-index: 1;
}

.gallery-item {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 4px solid #fff;
}

.gallery-item:hover {
	transform: scale(1.05) rotate(1deg);
	box-shadow: 0 12px 35px rgba(107, 191, 78, 0.3);
}

.gallery-item img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}

/* ---------- RSVP Section ---------- */
#rsvp {
	background:
		linear-gradient(180deg, #FCE4EC 0%, #F8BBD0 50%, #FCE4EC 100%);
	position: relative;
	z-index: 1;
}

.rsvp-text {
	font-size: 1.1rem;
	color: #5D4037;
	line-height: 1.8;
	font-weight: 600;
}

.btn-rsvp {
	background: linear-gradient(135deg, #E84D8A, #D81B60);
	color: #fff;
	border: none;
	padding: 14px 30px;
	border-radius: 50px;
	font-family: 'Fredoka One', cursive;
	font-size: 1rem;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(232, 77, 138, 0.35);
}

.btn-rsvp:hover {
	background: linear-gradient(135deg, #D81B60, #C2185B);
	color: #fff;
	transform: translateY(-3px) scale(1.05);
}

.btn-rsvp-outline {
	background: transparent;
	color: #4A90D9;
	border: 3px solid #4A90D9;
	padding: 12px 30px;
	border-radius: 50px;
	font-family: 'Fredoka One', cursive;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.btn-rsvp-outline:hover {
	background: #4A90D9;
	color: #fff;
	transform: translateY(-3px) scale(1.05);
}

/* ---------- Countdown Section ---------- */
#countdown {
	background:
		linear-gradient(135deg, rgba(155, 89, 182, 0.92), rgba(74, 144, 217, 0.92)),
		url('https://images.unsplash.com/photo-1513151233558-d860c5398176?w=1600&h=600&fit=crop') center/cover no-repeat;
	position: relative;
	z-index: 1;
}

#countdown .section-label {
	color: #FFE082;
}

.countdown-box {
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(10px);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 16px;
	padding: 1.5rem 2rem;
	min-width: 105px;
	text-align: center;
	transition: transform 0.3s ease;
}

.countdown-box:hover {
	transform: scale(1.08);
}

.countdown-number {
	display: block;
	font-family: 'Fredoka One', cursive;
	font-size: 3rem;
	color: #fff;
	line-height: 1;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.countdown-label {
	display: block;
	font-family: 'Nunito', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 0.5rem;
}

/* ---------- Footer ---------- */
footer {
	background: linear-gradient(135deg, #4A90D9, #5C6BC0);
	color: #fff;
	position: relative;
	z-index: 1;
}

.footer-title {
	font-family: 'Fredoka One', cursive;
	font-size: 1.8rem;
	color: #FFE082;
	margin-bottom: 0.25rem;
}

.footer-text {
	font-family: 'Nunito', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	margin-bottom: 0.5rem;
}

.footer-icons {
	font-size: 1.4rem;
	letter-spacing: 10px;
}

/* ---------- Fade-in Animation ---------- */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.hero-title {
		font-size: 3.5rem;
	}

	.hero-event {
		font-size: 1.3rem;
	}

	.baby-photo {
		width: 220px;
		height: 220px;
	}

	.section-title {
		font-size: 1.8rem;
	}

	.save-date-header h3 {
		font-size: 1.7rem;
	}

	.countdown-box {
		min-width: 75px;
		padding: 1rem 1.2rem;
	}

	.countdown-number {
		font-size: 2rem;
	}

	.gallery-item img {
		height: 180px;
	}
}

@media (max-width: 480px) {
	.hero-title {
		font-size: 2.8rem;
	}

	.hero-subtitle {
		font-size: 1rem;
	}

	.hero-event {
		font-size: 1.1rem;
	}

	.save-date-header h3 {
		font-size: 1.4rem;
	}

	.countdown-box {
		min-width: 65px;
		padding: 0.8rem 1rem;
	}

	.event-block {
		padding: 1rem;
	}
}