<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Birthday My Love | 2026 Editorial Surprise</title>
<!-- Premium Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Dancing+Script:wght@500;700&family=Great+Vibes&family=Poppins:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!-- External Libraries: GSAP & Canvas Confetti -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
<style>
:root {
--baby-pink: #FFB7C5;
--rose-gold: #E6B7A9;
--gold: #d4af37;
--bg-dark: #120a0c;
--bg-card: #2d1419;
--white: #fdf2f4;
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body {
background-color: var(--bg-dark);
color: var(--white);
font-family: 'Cormorant Garamond', Georgia, serif;
overflow-x: hidden;
selection-background-color: var(--baby-pink);
selection-color: var(--bg-dark);
}
/* --- Custom Heart Cursor --- */
#cursor-heart {
position: fixed; width: 22px; height: 22px;
background: var(--baby-pink); transform: rotate(45deg);
pointer-events: none; z-index: 10000;
box-shadow: 0 0 15px rgba(255,183,197,0.8);
transition: transform 0.15s ease-out;
will-change: transform;
}
#cursor-heart::before, #cursor-heart::after {
content: ''; position: absolute; width: 100%; height: 100%;
background: var(--baby-pink); border-radius: 50%;
}
#cursor-heart::before { left: -50%; }
#cursor-heart::after { top: -50%; }
/* --- Floating Glow Background --- */
.bg-glow {
position: fixed; width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,183,197,0.12) 0%, transparent 70%);
z-index: 0; pointer-events: none; border-radius: 50%;
filter: blur(40px);
}
/* --- Typography Helpers --- */
.font-serif { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-vibes { font-family: 'Great Vibes', cursive; }
.font-dancing { font-family: 'Dancing Script', cursive; }
.font-poppins { font-family: 'Poppins', sans-serif; }
.text-glow-pink { text-shadow: 0 0 20px rgba(255,183,197,0.5); }
.text-glow-gold { text-shadow: 0 0 15px rgba(212,175,55,0.6); }
/* --- Layout Sections --- */
section {
min-height: 100vh;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
padding: 80px 8%; text-align: center;
position: relative; z-index: 10;
}
.editorial-card {
background: rgba(45, 20, 25, 0.45);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 183, 197, 0.25);
border-top-right-radius: 60px;
border-bottom-left-radius: 40px;
border-top-left-radius: 16px;
border-bottom-right-radius: 16px;
padding: 40px;
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}
.gold-rule {
width: 48px; height: 1px; background-color: var(--gold); margin: 12px auto;
}
/* --- Music Controller Button --- */
.music-toggle {
position: fixed; top: 25px; right: 25px; z-index: 1000;
background: rgba(45, 20, 25, 0.8); border: 1px solid rgba(255,183,197,0.4);
color: var(--baby-pink); width: 48px; height: 48px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 20px rgba(255,183,197,0.3); transition: 0.3s;
backdrop-filter: blur(10px);
}
.music-toggle:hover { scale: 1.1; background: var(--baby-pink); color: var(--bg-dark); }
/* --- Hero Section Button --- */
.hero-btn {
background: rgba(45, 20, 25, 0.6); border: 1px solid var(--baby-pink);
color: var(--baby-pink); padding: 16px 40px; font-size: 0.85rem;
border-radius: 50px; text-transform: uppercase; letter-spacing: 4px;
font-family: 'Poppins', sans-serif; font-weight: 600;
transition: 0.5s; margin-top: 24px;
box-shadow: 0 0 20px rgba(255,183,197,0.25);
backdrop-filter: blur(10px);
}
.hero-btn:hover { background: var(--baby-pink); color: var(--bg-dark); box-shadow: 0 0 35px rgba(255,183,197,0.6); scale: 1.05; }
/* --- Interactive Envelope --- */
.envelope-container {
position: relative; width: 340px; height: 230px;
background: #f8a5b6; margin-top: 40px;
border-radius: 0 0 16px 16px; cursor: pointer;
transition: margin-bottom 0.7s ease-in-out, transform 0.3s;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
border: 1px solid #ffc2d1;
}
.envelope-top {
position: absolute; top: 0; left: 0;
width: 0; height: 0;
border-left: 170px solid transparent;
border-right: 170px solid transparent;
border-top: 130px solid #ff80ab;
transform-origin: top; transition: transform 0.7s ease-in-out; z-index: 30;
}
.envelope-container.open { margin-bottom: 260px; }
.envelope-container.open .envelope-top { transform: rotateX(180deg); z-index: 1; }
.letter-content {
position: absolute; left: 5%; right: 5%;
top: 10px; height: 180px; background: #fffaf0;
padding: 24px; color: #332226; border-radius: 12px;
z-index: 10; transition: all 0.7s ease-in-out;
font-family: 'Dancing Script', cursive; text-align: left;
box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid #f3d3d9;
opacity: 0.4; overflow: hidden; pointer-events: none;
}
.envelope-container.open .letter-content {
transform: translateY(-200px); z-index: 40; opacity: 1;
height: auto; min-height: 320px; pointer-events: auto;
}
/* --- Photo Gallery --- */
.gallery-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px; width: 100%; max-width: 1100px; margin-top: 40px;
}
.photo-card {
height: 380px; border-radius: 16px; border-top-right-radius: 40px; border-bottom-left-radius: 24px;
overflow: hidden; border: 1px solid rgba(255,183,197,0.3); transition: 0.5s;
position: relative; background: var(--bg-card); cursor: pointer;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.7s; opacity: 0.9; }
.photo-card:hover { transform: translateY(-8px) scale(1.02); border-color: var(--baby-pink); box-shadow: 0 0 30px rgba(255,183,197,0.5); }
.photo-card:hover img { transform: scale(1.1); opacity: 1; }
/* --- 3D Flip Cards --- */
.flip-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; width: 100%; max-width: 1100px; margin-top: 40px;
}
.flip-card { height: 210px; perspective: 1000px; cursor: pointer; }
.flip-inner {
position: relative; width: 100%; height: 100%; text-align: center;
transition: transform 0.7s; transform-style: preserve-3d; border-radius: 16px;
}
.flip-card:hover .flip-inner, .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
border-radius: 16px; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 200px 20px;
border: 1px solid rgba(255,183,197,0.3);
}
.flip-front { background: rgba(26,12,16,0.9); color: var(--baby-pink); padding: 20px; }
.flip-back {
background: linear-gradient(135deg, var(--baby-pink), #f48fb1);
color: #120a0c; transform: rotateY(180deg); padding: 20px;
font-family: 'Dancing Script', cursive; font-size: 1.4rem; font-weight: bold;
box-shadow: 0 0 25px rgba(255,183,197,0.8);
}
/* --- Interactive Cake --- */
.cake-container { position: relative; margin-top: 40px; cursor: pointer; }
.cake {
width: 260px; height: 140px;
background: linear-gradient(to bottom, #f9d9e2, #f4b0c2);
border-radius: 16px 16px 0 0; position: relative;
box-shadow: inset 0 -12px 0 #e8829f, 0 20px 40px rgba(0,0,0,0.4);
border-top: 4px solid #ffffff;
}
.candle {
width: 18px; height: 60px; background: linear-gradient(to right, #FFD700, #fff59d, #FFD700);
position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
border-radius: 6px 6px 0 0; box-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.flame {
width: 22px; height: 36px; background: linear-gradient(to top, #ff4500, #ffa500, #ffff00);
border-radius: 50% 50% 20% 20%; position: absolute;
top: -36px; left: 50%; transform: translateX(-50%);
animation: flicker 0.2s infinite ease-in-out alternate;
box-shadow: 0 0 25px #ff4500, 0 0 40px #ffa500;
}
@keyframes flicker { 0% { transform: translateX(-50%) scale(1); } 100% { transform: translateX(-50%) scale(1.15); } }
.flame.out { display: none; }
/* --- Lightbox Modal --- */
#modal {
display: none; position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,0.9); backdrop-filter: blur(15px);
align-items: center; justify-content: center; padding: 20px;
}
#modal.active { display: flex; }
</style>
</head>
<body>
<!-- Heart Cursor -->
<div id="cursor-heart"></div>
<!-- Glowing Orbs -->
<div class="bg-glow" id="glow1" style="top: -100px; left: -100px;"></div>
<div class="bg-glow" id="glow2" style="bottom: -100px; right: -100px;"></div>
<!-- Audio Player -->
<button class="music-toggle" onclick="toggleMusic()" title="Toggle Background Music">
