/* ================================================================
   invitation-card.css — Full-Screen Envelope Wedding Invitation
   ================================================================
   V2 — redesigned from scratch:
   • Covers 100% of the viewport on desktop / tablet / mobile.
   • Elegant ivory botanical letter — NO photos, just a pure card.
   • Click the envelope → wax seal breaks → flap opens (3D) →
     card slides out → grand reveal card scales in → the website
     fades in underneath.
   ================================================================ */

/* ---- Overlay — full viewport coverage ---- */
.invitation-stage {
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Ivory watercolor paper like a fine letter */
    background:
        radial-gradient(60vw 45vh at 18% 12%, rgba(216, 201, 162, 0.38) 0%, transparent 70%),
        radial-gradient(55vw 55vh at 85% 82%, rgba(205, 188, 145, 0.32) 0%, transparent 70%),
        radial-gradient(40vw 30vh at 78% 16%, rgba(232, 224, 199, 0.55) 0%, transparent 70%),
        radial-gradient(45vw 40vh at 10% 88%, rgba(226, 216, 188, 0.45) 0%, transparent 70%),
        linear-gradient(165deg, #f6f1e4 0%, #f1ead9 45%, #ebe2cd 100%);
    transition: opacity 1s ease, visibility 0s linear 1s;
}

/* Fine paper grain */
.invitation-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(160, 140, 95, 0.05) 1px, transparent 1px);
    background-size: 7px 7px;
    mix-blend-mode: multiply;
}

/* Scattered gold speckles */
.invitation-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle 2.2px at 12% 24%, rgba(201, 148, 58, 0.55) 98%, transparent),
        radial-gradient(circle 1.6px at 28% 68%, rgba(201, 148, 58, 0.45) 98%, transparent),
        radial-gradient(circle 2.6px at 88% 30%, rgba(201, 148, 58, 0.5)  98%, transparent),
        radial-gradient(circle 1.8px at 72% 78%, rgba(201, 148, 58, 0.5)  98%, transparent),
        radial-gradient(circle 2px   at 46% 14%, rgba(201, 148, 58, 0.4)  98%, transparent),
        radial-gradient(circle 1.5px at 60% 90%, rgba(201, 148, 58, 0.45) 98%, transparent),
        radial-gradient(circle 2.4px at 8%  52%, rgba(201, 148, 58, 0.4)  98%, transparent),
        radial-gradient(circle 1.7px at 94% 58%, rgba(201, 148, 58, 0.45) 98%, transparent);
}

/* Fade the whole stage away once opened */
.invitation-stage.is-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---- Botanical corner branches ---- */
.inv-botanical {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
    animation: invSway 7s ease-in-out infinite alternate;
    transform-origin: center center;
}

.inv-bot-tl {
    top: -36px; left: -36px;
    width: clamp(170px, 30vw, 340px);
    height: clamp(170px, 30vw, 340px);
}
.inv-bot-br {
    bottom: -36px; right: -36px;
    width: clamp(170px, 30vw, 340px);
    height: clamp(170px, 30vw, 340px);
    transform: rotate(180deg);
    animation-delay: 1.2s;
}
.inv-bot-tr {
    top: -26px; right: -46px;
    width: clamp(130px, 22vw, 260px);
    height: clamp(130px, 22vw, 260px);
    transform: scaleX(-1) rotate(8deg);
    opacity: 0.65;
    animation-delay: 0.6s;
}
.inv-bot-bl {
    bottom: -26px; left: -46px;
    width: clamp(130px, 22vw, 260px);
    height: clamp(130px, 22vw, 260px);
    transform: scaleY(-1) rotate(6deg);
    opacity: 0.65;
    animation-delay: 1.8s;
}

@keyframes invSway {
    from { translate: 0 0; rotate: 0deg; }
    to   { translate: 0 7px; rotate: 1.6deg; }
}

/* ============================================================
   CONTENT COLUMN (heading + envelope + button)
   ============================================================ */
.inv-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 640px;
    padding: max(3vh, env(safe-area-inset-top, 0px)) 20px max(3vh, env(safe-area-inset-bottom, 0px));
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.invitation-stage.is-revealed .inv-content {
    opacity: 0;
    transform: translateY(-5vh) scale(0.96);
    pointer-events: none;
}

/* ---- Eyebrow — Bengali ---- */
.inv-eyebrow {
    font-family: var(--font-bengali, 'Kalpurush', sans-serif);
    font-size: clamp(0.95rem, 3.4vw, 1.2rem);
    letter-spacing: 0.35em;
    color: #8a6a1f;
    margin-bottom: 1.6vh;
    animation: invFadeDown 0.9s ease 0.15s both;
}

/* ---- Heading — elegant serif like a fine letterpress ---- */
.inv-heading {
    font-family: 'Cormorant Garamond', var(--font-body, serif);
    font-weight: 600;
    font-size: clamp(2.1rem, 7.5vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: 0.06em;
    color: #55492f;
    animation: invFadeDown 1s ease 0.3s both;
}

/* ---- Heart divider ---- */
.inv-heart-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2vh 0 1.4vh;
    animation: invFadeDown 1s ease 0.45s both;
}
.inv-h-dash {
    width: clamp(38px, 9vw, 64px);
    height: 1px;
    background: linear-gradient(90deg, transparent, #b49a5e);
}
.inv-h-dash:last-child { background: linear-gradient(90deg, #b49a5e, transparent); }
.inv-h-heart {
    color: #b49a5e;
    font-size: clamp(0.7rem, 2.4vw, 0.95rem);
    animation: invHeartBeat 1.8s ease-in-out infinite;
}

@keyframes invHeartBeat {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(1.25); }
    24%      { transform: scale(1); }
    36%      { transform: scale(1.18); }
    48%      { transform: scale(1); }
}

/* ---- Hint text ---- */
.inv-hint {
    font-family: 'Cormorant Garamond', var(--font-body, serif);
    font-style: italic;
    font-size: clamp(0.92rem, 3.2vw, 1.1rem);
    color: #8c7f60;
    margin-bottom: 3.2vh;
    animation: invFadeUp 1s ease 0.6s both;
}

/* ============================================================
   THE ENVELOPE — pure CSS 3D letter
   ============================================================ */
.envelope-scene {
    perspective: 1400px;
    width: min(78vw, 440px);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: envRise 1.1s var(--ease-smooth, ease) 0.5s both;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.invitation-stage.is-revealed .envelope-scene,
.invitation-stage.is-revealed .inv-open-btn,
.invitation-stage.is-revealed .inv-hint {
    opacity: 0;
    transform: translateY(4vh) scale(0.94);
    pointer-events: none;
}

@keyframes envRise {
    from { opacity: 0; transform: translateY(5vh) scale(0.92); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.envelope {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 7;
    filter:
        drop-shadow(0 24px 48px rgba(84, 66, 30, 0.30))
        drop-shadow(0 6px 14px rgba(84, 66, 30, 0.18));
}

/* Back panel */
.env-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(175deg, #fbf7ec 0%, #f6efdd 100%);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px #e4d9bc;
}

/* The letter card inside (slides out on open) */
.env-card {
    position: absolute;
    left: 5.5%;
    right: 5.5%;
    top: 7%;
    bottom: 12%;
    z-index: 2;
    background:
        linear-gradient(180deg, #fffdf6 0%, #fdf9ee 100%);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px #eee3c8,
        inset 0 0 0 5px #fffdf6,
        inset 0 0 0 6px #e9dcba,
        0 8px 22px rgba(84, 66, 30, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8%;
    transform: translateY(9%);
    transition: transform 1.15s var(--ease-smooth, ease);
}

.env-card-orn {
    font-size: clamp(1rem, 4vw, 1.5rem);
    color: #b49a5e;
    line-height: 1;
}
.env-card-mono {
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 700;
    font-size: clamp(0.95rem, 4vw, 1.5rem);
    letter-spacing: 0.3em;
    color: #6b5a33;
}
.env-card-line {
    width: 34%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9b685, transparent);
}

/* Front pocket — covers the card with a V opening */
.env-pocket {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(190deg, #f9f3e4 0%, #f2e9d3 55%, #eddfc4 100%);
    clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
    border-radius: 12px;
}
/* Pocket side shading for depth */
.env-pocket::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
    background:
        linear-gradient(90deg, rgba(160, 138, 90, 0.16) 0%, transparent 22%),
        linear-gradient(-90deg, rgba(160, 138, 90, 0.16) 0%, transparent 22%),
        linear-gradient(0deg, rgba(160, 138, 90, 0.14) 0%, transparent 30%);
    pointer-events: none;
}

/* Top flap — rotates open in 3D */
.env-flap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 54%;
    z-index: 4;
    background: linear-gradient(180deg, #f4ecd7 0%, #efe4c9 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    border-radius: 12px 12px 0 0;
    transform-origin: top center;
    transform: rotateX(0deg);
    transition:
        transform 1s cubic-bezier(0.6, 0.05, 0.3, 1) 0.42s,
        z-index 0s linear 1.18s;
    backface-visibility: visible;
}

/* Flap inner shading + edge */
.env-flap::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 40%);
    pointer-events: none;
}

/* Wax seal — sits on the flap tip */
.env-seal {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 6;
    width: clamp(58px, 15vw, 84px);
    aspect-ratio: 1;
    transform: translate(-50%, -58%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, #d4536a 0%, #a8162a 45%, #7c0e1e 78%, #5f0a16 100%);
    box-shadow:
        inset 0 0 0 3px rgba(255, 226, 168, 0.35),
        inset 0 -6px 12px rgba(40, 0, 8, 0.5),
        inset 0 5px 10px rgba(255, 255, 255, 0.18),
        0 8px 18px rgba(90, 10, 24, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    animation: sealPress 0.7s var(--ease-spring, ease) 1.15s both;
    transition: transform 0.5s var(--ease-smooth, ease), opacity 0.45s ease;
}

.env-seal span {
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 700;
    font-size: clamp(0.85rem, 2.6vw, 1.25rem);
    color: #f6dfa4;
    text-shadow: 0 1px 3px rgba(60, 0, 10, 0.65);
    line-height: 1;
}
.env-seal i {
    font-style: normal;
    font-size: 0.62em;
    color: #eec97c;
    transform: translateY(-1px);
}

/* Wax rim bumps */
.env-seal::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1.5px dashed rgba(246, 223, 164, 0.5);
}

@keyframes sealPress {
    0%   { transform: translate(-50%, -58%) scale(1.6); opacity: 0; }
    60%  { transform: translate(-50%, -58%) scale(0.94); opacity: 1; }
    100% { transform: translate(-50%, -58%) scale(1); opacity: 1; }
}

/* ============================================================
   OPENING SEQUENCE
   ============================================================ */

/* 1. Seal breaks (animation: none clears the press-in fill so
      the transition can take over) */
.invitation-stage.is-opening .env-seal {
    animation: none;
    transform: translate(-50%, -58%) scale(1.35) rotate(-8deg);
    opacity: 0;
    transition: transform 0.45s var(--ease-smooth, ease), opacity 0.4s ease;
}

/* 2. Flap swings open */
.invitation-stage.is-opening .env-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

/* 3. Letter card slides up out of the envelope */
.invitation-stage.card-out .env-card {
    transform: translateY(-86%);
    z-index: 7;
    transition:
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        z-index 0s linear 0.95s;
}

/* Subtle bounce cue so users know the envelope is tappable */
.envelope-scene::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 26%;
    height: 3px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(84, 66, 30, 0.28) 0%, transparent 70%);
    animation: envCueFloat 2.4s ease-in-out infinite;
}

@keyframes envCueFloat {
    0%, 100% { transform: translateX(-50%) translateY(0)    scale(1);    opacity: 0.7; }
    50%      { transform: translateX(-50%) translateY(-6px) scale(0.86); opacity: 0.35; }
}

.invitation-stage.is-opening .envelope-scene::after { animation: none; opacity: 0; }

/* ============================================================
   GRAND REVEAL CARD
   ============================================================ */
.inv-reveal {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
    transition: opacity 0.85s ease, transform 0.95s var(--ease-spring, ease);
}

.invitation-stage.is-revealed .inv-reveal {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.inv-reveal-card {
    position: relative;
    width: min(88vw, 480px);
    max-height: 84vh;
    overflow: auto;
    background:
        linear-gradient(180deg, #fffdf6 0%, #fdf8ec 100%);
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 1px #e7dabb,
        inset 0 0 0 7px #fffdf6,
        inset 0 0 0 8px #ddcc9f,
        0 30px 70px rgba(84, 66, 30, 0.35);
    padding: clamp(30px, 6vw, 52px) clamp(22px, 6vw, 46px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Corner flourishes */
.inv-reveal-card::before,
.inv-reveal-card::after {
    content: '❧';
    position: absolute;
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    color: #c3ab74;
    opacity: 0.85;
}
.inv-reveal-card::before { top: 12px; left: 16px; }
.inv-reveal-card::after  { bottom: 12px; right: 16px; transform: rotate(180deg); }

.inv-rc-orn {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    color: #b49a5e;
    margin-bottom: 10px;
    animation: invRcItem 0.8s ease 0.25s both;
}
.inv-rc-bn {
    font-family: var(--font-bengali, 'Kalpurush', sans-serif);
    letter-spacing: 0.3em;
    font-size: clamp(0.85rem, 3vw, 1.05rem);
    color: #8a6a1f;
    margin-bottom: 14px;
    animation: invRcItem 0.8s ease 0.4s both;
}
.inv-rc-kick {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    color: #948663;
    margin-bottom: 8px;
    animation: invRcItem 0.8s ease 0.55s both;
}
.inv-rc-names {
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 700;
    font-size: clamp(1.55rem, 6.4vw, 2.5rem);
    line-height: 1.22;
    color: #4a3d22;
    margin-bottom: 14px;
    animation: invRcItem 0.9s var(--ease-spring, ease) 0.7s both;
}
.inv-rc-names .rc-weds {
    display: block;
    font-size: 0.42em;
    font-weight: 400;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #a8162a;
    margin: 6px 0;
}
.inv-rc-rule {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 72%;
    margin-bottom: 14px;
    animation: invRcItem 0.8s ease 0.85s both;
}
.inv-rc-rule span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c9b685);
}
.inv-rc-rule span:last-child { background: linear-gradient(90deg, #c9b685, transparent); }
.inv-rc-rule i { font-style: normal; color: #a8162a; font-size: 0.8rem; }
.inv-rc-date {
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 700;
    letter-spacing: 0.28em;
    font-size: clamp(1rem, 3.6vw, 1.3rem);
    color: #a8162a;
    margin-bottom: 6px;
    animation: invRcItem 0.8s ease 1s both;
}
.inv-rc-day {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    letter-spacing: 0.12em;
    color: #6b5f43;
    margin-bottom: 12px;
    animation: invRcItem 0.8s ease 1.1s both;
}
.inv-rc-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.9rem, 3vw, 1.05rem);
    color: #948663;
    animation: invRcItem 0.8s ease 1.25s both;
}

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

/* ============================================================
   OPEN BUTTON — gold outline like a fine letterpress
   ============================================================ */
.inv-open-btn {
    margin-top: 4vh;
    padding: 15px 42px;
    background: transparent;
    border: 1.5px solid #b49a5e;
    border-radius: 4px;
    color: #7d662f;
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 600;
    font-size: clamp(0.8rem, 3vw, 0.98rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
    animation: invFadeUp 1s ease 0.85s both;
}

.inv-open-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 251, 235, 0.75), transparent);
    transform: skewX(-20deg);
    animation: invBtnSheen 3.2s ease-in-out infinite 2.2s;
    pointer-events: none;
}

@keyframes invBtnSheen {
    0%, 70%  { left: -120%; }
    100%     { left: 220%; }
}

.inv-open-btn:hover,
.inv-open-btn:focus-visible {
    background: linear-gradient(135deg, #a8162a, #7c0e1e);
    border-color: #a8162a;
    color: #fdf3d5;
    box-shadow: 0 12px 32px rgba(168, 22, 42, 0.35);
    transform: translateY(-2px);
    outline: none;
}

.inv-open-btn:active { transform: translateY(0) scale(0.98); }

/* ============================================================
   ENTRANCE KEYFRAMES
   ============================================================ */
@keyframes invFadeDown {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes invFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE — perfect on every screen
   ============================================================ */

/* Short laptops / landscape phones */
@media (max-height: 760px) {
    .inv-heading   { font-size: clamp(1.7rem, 5.5vh, 2.6rem); }
    .inv-eyebrow   { margin-bottom: 1vh; }
    .inv-hint      { margin-bottom: 2vh; }
    .envelope-scene { width: min(60vw, 360px); }
    .inv-open-btn  { margin-top: 2.6vh; padding: 12px 34px; }
}

@media (max-height: 600px) {
    .envelope-scene { width: min(46vw, 300px); }
    .inv-heading { font-size: clamp(1.4rem, 5vh, 2rem); }
    .inv-heart-divider { margin: 1vh 0 0.8vh; }
}

/* Phones */
@media (max-width: 480px) {
    .envelope-scene { width: min(82vw, 360px); }
    .inv-content { padding-left: 16px; padding-right: 16px; }
}

/* Very small phones */
@media (max-width: 360px) {
    .envelope-scene { width: 88vw; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .inv-eyebrow, .inv-heading, .inv-heart-divider, .inv-hint,
    .envelope-scene, .inv-open-btn,
    .inv-rc-orn, .inv-rc-bn, .inv-rc-kick, .inv-rc-names,
    .inv-rc-rule, .inv-rc-date, .inv-rc-day, .inv-rc-note {
        animation-duration: 0.01s !important;
        animation-delay: 0s !important;
    }
    .env-flap, .env-card, .env-seal { transition-duration: 0.3s !important; transition-delay: 0s !important; }
    .inv-botanical, .envelope-scene::after, .inv-h-heart { animation: none !important; }
}

/* ---- Keep floating site buttons under the overlay ---- */
body.invitation-locked .music-toggle-btn,
body.invitation-locked .scroll-top-btn {
    opacity: 0 !important;
    pointer-events: none !important;
}