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

:root {
	--blush: #f9d6e0;
	--rose: #e8a0b4;
	--deep-rose: #c97b96;
	--cream: #fdf6f0;
	--gold: #c9a96e;
	--gold-light: #e8d5a3;
	--white: #ffffff;
	--soft-pink: #fce8ef;
	--pale: #fff9fb;
	--text-dark: #5a3a47;
	--text-mid: #8a5a6a;
	--text-light: #b07a8a;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #f5dde8;
	font-family: "Quicksand", sans-serif;
}

/* ═══════════════════════════════════════════
   BACKGROUND CANVAS
═══════════════════════════════════════════ */
#bg-canvas {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: linear-gradient(160deg, #fce8f0 0%, #fdf3f8 30%, #f8e8f5 60%, #fde8e0 100%);
}

.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.45;
	animation: orbFloat 12s ease-in-out infinite;
}
.orb1 {
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, #f9c8d8, transparent);
	top: -80px;
	left: -100px;
	animation-delay: 0s;
}
.orb2 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, #e8c8f0, transparent);
	top: 40%;
	right: -80px;
	animation-delay: -4s;
}
.orb3 {
	width: 350px;
	height: 350px;
	background: radial-gradient(circle, #fde0c8, transparent);
	bottom: -80px;
	left: 20%;
	animation-delay: -8s;
}

@keyframes orbFloat {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	33% {
		transform: translate(20px, -15px) scale(1.05);
	}
	66% {
		transform: translate(-15px, 10px) scale(0.97);
	}
}

/* ═══════════════════════════════════════════
   CLOUDS
═══════════════════════════════════════════ */
.cloud-layer {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
.cloud {
	position: absolute;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 50px;
	filter: blur(8px);
	animation: cloudDrift linear infinite;
}
.cloud::before,
.cloud::after {
	content: "";
	position: absolute;
	background: inherit;
	border-radius: 50%;
}
.c1 {
	width: 120px;
	height: 40px;
	top: 8%;
	left: -140px;
	animation-duration: 28s;
	animation-delay: 0s;
	opacity: 0.5;
}
.c1::before {
	width: 60px;
	height: 60px;
	top: -25px;
	left: 15px;
}
.c1::after {
	width: 45px;
	height: 45px;
	top: -18px;
	left: 50px;
}
.c2 {
	width: 90px;
	height: 30px;
	top: 15%;
	left: -110px;
	animation-duration: 35s;
	animation-delay: -10s;
	opacity: 0.35;
}
.c2::before {
	width: 40px;
	height: 40px;
	top: -18px;
	left: 10px;
}
.c2::after {
	width: 30px;
	height: 30px;
	top: -12px;
	left: 40px;
}
.c3 {
	width: 160px;
	height: 45px;
	top: 75%;
	left: -180px;
	animation-duration: 40s;
	animation-delay: -18s;
	opacity: 0.3;
}
.c3::before {
	width: 70px;
	height: 70px;
	top: -30px;
	left: 20px;
}
.c3::after {
	width: 55px;
	height: 55px;
	top: -22px;
	left: 70px;
}
.c4 {
	width: 100px;
	height: 32px;
	top: 60%;
	left: -120px;
	animation-duration: 32s;
	animation-delay: -5s;
	opacity: 0.4;
}
.c4::before {
	width: 45px;
	height: 45px;
	top: -20px;
	left: 12px;
}
.c4::after {
	width: 35px;
	height: 35px;
	top: -14px;
	left: 45px;
}

@keyframes cloudDrift {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(100vw + 220px));
	}
}

/* ═══════════════════════════════════════════
   PETALS
═══════════════════════════════════════════ */
.petal-layer {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}
.petal {
	position: absolute;
	top: -30px;
	width: 10px;
	height: 14px;
	border-radius: 50% 50% 50% 0;
	opacity: 0;
	animation: petalFall linear infinite;
}
@keyframes petalFall {
	0% {
		transform: translateY(-30px) rotate(0deg) translateX(0);
		opacity: 0;
	}
	5% {
		opacity: 0.7;
	}
	90% {
		opacity: 0.4;
	}
	100% {
		transform: translateY(110vh) rotate(720deg) translateX(60px);
		opacity: 0;
	}
}

/* ═══════════════════════════════════════════
   SPARKLES
═══════════════════════════════════════════ */
.sparkle-layer {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.sparkle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: var(--gold-light);
	border-radius: 50%;
	animation: sparkleTwinkle ease-in-out infinite;
	box-shadow: 0 0 6px 2px rgba(201, 169, 110, 0.6);
}
@keyframes sparkleTwinkle {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.5);
	}
	50% {
		opacity: 1;
		transform: scale(1.3);
	}
}

/* ═══════════════════════════════════════════
   FRAME / VIEWPORT
═══════════════════════════════════════════ */
#frame {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
#stage {
	position: relative;
	width: min(430px, 100vw);
	height: 100vh;
	overflow: hidden;
}

/* ═══════════════════════════════════════════
   SCENES
═══════════════════════════════════════════ */
.scene {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px 24px 90px;
	opacity: 0;
	transform: scale(1.04);
	transition:
		opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	text-align: center;
}
.scene.active {
	opacity: 1;
	transform: scale(1);
	pointer-events: all;
}
.scene.exit-left {
	opacity: 0;
	transform: scale(0.96) translateX(-30px);
}

/* ═══════════════════════════════════════════
   GLASSMORPHISM CARD
═══════════════════════════════════════════ */
.glass {
	background: rgba(255, 255, 255, 0.52);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 28px;
	box-shadow:
		0 8px 40px rgba(200, 130, 160, 0.18),
		0 2px 8px rgba(255, 255, 255, 0.6) inset;
}
.glass-sm {
	background: rgba(255, 255, 255, 0.45);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 18px;
	box-shadow: 0 4px 20px rgba(200, 130, 160, 0.12);
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
.script {
	font-family: "Great Vibes", cursive;
}
.serif {
	font-family: "Playfair Display", serif;
}
.sans {
	font-family: "Quicksand", sans-serif;
}

/* ═══════════════════════════════════════════
   ERROR SCREEN
═══════════════════════════════════════════ */
#error-screen {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: none;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #fce8f0, #fdf3f8, #f8e8f5);
}

#error-card {
	width: min(370px, 90vw);
	padding: 48px 36px 44px;
	text-align: center;
	position: relative;
}

.error-icon {
	font-size: 40px;
	margin-bottom: 12px;
	animation: floatGen 4s ease-in-out infinite;
}

.error-title {
	font-family: "Great Vibes", cursive;
	font-size: clamp(40px, 12vw, 56px);
	background: linear-gradient(135deg, #c97b96, #e8a0b4, #c9a96e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.3;
	padding: 0.1em 0.05em 0.1em;
}

.error-msg {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.8;
	margin: 12px auto 0;
	max-width: 260px;
}

.error-hint {
	font-family: "Quicksand", sans-serif;
	font-size: 11px;
	color: var(--text-light);
	margin-top: 20px;
	letter-spacing: 1px;
}

/* ═══════════════════════════════════════════
   INTRO OVERLAY
═══════════════════════════════════════════ */
#intro {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #fce8f0, #fdf3f8, #f8e8f5);
	transition:
		opacity 1.2s ease,
		transform 1.2s ease;
}
#intro.hidden {
	opacity: 0;
	pointer-events: none;
	transform: scale(1.05);
}

#intro-card {
	width: min(370px, 90vw);
	padding: 48px 36px 44px;
	text-align: center;
	position: relative;
}

.intro-eyebrow {
	font-family: "Quicksand", sans-serif;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--deep-rose);
	margin-bottom: 40px;
	opacity: 0;
	animation: fadeUp 1s 0.3s forwards;
}

.intro-name {
	font-family: "Great Vibes", cursive;
	font-size: clamp(44px, 12vw, 60px);
	background: linear-gradient(135deg, #c97b96, #e8a0b4, #c9a96e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-top: 20px;
	animation: floatGen 6s ease-in-out infinite;
}

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

.bow-intro {
	position: absolute;
	top: -36px;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 50px;
	opacity: 0;
	animation: fadeUp 1s 0.2s forwards;
}

.divider {
	width: 80px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	margin: 16px auto;
}

#enter-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 40px;
	background: linear-gradient(135deg, #e8a0b4, #c97b96);
	color: white;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 1px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow:
		0 8px 30px rgba(201, 123, 150, 0.4),
		0 2px 6px rgba(255, 255, 255, 0.3) inset;
	transition:
		transform 0.2s,
		box-shadow 0.2s;
	opacity: 0;
	animation: fadeUp 1s 1.4s forwards;
}
#enter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(201, 123, 150, 0.5);
}
#enter-btn:active {
	transform: scale(0.97);
}

/* ═══════════════════════════════════════════
   SCENE 1 — OPENING
═══════════════════════════════════════════ */

.portrait-frame {
	width: 160px;
	height: 190px;
	border-radius: 80px 80px 60px 60px;
	background: linear-gradient(160deg, #fce8ef, #fdf0f5);
	border: 3px solid rgba(255, 255, 255, 0.9);
	box-shadow:
		0 12px 40px rgba(200, 130, 160, 0.3),
		0 0 0 6px rgba(255, 255, 255, 0.5),
		0 0 0 10px rgba(233, 160, 180, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	position: relative;
	overflow: hidden;
	animation: floatPhoto 5s ease-in-out infinite;
}
.portrait-frame img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.portrait-baby {
	font-size: 80px;
	line-height: 1;
	filter: drop-shadow(0 4px 8px rgba(200, 130, 160, 0.3));
}
.portrait-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
	border-radius: inherit;
}

@keyframes floatPhoto {
	0%,
	100% {
		transform: translateY(0) rotate(-1deg);
	}
	50% {
		transform: translateY(-10px) rotate(1deg);
	}
}
@keyframes floatGen {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

/* ═══════════════════════════════════════════
   SCENE 2 — LETTER
═══════════════════════════════════════════ */
.letter-card {
	width: 100%;
	max-width: 360px;
	padding: 32px 28px;
	text-align: left;
	position: relative;
}
.letter-dear {
	font-family: "Great Vibes", cursive;
	font-size: 30px;
	color: var(--deep-rose);
	margin-bottom: 16px;
}
.letter-body {
	font-family: "Playfair Display", serif;
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.9;
}
.letter-body .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 0.35s ease,
		transform 0.35s ease;
	margin-right: 3px;
}
.letter-body .word.visible {
	opacity: 1;
	transform: translateY(0);
}
.letter-corner {
	position: absolute;
	font-size: 28px;
	opacity: 0.35;
}
.lc-tl {
	top: 10px;
	left: 14px;
}
.lc-br {
	bottom: 10px;
	right: 14px;
	transform: rotate(180deg);
}

/* ═══════════════════════════════════════════
   SCENE 3 — MEMORIES
═══════════════════════════════════════════ */
.memories-title {
	font-family: "Great Vibes", cursive;
	font-size: clamp(36px, 10vw, 48px);
	background: linear-gradient(135deg, #c97b96, #c9a96e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 20px;
	line-height: 1.4;
	padding: 0.1em 0.2em 0.25em;
}
.polaroids {
	display: flex;
	gap: 14px;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: nowrap;
}
.polaroid {
	background: white;
	border-radius: 8px;
	padding: 10px 10px 28px;
	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.12),
		0 2px 6px rgba(200, 130, 160, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}
.polaroid:nth-child(1) {
	transform: rotate(-6deg);
	animation: swingPol1 4s ease-in-out infinite;
	width: 100px;
}
.polaroid:nth-child(2) {
	transform: rotate(2deg);
	animation: swingPol2 5s ease-in-out infinite;
	width: 110px;
}
.polaroid:nth-child(3) {
	transform: rotate(-4deg);
	animation: swingPol3 4.5s ease-in-out infinite;
	width: 95px;
}

@keyframes swingPol1 {
	0%,
	100% {
		transform: rotate(-6deg) translateY(0);
	}
	50% {
		transform: rotate(-4deg) translateY(-8px);
	}
}
@keyframes swingPol2 {
	0%,
	100% {
		transform: rotate(2deg) translateY(0);
	}
	50% {
		transform: rotate(4deg) translateY(-12px);
	}
}
@keyframes swingPol3 {
	0%,
	100% {
		transform: rotate(-4deg) translateY(0);
	}
	50% {
		transform: rotate(-2deg) translateY(-6px);
	}
}

.pol-img {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 4px;
	background: linear-gradient(135deg, #fce8ef, #fde8f5, #f8e8d5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	overflow: hidden;
}
.pol-label {
	font-family: "Quicksand", sans-serif;
	font-size: 10px;
	color: var(--text-light);
	margin-top: 6px;
	text-align: center;
}

/* ═══════════════════════════════════════════
   SCENE 4 — EVENT DETAILS
═══════════════════════════════════════════ */
.details-title {
	font-family: "Great Vibes", cursive;
	font-size: clamp(32px, 9vw, 44px);
	background: linear-gradient(135deg, #c97b96, #c9a96e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 18px;
	line-height: 1.4;
	padding: 0.1em 0.1em 0.25em;
}
.detail-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
	max-width: 360px;
}
.detail-card {
	padding: 16px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.detail-card.wide {
	grid-column: 1 / -1;
}
a.detail-card--link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}
a.detail-card--link:hover,
a.detail-card--link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(200, 130, 160, 0.22);
	outline: none;
}
.map-hint {
	font-size: 9px;
	color: var(--rose);
	opacity: 0.75;
	font-weight: 500;
	letter-spacing: 1px;
}
.detail-icon {
	font-size: 22px;
}
.detail-label {
	font-family: "Quicksand", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--gold);
}
.detail-value {
	font-family: "Playfair Display", serif;
	font-size: 13px;
	color: var(--text-dark);
	line-height: 1.5;
}

/* ═══════════════════════════════════════════
   SCENE 5 — ENDING
═══════════════════════════════════════════ */
.ending-big {
	font-family: "Great Vibes", cursive;
	font-size: clamp(36px, 10vw, 50px);
	background: linear-gradient(135deg, #c97b96, #e8a0b4, #c9a96e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	line-height: 1.4;
	padding: 0.1em 0.05em 0.25em;
	margin-bottom: 8px;
}
.ending-msg {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 14px;
	color: var(--text-mid);
	line-height: 1.8;
	max-width: 300px;
	margin: 0 auto 24px;
}
.rsvp-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 44px;
	background: linear-gradient(135deg, #e8a0b4, #c97b96);
	color: white;
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 8px 30px rgba(201, 123, 150, 0.45);
	transition:
		transform 0.2s,
		box-shadow 0.2s;
	animation: pulseBtn 3s ease-in-out infinite;
}
@keyframes pulseBtn {
	0%,
	100% {
		box-shadow: 0 8px 30px rgba(201, 123, 150, 0.45);
	}
	50% {
		box-shadow:
			0 8px 45px rgba(201, 123, 150, 0.7),
			0 0 0 6px rgba(201, 123, 150, 0.15);
	}
}
.rsvp-btn:hover {
	transform: translateY(-2px);
}
.rsvp-instruction {
	font-family: "Quicksand", sans-serif;
	font-size: 14px;
	color: var(--text-mid);
	text-align: center;
	margin: 12px auto 0;
	line-height: 1.6;
	max-width: 260px;
}
.rsvp-arrow {
	font-size: 28px;
	color: var(--rose);
	text-align: center;
	margin-top: 6px;
	animation: bounceArrow 1.2s ease-in-out infinite;
}
@keyframes bounceArrow {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(8px); opacity: 0.5; }
}

/* ═══════════════════════════════════════════
   NAV BUTTONS
═══════════════════════════════════════════ */
#nav-bar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(430px, 100vw);
	padding: 0 24px 28px;
	display: flex;
	gap: 12px;
	justify-content: center;
	z-index: 50;
	pointer-events: none;
}
.nav-btn {
	padding: 13px 28px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50px;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--text-dark);
	cursor: pointer;
	pointer-events: all;
	transition: all 0.2s;
	box-shadow: 0 4px 20px rgba(200, 130, 160, 0.2);
}
.nav-btn:hover {
	background: rgba(255, 255, 255, 0.8);
	transform: translateY(-1px);
}
.nav-btn.primary {
	background: linear-gradient(135deg, #e8a0b4, #c97b96);
	color: white;
	border-color: transparent;
	box-shadow: 0 4px 20px rgba(201, 123, 150, 0.4);
}
#prev-btn {
	min-width: 90px;
}
#next-btn {
	min-width: 120px;
}

/* Progress dots */
#dots {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 7px;
	z-index: 50;
}
.dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(201, 123, 150, 0.25);
	transition: all 0.3s;
}
.dot.active {
	background: var(--deep-rose);
	width: 18px;
	border-radius: 3px;
}

/* ═══════════════════════════════════════════
   RSVP MODAL
═══════════════════════════════════════════ */
#modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(90, 58, 71, 0.35);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}
#modal-overlay.open {
	opacity: 1;
	pointer-events: all;
}
#modal {
	width: min(340px, 88vw);
	padding: 40px 32px;
	text-align: center;
	transform: scale(0.88) translateY(20px);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#modal-overlay.open #modal {
	transform: scale(1) translateY(0);
}
.modal-title {
	font-family: "Great Vibes", cursive;
	font-size: 36px;
	color: var(--text-dark);
	margin-bottom: 8px;
}
.modal-sub {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 13px;
	color: var(--text-mid);
	margin-bottom: 28px;
	line-height: 1.7;
}
.modal-btns {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.modal-yes {
	padding: 15px;
	border-radius: 50px;
	background: linear-gradient(135deg, #e8a0b4, #c97b96);
	color: white;
	border: none;
	font-family: "Quicksand", sans-serif;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	letter-spacing: 0.5px;
	box-shadow: 0 6px 24px rgba(201, 123, 150, 0.4);
	transition: transform 0.2s;
}
.modal-yes:hover {
	transform: translateY(-1px);
}
.modal-no {
	padding: 14px;
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(201, 123, 150, 0.3);
	color: var(--text-mid);
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: all 0.2s;
}
.modal-no:hover {
	background: rgba(255, 255, 255, 0.7);
}
#modal-close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--text-light);
	line-height: 1;
}
.modal-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(253, 246, 240, 0.88);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	backdrop-filter: blur(2px);
}
.modal-loading.active {
	opacity: 1;
	pointer-events: all;
}
.spinner {
	width: 38px;
	height: 38px;
	border: 3px solid var(--blush);
	border-top-color: var(--deep-rose);
	border-radius: 50%;
	animation: spin 0.75s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   CORNER BOWS (decorative)
═══════════════════════════════════════════ */
.corner-bow {
	position: fixed;
	font-size: 28px;
	z-index: 3;
	animation: bowFloat 4s ease-in-out infinite;
	filter: drop-shadow(0 2px 6px rgba(201, 123, 150, 0.4));
	opacity: 0.65;
}
@keyframes bowFloat {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-6px) rotate(5deg);
	}
}
.cb-tl {
	top: 14px;
	left: 14px;
	animation-delay: 0s;
}
.cb-tr {
	top: 14px;
	right: 14px;
	animation-delay: -1.5s;
	transform-origin: center;
}
.cb-bl {
	bottom: 70px;
	left: 14px;
	animation-delay: -0.7s;
}
.cb-br {
	bottom: 70px;
	right: 14px;
	animation-delay: -2.2s;
}

.teddy {
	position: fixed;
	bottom: 70px;
	right: 18px;
	z-index: 3;
	font-size: 32px;
	animation: teddyBounce 5s ease-in-out infinite;
	filter: drop-shadow(0 3px 8px rgba(200, 130, 160, 0.4));
	opacity: 0.8;
}
@keyframes teddyBounce {
	0%,
	100% {
		transform: translateY(0) rotate(-5deg);
	}
	50% {
		transform: translateY(-8px) rotate(5deg);
	}
}

.floral-bar {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(430px, 100vw);
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	letter-spacing: 8px;
	z-index: 3;
	pointer-events: none;
	opacity: 0.35;
}

/* ═══════════════════════════════════════════
   THANK YOU MESSAGE
═══════════════════════════════════════════ */
#ty-msg {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(90, 58, 71, 0.35);
	backdrop-filter: blur(10px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}
#ty-msg.show {
	opacity: 1;
	pointer-events: all;
}
.ty-card {
	width: min(340px, 88vw);
	padding: 40px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	transform: scale(0.88) translateY(20px);
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#ty-msg.show .ty-card {
	transform: scale(1) translateY(0);
}
.ty-emoji {
	font-size: 48px;
	animation: floatGen 3s ease-in-out infinite;
}
.ty-text {
	font-family: "Great Vibes", cursive;
	font-size: 40px;
	color: var(--text-dark);
}
.ty-sub {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 14px;
	color: var(--text-mid);
}
.ty-close {
	margin-top: 10px;
	padding: 12px 32px;
	border-radius: 50px;
	background: linear-gradient(135deg, #e8a0b4, #c97b96);
	color: white;
	border: none;
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(201, 123, 150, 0.4);
}

/* Ribbon accents */
.ribbon-accent {
	position: absolute;
	width: 2px;
	height: 40px;
	background: linear-gradient(180deg, transparent, var(--rose), transparent);
	border-radius: 1px;
	opacity: 0.5;
}

/* ═══════════════════════════════════════════
   AUTOPLAY BAR
═══════════════════════════════════════════ */
#autoplay-bar {
	position: fixed;
	top: 42px;
	left: 50%;
	transform: translateX(-50%);
	width: min(200px, 60vw);
	height: 2px;
	background: rgba(201, 123, 150, 0.15);
	border-radius: 1px;
	z-index: 50;
	overflow: hidden;
}
#autoplay-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--rose), var(--gold));
	width: 0%;
	border-radius: 1px;
	transition: width linear;
}

/* ═══════════════════════════════════════════
   AUDIO BUTTON
═══════════════════════════════════════════ */
#audio-btn {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 60;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	box-shadow: 0 2px 12px rgba(200, 130, 160, 0.2);
	transition: transform 0.2s;
}
#audio-btn:hover {
	transform: scale(1.1);
}

/* ═══════════════════════════════════════════
   RSVP RESPONDENTS PANEL
═══════════════════════════════════════════ */
#rsvp-list {
	width: min(340px, 90vw);
	max-height: 160px;
	overflow-y: auto;
	margin-top: 4px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 16px;
	backdrop-filter: blur(8px);
}
.rsvp-list-title {
	font-family: "Quicksand", sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-mid);
	margin: 0 0 8px;
}
.rsvp-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: "Quicksand", sans-serif;
	font-size: 13px;
	color: var(--text-dark);
	padding: 5px 0;
	border-bottom: 1px solid rgba(201, 123, 150, 0.12);
}
.rsvp-item:last-child {
	border-bottom: none;
}
.rsvp-item-status {
	font-size: 12px;
	color: var(--text-mid);
}