/* ================================================
   Envelope Opening Animation
   ================================================ */

.env-overlay {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(to bottom, #EDE9E2 0%, #E8E3D9 100%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding-top: 60px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.env-overlay.env-dismiss {
    pointer-events: none;
}

.env-skip {
    position: absolute;
    top: 22px;
    right: 24px;
    background: transparent;
    border: 1px solid rgba(139, 111, 71, 0.35);
    color: rgba(139, 111, 71, 0.75);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    z-index: 10000;
}

.env-skip:hover {
    background: rgba(139, 111, 71, 0.08);
    color: rgba(139, 111, 71, 1);
    border-color: rgba(139, 111, 71, 0.6);
}

/* Scene container — envelope only */
.env-scene {
    position: relative;
    z-index: 1;
    width: min(500px, 65vw, calc(80vh * 802 / 994));
    flex-shrink: 0;
    overflow: visible;
}

/* Envelope image container */
.env-envelope {
    position: relative;
    width: 100%;
    aspect-ratio: 802 / 994;
    z-index: 4;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    cursor: pointer;
    transition: opacity 1s ease, filter 0.3s ease;
}

.env-envelope.opening {
    cursor: default;
}

.env-envelope.env-hide {
    opacity: 0;
    pointer-events: none;
}

.env-img-closed,
.env-img-opened {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.env-img-closed {
    object-fit: contain;
    object-position: bottom center;
    opacity: 1;
    transition: opacity 0.7s ease;
}

.env-img-opened {
    object-fit: contain;
    object-position: bottom center;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.env-envelope.opening .env-img-closed {
    opacity: 0;
}

.env-envelope.opening .env-img-opened {
    opacity: 1;
}

/* Cards grid — lives in overlay, independent of envelope scene */
.env-cards {
    --cell-w: min(240px, 20vw);
    --cell-h: calc(var(--cell-w) * 1.25);
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: var(--cell-w) calc(var(--cell-w) * 1.45) var(--cell-w);
    grid-template-rows: var(--cell-h) var(--cell-h);
    grid-template-areas:
        "c1 c4 c5"
        "c2 c4 c3";
    gap: 10px;
    z-index: 2;
    pointer-events: none;
}

/* Base card — grid item */
.env-card {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(42vh) rotate(var(--rot, 0deg));
    transition:
        transform 0.95s cubic-bezier(0.22, 1.22, 0.36, 1),
        opacity 0.35s ease,
        filter 0.2s ease;
}

.env-card.risen {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg));
    pointer-events: auto;
}

/* Hover for nav cards */
.env-card-1.risen:hover,
.env-card-2.risen:hover,
.env-card-3.risen:hover,
.env-card-5.risen:hover {
    filter: brightness(1.06) drop-shadow(0 8px 24px rgba(0,0,0,0.15));
    cursor: pointer;
}

.env-card-4.risen:hover {
    filter: brightness(1.03);
    cursor: pointer;
}

/* Card 1 — When & Where */
.env-card-1 {
    grid-area: c1;
    --rot: -2deg;
    background: url('../images/backgrounds/whenwhere.png') center / contain no-repeat;
    z-index: 2;
}

/* Card 2 — Entourage */
.env-card-2 {
    grid-area: c2;
    --rot: -1.5deg;
    background: url('../images/backgrounds/entourage-background.png') center / contain no-repeat;
    z-index: 3;
}

/* Card 3 — RSVP */
.env-card-3 {
    grid-area: c3;
    --rot: 2deg;
    background: linear-gradient(160deg, #725C50 0%, #614D43 50%, #533F38 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);
    z-index: 2;
    overflow: visible;
    transform: translateY(42vh) rotate(var(--rot, 0deg));
}

.env-card-3::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 254, 249, 0.3);
    pointer-events: none;
}

.env-card-3::after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(255, 254, 249, 0.15);
    pointer-events: none;
}

.env-card-3.risen {
    transform: translateY(0) rotate(var(--rot, 0deg));
}

.env-card-3-diamond {
    display: block;
    text-align: center;
    color: rgba(255, 254, 249, 0.75);
    font-size: calc(var(--cell-w) * 0.07);
    line-height: 1;
    margin: 6px 0;
}

/* Card 4 — Hero (center, spans 2 rows) */
.env-card-4 {
    grid-area: c4;
    --rot: -0.5deg;
    background:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.45" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') bottom center / 100% auto no-repeat,
        linear-gradient(160deg, #FAF8F3 0%, #EFE9E1 100%);
    border: 1.5px solid #A0826D;
    z-index: 6;
}

.env-card-4::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(160, 130, 96, 0.35);
    pointer-events: none;
}

.env-card-4::after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(160, 130, 96, 0.18);
    pointer-events: none;
}

/* Card 5 — Attire */
.env-card-5 {
    grid-area: c5;
    --rot: 1.5deg;
    background: #FFFEF9;
    border: 1px solid rgba(93, 122, 79, 0.55);
    border-radius: 16px;
    z-index: 3;
}

.env-card-5::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(93, 122, 79, 0.25);
    border-radius: 11px;
    pointer-events: none;
}

.env-card-5::after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid rgba(93, 122, 79, 0.12);
    border-radius: 7px;
    pointer-events: none;
}

.env-card-5 .env-card-section-name {
    font-family: 'Alex Brush', cursive;
    color: #A0826D;
}

/* Hero card inner layout */
.env-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 20px;
    width: 100%;
    height: 100%;
}

.env-hero-logo {
    width: 80%;
    max-width: 220px;
    height: auto;
    display: block;
}

.env-hero-sub {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    font-weight: 300;
    color: #4A4238;
    margin: 0;
    line-height: 1.4;
}

.env-hero-date {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5D7A4F;
    margin: 0;
}

/* Section name label on section cards */
.env-card-section-name {
    font-family: 'Alex Brush', cursive;
    font-size: calc(var(--cell-w) * 0.14);
    padding: 0 16px;
    text-align: center;
    margin: 0;
    position: relative;
    z-index: 1;
}

.env-card-1 .env-card-section-name {
    color: rgba(245, 240, 228, 0.92);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    font-size: calc(var(--cell-w) * 0.10);
}

.env-card-2 .env-card-section-name {
    color: #5C4033;
}

.env-card-3 .env-card-section-name {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: calc(var(--cell-w) * 0.14);
    letter-spacing: 2px;
    color: #FFFEF9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Click-to-open hint */
.env-hint {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(74, 66, 56, 0.6);
    text-align: center;
    margin: 18px 0 0;
    animation: envHintPulse 2s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

.env-hint.hidden {
    opacity: 0;
    pointer-events: none;
    animation: none;
    display: none;
}

@keyframes envHintPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Tablet (601–900px): shrink cells slightly */
@media (max-width: 900px) {
    .env-cards {
        --cell-w: min(200px, 23vw);
        --cell-h: calc(var(--cell-w) * 1.2);
    }
}

@media (max-width: 768px) {
    .env-hero-logo { max-width: 160px; }
}

/* Mobile portrait (≤ 600px): 2-column layout */
/*
   c4 = hero (left col, spans 2 rows)
   c1 = When & Where   (right col, row 1)
   c2 = Entourage      (right col, row 2)
   c3 = RSVP           (left col,  row 3)
   c5 = Attire         (right col, row 3)
*/
@media (max-width: 600px) {
    .env-cards {
        --cell-w: 43vw;
        --cell-h: calc(var(--cell-w) * 1.15);
        --cell-h-tall: calc(var(--cell-w) * 1.45);
        grid-template-columns: var(--cell-w) var(--cell-w);
        grid-template-rows: var(--cell-h-tall) var(--cell-h) var(--cell-h-tall);
        grid-template-areas:
            "c1 c5"
            "c4 c4"
            "c2 c3";
        gap: 8px;
        top: 50%;
    }

    .env-scene { width: 82vw; }
    .env-overlay { padding-bottom: 80px; }

    .env-card-section-name {
        font-size: calc(var(--cell-w) * 0.11);
        padding: 6px 10px;
    }

    .env-card-1 .env-card-section-name {
        font-size: calc(var(--cell-w) * 0.09);
    }

    .env-card-3 .env-card-section-name {
        font-size: calc(var(--cell-w) * 0.11);
        letter-spacing: 1px;
    }

    .env-card-2.risen { transform: translateY(0) rotate(var(--rot, 0deg)); }

    .env-hero-inner { gap: 4px; padding: 12px 16px; }
    .env-hero-logo { max-width: 130px; }
    .env-hero-sub { font-size: 0.7rem; margin-top: -6px; }
    .env-hero-date { font-size: 0.8rem; }
}

/* Landscape mobile (short viewport) */
@media (max-height: 480px) and (max-width: 900px) {
    .env-cards {
        --cell-w: min(160px, 18vw);
        top: 46%;
    }
}