/* Global Styles */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #2c0e18 0%, #4a192c 50%, #2c0e18 100%); /* Darker, more premium romantic night */
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden; /* Prevent horizontal scroll only */
    overflow-y: auto; /* Allow vertical scroll if needed */
    position: relative;
}

/* Continuous Heart Background Animation */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff4d6d" width="48px" height="48px"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    background-size: 60px 60px;
    opacity: 0.05;
    animation: backgroundMove 20s linear infinite;
    z-index: -2;
}

/* Fireflies / Sparkles Effect */
.firefly {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    background-color: #ffe66d;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px #ffe66d;
    animation: fly 10s linear infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    25% { transform: translate(100px, -100px) scale(0.5); opacity: 0.5; }
    50% { transform: translate(200px, 0) scale(1); opacity: 1; }
    75% { transform: translate(100px, 100px) scale(0.5); opacity: 0.5; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}

@keyframes backgroundMove {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

/* From Text Styling (Enhanced for Visibility) */
.from-text {
    font-family: 'Dancing Script', cursive;
    font-size: 1.8rem; /* Increased size */
    color: #d90429; /* Deep Red/Pink */
    margin-top: -10px;
    margin-bottom: 25px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8), 
                 -1px -1px 0 rgba(255, 255, 255, 1); /* White glow for contrast */
    animation: fadeIn 2s ease-in;
    letter-spacing: 1px;
}

/* Glassmorphism Container */
.container {
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 90%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 10;
    transition: transform 0.3s ease;
    margin: 20px auto; /* Ensure margin for scrolling */
}

@media (max-width: 480px) {
    .container {
        padding: 1.5rem;
        width: 95%;
    }
    h1 {
        font-size: 2rem;
    }
    .btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

.container:hover {
    transform: translateY(-5px);
}

/* Typography */
h1 {
    color: #c9184a;
    font-family: 'Pacifico', cursive;
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(255, 100, 100, 0.2);
    min-height: 1.5em; /* Reserve space for typing effect */
}

/* Typing Cursor Effect */
h1::after {
    content: '|';
    animation: blink 0.7s infinite;
    color: #c9184a;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
    75% { opacity: 1; }
}

p.sub-text {
    color: #555;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
}

/* VIP Personalized Greeting */
.greeting-name {
    font-family: 'Dancing Script', cursive;
    font-size: 3.5rem;
    background: linear-gradient(45deg, #ff00cc, #333399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
    animation: fadeInDown 1.5s ease-out, float 3s ease-in-out infinite;
}

.heart-pulse {
    display: inline-block;
    -webkit-text-fill-color: #ff4b6e; /* Reset gradient for emoji */
    animation: pulse 1s infinite;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Love Letter Button */
.letter-btn {
    background: transparent;
    border: 2px solid #ff4d6d;
    color: #ff4d6d;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    transition: all 0.3s;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.letter-btn:hover {
    background: #ff4d6d;
    color: white;
    transform: scale(1.05);
}

/* GIF Container */
.gif-container {
    margin: 10px 0 20px 0;
    min-height: 200px; /* Prevent layout shift */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cute-gif {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.cute-gif:hover {
    transform: scale(1.05);
}

/* Buttons */
.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn {
    padding: 15px 35px;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.yes-btn {
    background: linear-gradient(45deg, #ff4d6d, #ff8fa3);
    color: white;
    box-shadow: 0 5px 15px rgba(255, 77, 109, 0.4);
}

.yes-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 77, 109, 0.6);
}

.yes-btn::after {
    content: '💖';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 2rem;
    opacity: 0.2;
    transform: rotate(30deg);
}

.no-btn {
    background: white;
    color: #ff4d6d;
    border: 2px solid #ff4d6d;
}

.no-btn:hover {
    background: #ffe6ea;
}

/* Music Control */
.music-control {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 20;
}

#musicBtn {
    background: white;
    border: 1px solid #ff4d6d;
    color: #ff4d6d;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#musicBtn:hover {
    background: #ff4d6d;
    color: white;
}

/* Success Message */
#success-message h1 {
    font-size: 3rem;
    color: #e91e63;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#success-message h1::after {
    content: none; /* No cursor for success message */
}

/* Timer */
.timer-container {
    background: rgba(255, 77, 109, 0.1);
    padding: 15px;
    border-radius: 15px;
    margin: 20px 0;
    border: 1px solid #ff4d6d;
}

.timer-container h3 {
    color: #ff4d6d;
    font-family: 'Pacifico', cursive;
    margin: 0 0 10px 0;
    font-size: 1.5rem;
}

#time-count {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}

.hidden {
    display: none;
}

/* Modal (Love Letter) */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); 
    backdrop-filter: blur(5px);
    animation: fadeIn 0.5s;
}

.modal-content {
    background: #fff0f5;
    margin: 10% auto; 
    padding: 40px; 
    border: 1px solid #ffccd5;
    width: 80%; 
    max-width: 500px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(255, 20, 147, 0.3);
    position: relative;
    animation: slideUp 0.5s;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1h2v2H1V1zm4 0h2v2H5V1zm4 0h2v2H9V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1z' fill='%23ffb6c1' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover,
.close-btn:focus,
.close-reasons:hover,
.close-reasons:focus {
    color: #ff4d6d;
    text-decoration: none;
}

.close-reasons {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.modal h2 {
    color: #d90429;
    font-family: 'Pacifico', cursive;
    margin-top: 0;
}

.letter-body {
    font-family: 'Dancing Script', cursive;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #333;
    text-align: left;
}

.signature {
    text-align: right;
    margin-top: 20px;
    font-weight: bold;
    color: #d90429;
}

/* Slideshow */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: 20px auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: none; /* Initially hidden until JS enables it */
}

.slide {
    display: none;
}

.slide-img {
    width: 100%;
    border-radius: 15px;
}

.caption {
    color: #e91e63;
    font-size: 1.2rem;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    font-family: 'Pacifico', cursive;
}

/* Animations */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

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

.animate-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Floating Hearts Animation */
.heart {
    position: fixed;
    top: -10vh;
    font-size: 1.5rem;
    color: #ff4d6d;
    animation: fall linear forwards;
    z-index: 100;
    pointer-events: none;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* Fade animation for slides */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* Funny Exit Animation for No Button */
@keyframes funnyExit {
    0% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.2) rotate(-20deg); }
    100% { transform: scale(0) rotate(360deg) translateY(200px); opacity: 0; }
}

.funny-exit {
    animation: funnyExit 1s forwards;
    pointer-events: none; /* Prevent clicks during animation */
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .container {
        padding: 1.5rem 1rem;
        width: 95%;
        margin-top: 40px; /* Space for music button */
    }
    
    h1 {
        font-size: 1.8rem; /* Smaller font */
        margin-bottom: 0.2rem;
    }

    p.sub-text {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .gif-container {
        min-height: 150px; /* Reduce height */
        margin: 5px 0 15px 0;
    }

    .cute-gif {
        max-height: 180px; /* Limit image height */
        width: auto;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        width: 100%; /* Full width buttons on mobile */
        margin-bottom: 10px;
    }
    
    .buttons {
        flex-direction: column; /* Stack buttons */
        gap: 10px;
        margin-top: 1rem;
    }

    .letter-btn {
        padding: 6px 15px;
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
    
    .letter-body {
        font-size: 1.1rem;
    }

    /* Adjust music button position */
    .music-control {
        top: 10px;
        right: 10px;
    }
    
    #musicBtn {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
}