:root {
    --dark: #09240d;
    --primary: #06402b;
    --secondary: #085957;
    --red: #471c1c;
    --color3: var(--primary);
    --color5: var(--secondary);
    --envelope-width: clamp(0px, calc(30vh*5/3), 95%);
    --envelope-height: calc(3/5 * var(--envelope-width));
    --flap-height: calc(0.4 * var(--envelope-height));
    --invite-height: calc(var(--envelope-height) / 0.7); /* This is a guesstimate ... */
    --space: 1rem;
    --full-height: calc(var(--flap-height) + var(--invite-height) + 4 * var(--space))
}
    
.container {
    position: relative;
    width: var(--envelope-width);
    aspect-ratio: 5/3;
    margin: 0 auto;
    margin-top: calc(var(--full-height) / 2 - var(--flap-height));
    cursor: pointer;
}

.envelope {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(45deg, var(--dark), var(--secondary)); */
    background-image: url('assets/invitation/green-texture.jpg');
    background-size: 200%;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s;
}


.flap {
    position: absolute;
    width: 100%;
    height: 40%;
    transform-origin: top center;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px 4px 0 0;
    box-shadow: 0px 1px 3px black;
    z-index: 2;
}

/* Front side of flap */
.flap-front {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(160deg, var(--primary) 40%, var(--dark) 90%); */
    background-image: url('assets/invitation/green-texture.jpg');
    background-size: cover;
    backface-visibility: hidden;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: rotateX(0deg);
}

/* Back side of flap (hidden design) */
.flap-back {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background:
        radial-gradient(circle at center, transparent 60%, rgba(255, 255, 255, 0.3) 60.5%, transparent 61%) 50% 30% / 100% 100%,
        linear-gradient(45deg, var(--primary), black); */
    background-image: url('assets/invitation/green-texture.jpg');
    background-size: cover;
    backface-visibility: hidden;
    border-radius: 4px 4px 0 0;
    transform: rotateX(180deg);
}

.flap-glue-strip {
    opacity: 0.4;
    background-size: 48%; /* this matches the size on the site background */
    background-image: url('./assets/leaves/tropical-background2.png');
    width: calc(100% - 2 * var(--space));
    height: calc(100% - 2 * var(--space));
}

.invitation {
    position: absolute;
    margin: 0 var(--space) 0 var(--space);
    padding: var(--space);
    height: fit-content;
    background: linear-gradient(45deg, #415345, #edffee);
    top: -40%;
    opacity: 0;
    transition: all 0.8s 0.3s;
    text-align: center;
    text-decoration: none;
    color: #5c2d1d;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    font-family: 'Sacramento', cursive;
    z-index: 1;
}

.container:not(:hover) .invitation {
    transition: all 0.5s;
    /* speed up on close to zip in before the flap closes*/
}

.container:hover .flap {
    transform: perspective(800px) rotateX(180deg);
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(160deg, var(--primary) 40%, var(--secondary) 90%);
}

.container:hover .flap::after {
    /* display: block; */
    opacity: 1;
}

.container:hover .invitation {
    top: calc(2 * var(--space));
    opacity: 1;
}

.invitation-text {
    text-align: center;
    padding: 25px;
    position: relative;
}

.invitation-text::before {
    display: none;
}

.invitation img {
    width: 100%;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;

}

.round-top {    
    border-top-left-radius: 50% 35% !important;
    border-top-right-radius: 50% 35% !important;
}

h2 {
    font-size: 2.5em;
    margin: 0;
    color: #5c2d1d;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

p {
    font-size: 1.2em;
    margin: 10px 0;
}

/* Wax Seal Styles */
.external-seal {
    position: absolute;
    /* bottom: 20px; */
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    /* height: /60px; */
    z-index: 3;
    /* transition: 0.8s; */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 3s;
    opacity: 1;

}

.external-seal img {
    width:100%;
    height:100%;
}

.wax-seal {
    cursor: pointer;
    /* transition: transform 0.8s; */
}

.wax-seal:hover {
    transform: scale(1.05);
}

.seal-text {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    fill: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glitter {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.container:hover .glitter {
    opacity: 0.3;
}

.container:hover .external-seal {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Faster fade-out */
}

.container:not(:hover) .external-seal {
    transition:
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s,
        /* 0.6s delay matches flap duration */
        transform 0.3s;
}