/* Premium 2026 Birthday Theme - Rose & Champagne */

:root {
	--rose-base: #fff9f9;
	--rose-primary: #e11d48;
	--rose-soft: #ffe4e6;
	--slate-800: #1e293b;
}

/* Fix Overflow & Performance */
html, body {
	overflow-x: hidden;
	width: 100%;
	position: relative;
	background-color: var(--rose-base);
}

.font-serif {
	font-family: 'Cormorant Garamond', serif;
}

.font-sans {
	font-family: 'Montserrat', sans-serif;
}

/* GPU Accelerated Animations */
@keyframes soft-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(2%, 5%, 0); }
}

.animate-soft-float {
	animation: soft-float 20s infinite ease-in-out;
	will-change: transform;
}

.animate-soft-float-delayed {
	animation: soft-float 25s infinite ease-in-out reverse;
	animation-delay: -5s;
	will-change: transform;
}

@keyframes fade-in {
	from { opacity: 0; transform: translate3d(0, 20px, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.animate-fade-in {
	animation: fade-in 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.animate-pulse-slow {
	animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
}

/* Refined Cake & Candle */
#cake {
	display: block;
	position: relative;
	margin: -10em auto 0 auto;
}

.velas {
	background: #ffffff;
	border-radius: 10px;
	position: absolute;
	top: 300px;
	left: 50%;
	margin-left: -2.4px;
	margin-top: -8.33333333px;
	width: 5px;
	height: 35px;
	transform: translateY(-300px);
	backface-visibility: hidden;
	animation: in 500ms 6s ease-out forwards;
}

.velas:after,
.velas:before {
	background: rgba(255, 0, 0, 0.4);
	content: '';
	position: absolute;
	width: 100%;
	height: 2.22222222px;
}

.velas:after {
	top: 25%;
	left: 0;
}

.velas:before {
	top: 45%;
	left: 0;
}

.fuego {
	border-radius: 100%;
	position: absolute;
	top: -20px;
	left: 50%;
	margin-left: -2.6px;
	width: 6.66666667px;
	height: 18px;
}

.fuego:nth-child(1) {
	animation: fuego 2s 6.5s infinite;
}

.fuego:nth-child(2) {
	animation: fuego 1.5s 6.5s infinite;
}

.fuego:nth-child(3) {
	animation: fuego 1s 6.5s infinite;
}

.fuego:nth-child(4) {
	animation: fuego 0.5s 6.5s infinite;
}

.fuego:nth-child(5) {
	animation: fuego 0.2s 6.5s infinite;
}

@keyframes fuego {
	0%,
	100% {
		background: rgba(254, 248, 97, 0.5);
		box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
		transform: translateY(0) scale(1);
	}
	50% {
		background: rgba(255, 50, 0, 0.1);
		box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
		transform: translateY(-20px) scale(0);
	}
}

@keyframes in {
	to {
		transform: translateY(0);
	}
}

/* Masonry Grid Simulation with Tailwind columns */
#image-grid button {
	display: block;
	width: 100%;
	background: white;
	padding: 8px;
	border-radius: 1.5rem;
	box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#image-grid button:hover {
	transform: translate3d(0, -10px, 0);
	box-shadow: 0 20px 40px -15px rgba(225, 29, 72, 0.15);
}

#image-grid img {
	width: 100%;
	height: auto;
	border-radius: 1rem;
	display: block;
}

/* Modal Performance */
.modal:not(.hidden) #modal-content {
	opacity: 1;
	transform: scale(1);
}

/* Confetti Performance */
@keyframes confetti-fall {
	0% { transform: translate3d(0, -10vh, 0) rotate(0); opacity: 0; }
	10% { opacity: 0.8; }
	90% { opacity: 0.8; }
	100% { transform: translate3d(0, 110vh, 0) rotate(360deg); opacity: 0; }
}

.confetti-particle {
	will-change: transform;
	pointer-events: none;
}