/* ============================================================
   Kasaya.ph — Envelope Intro (Clean Reset)

   Z-INDEX STRUCTURE:
     env-back          z-index: 3  (very behind)
     env-full-inv      z-index: 4  (same position as envelope)
     env-front-*       z-index: 5  (side + bottom flaps, always in front)
     env-top-flap      z-index: 6  (before open)
                       z-index: 3  (after open — behind invitation)
   ============================================================ */

/* ── Payment locked / pending page ──────────────────────────── */
.inv-payment-locked {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,15,12,.75);
    backdrop-filter: blur(10px);
    padding: 24px;
}

.inv-payment-locked-inner {
    background: #FEFCF8;
    border-radius: 8px;
    padding: 36px 28px;
    max-width: 380px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,.4);
}

.inv-payment-locked-icon {
    font-size: 44px;
    line-height: 1;
}

.inv-payment-locked-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 26px;
    font-weight: 300;
    color: #1A0F0C;
    margin: 0;
}

.inv-payment-locked-sub {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: #6B5B54;
    line-height: 1.7;
    margin: 0;
}

.inv-payment-locked-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.inv-payment-locked-btn {
    display: block;
    padding: 13px;
    background: #C48B9F;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-align: center;
    transition: background .2s;
}

    .inv-payment-locked-btn:hover {
        background: #A06070;
    }

.inv-payment-locked-link {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #9E8C87;
    text-decoration: none;
    transition: color .15s;
}

    .inv-payment-locked-link:hover {
        color: #C48B9F;
    }

/* ── Not found ───────────────────────────────────────────────── */
.inv-not-found {
    position: fixed;
    inset: 0;
    z-index: 9999; /* ← above bg-fixed ✓ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: transparent;
    text-align: center;
    padding: 24px;
}

    .inv-not-found p {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: 24px;
        font-weight: 300;
        color: #3A3230;
        margin: 0;
    }

    .inv-not-found a {
        font-family: 'Jost', sans-serif;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #3A3230;
        text-decoration: none;
        padding: 10px 24px;
        border: 1px solid #8A6520;
        border-radius: 3px;
        transition: all .2s;
    }

        .inv-not-found a:hover {
            color: #C48B9F;
            border-color: #D4B87A;
        }

.inv-expired-page {
    position: fixed;
    inset: 0;
    z-index: 9999; /* ← above bg-fixed ✓ */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: transparent;
    text-align: center;
    padding: 24px;
}

.inv-expired-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 320px;
}

.inv-expired-icon {
    font-size: 56px;
    opacity: .4;
}

.inv-expired-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 28px;
    font-weight: 300;
    color: #3A3230;
    margin: 0;
}

.inv-expired-sub {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: #8A6520;
    line-height: 1.7;
    margin: 0;
}

.inv-expired-btn {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid rgba(250,246,241,.2);
    border-radius: 3px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: #3A3230;
    text-decoration: none;
    transition: all .2s;
}

    .inv-expired-btn:hover {
        border-color: #C48B9F;
        color: #C48B9F;
    }

/* ── Scene ─────────────────────────────────────────────────── */
.env-scene {
    width: 100%;
    height: 100svh;
    background: #ffffff; /*#F5F0E8 <-------------------------------- Temp for transition 6/11 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* was center — pushes everything to bottom */
    position: fixed; /*relative;*/
    inset: 0; /* ← add */
    overflow: hidden;
    gap: 32px;
    padding-bottom: 60px; /* breathing room at the bottom */
}

.env-confetti-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

.env-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.env-petal {
    position: absolute;
    opacity: 0;
    animation: petalFall linear infinite;
    user-select: none;
}

@keyframes petalFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: .3;
    }

    92% {
        opacity: .12;
    }

    100% {
        transform: translateY(105vh) rotate(300deg);
        opacity: 0;
    }
}

/* Subtle dot texture */
.env-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(196,139,159,.1) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

/* ── Stage: fixed envelope size, everything inside ─────────── */
.env-stage {
    position: relative;
    width: 280px;
    height: 200px;
    perspective: 800px;
    will-change: transform;
    transition: transform 3s cubic-bezier(.08, 0.8, .3, 1); /* ← add transition <--------------------- 6/11 */
}

    .env-stage.env-stage--drop {
        transform: translateY(60vh); /* slides fully off screen downward  <---------------------      6/11*/
        transition: transform 4.5s cubic-bezier(.12, 0.6, .25, 1);
    }

.env-inv-card {
    position: absolute;
    width: 185px;
    height: 259px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    overflow: hidden;
    border-radius: 0.5px;
    border: 1.5px solid rgba(201,169,110,0.6);
}

/* ── z-index 3: Envelope back panel ────────────────────────── */
.env-back {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, var(--env-light, #E8D4A8) 0%, /* ← very top — lightest ✓ */
    var(--env-light, #D4B87A) 2%, /* ← 2% transition point ✓ */
    var(--env-color, #B8924A) 45%, /* ← mid */
    var(--env-shadow, #8A6520) 100% /* ← bottom — darkest ✓ */
    );
    /*background: #E0CDB8; */ /* darker warm parchment — noticeably deeper than #EDE0D0 front */
    border: 1.5px solid var(--env-light, #B8924A);
    border-radius: 3px;
    z-index: 3;
    /* ── Updated shadows — more visible ─────────────────────── */
    box-shadow: 0 20px 60px rgba(0,0,0,.45), /* ← main drop shadow — bigger + darker */
    0 8px 24px rgba(139,90,106,.35), /* ← rose tint shadow */
    0 2px 8px rgba(0,0,0,.20), /* ← close shadow — edge definition */
    inset 0 1px 4px rgba(0,0,0,.10); /* ← inner — paper depth */
}

/* ── z-index 4: Full invitation — exact same size as envelope ─ */
.env-full-inv {
    position: absolute;
    inset: 0;
    background: transparent; /*was #FAF6F1 or #fff — remove it */
    border: none; /*remove border too if any */
    z-index: 4;
    overflow: hidden;
    will-change: transform; /*← GPU layer prepared ahead of time */

    transform: translateY(0px); /*starts flat inside envelope, no rotation*/
    transform-origin: center center;
    /*TWO separate transitions — slide first, then rotate */
    transition: transform 3s cubic-bezier(.08, 0.8, .3, 1);
    /*filter: drop-shadow(0 6px 18px rgba(0,0,0,.50)) drop-shadow(0 1px 4px rgba(0,0,0,.30));*/
}

/* ── KEY — stage dropping + invitation sliding up ─────────────
   Stage:      translateY(+80vh)
   Counter:    translateY(-80vh)  cancels parent
   Own offset: translateY(-30svh) invitation rises in viewport
   Combined:   translateY(calc(-80vh - 30svh))
   ─────────────────────────────────────────────────────────── */
.env-stage.env-stage--drop .env-full-inv.env-full-inv--up {
    transform: translateY(calc(-60vh )); /*-30svh*/
    transition: transform 4.5s cubic-bezier(.12, 0.6, .25, 1);
}

/* ── Rotates — no stage drop ─────────────────────────────────── */
.env-full-inv.env-full-inv--rotate {
    transform: translateY(-80px) rotate(-90deg) scale(1.1);
    transition: transform 4.5s cubic-bezier(.12, 0.6, .25, 1); /*transform 3s cubic-bezier(.08, 0.8, .3, 1);*/
    z-index: 20;
}

/* ── KEY — stage dropping + invitation rotating ───────────────
   Stage:      translateY(+80vh)       (transition complete)
   Counter:    translateY(-80vh)       cancels parent
   Own offset: translateY(-100px)      invitation position
   Rotation:   rotate(-90deg) scale(1.2)
   Combined:   translateY(calc(-80vh - 100px)) rotate(-90deg) scale(1.2)
   ─────────────────────────────────────────────────────────── */
.env-stage.env-stage--drop .env-full-inv.env-full-inv--rotate {
    transform: translateY(calc(-60vh - 50px)) rotate(-90deg) scale(1.1);
    transition: transform 4.5s cubic-bezier(.12, 0.6, .25, 1);
    z-index: 20;
}
                                           
     /*Landscape rotation — only applied before env-full-inv rotates */
    .env-inv-landscape {
        transform: translate(-50%, -50%) rotate(90deg) !important;
        transform-origin: center center;
    }   

    /* ── Hero inside envelope — scaled down to fit landscape ────── */
    .env-full-inv .hero-section {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 180px; /* envelope HEIGHT becomes the width after rotation */
        height: 280px; /* envelope WIDTH becomes the height after rotation */
        min-height: unset;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* move to center first, then rotate */
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
    }


/* ── z-index 5: Front side flaps + bottom ──────────────────── */

/* Left side triangle */
.env-front-left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    pointer-events: none;
    width: 125px;
    height: 100%;
    background: linear-gradient( to right, var(--env-light, #E8D4A8) 0%, var(--env-color, #C9A96E) 2%, var(--env-color, #8A6520) 100% );
    clip-path: polygon(0 0, 100% 50%, 0 100%); /* ← triangle flap shape */
}

/* Right side triangle */
.env-front-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
    pointer-events: none;
    width: 125px;
    height: 100%;
    background: linear-gradient( to left, var(--env-light, #E8D4A8) 0%, /* ← edge — lightest ✓ */
    var(--env-color, #C9A96E) 2%, var(--env-color, #8A6520) 100% );
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* Bottom flap */
.env-front-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 115px;
    z-index: 5;
    pointer-events: none;
    /* ── Gradient like side flaps ────────────────────────────── */
    background: var(--env-color, #D4B87A);
    filter: brightness(0.90);
    /* ── Triangle shape pointing up ─────────────────────────── */
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

/* ── Envelope wrapper — moves DOWN after invitation rises ───── */
.env-wrap {
    position: absolute;
    inset: 0;
    transition: transform 1s cubic-bezier(.4, 0, .2, 1) .3s,
                opacity   .8s ease .3s;
}
.env-wrap.env-wrap--drop {
    transform: translateY(180px);
    opacity: 0;
    pointer-events: none;
}

/* ── z-index 6 → 3: Top flap ───────────────────────────────── */
/* ── Shadow wrapper ──────────────────────────────────────────── */
.env-top-flap-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 115px;
    pointer-events: none;
    z-index: 6;
    /* ── Shadow here — not clipped ───────────────────────────── */
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,.30)) drop-shadow(0px 1px 2px rgba(0,0,0,.20));
}

/* ── Top flap ────────────────────────────────────────────────── */
.env-top-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 115px;
    transform-origin: top center;
    pointer-events: none;
    /* ── Remove z-index from here — wrapper handles it ───────── */
    background: linear-gradient( to bottom, var(--env-light, #E8D4A8) 0%, var(--env-color, #C9A96E) 5%, var(--env-shadow, #8A6520) 100% );
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    /* ── Slower, smoother ────────────────────────────────────── */
    transition: transform 2.2s cubic-bezier(.22, 1, .36, 1), z-index 0s linear 1.1s; /* ← z-index switches at halfway ✓ */
}

    /* ── Flap open — only transform ─────────────────────────────── */
    .env-top-flap.env-top-flap--open {
        transform: rotateX(180deg);
    }

/* ── Wrapper open — z-index drops to 3 ──────────────────────── */
.env-top-flap-wrap.env-top-flap--open {
    z-index: 3;
    transition: z-index 0s linear .9s; /* ← drops at halfway ✓ */
}

/* ── Wax seal ───────────────────────────────────────────────── */
.env-seal {
    position: absolute;
    left: 50%; /*36*/
    bottom: -12px;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    background-color: transparent;
    border-radius: 50%;
    border: none; /*2px solid #A06070;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 7;
    /*box-shadow: 0 2px 8px rgba(196,139,159,.3);*/
    transition: opacity .4s ease, transform .4s ease;
    overflow: hidden;
}

.env-seal.env-seal--broken {
    opacity: 0;
    transform: translateX(-50%) scale(.2);
}

/* ── Open CTA ──────────────────────────────────────────────── */

/* ── Top hint — above envelope ───────────────────────────────── */
.env-top-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
    transition: opacity 3s ease, transform 2s ease;
}

.env-top-hint--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}

/* ── Glass card ──────────────────────────────────────────────── */
.env-top-hint-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 28px;
    /* ── Glass effect ── */
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    /* ── Subtle inner highlight ── */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 24px rgba(0,0,0,.15);
}

.env-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: opacity 3s;
    position: relative;
    z-index: 20;
}
.env-cta.env-cta--hidden {
    opacity: 0;
    pointer-events: none;
}
.env-hint {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: rgba(58, 50, 48, .45);
}
/*.env-open-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #FAF6F1;
    background: #3A3230;
    border: none;
    padding: 13px 34px;
    border-radius: 1px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(58,50,48,.18);
    transition: background .2s, transform .15s;
    -webkit-tap-highlight-color: transparent;
}
.env-open-btn:hover  { background: #5A3828; }
.env-open-btn:active { transform: scale(.97); }*/
.env-open-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important; /* ← fix ✓ */
    text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 0 12px rgba(255,255,255,.3);
    background-clip: unset !important; /* ← fix ✓ */
    -webkit-background-clip: unset !important; /* ← fix ✓ */
    z-index: 0;
    padding: 15px 40px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    /* ── Glassmorphism ───────────────────────────────────────── */
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.25);
    /* ── Transition ──────────────────────────────────────────── */
    transition: background .3s ease, box-shadow .3s ease, transform .15s ease, border-color .3s ease;
}

    .env-open-btn span,
    .env-open-btn {
        position: relative;
        z-index: 2;
    }

        /* ── Glowing border animation ────────────────────────────────── */
        .env-open-btn::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 14px;
            background: linear-gradient( var(--angle, 0deg), transparent 30%, rgba(255,255,255,.8) 48%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.8) 52%, transparent 70% );
            z-index: -1;
            animation: btnBorderSpin 5s linear infinite;
            opacity: .6;
        }

        /* ── Inner shimmer ───────────────────────────────────────────── */
        .env-open-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 12px;
            background: linear-gradient( 135deg, rgba(255,255,255,.15) 0%, transparent 50%, rgba(255,255,255,.05) 100% );
            pointer-events: none;
        }

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes btnBorderSpin {
    to {
        --angle: 360deg;
    }
}

.env-open-btn::before,
.env-open-btn::after {
    z-index: -1; /* ← behind text ✓ */
}

/* ── Hover ───────────────────────────────────────────────────── */
.env-open-btn:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.4);
    transform: translateY(-2px);
}

    .env-open-btn:hover::before {
        opacity: 1;
    }

/* ── Active ──────────────────────────────────────────────────── */
.env-open-btn:active {
    transform: translateY(1px) scale(.98);
    transition: transform .08s ease;
}

/* ── Force text visible — scoped to span ─────────────────────── */
.env-open-btn .env-open-btn-text {
    color: #8A6520 !important;
    -webkit-text-fill-color: #8A6520 !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    position: relative;
    z-index: 100;
    display: block;
}

/* ── Full page reveal ──────────────────────────────────────── */
.env-fullpage-reveal {
    position: fixed; /* ← constrain to viewport */
    inset: 0; /* ← fill entire screen */
    overflow-y: auto; /* ← enable scroll */
    animation: envReveal .75s cubic-bezier(.22,1,.36,1) both;
}

    /* ── Invitation content wrapper — card-like shadow ───────────── */
    .env-fullpage-reveal .inv-page {
        box-shadow: -4px 0 16px rgba(0,0,0,.15), 4px 0 16px rgba(0,0,0,.15);
    }

@keyframes envReveal {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reveal Full Page ----------------------------------------------------*/
.env-read-btn {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #FAF6F1;
    background: #3A3230;
    border: none;
    padding: 11px 28px;
    border-radius: 1px;
    cursor: pointer;
    position: relative;
    z-index: 20;
    transition: background .2s, transform .15s, opacity .6s ease;
    -webkit-tap-highlight-color: transparent;
    /* always in DOM but invisible — prevents layout shift */
    opacity: 0;
    pointer-events: none;
}

.env-read-btn--visible {
    opacity: 1;
    pointer-events: auto;
    animation: envFadeUp .7s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: .3s;
}

.env-read-btn:hover {
    background: #5A3828;
}

.env-read-btn:active {
    transform: scale(.97);
}


@keyframes envFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Scene exit — whole envelope screen slides DOWN ────────── */
.env-scene--exit {
    
    animation: sceneExit 2.2s cubic-bezier(.4, 0, .6, 0) both; /* was 1.1s */
    pointer-events: none;
}

@keyframes sceneExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(120vh);
    }
}

/* ── Full page reveal — slides UP from bottom ──────────────── */
.env-fullpage-reveal {
    position: fixed;
    animation: fullPageReveal 2.5s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: .2s;
}

@keyframes fullPageReveal {
    from {
        transform: translateY(100vh);
    }

    to {
        /* positions hero bottom near viewport bottom — works on all sizes */
        transform: translateY(0);
    }
}


/* ── Ambient petals container ────────────────────────────────── */
.inv-ambient-petals {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.inv-ambient-petal {
    position: absolute;
    top: -20px;
    opacity: 0;
    animation: invPetalFall linear infinite;
    user-select: none;
}

@keyframes invPetalFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    5% {
        opacity: .5;
    }

    90% {
        opacity: .2;
    }

    100% {
        transform: translateY(110vh) rotate(380deg);
        opacity: 0;
    }
}

/* ── Preview CTA banner — light, matches invitation body ─────── */
.inv-preview-banner {
    margin-top: 30px;
    padding: 52px 28px 150px;
    text-align: center;
    position: relative;
    overflow: hidden;
    /* ← background and border-top set via inline style 
          so it matches template colors ✓              */
}

.inv-preview-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 380px;
    margin: 0 auto;
}

.inv-preview-floatals {
    display: flex;
    gap: 16px;
    font-size: 14px;
    letter-spacing: .2em;
    opacity: .3;
    margin-bottom: 4px;
}

.inv-preview-banner-label {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin: 0;
}

.inv-preview-banner-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.1;
    margin: 0;
}

.inv-preview-accent {
    font-style: normal;
}

.inv-preview-banner-sub {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
    letter-spacing: .02em;
}

.inv-preview-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.inv-preview-btn-create {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #1A0F0C;
    cursor: pointer;
    transition: opacity .2s;
}

    .inv-preview-btn-create:hover {
        opacity: .85;
    }

.inv-preview-btn-back {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid;
    border-radius: 4px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: opacity .2s;
}

    .inv-preview-btn-back:hover {
        opacity: .7;
    }


.inv-page-loading {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /*background: #FAF6F1;*/
}

.inv-loading-icon {
    font-size: 48px;
    animation: invLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes invLoadingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: .7;
    }
}

.inv-loading-text {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
    color: #C48B9F;
    margin: 0;
}

/* ── Corner frame wrapper ────────────────────────────────────── */
.inv-corner-frame {
    position: absolute;
    inset: 0;
    pointer-events: none; /* ← clicks pass through to envelope ✓ */
    z-index: 999; /* ← above envelope (z-index 6) ✓ */
}

/* ── Fixed on full page reveal ───────────────────────────────── */
.inv-corner-frame--fixed {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* ── Left corner image ───────────────────────────────────────── */
.inv-corner-left-upright {
    position: fixed;
    width: 350px;
    height: auto;
    object-fit: contain;
    object-position: bottom left;
    bottom: -80px;
    left: -40px;
    vertical-align: bottom; /* ← remove inline gap */
    display: block; /* ← removes bottom whitespace */
    margin: 0;
    padding: 0;
}

/* ── Right corner image ──────────────────────────────────────── */
.inv-corner-right-upright {
    position: fixed;
    width: 350px;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    transform: scaleX(-1);
    bottom: -80px;
    right: -40px;
    display: block; /* ← removes bottom whitespace */
    margin: 0;
    padding: 0;
}

/* ── Mobile — hide laydown ───────────────────────────────────── */
.inv-corner-left-laydown,
.inv-corner-right-laydown {
    display: none;
}


/* ── Mobile birthday corners ─────────────────────────────────── */

/* Left — rotated */
.inv-corner-left-upright.inv-corner-bday {
    position: fixed;
    width: 400px;
    height: auto;
    object-fit: contain;
    object-position: bottom left;
    bottom: -100px;
    left: -120px;
    vertical-align: bottom; /* ← remove inline gap */
    display: block; /* ← removes bottom whitespace */
    margin: 0;
    padding: 0;
}

/* Right — mirrored AND rotated combined ── */
.inv-corner-right-upright.inv-corner-bday {
    position: fixed;
    width: 400px;
    height: auto;
    object-fit: contain;
    object-position: bottom right;
    vertical-align: bottom; /* ← remove inline gap */
    transform: scaleX(-1);
    bottom: -100px;
    right: -120px;
    display: block; /* ← removes bottom whitespace */
    margin: 0;
    padding: 0;
}

/* ── CTA inner — bordered card ───────────────────────────────── */
.env-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px;
    background: #A06070;
    backdrop-filter: blur(8px);
}

/* ── Hint text ───────────────────────────────────────────────── */
.env-hint {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #5A3828;
    margin: 0;
}

/* ── Fixed background — stays still during all animations ─────── */
/*.inv-bg-fixed {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;*/ /* ← behind everything */
/*}*/
.inv-bg-fixed {
    position: fixed;
    inset: 0;
    background-size: 100% 100%; /* ← stretch both axes */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    height: 100svh;
}
    /* ── Dark overlay ────────────────────────────────────────────── */
    .inv-bg-fixed::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.01); /* ← adjust to taste */
    }

/* ── Image — stretch to fill completely ──────────────────────── */
.inv-bg-img {
    width: 100%;
    height: 100%;
    object-fit: fill;  /*← stretch, no crop, no ratio constraint */
    display: block;
}

/* ── Make sure EnvelopeIntro renders above background ────────── */
.env-scene {
    z-index: 1;
    background: transparent;
}

.env-fullpage-reveal {
    z-index: 1;
}

.inv-bg-scene {
    display: none; /* ← simplest fix — hide it entirely */
}

/* ── Petals — fixed to viewport, always visible ──────────────── */
.inv-ambient-petals--bg,
.inv-ambient-petals--fg {
    position: fixed; /* ← fixed not absolute */
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.inv-ambient-petals--bg {
    z-index: 2;
}
/* behind envelope */
.inv-ambient-petals--fg {
    z-index: 10;
}
/* in front of envelope */

.inv-ambient-petal {
    position: absolute;
    top: -20px;
    opacity: 0;
    animation: petalFall linear infinite;
    user-select: none;
    pointer-events: none;
}

@keyframes petalFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: .7;
    }

    92% {
        opacity: .3;
    }

    100% {
        transform: translateY(105vh) rotate(300deg);
        opacity: 0;
    }
}

/* ── From label ──────────────────────────────────────────────── */
.env-hint-from {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.env-hint-from-label {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: rgba(250,246,241,#3A3230);
}

.env-hint-from-names {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    /* ── Gradient text — golden shimmer ──────────────────────── */
    background: linear-gradient( 135deg, var(--env-shadow, #8A6520) 0%, var(--env-light, #E8D4A8) 30%, var(--env-color, #C9A96E) 50%, var(--env-light, #E8D4A8) 70%, var(--env-shadow, #8A6520) 100% );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* ── Running shimmer animation ───────────────────────────── */
    animation: nameShimmer 12s linear infinite;
}

@keyframes nameShimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

/* ── Seal logo ───────────────────────────────────────────────── */
.env-seal-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

/* ── Bottom center decoration ────────────────────────────────── */
/*.env-bottom-deco {
    position: fixed;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 9998;*/ /* ← below corner (9999) but above envelope */
/*}

.env-bottom-deco-img {
    width: 320px;*/ /* ← adjust to your image size */
    /*height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom center;
}*/
/* ── Bottom decoration — full width front ────────────────────── */
.env-bottom-deco {
    position: fixed;
    inset: 0;
    background-size: 100% 100%; /* ← stretch both axes */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 9998; /* ← in front of envelope */
    width: 100vw;
    height: 100vh;
    height: 100svh;
    pointer-events: none;
}

.env-bottom-deco-img {
    width: 100%;
    height: 100%;
    object-fit: fill; /*← stretch, no crop, no ratio constraint */
    display: block;
}


/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 360px) {
    .env-stage {
        width: 250px;
        height: 165px;
    }

    /*.env-front-left {
        border-left-width: 88px;
    }*/

    .env-front-right {
        border-right-width: 88px;
    }

    .env-top-flap::before {
        border-left-width: 125px;
    }

    .env-top-flap::after {
        border-right-width: 125px;
    }

    .env-front-bottom::before {
        border-left-width: 125px;
    }

    .env-front-bottom::after {
        border-right-width: 125px;
    }

    .env-inv-bride,
    .env-inv-groom {
        font-size: 17px;
    }
}

@media (max-width: 480px) {

    .env-stage {
        width: calc(100vw - 32px);
        height: calc((100vw - 32px) * 0.714);
    }

    .env-full-inv.env-full-inv--up {
        transform: translateY(calc(-1 * (100vw - 32px) * 0.75));
    }

    .env-front-left,
    .env-front-right {
        width: 46%; /* ← percentage of envelope width ✓ */
    }
    /* Side triangles — half of new height each */
    /*.env-front-left {
        border-top-width: calc((100vw - 32px) * 0.357);
        border-bottom-width: calc((100vw - 32px) * 0.357);
        border-left-width: calc((100vw - 32px) * 0.448);*/ /* 0.428*/
    /*}*/

    .env-front-right {
        border-top-width: calc((100vw - 32px) * 0.357);
        border-bottom-width: calc((100vw - 32px) * 0.357);
        border-right-width: calc((100vw - 32px) * 0.448); /* 0.428*/
    }

    /* Top flap */
    .env-top-flap {
        height: calc((100vw - 32px) * 0.410);
    }

        .env-top-flap::before {
            border-left-width: calc((100vw - 32px) * 0.502); /*0.5*/
            border-top-width: calc((100vw - 32px) * 0.410); /* 0.410*/
        }

        .env-top-flap::after {
            border-right-width: calc((100vw - 32px) * 0.502); /*0.5*/
            border-top-width: calc((100vw - 32px) * 0.410); /*0.410*/
        }

    /* Bottom flap */
    .env-front-bottom {
        height: calc((100vw - 32px) * 0.410);
    }

        .env-front-bottom::before {
            border-left-width: calc((100vw - 32px) * 0.502);
            border-bottom-width: calc((100vw - 32px) * 0.410);
        }

        .env-front-bottom::after {
            border-right-width: calc((100vw - 32px) * 0.502);
            border-bottom-width: calc((100vw - 32px) * 0.410);
        }

    /* Wax seal */
    .env-seal {
        width: calc((100vw - 32px) * 0.143);
        height: calc((100vw - 32px) * 0.143);
        font-size: calc((100vw - 32px) * 0.060);
        /* ── Half of seal height to sit on flap edge ─────────── */
        bottom: calc((100vw - 32px) * 0.143 * -0.5 - 12px);
    }

    /* Invitation card inside envelope */
    .env-inv-card {
        width: calc((100vw - 32px) * 0.678); /* was 0.686 — fills envelope height */
        height: calc((100vw - 32px) * 0.678 * 1.4); /* maintains 5:7 ratio */
    }
/*
    .env-bottom-deco-img {
        width: 700px;
    }*/

    .env-bottom-deco {
        bottom: 0;
    }
}

/* ── Desktop — slightly larger ───────────────────────────────── */
@media (min-width: 768px) {
    .inv-corner-left-upright,
    .inv-corner-right-upright {
        width: 500px; /*280*/
    }

    .inv-corner-left-upright {
        /* center of screen minus half invitation width minus corner width */
        left: calc(50% - 500px - 100px);
    }

    .inv-corner-right-upright {
        /* center of screen minus half invitation width */
        right: calc(50% - 500px - 100px);
        transform: scaleX(-1);
    }

    .inv-corner-left-laydown {
        display: block;
        position: fixed;
        bottom: -120px;
        left: calc(50% - 600px - 200px);
        width: 600px;
        height: auto;
        pointer-events: none;
        transform-origin: bottom left;
    }

    .inv-corner-right-laydown {
        display: block;
        position: fixed;
        bottom: -120px;
        right: calc(50% - 240px);
        width: 600px;
        height: auto;
        pointer-events: none;
        transform: scaleX(-1);
        transform-origin: bottom right;
    }



    .inv-corner-left-upright.inv-corner-bday {
        left: calc(50% - 500px - 100px);
        width: 500px;
        bottom: -140px;
        transform: rotate(-20deg);
    }

    .inv-corner-right-upright.inv-corner-bday {
        right: calc(50% - 500px - 80px);
        width: 500px;
        bottom: -140px;
        transform: scaleX(-1) rotate(-20deg);
    }

    .inv-corner-left-laydown.inv-corner-bday-laydown {
        display: block;
        position: fixed;
        bottom: -120px;
        left: calc(50% - 600px - 200px);
        width: 600px;
        height: auto;
        pointer-events: none;
        transform-origin: bottom left;
    }

    .inv-corner-right-laydown.inv-corner-bday-laydown {
        display: block;
        position: fixed;
        bottom: -120px;
        right: calc(50% - 200px);
        width: 600px;
        height: auto;
        pointer-events: none;
        transform: scaleX(-1);
        transform-origin: bottom right;
    }

    /*.env-bottom-deco-img {
        width: 880px;
    }*/
}