:root {
    --bg-gradient: linear-gradient(135deg, #eaf0ea 0%, #d2dcd2 100%);
    --envelope-base: #f2cdd6;
    /* Beautiful soft pink - slightly darker for base */
    --envelope-dark: #e8b1be;
    /* Shadow pink - darker for contrast */
    --envelope-light: #fef0f4;
    /* Highlight pink - lighter for contrast */
    --paper-color: #ffffff;
    --text-gold: #cba36f;
    --text-dark: #7a5c61;
}

/* Screen Setup */
#landingScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-gradient);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 1200px;
    /* Crucial for 3D realism */
}

/* =========================================
       ULTRA-REALISTIC ENVELOPE STRUCTURE
       ========================================= */
.envelope-wrapper {
    position: relative;
    width: 360px;
    height: 250px;
    cursor: pointer;
    z-index: 30;
    /* Hover float effect */
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: drop-shadow(0 15px 35px rgba(180, 110, 125, 0.5));
}

.envelope-wrapper:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 20px 45px rgba(180, 110, 125, 0.6));
}

.envelope-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--envelope-base);
    border-radius: 8px;
    z-index: 1;
}

/* FLAPS USING CLIP-PATH (Zero Gaps, Perfect Shapes) */
.flap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.side-flap {
    background: linear-gradient(to right, var(--envelope-light), var(--envelope-dark));
    z-index: 3;
}

.left-flap {
    clip-path: polygon(0 0, 55% 50%, 0 100%);
    border-radius: 8px 0 0 8px;
    filter: drop-shadow(3px 0 5px rgba(0, 0, 0, 0.1));
}

.right-flap {
    background: linear-gradient(to left, var(--envelope-light), var(--envelope-dark));
    clip-path: polygon(100% 0, 45% 50%, 100% 100%);
    border-radius: 0 8px 8px 0;
    filter: drop-shadow(-3px 0 5px rgba(0, 0, 0, 0.1));
}

.bottom-flap {
    background: linear-gradient(to top, var(--envelope-base), var(--envelope-dark));
    clip-path: polygon(0 100%, 50% 40%, 100% 100%);
    border-radius: 0 0 8px 8px;
    z-index: 4;
    /* Softer shadow so it sits beneath the top flap */
    filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}

.top-flap {
    background: linear-gradient(to bottom, var(--envelope-light), var(--envelope-base));
    clip-path: polygon(0 0, 50% 55%, 100% 0);
    border-radius: 8px 8px 0 0;
    z-index: 5;
    transform-origin: top;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.3s;
    /* Stronger, darker drop shadow so it clearly overlaps everything */
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

/* =========================================
       THE BEAUTIFUL PAPER DESIGN INSIDE
       ========================================= */
.letter {
    position: absolute;
    top: 5px;
    left: 10px;
    right: 10px;
    height: 230px;
    background-color: var(--paper-color);
    border-radius: 6px;
    z-index: 2;
    /* Starts inside envelope */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 10px;
}

.letter-inner {
    position: relative;
    height: 100%;
    border: 1px solid #f2cfd7;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* Elegant inner dashed border */
    box-shadow: inset 0 0 0 4px #ffffff, inset 0 0 0 5px #f2cfd7;
    background: radial-gradient(circle at center, #fff 60%, #fffcfd 100%);
}

.floral-accent {
    width: 30px;
    height: 30px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f2cfd7"><path d="M12 2C9.5 2 7 4 7 7c0 2 1.5 4 4 5-2.5 1-4 3-4 5 0 3 2.5 5 5 5s5-2 5-5c0-2-1.5-4-4-5 2.5-1 4-3 4-5 0-3-2.5-5-5-5z"/></svg>') center/contain no-repeat;
    margin-bottom: 10px;
}

.letter h3 {
    font-family: 'Great Vibes', cursive;
    color: var(--text-gold);
    font-size: 2.4rem;
    margin: 0 0 5px 0;
}

.letter p {
    color: var(--text-dark);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
}

.divider {
    width: 40px;
    height: 1px;
    background: var(--text-gold);
    margin: 15px 0;
}

.click-text {
    font-size: 0.65rem;
    color: #a48b90;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =========================================
       THE WAX SEAL
       ========================================= */
.seal {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f7a8b8 0%, #e8879b 100%);
    border-radius: 50%;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.seal svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

/* =========================================
       THE MASTERPIECE ANIMATION SEQUENCE
       ========================================= */

/* 1. Flap opens */
.envelope-wrapper.open .top-flap {
    transform: rotateX(180deg);
    z-index: 1;
    /* Drops behind letter once opened */
}

/* 2. Seal breaks/fades */
.envelope-wrapper.open .seal {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
    visibility: hidden;
}

/* 3. The Paper pulls out, swaps layers, and floats! */
.envelope-wrapper.open .letter {
    animation: extractLetter 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.5s;
    /* Wait for flap to open */
}

@keyframes extractLetter {
    0% {
        transform: translateY(0) scale(1);
        z-index: 2;
    }

    /* Slide completely out of the top of the envelope */
    40% {
        transform: translateY(-260px) scale(1);
        z-index: 2;
    }

    /* Swap layers instantly while floating above the envelope */
    41% {
        transform: translateY(-260px) scale(1);
        z-index: 100;
    }

    /* Float down IN FRONT of the envelope and expand gracefully */
    100% {
        transform: translateY(-40px) scale(1.15);
        z-index: 100;
        box-shadow: 0 25px 60px rgba(200, 130, 140, 0.4);
    }
}

/* =========================================
       BUTTERFLIES (Flapping Wings & Flying)
       ========================================= */
.butterfly {
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 10;
    bottom: -50px;
    animation: flyUpward 8s linear infinite;
    opacity: 0;
}

.butterfly::before,
.butterfly::after {
    content: '';
    position: absolute;
    top: 0;
    width: 12px;
    height: 20px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50% 50% 10% 80%;
    box-shadow: inset 0 0 5px rgba(240, 160, 175, 0.6);
    animation: flutter 0.15s infinite alternate ease-in-out;
    transform-origin: right center;
}

.butterfly::after {
    left: 12px;
    border-radius: 50% 50% 80% 10%;
    transform-origin: left center;
    animation-delay: -0.07s;
}

.b1 {
    left: 15%;
    animation-duration: 9s;
    animation-delay: 0s;
    transform: scale(0.9);
}

.b2 {
    left: 80%;
    animation-duration: 7s;
    animation-delay: 2s;
    transform: scale(1.1);
}

.b3 {
    left: 50%;
    animation-duration: 11s;
    animation-delay: 1s;
    transform: scale(0.7);
}

.b4 {
    left: 30%;
    animation-duration: 8s;
    animation-delay: 4s;
    transform: scale(1.2);
}

.b5 {
    left: 85%;
    animation-duration: 10s;
    animation-delay: 0.5s;
    transform: scale(0.8);
}

@keyframes flutter {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(65deg);
    }
}

@keyframes flyUpward {
    0% {
        bottom: -10%;
        transform: translateX(0) scale(1);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateX(60px) scale(1.1);
    }

    85% {
        opacity: 1;
    }

    100% {
        bottom: 110%;
        transform: translateX(-40px) scale(1);
        opacity: 0;
    }
}

/* =========================================
       MOBILE RESPONSIVENESS FOR ENVELOPE
       ========================================= */
@media screen and (max-width: 480px) {
    .envelope-wrapper {
        /* Scale down the entire envelope proportionally so it fits on small screens */
        transform: scale(0.85);
    }
    
    .envelope-wrapper:hover {
        /* Maintain the hover effect but scaled */
        transform: scale(0.85) translateY(-5px);
    }
}

@media screen and (max-width: 360px) {
    .envelope-wrapper {
        transform: scale(0.75);
    }

    .envelope-wrapper:hover {
        transform: scale(0.75) translateY(-5px);
    }
}