/* ═══════════════════════════════════════════════════════════════════════════════
   MASTER LEVEL VALENTINE'S WEBSITE - GOD TIER CSS
   Premium Animations, Effects & Visual Excellence
   ═══════════════════════════════════════════════════════════════════════════════ */

/* CSS Variables for Theme */
:root {
	--primary-pink: #ff1493;
	--secondary-pink: #ff69b4;
	--light-pink: #ffb6c1;
	--pale-pink: #ffc0cb;
	--deep-pink: #c71585;
	--hot-pink: #ff0066;
	--rose-red: #dc143c;
	--gold: #ffd700;
	--cream: #fff8dc;
	--white: #ffffff;
	--shadow-soft: 0 10px 40px rgba(255, 20, 147, 0.3);
	--shadow-glow: 0 0 60px rgba(255, 105, 180, 0.5);
	--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	--gradient-main: linear-gradient(
		135deg,
		#ffc0cb 0%,
		#ffb6c1 25%,
		#ff69b4 50%,
		#ff1493 100%
	);
	--gradient-romantic: linear-gradient(
		135deg,
		#ff1493 0%,
		#ff69b4 50%,
		#ffb6c1 100%
	);
}

/* Reset & Base */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body {
	font-family: "Poppins", sans-serif;
	background: var(--gradient-main);
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PARTICLE CANVAS BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════════ */
#particles-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* Hide particle canvas on mobile */
@media (max-width: 768px) {
	#particles-canvas {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLOATING HEARTS CONTAINER
   ═══════════════════════════════════════════════════════════════════════════════ */
#floating-hearts-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

/* Hide floating hearts on mobile */
@media (max-width: 768px) {
	#floating-hearts-container {
		display: none;
	}
}

.floating-heart {
	position: absolute;
	font-size: 20px;
	animation: float-heart-up 6s ease-out forwards;
	opacity: 0.8;
	filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.5));
}

@keyframes float-heart-up {
	0% {
		transform: translateY(100vh) rotate(0deg) scale(0.5);
		opacity: 0;
	}
	10% {
		opacity: 0.8;
	}
	90% {
		opacity: 0.8;
	}
	100% {
		transform: translateY(-100px) rotate(360deg) scale(1.2);
		opacity: 0;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MAIN CONTAINER & SCREENS
   ═══════════════════════════════════════════════════════════════════════════════ */
.main-container {
	position: relative;
	z-index: 10;
	min-height: 100vh;
}

.screen {
	display: none;
	min-height: 100vh;
	width: 100%;
	position: relative;
	padding: 20px;
	animation: screen-enter 0.6s ease-out;
}

.screen.active {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

@keyframes screen-enter {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 0: PASSWORD UNLOCK
   ═══════════════════════════════════════════════════════════════════════════════ */
#screen-password {
	overflow: hidden;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
}

.password-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	max-width: 500px;
	text-align: center;
}

.password-hearts-top {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 20px;
}

.ph-top {
	font-size: 28px;
	animation: float-text 3s ease-in-out infinite;
}

.ph-top.ph-1 {
	animation-delay: 0s;
}

.ph-top.ph-2 {
	animation-delay: 0.2s;
}

.ph-top.ph-3 {
	animation-delay: 0.4s;
}

.lock-icon {
	font-size: 80px;
	animation: lock-bounce 2s ease-in-out infinite;
	filter: drop-shadow(0 0 20px rgba(255, 105, 180, 0.5));
	margin: 20px 0;
}

@keyframes lock-bounce {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-20px) scale(1.05);
	}
}

.password-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 20px 0;
}

.password-input {
	padding: 16px 24px;
	width: 300px;
	border: 2px solid rgba(255, 105, 180, 0.3);
	border-radius: 50px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	color: white;
	text-align: center;
	letter-spacing: 1px;
	box-shadow: 0 8px 32px rgba(255, 20, 147, 0.1);
	-webkit-touch-callout: none;
}

.password-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: normal;
}

.password-input:focus {
	outline: 2px solid transparent;
	border-color: #ff1493;
	background: rgba(255, 255, 255, 0.15);
	box-shadow:
		0 8px 32px rgba(255, 20, 147, 0.3),
		0 0 20px rgba(255, 105, 180, 0.5);
	caret-color: #ffb6c1;
}

#btn-password-submit {
	padding: 15px 40px;
	font-size: 16px;
	width: 100%;
	max-width: 300px;
	margin-top: 10px;
	-webkit-touch-callout: none;
}

.password-hint {
	color: rgba(255, 255, 255, 0.7);
	font-size: 17px;
	margin: 0;
	font-style: italic;
}

.password-feedback {
	margin-top: 20px;
	padding: 16px 24px;
	border-radius: 30px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
	opacity: 1;
	animation: feedback-appear 0.4s ease-out;
}

.password-feedback.hidden {
	display: none;
	opacity: 0;
}

.password-feedback.success {
	background: linear-gradient(135deg, #ff1493, #c71585);
	color: white;
	box-shadow: 0 10px 30px rgba(255, 20, 147, 0.4);
	border: 2px solid #ff69b4;
}

.password-feedback.error {
	background: rgba(255, 20, 147, 0.2);
	color: #ffb6c1;
	box-shadow: 0 10px 30px rgba(255, 20, 147, 0.2);
	border: 2px solid #ff1493;
	animation: shake 0.5s ease-in-out;
}

@keyframes feedback-appear {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.8);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-10px);
	}
	75% {
		transform: translateX(10px);
	}
}

.password-hearts-bottom {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.ph-bottom {
	font-size: 24px;
	animation: bounce-heart 2s ease-in-out infinite;
}

.ph-bottom.ph-1 {
	animation-delay: 0s;
}

.ph-bottom.ph-2 {
	animation-delay: 0.2s;
}

.ph-bottom.ph-3 {
	animation-delay: 0.4s;
}

.ph-bottom.ph-4 {
	animation-delay: 0.6s;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 1: INTRO - DECORATIVE ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */
#screen-intro {
	overflow: hidden;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
}

.deco-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.4;
	animation: glow-pulse 4s ease-in-out infinite;
}

.glow-1 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, #ff1493, transparent);
	top: -100px;
	left: -100px;
}

.glow-2 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, #ff69b4, transparent);
	bottom: -50px;
	right: -50px;
	animation-delay: 1s;
}

.glow-3 {
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, #ffb6c1, transparent);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation-delay: 2s;
}

@keyframes glow-pulse {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 0.5;
		transform: scale(1.1);
	}
}

/* Hanging Hearts Clusters */
.hanging-hearts-cluster {
	position: absolute;
	top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hanging-hearts-cluster.left {
	left: 25px;
}

.hanging-hearts-cluster.right {
	right: 25px;
}

.heart-string {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: heart-swing 3s ease-in-out infinite;
	animation-delay: var(--delay);
}

.heart-string::before {
	content: "";
	width: 2px;
	height: var(--length);
	background: linear-gradient(to bottom, rgba(255, 20, 147, 0.5), transparent);
}

.heart-icon {
	font-size: 26px;
	filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.4));
	animation: heart-beat 1.5s ease-in-out infinite;
	animation-delay: var(--delay);
}

@keyframes heart-swing {
	0%,
	100% {
		transform: rotate(-8deg);
	}
	50% {
		transform: rotate(8deg);
	}
}

@keyframes heart-beat {
	0%,
	100% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.15);
	}
	50% {
		transform: scale(1);
	}
	75% {
		transform: scale(1.1);
	}
}

/* Paper Plane */
.paper-plane-container {
	position: absolute;
	left: 40px;
	bottom: 120px;
	width: 100px;
	height: 80px;
	animation: plane-float 4s ease-in-out infinite;
}

.paper-plane {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 10px 20px rgba(255, 20, 147, 0.3));
}

.plane-trail {
	position: absolute;
	top: 50%;
	left: -50px;
	width: 60px;
	height: 2px;
	background: linear-gradient(to left, rgba(255, 105, 180, 0.6), transparent);
	animation: trail-extend 2s ease-out infinite;
}

@keyframes plane-float {
	0%,
	100% {
		transform: translateY(0) rotate(-3deg);
	}
	50% {
		transform: translateY(-20px) rotate(3deg);
	}
}

@keyframes trail-extend {
	0% {
		width: 0;
		opacity: 1;
	}
	100% {
		width: 60px;
		opacity: 0;
	}
}

/* Calendar Widget */
.calendar-widget {
	position: absolute;
	right: 35px;
	top: 30px;
	width: 110px;
	background: white;
	border-radius: 15px;
	box-shadow:
		var(--shadow-soft),
		0 0 30px rgba(255, 105, 180, 0.2);
	overflow: hidden;
	transform: rotate(5deg);
	animation: calendar-float 3s ease-in-out infinite;
}

@keyframes calendar-float {
	0%,
	100% {
		transform: rotate(5deg) translateY(0);
	}
	50% {
		transform: rotate(5deg) translateY(-10px);
	}
}

.calendar-rings {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 10px 5px 5px;
	background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
}

.ring {
	width: 10px;
	height: 10px;
	border: 2px solid #999;
	border-radius: 50%;
	background: white;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.calendar-body {
	padding: 12px 8px;
	text-align: center;
	background: linear-gradient(135deg, #fff, #fff5f8);
}

.day-name {
	display: block;
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.date-num {
	display: block;
	font-size: 42px;
	font-weight: 700;
	color: var(--primary-pink);
	line-height: 1;
	text-shadow: 2px 2px 4px rgba(255, 20, 147, 0.2);
}

.month-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--deep-pink);
	letter-spacing: 2px;
}

.year {
	display: block;
	font-size: 10px;
	color: #aaa;
	margin-top: 2px;
}

.calendar-hearts {
	display: flex;
	justify-content: center;
	gap: 5px;
	padding: 8px;
	background: linear-gradient(to right, #fff0f5, #ffe4e1);
	font-size: 12px;
}

/* Intro Content */
.intro-content {
	text-align: center;
	z-index: 10;
	max-width: 600px;
	padding: 20px;
}

#holding-hands {
	width: 200px;
	border-radius: 15px;
	border: 3px solid var(--deep-pink);
	margin-bottom: 10px;
}

.heart-pulse-ring {
	position: absolute;
	top: 24%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 220px;
	height: 220px;
	border: 3px solid rgba(255, 20, 147, 0.3);
	border-radius: 50%;
	animation: pulse-ring 2s ease-out infinite;
}

.heart-pulse-ring.delay-1 {
	animation-delay: 0.5s;
}

.heart-pulse-ring.delay-2 {
	animation-delay: 1s;
}

@keyframes pulse-ring {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.8);
		opacity: 0;
	}
}

.floating-heart-text {
	animation: float-text 2s ease-in-out infinite;
}

.floating-heart-text.delay-1 {
	animation-delay: 0.3s;
}

.floating-heart-text.delay-2 {
	animation-delay: 0.6s;
}

@keyframes float-text {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

/* Title */
.title-container {
	position: relative;
	margin-bottom: 35px;
}

.main-title {
	font-family: "Great Vibes", cursive;
	font-size: 3.5rem;
	color: #8b0000;
	text-shadow:
		2px 2px 0px rgba(255, 255, 255, 0.8),
		-1px -1px 0px rgba(255, 255, 255, 0.8),
		0 0 30px rgba(255, 20, 147, 0.5),
		0 0 60px rgba(255, 20, 147, 0.3);
	line-height: 1.3;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 20px;
	backdrop-filter: blur(5px);
}

.title-line {
	display: block;
}

.title-line.highlight {
	background: linear-gradient(135deg, #8b0000, #dc143c);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 4rem;
	animation: title-glow 2s ease-in-out infinite;
	text-shadow: none;
	filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.5));
}

@keyframes title-glow {
	0%,
	100% {
		filter: drop-shadow(0 0 10px rgba(255, 20, 147, 0.5));
	}
	50% {
		filter: drop-shadow(0 0 25px rgba(255, 20, 147, 0.8));
	}
}

.title-hearts {
	position: absolute;
	top: -20px;
	right: -30px;
	font-size: 24px;
}

.title-hearts span {
	display: inline-block;
	animation: heart-pop 1.5s ease-in-out infinite;
}

.title-hearts .th-1 {
	animation-delay: 0s;
}
.title-hearts .th-2 {
	animation-delay: 0.3s;
}
.title-hearts .th-3 {
	animation-delay: 0.6s;
}

@keyframes heart-pop {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.3);
	}
}

/* Buttons */
.button-group {
	display: flex;
	gap: 25px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 80px;
}

.btn {
	position: relative;
	padding: 18px 40px;
	border: none;
	border-radius: 50px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-smooth);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.btn-primary {
	background: linear-gradient(
		135deg,
		var(--secondary-pink),
		var(--primary-pink)
	);
	color: white;
	box-shadow:
		0 10px 30px rgba(255, 20, 147, 0.4),
		inset 0 2px 0 rgba(255, 255, 255, 0.3);
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
	transform: translateY(-5px) scale(1.05);
	box-shadow:
		0 15px 40px rgba(255, 20, 147, 0.5),
		var(--shadow-glow);
}

.btn-glow::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.3) 0%,
		transparent 60%
	);
	animation: glow-rotate 3s linear infinite;
}

@keyframes glow-rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.btn-shine {
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	animation: shine 2s infinite;
}

@keyframes shine {
	0% {
		left: -100%;
	}
	50%,
	100% {
		left: 100%;
	}
}

.btn-secondary {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.9),
		rgba(255, 255, 255, 0.7)
	);
	color: var(--deep-pink);
	border: 2px solid var(--light-pink);
	box-shadow: 0 5px 20px rgba(255, 105, 180, 0.2);
}

.btn-secondary:hover {
	background: white;
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);
}

.btn-icon {
	font-size: 20px;
}

/* Bottom Hearts */
.bottom-hearts {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 15px;
	font-size: 28px;
}

.bottom-hearts span {
	animation: bounce-heart 1.5s ease-in-out infinite;
}

.bottom-hearts .bh-1 {
	animation-delay: 0s;
}
.bottom-hearts .bh-2 {
	animation-delay: 0.2s;
}
.bottom-hearts .bh-3 {
	animation-delay: 0.4s;
}
.bottom-hearts .bh-4 {
	animation-delay: 0.6s;
}
.bottom-hearts .bh-5 {
	animation-delay: 0.8s;
}

@keyframes bounce-heart {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-15px);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 3: SUCCESS / GIFT SELECTION
   ═══════════════════════════════════════════════════════════════════════════════ */
#screen-success {
	background: var(--gradient-main);
}

.celebration-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.firework {
	position: absolute;
	left: var(--x);
	top: 30%;
	width: 4px;
	height: 4px;
	background: var(--gold);
	border-radius: 50%;
	animation: firework-burst 2s ease-out infinite;
	animation-delay: var(--delay);
}

@keyframes firework-burst {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	50% {
		transform: scale(1);
		opacity: 1;
		box-shadow:
			0 -30px 0 var(--gold),
			0 30px 0 var(--secondary-pink),
			-30px 0 0 var(--primary-pink),
			30px 0 0 var(--rose-red),
			-21px -21px 0 var(--gold),
			21px -21px 0 var(--secondary-pink),
			-21px 21px 0 var(--primary-pink),
			21px 21px 0 var(--rose-red);
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
		box-shadow:
			0 -50px 0 transparent,
			0 50px 0 transparent,
			-50px 0 0 transparent,
			50px 0 0 transparent,
			-35px -35px 0 transparent,
			35px -35px 0 transparent,
			-35px 35px 0 transparent,
			35px 35px 0 transparent;
	}
}

.success-content {
	text-align: center;
	z-index: 10;
	width: 100%;
	max-width: 1000px;
}

.success-header {
	margin-bottom: 30px;
}

.floating-hearts-top {
	font-size: 30px;
	margin-bottom: 20px;
}

.floating-hearts-top span {
	display: inline-block;
	animation: heart-float-rotate 2s ease-in-out infinite;
	margin: 0 5px;
}

.floating-hearts-top span:nth-child(1) {
	animation-delay: 0s;
}
.floating-hearts-top span:nth-child(2) {
	animation-delay: 0.2s;
}
.floating-hearts-top span:nth-child(3) {
	animation-delay: 0.4s;
}
.floating-hearts-top span:nth-child(4) {
	animation-delay: 0.6s;
}
.floating-hearts-top span:nth-child(5) {
	animation-delay: 0.8s;
}

@keyframes heart-float-rotate {
	0%,
	100% {
		transform: translateY(0) rotate(-5deg);
	}
	50% {
		transform: translateY(-15px) rotate(5deg);
	}
}

.success-title {
	font-family: "Great Vibes", cursive;
	font-size: 4rem;
	color: #8b0000;
	text-shadow:
		2px 2px 0px rgba(255, 255, 255, 0.9),
		-1px -1px 0px rgba(255, 255, 255, 0.9),
		0 0 20px rgba(255, 255, 255, 0.8);
	margin-bottom: 10px;
	padding: 10px 30px;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 20px;
	backdrop-filter: blur(5px);
}

.success-message {
	font-size: 1.3rem;
	color: #4a004a;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
	padding: 8px 20px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 15px;
	margin-top: 30px;
	display: inline-block;
}
/* GIF Grid */
.gif-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	padding: 20px;
	margin: auto;
}

.gif-card {
	position: relative;
	min-height: 300px;
	background-size: cover;
	background-position: center center;
	border-radius: 20px;
	padding: 25px 20px;
	transition: var(--transition-smooth);
	border: 2px solid transparent;
	overflow: hidden;
}

#gif-card-1 {
	background-image: url("https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExenZhMTg0anduYzB3bGVncGc3dzF0aTljNnEyY3B3N3NnZm02Z2N0eSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xR5cPyPoL5HVXSphqA/giphy.gif");
}
#gif-card-3 {
	background-image: url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExaTV5cjNrcGxydjhqY2tra3V5bnQzczgzMHpiMm1rNnZ0anlyZmFsdSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/SYo1DFS8NLhhqzzjMU/giphy.gif");
}
#gif-card-2 {
	background-image: url("https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZHp3eHRvZmpqODIydGhxa3o1eGh4YW1ja3M4NGo0dWM4NTNtZjUydiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/1JmGiBtqTuehfYxuy9/giphy.gif");
}
#gif-card-outro {
	background-image: url("https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExYnVkdDZqanFpaXBmNnBxbWEzdGs0OWRkdDVnNGUyY29heHNlc3B3YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ytu2GUYbvhz7zShGwS/giphy.gif");
}

/* Gifts Grid */
.gifts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
	padding: 20px;
	margin: auto;
}

.gift-card {
	position: relative;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.95),
		rgba(255, 255, 255, 0.85)
	);
	border-radius: 20px;
	padding: 25px 20px;
	cursor: pointer;
	transition: var(--transition-smooth);
	border: 2px solid transparent;
	overflow: hidden;
}

.gift-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		var(--secondary-pink),
		var(--primary-pink)
	);
	border-radius: 20px;
	opacity: 0;
	transition: opacity 0.4s;
	z-index: 0;
}

.gift-card:hover::before {
	opacity: 0.1;
}

.gift-card:hover {
	transform: translateY(-15px) scale(1.03);
	border-color: var(--secondary-pink);
	box-shadow: 0 20px 50px rgba(255, 20, 147, 0.3);
}

.gift-shine {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0.4) 0%,
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.4s;
}

.gift-card:hover .gift-shine {
	opacity: 1;
	animation: shine-rotate 2s linear infinite;
}

@keyframes shine-rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.gift-icon {
	position: relative;
	z-index: 1;
	width: 80px;
	height: 80px;
	margin: 0 auto 15px;
}

.gift-icon svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.gift-name {
	position: relative;
	z-index: 1;
	font-family: "Playfair Display", serif;
	font-size: 1.4rem;
	color: var(--deep-pink);
	margin-bottom: 8px;
}

.gift-desc {
	position: relative;
	z-index: 1;
	font-size: 0.95rem;
	color: #666;
	margin-bottom: 12px;
	line-height: 1.4;
}

.gift-hearts {
	position: relative;
	z-index: 1;
	font-size: 20px;
	margin-bottom: 15px;
}

.open-gift-btn {
	position: relative;
	z-index: 1;
	background: linear-gradient(
		135deg,
		var(--secondary-pink),
		var(--primary-pink)
	);
	color: white;
	border: none;
	padding: 12px 28px;
	border-radius: 25px;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	opacity: 1;
	transform: translateY(0);
	transition: var(--transition-smooth);
	box-shadow: 0 5px 15px rgba(255, 20, 147, 0.3);
	margin-top: 10px;
}

.gift-card:hover .open-gift-btn {
	transform: scale(1.05);
	box-shadow: 0 8px 20px rgba(255, 20, 147, 0.5);
}

.open-gift-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 20px rgba(255, 20, 147, 0.5);
}

/* Navigation Buttons */
.nav-buttons {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 50px;
	padding-bottom: 30px;
}

.nav-button {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	padding-bottom: 30px;
}

.btn-back,
.btn-next {
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.9),
		rgba(255, 255, 255, 0.7)
	);
	color: var(--deep-pink);
	border: 2px solid var(--light-pink);
	padding: 15px 35px;
	font-size: 15px;
}

.btn-back:hover,
.btn-next:hover {
	background: white;
	transform: translateX(-5px);
	box-shadow: 0 10px 25px rgba(255, 105, 180, 0.3);
}

.btn-next:hover {
	transform: translateX(5px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 5: VINTAGE LOVE LETTER
   ═══════════════════════════════════════════════════════════════════════════════ */
#screen-letter {
	background: linear-gradient(135deg, #f5deb3 0%, #deb887 50%, #d2b48c 100%);
}

.letter-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.coffee-stain {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 80px;
	height: 80px;
	background: radial-gradient(
		circle,
		rgba(139, 69, 19, 0.2) 0%,
		rgba(139, 69, 19, 0.1) 40%,
		transparent 70%
	);
	border-radius: 50%;
	animation: stain-pulse 4s ease-in-out infinite;
}

@keyframes stain-pulse {
	0%,
	100% {
		opacity: 0.6;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}

.letter-content {
	text-align: center;
	z-index: 10;
	width: 100%;
	max-width: 800px;
}

.letter-title {
	font-family: "Great Vibes", cursive;
	font-size: 3.5rem;
	color: #8b4513;
	margin-bottom: 30px;
	text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.letter-container {
	position: relative;
	margin-bottom: 40px;
}

.quill-decoration {
	position: absolute;
	right: -40px;
	top: -30px;
	width: 60px;
	height: 80px;
	animation: quill-float 3s ease-in-out infinite;
}

@keyframes quill-float {
	0%,
	100% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(-5deg);
	}
}

.vintage-paper {
	position: relative;
	background: linear-gradient(135deg, #fff8dc, #f5f5dc);
	border-radius: 10px;
	padding: 40px;
	box-shadow:
		0 20px 60px rgba(139, 69, 19, 0.3),
		inset 0 0 100px rgba(139, 69, 19, 0.05);
	border: 1px solid #deb887;
	overflow: hidden;
}

.paper-texture {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(
			circle at 20% 30%,
			rgba(139, 69, 19, 0.03) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 80% 70%,
			rgba(139, 69, 19, 0.03) 0%,
			transparent 50%
		);
	pointer-events: none;
}

.paper-lines {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		transparent,
		transparent 29px,
		rgba(139, 69, 19, 0.1) 29px,
		rgba(139, 69, 19, 0.1) 30px
	);
	pointer-events: none;
}

.letter-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 30px;
	position: relative;
	z-index: 1;
}

.date-written {
	font-family: "Playfair Display", serif;
	text-align: left;
	color: #8b4513;
	font-size: 14px;
}

.wax-seal {
	width: 50px;
	height: 50px;
	background: radial-gradient(circle, #dc143c, #8b0000);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
	animation: seal-glow 2s ease-in-out infinite;
}

@keyframes seal-glow {
	0%,
	100% {
		box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
	}
	50% {
		box-shadow: 0 5px 25px rgba(220, 20, 60, 0.4);
	}
}

.letter-body {
	position: relative;
	z-index: 1;
	text-align: left;
}

.salutation {
	font-family: "Dancing Script", cursive;
	font-size: 1.8rem;
	color: #8b4513;
	margin-bottom: 20px;
}

.letter-paragraph {
	font-family: "Dancing Script", cursive;
	font-size: 1.2rem;
	color: #654321;
	line-height: 1.8;
	margin-bottom: 15px;
	text-indent: 30px;
}

.letter-paragraph.closing {
	text-indent: 0;
	margin-top: 30px;
	font-style: italic;
}

.letter-signature {
	text-align: right;
	margin-top: 30px;
	position: relative;
	z-index: 1;
}

.xoxo-text {
	font-family: "Great Vibes", cursive;
	font-size: 3rem;
	color: #dc143c;
	display: inline-block;
	transform: rotate(-10deg);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.cat-decoration {
	position: absolute;
	left: -60px;
	bottom: -20px;
	width: 100px;
	height: 100px;
	animation: cat-bounce 2s ease-in-out infinite;
}

@keyframes cat-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCREEN 7: SPECIAL SURPRISE / QR CODE
   ═══════════════════════════════════════════════════════════════════════════════ */
#screen-surprise {
	background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #4a148c 100%);
}

.surprise-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.star {
	position: absolute;
	left: var(--x);
	top: 20%;
	font-size: 20px;
	animation: star-twinkle 2s ease-in-out infinite;
	animation-delay: var(--delay);
}

@keyframes star-twinkle {
	0%,
	100% {
		opacity: 0.3;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
}

.surprise-content {
	text-align: center;
	z-index: 10;
	width: 100%;
	max-width: 800px;
}

.surprise-title {
	font-family: "Great Vibes", cursive;
	font-size: 3.5rem;
	color: #ffd700;
	margin-bottom: 40px;
	text-shadow:
		0 0 20px rgba(255, 215, 0, 0.8),
		0 0 40px rgba(255, 215, 0, 0.5),
		2px 2px 4px rgba(0, 0, 0, 0.5);
	padding: 10px 30px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	backdrop-filter: blur(5px);
}

.surprise-subtitle {
	font-size: 1.3rem;
	color: #ffffff;
	text-shadow:
		1px 1px 2px rgba(0, 0, 0, 0.8),
		0 0 10px rgba(255, 255, 255, 0.3);
	padding: 8px 20px;
	background: rgba(255, 105, 180, 0.3);
	border-radius: 15px;
	display: inline-block;
}

/* Reservation Card */
.reservation-card {
	background: linear-gradient(
		135deg,
		rgba(255, 20, 147, 0.15),
		rgba(199, 21, 133, 0.15)
	);
	border: 2px solid rgba(255, 105, 180, 0.4);
	border-radius: 20px;
	padding: 40px 30px;
	margin: 40px auto;
	max-width: 500px;
	backdrop-filter: blur(10px);
	box-shadow:
		0 8px 32px rgba(255, 20, 147, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	animation: reservation-appear 0.8s ease-out;
}

@keyframes reservation-appear {
	from {
		opacity: 0;
		transform: translateY(30px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.reservation-header {
	margin-bottom: 35px;
	border-bottom: 2px solid rgba(255, 105, 180, 0.3);
	padding-bottom: 20px;
}

.restaurant-name {
	font-family: "Great Vibes", cursive;
	font-size: 3rem;
	color: #ffd700;
	margin: 0 0 10px 0;
	text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
	letter-spacing: 2px;
}

.reservation-tagline {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	font-style: italic;
}

.reservation-details {
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin: 30px 0;
}

.detail-item {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	padding: 15px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	border-left: 3px solid #ff1493;
	transition: all 0.3s ease;
}

.detail-item:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(5px);
}

.detail-icon {
	font-size: 1.8rem;
	min-width: 40px;
	text-align: center;
}

.detail-content {
	text-align: left;
}

.detail-label {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 5px 0;
	font-weight: 600;
}

.detail-value {
	font-size: 1.1rem;
	color: #ffffff;
	margin: 0;
	font-weight: 500;
	line-height: 1.4;
}

.reservation-footer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px solid rgba(255, 105, 180, 0.3);
}

.reservation-note {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
	letter-spacing: 0.5px;
}

/* Final Message */
.final-message {
	margin-bottom: 40px;
}

.final-message p {
	font-family: "Dancing Script", cursive;
	font-size: 1.6rem;
	color: #ffffff;
	margin-bottom: 15px;
	text-shadow:
		1px 1px 3px rgba(0, 0, 0, 0.8),
		0 0 15px rgba(255, 105, 180, 0.5);
	padding: 10px 25px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	display: inline-block;
}

.final-hearts {
	font-size: 24px;
}

.final-hearts span {
	display: inline-block;
	animation: final-heart-beat 1.5s ease-in-out infinite;
	margin: 0 5px;
}

.final-hearts span:nth-child(1) {
	animation-delay: 0s;
}
.final-hearts span:nth-child(2) {
	animation-delay: 0.2s;
}
.final-hearts span:nth-child(3) {
	animation-delay: 0.4s;
}
.final-hearts span:nth-child(4) {
	animation-delay: 0.6s;
}
.final-hearts span:nth-child(5) {
	animation-delay: 0.8s;
}

@keyframes final-heart-beat {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.3);
	}
}

/* Restart Section */
.restart-section {
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.restart-text {
	font-size: 1.1rem;
	color: #ffffff;
	margin-bottom: 15px;
	display: block;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	padding: 8px 20px;
	background: rgba(255, 105, 180, 0.3);
	border-radius: 15px;
}

.btn-restart-final {
	background: linear-gradient(135deg, #ff1493, #c71585);
	color: white;
	padding: 18px 50px;
	font-size: 18px;
	box-shadow: 0 10px 30px rgba(255, 20, 147, 0.4);
	display: flex;
	justify-content: center;
}

.btn-restart-final:hover {
	transform: scale(1.05);
	box-shadow: 0 15px 40px rgba(255, 20, 147, 0.6);
}

.btn-hearts {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	font-size: 14px;
	opacity: 0;
	transition: opacity 0.3s;
}

.btn-restart-final:hover .btn-hearts {
	opacity: 1;
	animation: btn-hearts-rise 1s ease-out;
}

@keyframes btn-hearts-rise {
	0% {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateX(-50%) translateY(-25px);
		opacity: 0;
	}
}

/* Computer Decoration */
.computer-decoration {
	position: absolute;
	left: 30px;
	bottom: 30px;
	width: 70px;
	height: 70px;
	animation: computer-bounce 2s ease-in-out infinite;
}

@keyframes computer-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.surprise-display {
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	/* Disable expensive animations and effects on mobile */
	* {
		animation: none !important;
		transition: none !important;
	}

	/* Remove backdrop filters for better performance */
	.password-input,
	.password-feedback,
	#screen-intro,
	.vintage-paper,
	.reservation-card,
	.glass {
		backdrop-filter: none !important;
		background: rgba(255, 255, 255, 0.08) !important;
	}

	/* Reduce box shadows on mobile */
	.btn,
	.password-input,
	.password-feedback,
	.gift-card,
	.reservation-card {
		box-shadow: 0 4px 12px rgba(255, 20, 147, 0.15) !important;
	}

	/* Disable complex transforms */
	.rotate-3d:hover {
		transform: none;
	}

	.heart-pulse-ring {
		display: none;
	}

	#holding-hands {
		width: 150px;
	}

	.deco-glow {
		display: none;
	}

	.main-title {
		font-size: 2.5rem;
	}

	.title-line.highlight {
		font-size: 2.8rem;
	}

	.button-group {
		flex-direction: column;
		align-items: center;
	}

	.btn {
		width: 250px;
		justify-content: center;
	}

	.hanging-hearts-cluster {
		display: none;
	}

	.calendar-widget {
		width: 80px;
		right: 15px;
		top: 15px;
	}

	.date-num {
		font-size: 28px;
	}

	.month-name {
		font-size: 10px;
	}

	.year {
		font-size: 13px;
	}

	.paper-plane-container {
		width: 60px;
		height: 50px;
		left: 15px;
		bottom: 80px;
	}

	.heart-pulse-ring {
		top: 28%;
		left: 50%;
	}

	.gif-grid {
		grid-template-columns: 1fr;
		max-width: 300px;
		margin: 0 auto;
	}

	.gifts-grid {
		grid-template-columns: 1fr;
		max-width: 300px;
		margin: 0 auto;
	}

	.success-title,
	.letter-title,
	.surprise-title {
		font-size: 2.5rem;
	}

	.love-messages {
		flex-direction: column;
		align-items: center;
	}

	.message-bubble {
		max-width: 280px;
	}

	.vintage-paper {
		padding: 25px;
	}

	.letter-paragraph {
		font-size: 1.2rem;
	}

	.chocolate-box {
		width: 280px;
	}

	.chocolates-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.qr-svg {
		width: 150px;
		height: 150px;
	}

	.vinyl-container {
		width: 140px;
		height: 140px;
	}

	.nav-buttons {
		flex-direction: column;
		align-items: center;
	}

	.btn-back,
	.btn-next {
		width: 200px;
		font-size: 13px;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.main-title {
		font-size: 2rem;
	}

	.title-line.highlight {
		font-size: 2.2rem;
	}

	.sweet-card {
		max-width: 280px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SPECIAL EFFECTS & UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Confetti Animation */
.confetti {
	position: fixed;
	pointer-events: none;
	z-index: 9999;
}

/* Glow Effects */
.glow-text {
	text-shadow:
		0 0 10px currentColor,
		0 0 20px currentColor,
		0 0 30px currentColor;
}

/* Glass Morphism */
.glass {
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 3D Transform Effects */
.perspective-container {
	perspective: 1000px;
}

.rotate-3d {
	transform-style: preserve-3d;
	transition: transform 0.6s;
}

.rotate-3d:hover {
	transform: rotateY(15deg) rotateX(5deg);
}

/* Gradient Text */
.gradient-text {
	background: linear-gradient(135deg, var(--primary-pink), var(--gold));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(255, 192, 203, 0.3);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(
		to bottom,
		var(--secondary-pink),
		var(--primary-pink)
	);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, var(--primary-pink), var(--deep-pink));
}

/* Selection Color */
::selection {
	background: rgba(255, 20, 147, 0.3);
	color: var(--deep-pink);
}

/* REAL SONG QR IMAGE STYLE */
.real-qr {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 0 25px rgba(255, 20, 147, 0.6);
	animation: qrPulse 2s infinite alternate;
}

@keyframes qrPulse {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.04);
	}
}