/* Custom styles for background image and overlay */
body {
	font-family: "Inter", sans-serif;
	background-color: #fdf9f3;
	/* Light cream background */
	min-height: 100vh; /* Ensure body takes at least full viewport height */
	height: auto; /* Allow body to expand with content */
	display: flex; /* Use flexbox for centering */
	flex-direction: column; /* Stack children vertically */
	align-items: center; /* Center horizontally */
	justify-content: center; /* Center vertically */
	/* Removed overflow: hidden; to allow scrolling */
	position: relative; /* Needed for absolute positioning of overlay */

	/* Background image moved to body and fixed for scrolling effect */
	background-image: url("assets/images/background/bg.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed; /* Makes the background fixed while content scrolls */
	filter: brightness(0.7) contrast(1.2);
	/* Slightly darken and increase contrast more for background */
}

.overlay {
	/* Enhanced radial gradient for a more premium, deep overlay effect */
	/* Darker edges */
	position: fixed; /* Changed to fixed to cover the entire viewport regardless of scroll */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; /* Place behind the content but above the background image */
}

/* Custom fade-in animation for the main content block */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in {
	animation: fadeIn 1.5s ease-out forwards; /* Slightly longer animation duration for smoother entry */
}

/* Main content box styling */
main {
	/* Refined backdrop filter for a more prominent frosted glass effect */
	backdrop-filter: blur(20px) saturate(1.8) contrast(1.2); /* Increased blur and saturation */
	background-color: rgba(
		255,
		255,
		255,
		0.05
	); /* Even more subtle white opacity */
	border: 1px solid rgba(255, 255, 255, 0.15); /* Softer, subtle white border */
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3); /* More pronounced, deeper shadow */
	padding: 3rem; /* Increased padding for more breathing room */
	border-radius: 2rem; /* More rounded corners */
	animation: pulseBorder 3s infinite alternate; /* Subtle pulsing border animation */
	margin: auto; /* Ensures main is centered within the flex body */
	max-width: 90%; /* Ensure it doesn't stretch too wide on very large screens */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	background-image: radial-gradient(
		circle at center,
		rgba(0, 0, 0, 0.4) 0%,
		rgba(0, 0, 0, 0.9) 100%
	);
	margin-top: 5rem;
	margin-bottom: 5rem;
}

@keyframes pulseBorder {
	0% {
		border-color: rgba(255, 255, 255, 0.15);
	}
	100% {
		border-color: rgba(255, 255, 255, 0.3);
	}
}

/* Text styling */
h1 {
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Deeper text shadow for main heading */
	letter-spacing: 0.05em; /* Slightly increased letter spacing for premium look */
	/* New animation for h1 text */
	animation: textSlideInUp 1s ease-out forwards 0.5s; /* Slide up with a delay */
	opacity: 0; /* Start hidden for animation */
	text-align: center; /* Ensure h1 content is centered */
}

@keyframes textSlideInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

h1 span:first-child {
	color: #fff; /* Ensure main text is pure white */
	font-size: 3.5rem; /* Larger "Brewing Soon!" */
	line-height: 1.2;
}

h1 span:last-child {
	color: #ffd700; /* Gold-like color for cafe name */
	font-size: 2.8rem; /* Adjusted size for cafe name */
	font-weight: 600; /* Slightly bolder */
	letter-spacing: 0.1em; /* More prominent letter spacing */
}

p {
	color: rgba(
		255,
		255,
		255,
		0.9
	); /* Brighter text for better readability on frosted background */
	line-height: 1.6; /* Improved line height */
	text-align: center; /* Ensure paragraph content is centered */
}

/* Logo styling */
.logo-style {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.5rem; /* Increased margin-bottom */
	width: 9rem; /* Slightly larger logo */
	height: 9rem; /* Slightly larger logo */
	object-fit: cover; /* Ensures the image covers the area without distortion */
	border-radius: 25%; /* Keeps the square shape with rounded corners */
	box-shadow: 0 0 25px rgba(251, 190, 36, 0.8), 0 0 15px rgba(0, 0, 0, 0.4); /* Stronger glowing amber shadow */
	border-width: 5px; /* Slightly thicker border */
	border-color: #fbbf24; /* Amber border color */
	transition: transform 0.3s ease-in-out; /* Smooth transition for hover */
	/* New animation for logo */
	animation: logoScaleIn 1s ease-out forwards; /* Scale in animation */
	opacity: 0; /* Start hidden for animation */
	display: block; /* Explicitly set to block for reliable centering with margin: auto */
}

@keyframes logoScaleIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.logo-style:hover {
	transform: scale(1.05) rotate(5deg); /* Subtle rotate on hover */
}

/* Responsive adjustments for logo */
@media (min-width: 768px) {
	/* Equivalent to Tailwind's md: breakpoint */
	.logo-style {
		width: 12rem; /* Larger logo on desktop */
		height: 12rem; /* Larger logo on desktop */
	}
	h1 span:first-child {
		font-size: 5rem; /* Larger "Brewing Soon!" on desktop */
	}
	h1 span:last-child {
		font-size: 3.5rem; /* Larger cafe name on desktop */
	}
}

/* Button styling */
a.bg-amber-500 {
	background-color: #fbbf24; /* Amber color */
	padding: 0.8rem 2.5rem; /* More padding for a bolder button */
	font-size: 1.1rem; /* Slightly larger font */
	box-shadow: 0 6px 15px rgba(251, 190, 36, 0.5); /* Stronger glow shadow for button */
	transition: all 0.3s ease-in-out; /* Smooth transition */
}

a.bg-amber-500:hover {
	background-color: #e6a700; /* Darker amber on hover */
	transform: scale(1.1); /* More pronounced hover effect */
	box-shadow: 0 8px 20px rgba(251, 190, 36, 0.7); /* Even stronger shadow on hover */
}

/* Social media icons container */
.flex.space-x-6 {
	display: flex; /* Ensure it's a flex container */
	justify-content: center; /* Explicitly center its content */
	/* space-x-6 is a Tailwind class, so we are just adding to its flex properties */
}

/* Social media icons */
.flex.space-x-6 a svg {
	width: 2rem; /* Adjusted Instagram logo size (slightly smaller for better proportion) */
	height: 2rem; /* Adjusted Instagram logo size */
	filter: drop-shadow(
		0 3px 6px rgba(0, 0, 0, 0.5)
	); /* More pronounced shadow for icons */
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Smooth transitions */
}

.flex.space-x-6 a:hover svg {
	transform: translateY(-5px) scale(1.1); /* Lift and slightly enlarge on hover */
	filter: drop-shadow(
		0 5px 10px rgba(251, 190, 36, 0.7)
	); /* Glowing effect on hover */
}