/* --------------------------------------------------
   Basic page
-------------------------------------------------- */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: #f5f1ea;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* --------------------------------------------------
   Main container
-------------------------------------------------- */

.invitation-container {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}


/* --------------------------------------------------
   Utility
-------------------------------------------------- */

.hidden {
    display: none !important;
}


/* --------------------------------------------------
   Envelope
-------------------------------------------------- */

.envelope {
    width: min(90vw, 500px);
    aspect-ratio: 1.5 / 1;

    cursor: pointer;

    perspective: 1000px;

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.envelope.opening {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.envelope-body {
    position: relative;

    width: 100%;
    height: 100%;

    background: #ffffff;

    border: 1px solid #d8d0c5;

    border-radius: 6px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.12);

    overflow: hidden;
}


/* Envelope flap */

.envelope-flap {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 60%;

    background: #eee8df;

    clip-path: polygon(
        0 0,
        50% 100%,
        100% 0
    );

    border-bottom: 1px solid #d8d0c5;

    transform-origin: top center;

    transition:
        transform 0.6s ease;
}

.envelope.opening .envelope-flap {
    transform: rotateX(180deg);
}


/* Envelope text */

.envelope-content {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 20px;
}

.envelope-small {
    margin: 8px 0;

    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #777;
}

.envelope-content h1 {
    margin: 8px 0;

    font-size: clamp(2rem, 7vw, 3.5rem);

    font-weight: normal;

    color: #292929;
}


/* --------------------------------------------------
   Card
-------------------------------------------------- */

.card-container {
    width: min(90vw, 600px);

    perspective: 1500px;
}

.card {
    position: relative;

    width: 100%;

    aspect-ratio: 3 / 4;

    cursor: pointer;

    transform-style: preserve-3d;

    transition:
        transform 0.8s cubic-bezier(
            0.4,
            0.0,
            0.2,
            1
        );

    outline: none;
}

.card.flipped {
    transform: rotateY(180deg);
}


/* --------------------------------------------------
   Card faces
-------------------------------------------------- */

.card-face {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border-radius: 8px;

    overflow: hidden;

    backface-visibility: hidden;

    -webkit-backface-visibility: hidden;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.18);
}

.card-face img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Front */

.card-front {
    transform: rotateY(0deg);
}


/* Back */

.card-back {
    transform: rotateY(180deg);
}


/* --------------------------------------------------
   Accessibility / focus
-------------------------------------------------- */

.envelope:focus-visible,
.card:focus-visible {
    outline: 3px solid #777;
    outline-offset: 6px;
}


/* --------------------------------------------------
   Mobile adjustments
-------------------------------------------------- */

@media (max-width: 600px) {
    .invitation-container {
        padding: 16px;
    }

    .envelope {
        width: 92vw;
    }

    .card-container {
        width: 92vw;
    }
}


/* --------------------------------------------------
   Reduced motion
-------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .envelope,
    .envelope-flap,
    .card {
        transition: none;
    }
}