.font-script {
    font-family: "Great Vibes", cursive;
}

.font-display {
    font-family: "Cormorant Garamond", serif;
}

/* Envelope gate */
#envelope-gate {
    background: radial-gradient(circle at 50% 20%, #3f4a3a 0%, #2a3226 60%, #1c2118 100%);
}

.envelope {
    perspective: 1400px;
    width: min(320px, 78vw);
    aspect-ratio: 3 / 2;
}

.envelope-body {
    position: absolute;
    inset: 0;
    background: #f4ead9;
    border-radius: 4px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6);
}

.envelope-pocket {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background: #ece0cb;
    clip-path: polygon(0 0, 50% 45%, 100% 0, 100% 100%, 0 100%);
    z-index: 3;
}

.envelope-flap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 55%;
    background: linear-gradient(160deg, #efe2c9, #e2cfa8);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: top center;
    transform-style: preserve-3d;
    z-index: 4;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.envelope.is-open .envelope-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.envelope-seal {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    background: #7a2e2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f4ead9;
    font-family: "Great Vibes", cursive;
    font-size: 1.1rem;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    z-index: 5;
    transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}

.envelope.is-open .envelope-seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;
}

/* Scroll reveal (JS toggles is-ready on body; GSAP takes over from there) */
.reveal {
    opacity: 1;
}

body.js-ready .reveal {
    opacity: 0;
}

/* Countdown */
.countdown-unit {
    min-width: 4.5rem;
}