/* Base Styles */
:root {
    --primary-color: #f8e1e8;
    --secondary-color: #e6c3d7;
    --accent-color: #d4a5c7;
    --text-color: #4a4a4a;
    --light-text: #ffffff;
    --tulip-pink: #ff80ab;
    --tulip-purple: #b388ff;
    --gradient-start: #f8e1e8;
    --gradient-end: #d4a5c7;
}

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

html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Lora', serif;
    color: var(--text-color);
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    scroll-behavior: smooth;
}

body {
    position: relative;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,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');
    opacity: 0.03;
    z-index: 1;
    pointer-events: none;
}

/* Content Layout */
.content {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding: 2rem;
}

.title {
    font-family: 'Marck Script', cursive;
    font-size: 8rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1.5s ease forwards 0.5s;
}

.subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    color: var(--text-color);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1.5s ease forwards 1s;
}

.message {
    font-family: 'PT Serif', serif;
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1.5s ease forwards 1.5s;
}

/* Tribute Section */
.tribute {
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
}

.quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.9);
}

/* Video Section */
.video-section {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
    text-align: center;
}

.video-section h2 {
    font-family: 'Marck Script', cursive;
    font-size: 3rem;
    margin-bottom: 2rem;
    color: var(--text-color);
    opacity: 0;
    transform: translateY(20px);
}

.video-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.video-container video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    border-radius: 8px;
    background-color: #000;
}

.youtube-fallback {
    margin-top: 1rem;
    text-align: center;
    font-family: 'PT Serif', serif;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(20px);
}

.youtube-fallback a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.youtube-fallback a:hover {
    color: var(--tulip-purple);
    text-decoration: underline;
}

/* Wishes Section */
.wishes {
    padding: 4rem 2rem;
}

.wish-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.wish {
    flex: 1 1 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

.wish:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.wish h2 {
    font-family: 'Cormorant Garamond', serif;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.wish p {
    font-family: 'PT Serif', serif;
    line-height: 1.6;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Tulip Container */
.tulip-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Falling Petals */
.falling-petals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.petal {
    position: absolute;
    width: 15px;
    height: 25px;
    background-color: var(--tulip-pink);
    border-radius: 50% 50% 0 50%;
    opacity: 0.6;
    animation: falling linear infinite;
}

/* Animations */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes falling {
    0% {
        transform: translate(0, -10%) rotate(0deg);
    }
    100% {
        transform: translate(100px, 100vh) rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .title {
        font-size: 5rem;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    .message {
        font-size: 1rem;
    }
    
    .quote {
        font-size: 1.5rem;
    }
    
    .wish-container {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 3.5rem;
    }
    
    .content {
        padding: 1rem;
    }
    
    .hero, .tribute, .wishes {
        padding: 2rem 1rem;
    }
}