/* Animations & Polish */

/* Floating animation for emojis */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

h2 {
    animation: float 3s ease-in-out infinite;
}

/* Enhanced Letter Opening Animation */
@keyframes unfoldLetter {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

#letter-screen.active-section .letter-container {
    animation: unfoldLetter 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Add a romantic glow/background to the letter section */
#letter-screen {
    background: linear-gradient(to bottom, #fff, #fef5f7);
    /* Subtle pink tint at bottom */
    border: 1px solid rgba(255, 182, 193, 0.3);
}

.letter-content {
    position: relative;
    z-index: 1;
}

/* Add some decorative elements via pseudo-elements for the letter */
.letter-container::before {
    content: '🌸';
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 2rem;
    opacity: 0.2;
    animation: float 4s ease-in-out infinite reverse;
}

.letter-container::after {
    content: '✨';
    position: absolute;
    bottom: -10px;
    left: -10px;
    font-size: 1.5rem;
    opacity: 0.3;
    animation: float 5s ease-in-out infinite 1s;
}

/* Smooth button hover */
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(212, 175, 55, 0.4);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}