/* Birthday Celebration Page — night-sky theme
   Palette: sky #0d1033/#1b1147 · gold #ffd66b · pink #ff7ac3 · cyan #5fd4ff · cream #fff8ef */

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

html, body { height: 100%; }

body {
	font-family: "Nunito Sans", system-ui, sans-serif;
	color: #fff8ef;
	background: radial-gradient(120% 90% at 50% 110%, #2a1a5e 0%, #1b1147 45%, #0d1033 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#bday-sky {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* ---------- Stage ---------- */
.stage {
	position: relative;
	z-index: 3;
	width: min(92vw, 680px);
	padding: 48px 28px;
	border-radius: 28px;
	background: rgba(255, 248, 239, 0.06);
	border: 1px solid rgba(255, 248, 239, 0.16);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	animation: rise 1.2s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes rise {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: none; }
}

.eyebrow {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #ffd66b;
}

.name {
	font-family: "Fraunces", serif;
	font-weight: 500;
	font-size: clamp(30px, 6vw, 52px);
	line-height: 1.12;
	margin-top: 14px;
}

.name span {
	display: inline-block;
	font-weight: 900;
	font-size: clamp(44px, 9vw, 84px);
	background: linear-gradient(100deg, #ffd66b 10%, #ff7ac3 55%, #5fd4ff 95%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 6px 24px rgba(255, 122, 195, 0.35));
}

.message {
	max-width: 52ch;
	margin: 22px auto 6px;
	font-size: clamp(15px, 2.4vw, 18px);
	line-height: 1.75;
	color: rgba(255, 248, 239, 0.85);
}

/* ---------- Cake (signature) ---------- */
.cake {
	position: relative;
	display: block;
	margin: 34px auto 8px;
	width: 190px;
	height: 150px;
	background: none;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cake .hint {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(255, 248, 239, 0.55);
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: .95 } }

.tier {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 10px;
}

.tier-base {
	bottom: 12px; width: 170px; height: 52px;
	background: linear-gradient(#ff7ac3, #e05aa5);
	box-shadow: inset 0 -10px 0 rgba(0,0,0,.12);
}
.tier-mid {
	bottom: 58px; width: 130px; height: 42px;
	background: linear-gradient(#fff2dd, #f4d9b8);
	box-shadow: inset 0 -8px 0 rgba(0,0,0,.06);
}
.tier-top {
	bottom: 94px; width: 92px; height: 34px;
	background: linear-gradient(#9d8bff, #7b66e8);
	box-shadow: inset 0 -6px 0 rgba(0,0,0,.14);
}

/* drip icing on each tier */
.tier::after {
	content: "";
	position: absolute;
	top: -2px; left: 0; right: 0; height: 12px;
	background:
		radial-gradient(circle at 12% 0, #fff8ef 7px, transparent 8px),
		radial-gradient(circle at 34% 0, #fff8ef 9px, transparent 10px),
		radial-gradient(circle at 57% 0, #fff8ef 7px, transparent 8px),
		radial-gradient(circle at 80% 0, #fff8ef 9px, transparent 10px);
	border-radius: 10px 10px 0 0;
}

.plate {
	position: absolute;
	bottom: 0; left: 50%; transform: translateX(-50%);
	width: 186px; height: 14px;
	border-radius: 999px;
	background: rgba(255, 248, 239, 0.22);
}

.candles {
	position: absolute;
	bottom: 126px; left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 18px;
	z-index: 2;
}

.candle {
	position: relative;
	width: 7px; height: 26px;
	border-radius: 3px;
	background: repeating-linear-gradient(135deg, #5fd4ff 0 5px, #fff8ef 5px 10px);
}

.flame {
	position: absolute;
	left: 50%; top: -16px;
	width: 12px; height: 16px;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 75%, #fff8ef 0%, #ffd66b 45%, #ff9d3f 80%, transparent 100%);
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	box-shadow: 0 0 18px 6px rgba(255, 214, 107, 0.45);
	transform-origin: 50% 100%;
	animation: flicker .28s ease-in-out infinite alternate;
	transition: opacity .3s, transform .3s;
}

@keyframes flicker {
	from { transform: translateX(-50%) scale(1) rotate(-3deg); }
	to   { transform: translateX(-52%) scale(.86) rotate(4deg); }
}

.cake.blown .flame { opacity: 0; transform: translateX(-50%) scale(.2); animation: none; }
.cake.blown .hint  { opacity: 0; animation: none; transition: opacity .4s; }

/* smoke after blowing out */
.candle::after {
	content: "";
	position: absolute;
	left: 50%; top: -14px;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: rgba(255, 248, 239, 0.6);
	opacity: 0;
	transform: translateX(-50%);
}
.cake.blown .candle::after { animation: smoke 1.6s ease-out forwards; }

@keyframes smoke {
	0%   { opacity: .8; transform: translate(-50%, 0) scale(1); }
	100% { opacity: 0;  transform: translate(-50%, -46px) scale(3); }
}

/* ---------- Enter button ---------- */
.enter {
	display: inline-block;
	margin-top: 26px;
	padding: 16px 42px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #1b1147;
	background: linear-gradient(100deg, #ffd66b, #ffb64d);
	box-shadow: 0 12px 34px rgba(255, 182, 77, 0.35);
	transition: transform .25s, box-shadow .25s;
}

.enter:hover,
.enter:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px rgba(255, 182, 77, 0.5);
}

.enter:focus-visible,
.cake:focus-visible,
.mute:focus-visible {
	outline: 3px solid #5fd4ff;
	outline-offset: 3px;
}

/* ---------- Balloons ---------- */
.balloons { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }

.balloon {
	position: absolute;
	left: var(--x);
	bottom: -200px;
	width: 58px; height: 74px;
	border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0 10px, transparent 12px), var(--c);
	opacity: .85;
	animation: floatUp var(--d) linear infinite;
}

.balloon::after {
	content: "";
	position: absolute;
	left: 50%; top: 100%;
	width: 1.5px; height: 90px;
	background: rgba(255, 248, 239, 0.5);
}

@keyframes floatUp {
	0%   { transform: translateY(0) rotate(-3deg); }
	50%  { transform: translateY(-60vh) rotate(4deg); }
	100% { transform: translateY(-130vh) rotate(-3deg); }
}

/* ---------- Music button ---------- */
.mute {
	position: fixed;
	right: 18px; bottom: 18px;
	z-index: 4;
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(255, 248, 239, 0.25);
	background: rgba(255, 248, 239, 0.1);
	backdrop-filter: blur(8px);
	font-size: 22px;
	cursor: pointer;
	transition: transform .2s;
}
.mute:hover { transform: scale(1.08); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.stage, .balloon, .flame, .hint { animation: none !important; }
	#bday-sky { display: none; }
}

@media (max-width: 480px) {
	.stage { padding: 38px 18px; }
	.cake { transform: scale(.85); margin-top: 24px; }
}