/* =================================================================
   MAHAL — animated wedding invitation
   Each .page is a phone-portrait panel (1080 x 2340) with the
   "WITHOUT ELEMENTS" art as background and the cut-out elements
   laid on top as gently-moving decorations.
   ================================================================= */

:root {
    --panel-w: 480px;
    --ink: #5a2a1a;
    --ink-soft: #7a4a32;
    --gold: #b8862f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
    background: #1c140f;
    font-family: "Cormorant Garamond", serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.invite {
    width: 100%;
    margin: 0;
    background: #000;
}

/* ---------- the portrait panel : exactly one viewport tall ---------- */
.page {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    scroll-snap-align: start;
    container-type: size;
}

.page-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.page-1 .page-bg { background-image: url("../bg/page1.jpg"); }
.page-2 .page-bg { background-image: url("../bg/page2.jpg"); }
.page-3 .page-bg { background-image: url("../bg/page3.jpg"); }
.page-4 .page-bg { background-image: url("../bg/page4.jpg"); }

/* every cut-out decoration */
.el {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .12));
    will-change: transform;
}

/* =================================================================
   PAGE 1 — lotus vines (sides) + white poppies (corners)
   ================================================================= */
/* the supplied -left / -right files are already drawn for their side — no flip */
.lotus { width: 13%; top: 38%; }
.lotus--left  { left: -1%;  transform-origin: top left;  animation: sway-l 6.5s ease-in-out infinite; }
.lotus--right { right: -1%; transform-origin: top right; animation: sway-l 7.2s ease-in-out infinite reverse; }

.poppy { width: 17%; bottom: 3%; z-index: 3; }
.poppy--left  { left: -1%;  transform-origin: bottom left;  animation: float-l 7s ease-in-out infinite; }
.poppy--right { right: -1%; transform-origin: bottom right; animation: float-l 7.8s ease-in-out infinite reverse; }

/* =================================================================
   PAGE 2 — pink bougainvillea hanging from the top
   ================================================================= */
.bougainvillea {
    top: -1%; left: 0;
    width: 100%;
    transform-origin: top center;
    animation: drift 8s ease-in-out infinite;
}

/* =================================================================
   PAGE 3 — marigold garland + hanging triangular floral frames
   ================================================================= */
.marigold {
    top: -1%; left: 0;
    width: 100%;
    transform-origin: top center;
    animation: drift 9s ease-in-out infinite;
    z-index: 2;
}

.hang { top: -1%; z-index: 3; transform-origin: top center; }
.hang--ll { left: 4%;   height: 30%;  animation: swing 5.4s ease-in-out infinite; }
.hang--ls { left: 24%;  height: 21%;  animation: swing 4.6s ease-in-out infinite .4s; }
.hang--rs { right: 22%; height: 18%;  animation: swing 4.9s ease-in-out infinite .2s; }
.hang--rl { right: 3%;  height: 26%;  animation: swing 5.8s ease-in-out infinite .6s; }

/* =================================================================
   PAGE 4 — cherry blossom (top-left) + coral flowers (top-right)
   ================================================================= */
.cherry {
    top: -1%; left: -1%;
    width: 40%;
    transform-origin: top left;
    animation: sway-l 7.5s ease-in-out infinite;
}
.coral {
    top: -1%; right: -1%;
    width: 42%;
    transform-origin: top right;
    animation: sway-l 6.8s ease-in-out infinite;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes sway-l {
    0%, 100% { transform: rotate(-2.2deg); }
    50%      { transform: rotate(2.2deg); }
}
@keyframes sway-r {           /* mirrored elements keep their flip */
    0%, 100% { transform: scaleX(-1) rotate(-2.2deg); }
    50%      { transform: scaleX(-1) rotate(2.2deg); }
}
@keyframes float-l {
    0%, 100% { transform: translateY(0) rotate(-1.5deg); }
    50%      { transform: translateY(-2.5%) rotate(1.5deg); }
}
@keyframes float-r {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(-1.5deg); }
    50%      { transform: scaleX(-1) translateY(-2.5%) rotate(1.5deg); }
}
@keyframes drift {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(1.4%) rotate(1deg); }
}
@keyframes swing {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .el { animation: none !important; }
}

/* =================================================================
   COPY / TEXT
   ================================================================= */
.copy {
    position: absolute;
    z-index: 5;
    left: 0; right: 0;
    text-align: center;
    padding: 0 8%;
}
.copy--top    { top: 9%; }
.copy--center { top: 50%; transform: translateY(-50%); }
.copy--album  { top: 7%; }

.eyebrow {
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: .42em;
    font-size: min(2.4cqmin, 1.4rem);
    color: var(--gold);
    margin-left: .42em;
}
.script {
    font-family: "Great Vibes", cursive;
    font-size: min(5cqmin, 2.6rem);
    color: var(--ink-soft);
    margin: .35em 0 .1em;
}
.couple {
    font-family: "Great Vibes", cursive;
    font-size: min(11.3cqmin, 5.2rem);
    line-height: 1.05;
    color: var(--ink);
    font-weight: 400;
}
.couple--sm { font-size: min(8.6cqmin, 4.2rem); }
.amp { color: var(--gold); }
.date {
    font-family: "Marcellus", serif;
    letter-spacing: .25em;
    font-size: min(3.5cqmin, 2rem);
    margin-top: .4em;
    color: var(--ink-soft);
}
.place {
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: min(2.27cqmin, 1.4rem);
    margin-top: .55em;
    color: var(--gold);
}

/* page 2 invocation */
.om { font-size: min(7cqmin, 3.8rem); color: var(--gold); line-height: 1; }
.sanskrit { font-family: "Marcellus", serif; font-size: min(3.2cqmin, 1.8rem); color: var(--ink); margin: .2em 0 1.1em; }
.welcome-line { font-style: italic; font-size: min(3.7cqmin, 2.1rem); color: var(--ink-soft); margin: .9em 0 .2em; }
.welcome-names { font-family: "Marcellus", serif; font-size: min(3.85cqmin, 2.2rem); color: var(--ink); line-height: 1.5; }

/* section titles */
.section-title {
    font-family: "Great Vibes", cursive;
    font-size: min(8.6cqmin, 4.5rem);
    color: var(--ink);
    margin-bottom: .5em;
}

/* page 4 story */
.story {
    font-size: min(3.8cqmin, 2rem); font-style: italic; line-height: 1.55;
    color: var(--ink); max-width: 550px; margin: .4em auto 0;
}
.thanks {
    font-family: "Great Vibes", cursive; font-size: 5.6cqmin;
    color: var(--ink-soft); margin-top: 1em;
}

/* ---------- scroll-reveal : text animates in each time it enters view ---------- */
.reveal > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
}
.reveal.in-view > * { opacity: 1; transform: translateY(0); }
/* stagger the lines as the group reveals */
.reveal.in-view > *:nth-child(1) { transition-delay: .05s; }
.reveal.in-view > *:nth-child(2) { transition-delay: .15s; }
.reveal.in-view > *:nth-child(3) { transition-delay: .25s; }
.reveal.in-view > *:nth-child(4) { transition-delay: .35s; }
.reveal.in-view > *:nth-child(5) { transition-delay: .45s; }
.reveal.in-view > *:nth-child(6) { transition-delay: .55s; }
.reveal.in-view > *:nth-child(7) { transition-delay: .65s; }
.reveal.in-view > *:nth-child(8) { transition-delay: .75s; }

@media (prefers-reduced-motion: reduce) {
    .reveal > * { opacity: 1; transform: none; transition: none; }
}

/* =================================================================
   MUSIC TOGGLE
   ================================================================= */
.music-toggle {
    position: fixed; top: 16px; right: 16px; z-index: 50;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(184, 134, 47, .6);
    background: rgba(255, 250, 240, .85);
    color: var(--ink); cursor: pointer;
    display: grid; place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    backdrop-filter: blur(4px);
}
.music-icon { width: 22px; height: 22px; }
.music-icon-slash { opacity: 0; transition: opacity .2s; }
.music-toggle.is-paused .music-icon-slash { opacity: 1; }
.music-rings { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.music-rings span {
    position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(184, 134, 47, .5); opacity: 0;
}
.music-toggle:not(.is-paused) .music-rings span { animation: ring 2.4s ease-out infinite; }
.music-toggle:not(.is-paused) .music-rings span:nth-child(2) { animation-delay: .8s; }
.music-toggle:not(.is-paused) .music-rings span:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }

/* scroll cue (page 1) */
.scroll-cue {
    position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
    width: 22px; height: 36px; border: 2px solid rgba(90, 42, 26, .55);
    border-radius: 14px; z-index: 6;
}
.scroll-cue span {
    position: absolute; top: 7px; left: 50%; width: 3px; height: 7px;
    margin-left: -1.5px; border-radius: 2px; background: rgba(90, 42, 26, .7);
    animation: scrolldot 1.6s ease-in-out infinite;
}
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }

/* divider + couplet (page 2) */
.divider { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 1.1em 0 .7em; }
.divider span { height: 1px; width: 46px; background: linear-gradient(90deg, transparent, var(--gold)); }
.divider span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.divider i { color: var(--gold); font-style: normal; font-size: .8rem; }
.couplet { font-style: italic; font-size: 3.5cqmin; color: var(--ink-soft); line-height: 1.5; }

/* =================================================================
   PAGE 3 — events marquee (vertically centred, auto-scrolling)
   ================================================================= */
.events-center {
    position: absolute; top: 50%; left: 0; right: 0;
    transform: translateY(-50%); z-index: 5; text-align: center;
}
.events-marquee {
    width: 100%; overflow: hidden; padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.events-track {
    display: flex; width: max-content;
    animation: marquee 26s linear infinite;
    will-change: transform;
}
.events-marquee:hover .events-track { animation-play-state: paused; }
.event {
    flex: 0 0 auto; width: 33cqmin; margin-right: 3.4cqmin;
    background: rgba(255, 251, 242, .82);
    border: 1px solid rgba(184, 134, 47, .5);
    border-radius: 14px; padding: .9rem .6rem; backdrop-filter: blur(2px);
    box-shadow: 0 6px 16px rgba(120, 80, 20, .25);
    background-size: cover !important;
    background-position: center !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.event[data-event-id="haldi"] {
    background-image: linear-gradient(rgba(20, 10, 15, 0.45), rgba(20, 10, 15, 0.55)), url("https://res.cloudinary.com/wvzexnnn/image/upload/f_auto,q_auto,w_800/v1786433471/wedding_invitations/events/event_haldi.jpg");
}
.event[data-event-id="sangeet"], .event[data-event-id="cocktail"], .event[data-event-id="bachelor"] {
    background-image: linear-gradient(rgba(20, 10, 15, 0.45), rgba(20, 10, 15, 0.55)), url("https://res.cloudinary.com/wvzexnnn/image/upload/f_auto,q_auto,w_800/v1786433477/wedding_invitations/events/event_sangeet.jpg");
}
.event[data-event-id="mehndi"], .event[data-event-id="mehendi"], .event[data-event-id="mayra"] {
    background-image: linear-gradient(rgba(20, 10, 15, 0.45), rgba(20, 10, 15, 0.55)), url("https://res.cloudinary.com/wvzexnnn/image/upload/f_auto,q_auto,w_800/v1786433473/wedding_invitations/events/event_mehendi.jpg");
}
.event[data-event-id="shadi"], .event[data-event-id="wedding"], .event[data-event-id="rudrabhishek"] {
    background-image: linear-gradient(rgba(20, 10, 15, 0.45), rgba(20, 10, 15, 0.55)), url("https://res.cloudinary.com/wvzexnnn/image/upload/f_auto,q_auto,w_800/v1786433478/wedding_invitations/events/event_wedding.jpg");
}
.event[data-event-id="reception"], .event[data-event-id="poolparty"] {
    background-image: linear-gradient(rgba(20, 10, 15, 0.45), rgba(20, 10, 15, 0.55)), url("https://res.cloudinary.com/wvzexnnn/image/upload/f_auto,q_auto,w_800/v1786433475/wedding_invitations/events/event_reception.jpg");
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .events-track { animation: none; }
    .events-marquee { overflow-x: auto; }
}
.event-name { font-family: "Marcellus", serif; font-size: 4.2cqmin; color: #ffffff; }
.event-meta { font-size: 2.7cqmin; color: #fde68a; margin: .15em 0 .6em; letter-spacing: .03em; }
.event-btn {
    font-family: "Marcellus", serif; font-size: 2.4cqmin; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--gold); border: none; border-radius: 999px;
    padding: .42em 1.1em; cursor: pointer; transition: transform .15s, background .2s;
}
.event-btn:hover { transform: translateY(-1px); background: #9c6f22; }
.event-btn.is-set { background: #5a8a4a; }

/* =================================================================
   PAGE 4 — album grid
   ================================================================= */
/* arched, gold-framed photos — echoing the palace domes */
.album-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 9cqmin 7cqmin; width: 78%; margin: 1.4em auto 0;
}
.album-photo {
    position: relative; padding: 1.4cqmin;
    background: linear-gradient(160deg, #f6e2ad, #c79c45);
    border-radius: 46% 46% 12px 12px / 34% 34% 8px 8px;
    box-shadow: 0 10px 20px rgba(90, 42, 26, .35);
}
/* gold finial at the apex */
.album-photo::before {
    content: ""; position: absolute; top: -2.6cqmin; left: 50%; transform: translateX(-50%);
    width: 2.6cqmin; height: 2.6cqmin; z-index: 4;
    background: radial-gradient(circle at 38% 32%, #f7e6b0, #b8862f);
    border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
/* inner hairline */
.album-photo::after {
    content: ""; position: absolute; inset: 1.4cqmin; z-index: 3; pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 44% 44% 9px 9px / 31% 31% 6px 6px;
}
.album-photo img {
    width: 100%; aspect-ratio: 3 / 4.1; object-fit: contain; display: block;
    border-radius: 44% 44% 9px 9px / 31% 31% 6px 6px;
    transition: transform .6s ease;
}
.album-photo:hover img { transform: scale(1.05); }
.album-photo figcaption {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: -3.4cqmin; z-index: 5;
    font-family: "Marcellus", serif; font-size: 2.6cqmin; letter-spacing: .04em; white-space: nowrap;
    color: var(--ink); background: rgba(255, 250, 242, .94);
    border: 1px solid rgba(184, 134, 47, .6); border-radius: 999px;
    padding: .25em .85em; box-shadow: 0 3px 8px rgba(0, 0, 0, .16);
}

/* =================================================================
   PAGE 5 — finale (story + RSVP). Auto height, soft gradient.
   ================================================================= */
.page-5 { height: auto; min-height: 100dvh; }
.page-5 .page-bg {
    background: radial-gradient(120% 80% at 50% 0%, #fde9ec 0%, #f7efe2 42%, #eef4ea 100%);
}
.copy--finale {
    position: relative; transform: none; animation: none;
    padding: 64px 7% 56px; text-align: center;
}
.story-slider { position: relative; width: 78%; max-width: 320px; margin: .6em auto 1em; }
.story-slide {
    width: 100%; aspect-ratio: 3/4; object-fit: contain; border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
}
.story-slide.is-active { position: relative; opacity: 1; }
.story-dots { position: absolute; bottom: -22px; left: 0; right: 0; display: flex; gap: 7px; justify-content: center; }
.story-dots button {
    width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: rgba(90, 42, 26, .3);
}
.story-dots button.is-active { background: var(--gold); }

.rsvp-title { margin-top: 1.4em; }

/* RSVP envelope */
.rsvp-stage { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: .6em; min-height: 200px; }
.mayur { position: absolute; bottom: 0; width: 92px; opacity: .92; z-index: 1; pointer-events: none; }
.mayur--left  { left: -2%;  transform-origin: bottom left;  animation: float-l 7s ease-in-out infinite; }
.mayur--right { right: -2%; transform: scaleX(-1); transform-origin: bottom center; animation: float-r 8s ease-in-out infinite; }

.envelope {
    position: relative; width: 220px; height: 142px; cursor: pointer; z-index: 3;
    filter: drop-shadow(0 12px 22px rgba(120, 60, 20, .28));
    transition: transform .3s;
}
.envelope:hover { transform: translateY(-3px); }
.env-pocket, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 8px; }
.env-pocket { background: #c98a3c; }
.env-front {
    background: linear-gradient(160deg, #f4d9a6, #e7bf80);
    clip-path: polygon(0 38%, 50% 100%, 100% 38%, 100% 100%, 0 100%);
    z-index: 3;
}
.env-flap {
    background: linear-gradient(160deg, #e7bf80, #d9a85f);
    clip-path: polygon(0 0, 100% 0, 50% 64%); z-index: 4;
    transform-origin: top; transition: transform .6s ease;
}
.env-seal {
    position: absolute; top: 44%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
    background: radial-gradient(circle at 35% 30%, #b5394a, #7d1f2f); border-radius: 50%;
    display: grid; place-items: center; z-index: 6;
    font-family: "Marcellus", serif; color: #ffe9c2; font-size: .8rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3); transition: transform .4s, opacity .3s;
}
.env-hint { display: block; margin-top: 14px; font-style: italic; color: var(--ink-soft); font-size: .95rem; z-index: 3; }

.rsvp-card {
    width: 100%; max-width: 340px; margin: 18px auto 0;
    background: rgba(255, 252, 246, .96); border: 1px solid rgba(184, 134, 47, .4);
    border-radius: 16px; padding: 20px 18px; box-shadow: 0 14px 30px rgba(0, 0, 0, .2);
    max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px);
    transition: max-height .6s ease, opacity .4s ease, transform .4s ease, padding .4s ease;
    padding-top: 0; padding-bottom: 0;
}
.rsvp-stage.is-open .env-flap { transform: rotateX(180deg); }
.rsvp-stage.is-open .env-seal { transform: scale(.5); opacity: 0; }
.rsvp-stage.is-open .envelope { transform: scale(.86) translateY(-6px); }
.rsvp-stage.is-open .env-hint { opacity: 0; }
.rsvp-stage.is-open .rsvp-card { max-height: 640px; opacity: 1; transform: translateY(0); padding-top: 20px; padding-bottom: 20px; }

.rsvp-eyebrow { font-size: 2.7cqmin; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.rsvp-card-title { font-family: "Great Vibes", cursive; font-size: 6.3cqmin; color: var(--ink); margin: .1em 0 .7em; font-weight: 400; }
.rsvp-form { display: grid; gap: .7rem; text-align: left; }
.rsvp-field { display: grid; gap: .25rem; }
.rsvp-field > span { font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; }
.rsvp-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: .7rem; }
.rsvp-field input, .rsvp-field textarea {
    font-family: inherit; font-size: 1rem; color: var(--ink);
    border: 1px solid rgba(184, 134, 47, .5); border-radius: 9px;
    padding: .5em .65em; background: #fff; width: 100%;
}
.rsvp-attend { display: flex; flex-wrap: wrap; gap: .35rem; }
.rsvp-pill {
    flex: 1; min-width: 110px; font-family: inherit; font-size: .82rem; cursor: pointer;
    border: 1px solid rgba(184, 134, 47, .5); border-radius: 999px; padding: .45em .4em;
    background: #fff; color: var(--ink-soft);
}
.rsvp-pill.is-active { background: var(--gold); color: #fff; border-color: var(--gold); }
.rsvp-submit {
    margin-top: .3rem; font-family: "Marcellus", serif; letter-spacing: .1em; font-size: .9rem;
    color: #fff; background: var(--ink); border: none; border-radius: 999px; padding: .7em; cursor: pointer;
    transition: background .2s;
}
.rsvp-submit:hover { background: #7a3a24; }
.rsvp-thankyou { text-align: center; padding: 10px 0; }
.rsvp-thankyou-mark { font-size: 2rem; color: var(--gold); }
.rsvp-thankyou h3 { font-family: "Great Vibes", cursive; font-size: 2rem; color: var(--ink); font-weight: 400; }
.rsvp-thankyou p { color: var(--ink-soft); font-style: italic; }

.copy--finale .thanks { margin-top: 1.6em; }