/* Sakura Petal Animations */
@-webkit-keyframes fall {
	0% { opacity: 0.9; top: 0 }
	100% { opacity: 0.2; top: 100% }
}
@keyframes fall {
	0% { opacity: 0.9; top: 0 }
	100% { opacity: 0.2; top: 100% }
}
@-webkit-keyframes blow-soft-left {
	0% { margin-left: 0 }
	100% { margin-left: -50% }
}
@keyframes blow-soft-left {
	0% { margin-left: 0 }
	100% { margin-left: -50% }
}
@-webkit-keyframes blow-medium-left {
	0% { margin-left: 0 }
	100% { margin-left: -100% }
}
@keyframes blow-medium-left {
	0% { margin-left: 0 }
	100% { margin-left: -100% }
}
@-webkit-keyframes blow-soft-right {
	0% { margin-left: 0 }
	100% { margin-left: 50% }
}
@keyframes blow-soft-right {
	0% { margin-left: 0 }
	100% { margin-left: 50% }
}
@-webkit-keyframes blow-medium-right {
	0% { margin-left: 0 }
	100% { margin-left: 100% }
}
@keyframes blow-medium-right {
	0% { margin-left: 0 }
	100% { margin-left: 100% }
}
@-webkit-keyframes sway-0 {
	0% { -webkit-transform: rotate(-5deg) }
	40% { -webkit-transform: rotate(28deg) }
	100% { -webkit-transform: rotate(3deg) }
}
@keyframes sway-0 {
	0% { transform: rotate(-5deg) }
	40% { transform: rotate(28deg) }
	100% { transform: rotate(3deg) }
}
@-webkit-keyframes sway-1 {
	0% { -webkit-transform: rotate(10deg) }
	40% { -webkit-transform: rotate(43deg) }
	100% { -webkit-transform: rotate(15deg) }
}
@keyframes sway-1 {
	0% { transform: rotate(10deg) }
	40% { transform: rotate(43deg) }
	100% { transform: rotate(15deg) }
}
@-webkit-keyframes sway-2 {
	0% { -webkit-transform: rotate(15deg) }
	40% { -webkit-transform: rotate(56deg) }
	100% { -webkit-transform: rotate(22deg) }
}
@keyframes sway-2 {
	0% { transform: rotate(15deg) }
	40% { transform: rotate(56deg) }
	100% { transform: rotate(22deg) }
}
@-webkit-keyframes sway-3 {
	0% { -webkit-transform: rotate(25deg) }
	40% { -webkit-transform: rotate(74deg) }
	100% { -webkit-transform: rotate(37deg) }
}
@keyframes sway-3 {
	0% { transform: rotate(25deg) }
	40% { transform: rotate(74deg) }
	100% { transform: rotate(37deg) }
}
@-webkit-keyframes sway-4 {
	0% { -webkit-transform: rotate(40deg) }
	40% { -webkit-transform: rotate(68deg) }
	100% { -webkit-transform: rotate(25deg) }
}
@keyframes sway-4 {
	0% { transform: rotate(40deg) }
	40% { transform: rotate(68deg) }
	100% { transform: rotate(25deg) }
}
@-webkit-keyframes sway-5 {
	0% { -webkit-transform: rotate(50deg) }
	40% { -webkit-transform: rotate(78deg) }
	100% { -webkit-transform: rotate(40deg) }
}
@keyframes sway-5 {
	0% { transform: rotate(50deg) }
	40% { transform: rotate(78deg) }
	100% { transform: rotate(40deg) }
}
@-webkit-keyframes sway-6 {
	0% { -webkit-transform: rotate(65deg) }
	40% { -webkit-transform: rotate(92deg) }
	100% { -webkit-transform: rotate(58deg) }
}
@keyframes sway-6 {
	0% { transform: rotate(65deg) }
	40% { transform: rotate(92deg) }
	100% { transform: rotate(58deg) }
}
@-webkit-keyframes sway-7 {
	0% { -webkit-transform: rotate(72deg) }
	40% { -webkit-transform: rotate(118deg) }
	100% { -webkit-transform: rotate(68deg) }
}
@keyframes sway-7 {
	0% { transform: rotate(72deg) }
	40% { transform: rotate(118deg) }
	100% { transform: rotate(68deg) }
}
@-webkit-keyframes sway-8 {
	0% { -webkit-transform: rotate(94deg) }
	40% { -webkit-transform: rotate(136deg) }
	100% { -webkit-transform: rotate(82deg) }
}
@keyframes sway-8 {
	0% { transform: rotate(94deg) }
	40% { transform: rotate(136deg) }
	100% { transform: rotate(82deg) }
}

/* Pulse animation for buttons */
@keyframes pulse {
	0% { transform: scale(1); opacity: 0.9; }
	50% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 0.9; }
}

/* Sakura container - original styles were conflicting */
.sakura-falling {
	pointer-events: none;
	position: fixed; /* Use fixed to cover viewport regardless of scroll */
    top: 0;
    left: 0;
    width: 100vw; /* Cover full viewport width */
    height: 100vh; /* Cover full viewport height */
    overflow: hidden; /* Prevent scrollbars */
    z-index: 0; /* Behind most content */
}
/* Individual sakura petal (ensure background is transparent or desired color) */
.sakura {
	background: #FFC0CB; /* Example light pink - change as needed */
	border-radius: 50%;
    /* Original styles below might not be needed depending on plugin */
	/* pointer-events: none; */
	/* position: absolute; */
}


/*******************************/
/* Basic Reset & Body Styling */
* {
    box-sizing: border-box; /* Include padding/border in total width/height */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
	font-family: 'Arvo', serif; /* Default font */
}

html {
    scroll-behavior: smooth; /* Optional: smooth scrolling */
}

body {
	font-family: Arial, Helvetica, Sans-serif; /* Fallback font */
    display: flex;
	justify-content: center; /* Center direct children horizontally */
	align-items: center;   /* Center direct children horizontally */
	flex-direction: column; /* Stack direct children vertically */
    min-height: 100vh;
    padding-top: 80px; /* Add padding if top content is too close to edge */
    padding-bottom: 50px;
    width: 100%; /* Ensure body takes full width */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Base image styling */
img {
	max-width: 100%;
	height: auto;
    vertical-align: middle; /* Prevent small gaps below images */
}

/* Corner Decorations */
.top-right-decoration,
.top-left-decoration {
	position: absolute;
	top: 0;
	display: block;
    width: 150px; /* Adjust size */
    max-width: 25%; /* Max percentage */
    height: auto;
    z-index: 5; /* Keep above petals but below content potentially */
}
.top-right-decoration { right: 0; }
.top-left-decoration { left: 0; }

/* --- General Scroll Animation Setup --- */
.animate-on-scroll {
  opacity: 0; /* Start hidden */
  transform: translateY(25px); /* Start slightly lower */
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  transition-delay: 0.1s; /* Base delay */
}
/* State when element becomes visible */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
/* --- End Scroll Animation --- */


/* --- .title and its contents styling --- */
.title {
	margin-bottom: 15px;
    width: 100%;
    text-align: center;
}
.title h1 {
	font-family: 'Dancing Script', cursive;
	font-weight: bold;
	font-style: normal;
	font-size: clamp(40px, 8vw, 60px); /* Responsive font size */
	margin: 25px 0;
	color: #FF0000; /* Red color */
}
.title h2 {
	font-family: 'Dancing Script', cursive;
	font-weight: bold;
	font-style: normal;
	margin: 0;
	padding: 0;
	font-size: clamp(20px, 4vw, 24px);
	color: #e25c67;
	line-height: 1;
}
.title h3 {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size: clamp(18px, 3.5vw, 24px);
	color: #674ea7;
	margin-top: 5px;
    margin-bottom: 10px;
}
.title p {
	color: #564861;
	margin: 5px 0 0;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: clamp(12px, 2.5vw, 16px);
    line-height: 1.4;
}
/* --- End .title styles --- */


/* --- .wrap container styling --- */
.wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
    width: 100%;
    max-width: 960px;
    padding: 0 15px;
    position: relative;
    z-index: 2; /* Keep above background petals */
}
#ghibli-illustration {
	display: block;
	max-width: 60%;
	height: auto;
	margin: 20px auto;
}
/* --- End .wrap styles --- */


/* --- Action Button Styling --- */
.venue {
	width: auto;
	height: auto;
	background-color: #FF0000; /* Red */
	border-radius: 16px;
	text-align: center;
	color: #fff;
	padding: 8px 15px; /* Adjusted padding */
    display: inline-block;
    border: none;
    cursor: pointer;
    font-family: 'Arvo', serif;
    text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0pt;
    transition: background-color 0.3s ease; /* Hover effect */
}
.venue:hover {
    background-color: #CC0000; /* Darker red on hover */
}
.venue a { /* This rule seems incorrect, link is parent */
	text-decoration: none;
	color: #fff;
}
/* --- End .venue styles --- */

/* Action Buttons Container Styling */
.actions {
	display: flex;
	justify-content: center;
	align-items: center; /* Align items vertically */
	gap: 15px;
	margin-top: 25px;
	margin-bottom: 15px;
	width: 100%;
    flex-wrap: wrap; /* Allow buttons/icons to wrap */
}
/* --- End .actions styles --- */


/* Date/Place text styling */
.date, .place {
	color: #874562;
	font-weight: 900;
}


/* Dance-med text block */
.dance-med {
	font-family: 'Dancing Script', cursive;
	font-weight: bolder;
	font-style: normal;
	font-size: clamp(24px, 5vw, 32px);
	color: #674ea7;
	margin: 25px 16px;
	text-align: center;
    line-height: 1.6;
    max-width: 800px; /* Prevent text becoming too wide */
    padding: 0 15px;
}


/* Happiness text block */
.happiness {
	color: #874562;
	font-size: clamp(16px, 3.5vw, 20px);
	font-weight: bold;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 10px;
    line-height: 1.6;
    max-width: 800px;
    padding: 0 15px;
}

/* Event details text block */
.event-details {
	text-align: center;
	margin-top: 0px;
	margin-bottom: 25px;
	font-size: clamp(14px, 3vw, 16px);
	color: #564861;
	line-height: 1.5;
    max-width: 800px;
    padding: 0 15px;
}


/* --- Icon Styling (WhatsApp/Call) --- */
.whatsapp, .call-button {
    display: inline-block;
    animation: pulse 2s infinite ease-in-out;
    padding: 5px;
    vertical-align: middle;
    transition: color 0.3s ease;
}
.whatsapp { color: #25D366; }
.call-button { color: #FF0000; margin-left: 15px; }

.whatsapp:hover { color: #1EAE56; } /* Darker green */
.call-button:hover { color: #CC0000; } /* Darker red */

.whatsapp i.fa-whatsapp,
.call-button i.fa-phone {
    font-size: 28px;
}
/* --- End Icon Styling --- */


/* Music player - hidden */
.music { display: none; }


/* --- NEW Countdown Timer Styling --- */
#countdown {
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	font-family: Arial, sans-serif;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
    padding: 0 10px; /* Ensure some padding */
  }
.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}
.time-number {
    display: inline-block;
	padding: 8px 12px; /* Slightly more padding */
	background-color: #eee;
	border-radius: 5px;
    min-width: 45px; /* Adjusted width */
    text-align: center;
    font-size: clamp(20px, 5vw, 28px); /* Responsive font size */
    font-weight: bold;
    line-height: 1; /* Prevent extra space */
}
.time-label {
    margin-top: 5px; /* Increased space */
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 0.5px; /* Optional letter spacing */
}
.time-separator {
	margin: 0 3px;
	font-weight: bold;
    font-size: clamp(20px, 5vw, 28px); /* Match number size */
    padding-bottom: 14px; /* Adjust alignment */
    line-height: 1;
}
.completion-message.full-width {
    flex-basis: 100%;
    margin-top: 15px; /* Increased space */
    text-align: center;
	font-size: clamp(16px, 3.5vw, 18px);
	color: #874562;
}
/* Original completion message (if not full width) */
.completion-message {
	text-align: center;
	font-size: clamp(16px, 3.5vw, 18px);
	color: #874562;
}
/* --- End NEW Countdown Styles --- */


/* Proposal Image Styling */
#proposal-image {
	display: block;
	max-width: 70%;
	height: auto;
	margin: 30px auto;
    border-radius: 8px; /* Optional rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional subtle shadow */
}

/* Bless Button Styling (If used) */
#bless-button { /* Note: This button is not in the current index.html */
	border: none;
	cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 0;
	font-family: 'Arvo', serif;
	text-transform: uppercase;
	letter-spacing: 0pt;
	font-size: 12px;
    /* Needs .venue class for background/padding */
}


/* Site Footer Styling */
.site-footer {
	text-align: center;
	margin-top: 50px;
	margin-bottom: 30px;
	padding: 20px 15px; /* Added side padding */
	border-top: 1px solid #ccc;
	font-size: 14px;
	color: #555;
	line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
}
.site-footer a {
	color: #FF0000; /* Red link */
	text-decoration: none;
}
.site-footer a:hover {
	text-decoration: underline;
}
.site-footer b {
	font-weight: bold;
	color: #333;
}


/* General link styling */
a {
	text-decoration: none;
    color: inherit;
}