/* =========================================================
   WEDDING FULL PAGE INVITATION V3
   ========================================================= */

#weddingInvitation {
    --paper:#fff8f6;
    --wine:#8c3f43;
    --wine-soft:#a35d63;
    --text:#743f43;

    position:fixed;
    inset:0;

    z-index:2147483000;

    display:none;

    overflow:hidden;

    background:
      radial-gradient(circle at 0% 40%,rgba(226,190,198,.32),transparent 28%),
      radial-gradient(circle at 100% 72%,rgba(225,204,199,.30),transparent 28%),
      linear-gradient(135deg,#fff,#fbfaf8);

    font-family:
      var(--font-heading);
}


#weddingInvitation.is-open {
    display:block;
}


body.invitation-open {
    overflow:hidden !important;
}


/* =========================================================
   MAIN VIEWER
   ========================================================= */

.invite-stage {
    position:absolute;
    inset:0;

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

    perspective:2400px;

    overflow:hidden;
}


.invite-deck {
    position:relative;

    width:min(
      1320px,
      calc(100vw - 170px),
      calc((100vh - 64px) * 1.414)
    );

    aspect-ratio:1.414 / 1;

    max-height:calc(100vh - 64px);

    transform-style:preserve-3d;
}


/*
 * Cac lop giay nam phia sau,
 * tao cam giac nhieu trang nhu mau.
 */
.invite-deck::before,
.invite-deck::after {
    content:"";

    position:absolute;
    inset:0;

    border-radius:28px;

    background:#ded9d7;

    box-shadow:
      0 18px 45px rgba(50,35,38,.14);

    pointer-events:none;
}


.invite-deck::before {
    transform:
      translate3d(42px,16px,-80px)
      rotate(.7deg);

    opacity:.82;
}


.invite-deck::after {
    transform:
      translate3d(24px,9px,-40px)
      rotate(.35deg);

    background:#e8e1df;

    opacity:.92;
}


/* =========================================================
   PAGE
   ========================================================= */

.invite-slide {
    position:absolute;
    inset:0;

    overflow:hidden;

    border-radius:28px;

    background:var(--paper);

    color:var(--text);

    box-shadow:
      0 22px 55px rgba(54,35,39,.16);

    transform-origin:left center;

    transform-style:preserve-3d;

    opacity:0;

    pointer-events:none;

    will-change:
      transform,
      opacity;

    transition:
      transform 720ms cubic-bezier(.22,.61,.36,1),
      opacity 420ms ease,
      filter 500ms ease;
}


.invite-slide.is-active {
    z-index:30;

    opacity:1;

    pointer-events:auto;

    transform:
      translate3d(0,0,0)
      rotateY(0deg)
      scale(1);

    filter:none;
}


.invite-slide.is-before {
    z-index:40;

    opacity:0;

    transform:
      translate3d(-102%,0,25px)
      rotateY(-16deg)
      scale(.985);

    filter:brightness(.96);
}


.invite-slide.is-after {
    z-index:22;

    opacity:1;

    transform:
      translate3d(25px,10px,-45px)
      rotateY(-1.1deg)
      scale(.987);

    filter:brightness(.985);
}


.invite-slide.is-after-2 {
    z-index:18;

    opacity:1;

    transform:
      translate3d(45px,18px,-80px)
      rotateY(-1.8deg)
      scale(.972);

    filter:brightness(.96);
}


.invite-slide.is-far {
    z-index:10;

    opacity:0;

    transform:
      translate3d(58px,24px,-120px)
      scale(.95);
}


/* =========================================================
   PAPER TEXTURE
   ========================================================= */

.invite-paper {
    background:
      radial-gradient(circle at 12% 10%,rgba(120,70,70,.035) 0 1px,transparent 1.5px),
      radial-gradient(circle at 70% 60%,rgba(120,70,70,.028) 0 1px,transparent 1.5px),
      linear-gradient(135deg,#fffaf8,#fff6f4);

    background-size:
      21px 21px,
      29px 29px,
      auto;
}


/* =========================================================
   PAGE 1 - COVER
   ========================================================= */

.invite-cover-layout {
    position:relative;

    width:100%;
    height:100%;

    display:grid;

    grid-template-columns:
      1fr 1fr;

    align-items:center;
}


.invite-cover-left,
.invite-cover-right {
    position:relative;

    height:100%;

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


.invite-cover-left {
    padding:8%;

    box-sizing:border-box;
}


.invite-flower-svg {
    width:min(72%,390px);
    height:auto;

    color:var(--wine);

    opacity:.96;
}


.invite-cover-right::before {
    content:"";

    position:absolute;

    left:0;
    top:20%;
    bottom:20%;

    width:2px;

    background:var(--wine);
}


.invite-cover-title {
    margin:0;

    font-size:clamp(54px,6vw,88px);

    font-weight:400;

    color:var(--wine);

    letter-spacing:.025em;
}


.invite-swipe-hint {
    position:absolute;

    left:42px;
    bottom:34px;

    font-size:17px;

    color:var(--wine-soft);
}


/* =========================================================
   PAGE 2 - INVITATION
   ========================================================= */

.invite-main-grid {
    display:grid;

    grid-template-columns:
      48% 52%;

    width:100%;
    height:100%;
}


.invite-main-photo {
    width:100%;
    height:100%;

    object-fit:cover;
}


.invite-main-photo-placeholder {
    width:100%;
    height:100%;

    background:
      linear-gradient(
        145deg,
        #eadbd6,
        #fff
      );
}


.invite-main-copy {
    box-sizing:border-box;

    padding:
      6% 6.5%;

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

    text-align:center;

    background:#fff7f5;
}


.invite-main-subtitle {
    margin-bottom:28px;

    font-family:
      var(--font-body);

    font-size:clamp(16px,1.6vw,25px);

    color:#99565b;
}


.invite-couple-title {
    margin:0 0 34px;

    color:var(--wine);

    font-weight:400;

    font-size:clamp(50px,5.8vw,88px);

    line-height:1.08;

    text-transform:uppercase;
}


.invite-main-text {
    max-width:620px;

    margin:0;

    font-family:
      var(--font-body);

    font-size:clamp(15px,1.45vw,24px);

    line-height:1.55;

    color:#94545a;
}


.invite-guest-highlight {
    margin-bottom:16px;

    font-weight:700;
}


.invite-event-block {
    margin-top:26px;

    font-family:
      var(--font-body);

    color:#8d494f;
}


.invite-event-block strong {
    display:block;

    margin-bottom:7px;

    font-size:clamp(18px,1.65vw,27px);

    text-transform:uppercase;
}


.invite-event-address {
    font-size:clamp(13px,1.25vw,20px);

    line-height:1.5;
}


.invite-event-time {
    margin-top:26px;

    font-size:clamp(14px,1.3vw,21px);

    line-height:1.6;
}


.invite-divider-small {
    width:2px;
    height:54px;

    margin:26px auto;

    background:var(--wine);
}


.invite-rsvp-line {
    font-family:
      var(--font-body);

    font-size:clamp(13px,1.2vw,19px);

    line-height:1.5;

    color:#9a595e;
}


/* =========================================================
   PAGE 3 - STORY
   ========================================================= */

.invite-story-page {
    padding:4.5% 4%;

    box-sizing:border-box;

    background:#fff7f5;
}


.invite-section-heading {
    margin:0 0 4%;

    font-size:clamp(43px,5vw,72px);

    font-weight:400;

    color:var(--wine);
}


.invite-story-grid {
    display:grid;

    grid-template-columns:
      54% 46%;

    gap:3%;

    height:76%;
}


.invite-story-left {
    display:flex;
    align-items:center;
    justify-content:center;
}


.invite-story-left img {
    width:72%;
    height:100%;

    object-fit:cover;
}


.invite-story-right {
    display:grid;

    grid-template-rows:
      1fr 1fr;

    gap:26px;
}


.invite-story-right img {
    width:100%;
    height:100%;

    object-fit:cover;
}


/* =========================================================
   PAGE 4 - PRESENT
   ========================================================= */

.invite-present-grid {
    display:grid;

    grid-template-columns:
      37% 63%;

    width:100%;
    height:100%;

    background:#fff7f5;
}


.invite-present-left {
    display:grid;

    grid-template-rows:
      repeat(3,1fr);

    gap:10px;
}


.invite-present-left img {
    width:100%;
    height:100%;

    object-fit:cover;
}


.invite-present-right {
    display:grid;

    grid-template-rows:
      63% 37%;
}


.invite-present-hero {
    width:100%;
    height:100%;

    object-fit:cover;
}


.invite-present-title {
    display:flex;

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

    padding:30px;

    text-align:center;

    color:var(--wine);

    font-size:clamp(48px,5.2vw,82px);

    font-weight:400;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.invite-image-empty {
    width:100%;
    height:100%;

    display:flex;

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

    background:
      linear-gradient(
        145deg,
        #f3e5e2,
        #fffaf8
      );

    color:#b88b8d;

    font-style:italic;
}


/* =========================================================
   PAGE 5 - THANK YOU
   ========================================================= */

.invite-thank-page {
    position:relative;

    width:100%;
    height:100%;

    display:flex;

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

    flex-direction:column;

    background:#fff7f5;

    color:var(--wine);
}


.invite-thank-flower {
    width:120px;
    height:160px;

    margin-bottom:40px;

    color:var(--wine);
}


.invite-thank-title {
    margin:0;

    font-size:clamp(48px,5.7vw,86px);

    font-weight:400;
}


.invite-thank-page::after {
    content:"";

    position:absolute;

    right:17%;
    top:9%;
    bottom:11%;

    width:2px;

    background:var(--wine);
}


.invite-final-actions {
    display:flex;

    gap:10px;

    margin-top:45px;

    position:relative;

    z-index:2;
}


.invite-action-btn {
    min-height:42px;

    display:inline-flex;

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

    padding:0 18px;

    border:1px solid var(--wine);

    border-radius:999px;

    background:var(--wine);

    color:#fff;

    font-family:
      var(--font-body);

    font-size:12px;

    cursor:pointer;

    text-decoration:none;
}


.invite-action-btn.light {
    background:#fff;

    color:var(--wine);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.invite-nav {
    position:fixed;

    top:50%;

    z-index:2147483400;

    width:58px;
    height:100px;

    border:0;

    background:transparent;

    color:#2e2828;

    font-family:
      var(--font-body);

    font-size:54px;

    font-weight:200;

    line-height:1;

    cursor:pointer;

    opacity:.90;

    transform:translateY(-50%);

    transition:
      opacity .18s ease,
      transform .18s ease;
}


.invite-nav:hover {
    opacity:1;
}


.invite-nav-prev {
    left:17px;
}


.invite-nav-next {
    right:17px;
}


.invite-nav-prev:hover {
    transform:
      translateY(-50%)
      translateX(-3px);
}


.invite-nav-next:hover {
    transform:
      translateY(-50%)
      translateX(3px);
}


.invite-nav.is-disabled {
    opacity:.10;

    pointer-events:none;
}


/* =========================================================
   TOP CONTROLS
   ========================================================= */

.invite-close-v3 {
    position:fixed;

    right:18px;
    top:16px;

    z-index:2147483500;

    width:40px;
    height:40px;

    border:1px solid rgba(90,60,65,.15);

    border-radius:50%;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(10px);

    color:#654b50;

    cursor:pointer;

    font-size:22px;
}


.invite-page-status {
    position:fixed;

    z-index:2147483500;

    left:50%;
    bottom:13px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:11px;

    color:#786368;

    font-family:
      var(--font-body);

    font-size:10px;

    letter-spacing:.08em;
}


.invite-progress {
    width:160px;
    height:3px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(91,67,72,.14);
}


.invite-progress span {
    display:block;

    width:20%;
    height:100%;

    border-radius:inherit;

    background:#72575d;

    transition:
      width 500ms
      cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   MOBILE
   Moi slide van la MOT TRANG, khong tro lai layout cu.
   ========================================================= */

@media(max-width:720px) {

    .invite-stage {
        align-items:center;
    }


    .invite-deck {
        width:calc(100vw - 20px);

        height:min(
          84vh,
          760px
        );

        aspect-ratio:auto;
    }


    .invite-slide {
        border-radius:18px;
    }


    .invite-deck::before {
        transform:
          translate3d(9px,9px,-50px);
    }


    .invite-deck::after {
        transform:
          translate3d(5px,5px,-25px);
    }


    .invite-cover-layout {
        grid-template-columns:1fr;

        grid-template-rows:
          55% 45%;
    }


    .invite-cover-right::before {
        left:16%;
        right:16%;
        top:0;
        bottom:auto;

        width:auto;
        height:1px;
    }


    .invite-cover-title {
        font-size:46px;
    }


    .invite-swipe-hint {
        left:24px;
        bottom:20px;

        font-size:13px;
    }


    .invite-main-grid {
        grid-template-columns:1fr;

        grid-template-rows:
          43% 57%;
    }


    .invite-main-copy {
        padding:
          22px
          24px;
    }


    .invite-main-subtitle {
        margin-bottom:9px;

        font-size:13px;
    }


    .invite-couple-title {
        margin-bottom:13px;

        font-size:38px;
    }


    .invite-main-text {
        font-size:12px;
    }


    .invite-event-block {
        margin-top:10px;
    }


    .invite-event-block strong {
        font-size:14px;
    }


    .invite-event-address,
    .invite-event-time,
    .invite-rsvp-line {
        font-size:11px;
    }


    .invite-event-time {
        margin-top:9px;
    }


    .invite-divider-small {
        height:20px;

        margin:8px auto;
    }


    .invite-story-page {
        padding:
          28px
          20px;
    }


    .invite-section-heading {
        font-size:34px;
    }


    .invite-story-grid {
        height:82%;

        grid-template-columns:1fr 1fr;

        gap:9px;
    }


    .invite-story-left img {
        width:100%;
    }


    .invite-story-right {
        gap:9px;
    }


    .invite-present-grid {
        grid-template-columns:
          40% 60%;
    }


    .invite-present-title {
        font-size:36px;
    }


    .invite-thank-title {
        font-size:42px;

        text-align:center;
    }


    .invite-thank-flower {
        width:90px;
        height:120px;
    }


    .invite-thank-page::after {
        right:9%;
    }


    .invite-nav {
        width:38px;

        font-size:38px;

        text-shadow:
          0 1px 3px #fff;
    }


    .invite-nav-prev {
        left:3px;
    }


    .invite-nav-next {
        right:3px;
    }


    .invite-progress {
        width:90px;
    }

}


@media(prefers-reduced-motion:reduce) {

    .invite-slide {
        transition-duration:.01ms !important;
    }

}