*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Jost,Arial,sans-serif}button,a{cursor:pointer}button{font:inherit} :root{--font-display:"Cormorant Garamond",Georgia,serif;--font-script:"Great Vibes",cursive;--ink:oklch(.2 .02 30);--ivory:oklch(.97 .02 85);--crimson:oklch(.34 .1 15);--gold:oklch(.64 .1 80);--gold-soft:oklch(.78 .08 82)}
/* Three original printed invitation panels */
.invitation-site { background: var(--ink); color: var(--ivory); }
.invitation-scene { min-height: 100svh; position: relative; display: flex; align-items: center; justify-content: center; padding: 80px 20px 95px; overflow: hidden; scroll-margin-top: 0; background: radial-gradient(ellipse at 50% 35%, oklch(0.36 0.055 48), oklch(0.21 0.019 30) 65%, oklch(0.15 0.01 28)); }
.invitation-scene-2 { background: radial-gradient(ellipse at 50% 35%, oklch(0.34 0.067 340), oklch(0.2 0.022 22) 65%, oklch(0.14 0.01 25)); }
.invitation-scene-3 { background: radial-gradient(ellipse at 50% 35%, oklch(0.33 0.063 160), oklch(0.19 0.023 160) 65%, oklch(0.13 0.014 158)); }
.invitation-scene::before { content: ""; position: absolute; inset: 15px; pointer-events: none; border: 1px solid oklch(0.76 0.116 84 / .48); box-shadow: inset 0 0 0 5px oklch(0.76 0.116 84 / .06); }
.invitation-scene::after { content: "✦"; position: absolute; top: 25px; left: 50%; transform: translateX(-50%); font-size: 21px; color: var(--gold); }
.scene-ornament { position: absolute; top: 25px; font-size: 20px; color: var(--gold); opacity: .7; }
.scene-ornament-left { left: 27px; } .scene-ornament-right { right: 27px; }
.scene-inner { position: relative; width: min(100%, 940px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.scene-number { font-family: var(--font-display); font-size: 21px; color: var(--gold); } .scene-number span { opacity: .5; }
.scene-kicker { margin: 3px 0 25px; text-transform: uppercase; font-size: 11px; letter-spacing: .25em; color: var(--gold-soft); }
.original-card-wrap { position: relative; width: min(100%, 510px); isolation: isolate; }
.original-card-wrap::before { content: ""; position: absolute; inset: -7px; z-index: -1; border: 1px solid var(--gold); box-shadow: 0 25px 85px oklch(0.05 0 0 / .6), 0 0 45px oklch(0.76 0.116 84 / .26); }
.original-card { display: block; width: 100%; height: auto; aspect-ratio: 576 / 765; object-fit: fill; }
.original-card-light { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(110deg, transparent 30%, oklch(1 0 0 / .28) 49%, transparent 64%); background-size: 250% 100%; animation: card-glint 7s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes card-glint { from { background-position: 180% 0; } to { background-position: -160% 0; } }
.scene-details { padding: 24px 8px 0; }
.scene-caption { font-family: var(--font-script); font-size: clamp(30px, 5vw, 44px); line-height: 1.15; color: var(--gold-soft); }
.scene-date { margin-top: 7px; font-size: 13px; color: var(--ivory); opacity: .78; }
.scene-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px 19px; border: 1px solid var(--gold); color: var(--gold-soft); font-size: 13px; transition: background .25s, color .25s; }
.scene-link:hover { background: var(--gold); color: var(--ink); }
.scene-contacts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 13px; font-size: 12px; color: var(--gold-soft); }
.scene-next { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: var(--gold); animation: float-up 3s ease-in-out infinite; }
.invitation-footer { padding: 24px 20px 35px; text-align: center; background: var(--ink); color: var(--gold-soft); font-family: var(--font-display); font-size: 16px; }
.invitation-footer span { padding: 0 8px; }
.opening-stage { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: var(--ink); }
.opening-stage::before { content: ""; position: absolute; inset: 18px; border: 1px solid var(--gold); z-index: 5; pointer-events: none; opacity: .55; }
.opening-glow { position: absolute; width: min(80vw, 750px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, oklch(0.81 0.11 84 / .35), transparent 67%); filter: blur(18px); }
.opening-envelope-scene { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 20px; text-align: center; }
.opening-bismillah { color: var(--gold-soft); font-size: 17px; }
.opening-title { margin-top: 17px; margin-bottom: 30px; color: var(--ivory); font-family: var(--font-script); font-size: 38px; }
.envelope { position: relative; width: min(82vw, 420px); height: min(53vw, 270px); min-height: 180px; perspective: 800px; filter: drop-shadow(0 25px 40px oklch(0 0 0 / .45)); }
.envelope-letter { position: absolute; top: 3%; left: 10%; width: 80%; height: 76%; display: grid; place-content: center; gap: 12px; background: var(--ivory); color: var(--crimson); border: 5px double var(--gold); font-family: var(--font-script); font-size: clamp(23px, 5vw, 35px); }
.envelope-letter small { font-family: var(--font-display); font-size: 11px; color: var(--ink); }
.envelope-flap { position: absolute; z-index: 3; inset: 0 0 47%; background: var(--crimson); border: 2px solid var(--gold); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; }
.envelope-pocket { position: absolute; z-index: 2; inset: 0; background: linear-gradient(135deg, oklch(0.42 0.14 17), var(--crimson)); border: 2px solid var(--gold); clip-path: polygon(0 0, 50% 53%, 100% 0, 100% 100%, 0 100%); }
.opening-seal { position: relative; z-index: 7; width: 96px; height: 96px; margin-top: -65px; border: 3px double var(--gold-soft); border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 7px oklch(0.76 0.116 84 / .23), 0 0 40px oklch(0.76 0.116 84 / .45); color: var(--gold-soft); font-size: 17px; white-space: normal; line-height: 1.2; transition: transform .3s; }
.opening-seal:hover { transform: scale(1.08); background: var(--crimson); }
.opening-hint { margin-top: 45px; color: var(--gold-soft); text-transform: uppercase; font-size: 10px; letter-spacing: .25em; }
.curtain { position: absolute; z-index: 3; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, oklch(0.38 0.13 18), oklch(0.48 0.16 19) 14px, oklch(0.29 0.12 18) 30px, oklch(0.43 0.14 18) 48px); box-shadow: inset 0 0 70px oklch(0 0 0 / .4); }
.curtain-left { left: 0; border-right: 3px solid var(--gold); } .curtain-right { right: 0; border-left: 3px solid var(--gold); }
.curtain-trim { display: block; width: 100%; height: 27px; margin-top: 24px; border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); background: repeating-linear-gradient(90deg, transparent 0 8px, var(--gold) 8px 10px); opacity: .8; }
.opening-flash { position: absolute; z-index: 6; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), transparent 65%); pointer-events: none; }
@media (max-width: 600px) { .invitation-scene { padding: 64px 31px 85px; } .scene-kicker { margin-bottom: 19px; } .scene-details { padding-top: 19px; } .opening-title { margin-bottom: 25px; } .opening-seal { width: 82px; height: 82px; margin-top: -54px; font-size: 14px; } .invitation-footer span { display: block; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .original-card-light, .scene-next { animation: none; } }
.original-card { aspect-ratio: auto; }

/* Card-inspired light invitation finish */
:root {
  --invitation-paper: oklch(0.976 0.025 87);
  --invitation-paper-soft: oklch(0.95 0.035 83);
  --invitation-wine: oklch(0.33 0.09 13);
  --invitation-text: oklch(0.29 0.042 45);
  --invitation-peacock: oklch(0.38 0.068 164);
  --invitation-gold: oklch(0.62 0.09 80);
}
.invitation-site { background: var(--invitation-paper); color: var(--invitation-text); }
.invitation-scene, .invitation-scene-2, .invitation-scene-3 { background: var(--invitation-paper); }
.invitation-scene-2 { background: var(--invitation-paper-soft); }
.invitation-scene-3 { background: var(--invitation-paper); }
.invitation-scene::before { border-color: color-mix(in oklab, var(--invitation-gold) 43%, transparent); box-shadow: none; }
.invitation-scene::after { color: var(--invitation-wine); }
.scene-number, .scene-kicker, .scene-caption, .scene-next { color: var(--invitation-wine); }
.scene-date, .scene-contacts { color: var(--invitation-text); opacity: 1; }
.scene-link { border-color: var(--invitation-wine); color: var(--invitation-wine); }
.scene-link:hover { background: var(--invitation-wine); color: var(--invitation-paper); }
.original-card-wrap { width: min(100%, 480px); }
.original-card-wrap::before { inset: -4px; border-color: var(--invitation-gold); box-shadow: 0 18px 48px color-mix(in oklab, var(--invitation-text) 13%, transparent); }
.original-card-light { opacity: .55; }
.invitation-footer { background: var(--invitation-paper-soft); color: var(--invitation-wine); }
.opening-stage { background: var(--invitation-paper); }
.opening-stage::before { border-color: var(--invitation-gold); opacity: .7; }
.opening-stage::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--invitation-gold) 30%, transparent), transparent 12%, transparent 88%, color-mix(in oklab, var(--invitation-gold) 30%, transparent)); }
.opening-glow { background: radial-gradient(circle, color-mix(in oklab, var(--invitation-gold) 43%, transparent), transparent 68%); }
.opening-preview { position: absolute; z-index: 1; width: min(64vw, 310px); transform: rotate(-7deg); opacity: .18; filter: sepia(.25) blur(1px); }
.opening-preview img { width: 100%; height: auto; display: block; }
.opening-envelope-scene { color: var(--invitation-wine); }
.opening-bismillah { color: var(--invitation-wine); }
.opening-title { color: var(--invitation-wine); font-size: clamp(38px, 8vw, 65px); margin: 13px 0 2px; }
.opening-title span { font-family: var(--font-display); font-size: .5em; vertical-align: .12em; }
.opening-subtitle { margin: 0 0 32px; color: var(--invitation-text); font-size: 10px; letter-spacing: .12em; }
.opening-hint { color: var(--invitation-wine); margin-top: 36px; }
.envelope-pocket { background: linear-gradient(135deg, var(--invitation-wine), oklch(0.46 0.11 16)); }
.envelope-flap { background: var(--invitation-wine); }
.envelope-letter { background: var(--invitation-paper); color: var(--invitation-wine); }
.opening-seal, .opening-seal:hover { background: var(--invitation-wine); color: var(--invitation-paper); border-color: var(--invitation-gold); box-shadow: 0 0 0 6px color-mix(in oklab, var(--invitation-gold) 35%, transparent), 0 12px 30px color-mix(in oklab, var(--invitation-wine) 27%, transparent); }
.curtain { background: repeating-linear-gradient(90deg, oklch(0.38 0.095 16), oklch(0.46 0.11 16) 18px, oklch(0.31 0.095 16) 35px, oklch(0.4 0.095 16) 55px); border-color: var(--invitation-gold); }
.curtain-trim { border-color: var(--invitation-gold); background: repeating-linear-gradient(90deg, transparent 0 8px, var(--invitation-gold) 8px 10px); }
.opening-flash { background: radial-gradient(circle, var(--invitation-paper), color-mix(in oklab, var(--invitation-gold) 60%, transparent), transparent 65%); }
@media (max-width: 600px) { .opening-subtitle { font-size: 8px; } }
.curtain { width: 18%; z-index: 3; box-shadow: inset 0 0 35px color-mix(in oklab, var(--invitation-wine) 65%, transparent), 0 0 18px color-mix(in oklab, var(--invitation-wine) 25%, transparent); }
.curtain-left { border-right: 2px solid var(--invitation-gold); }
.curtain-right { border-left: 2px solid var(--invitation-gold); }
.opening-envelope-scene { z-index: 4; }
.opening-preview { opacity: .12; }
.music-toggle { background: var(--invitation-wine); border: 1px solid var(--invitation-gold); color: var(--invitation-paper); }
.music-toggle:hover { background: var(--invitation-wine); filter: brightness(1.13); }

/* A continuous invitation surface rather than framed image cards. */
.invitation-site { background: var(--invitation-paper); }
.invitation-scene, .invitation-scene-2, .invitation-scene-3, .invitation-scene-4 {
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--invitation-gold) 12%, transparent), transparent 12%, transparent 88%, color-mix(in oklab, var(--invitation-gold) 12%, transparent)),
    radial-gradient(ellipse at 50% 40%, var(--invitation-paper) 35%, var(--invitation-paper-soft));
  padding: 62px 24px 74px;
  min-height: 100svh;
  isolation: isolate;
}
.invitation-scene::before { inset: 12px; border: 1px solid color-mix(in oklab, var(--invitation-gold) 52%, transparent); border-radius: 46% 46% 0 0 / 9% 9% 0 0; }
.invitation-scene::after { top: 23px; font-size: 17px; }
.scene-inner { width: min(100%, 860px); z-index: 1; }
.scene-number { font-size: 14px; }
.scene-kicker { margin-bottom: 8px; font-size: 11px; letter-spacing: .2em; }
.original-card-wrap { width: min(100%, 500px); }
.original-card-wrap::before { display: none; }
.original-card { width: 100%; max-height: min(70svh, 760px); object-fit: contain; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, transparent, black 3%, black 95%, transparent); mask-image: linear-gradient(to bottom, transparent, black 3%, black 95%, transparent); }
.original-card-light { display: none; }
.scene-details { padding-top: 2px; }
.scene-caption { font-size: clamp(29px, 4vw, 41px); }
.scene-date { font-size: 13px; }
.scene-link { margin-top: 12px; border-radius: 2px; background: var(--invitation-wine); color: var(--invitation-paper); padding: 9px 17px; text-decoration: none; }
.scene-link:hover { background: var(--invitation-peacock); color: var(--invitation-paper); }
.scene-contacts a { color: var(--invitation-wine); text-decoration: underline; text-underline-offset: 3px; }
.scene-next { bottom: 21px; z-index: 2; }
.scene-peacock { position: absolute; width: clamp(80px, 16vw, 195px); height: auto; color: var(--invitation-peacock); opacity: .68; z-index: 1; pointer-events: none; filter: drop-shadow(0 3px 2px color-mix(in oklab, var(--invitation-gold) 40%, transparent)); }
.scene-peacock-left { left: max(1.5vw, 10px); bottom: 6%; animation: bird-rise-left linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
.scene-peacock-right { right: max(1.5vw, 10px); bottom: 6%; transform: scaleX(-1); animation: bird-rise-right linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
.peacock-tail { color: var(--invitation-gold); }
.peacock-eye { fill: var(--invitation-paper); }
.scene-flourish { position: absolute; top: 28%; color: var(--invitation-gold); font-size: 19px; writing-mode: vertical-rl; opacity: .7; animation: flourish-drift 7s ease-in-out infinite alternate; }
.scene-flourish-left { left: 6%; }
.scene-flourish-right { right: 6%; animation-delay: -3s; }
@keyframes bird-rise-left { from { translate: -35px 75px; rotate: -8deg; opacity: 0; } 40% { opacity: .7; } to { translate: 15px -85px; rotate: 7deg; opacity: .5; } }
@keyframes bird-rise-right { from { translate: 35px 75px; rotate: 8deg; opacity: 0; } 40% { opacity: .7; } to { translate: -15px -85px; rotate: -7deg; opacity: .5; } }
@keyframes flourish-drift { to { transform: translateY(-24px); opacity: .4; } }

/* The new Walima follows the printed-card language without inventing a date. */
.walima-inner { max-width: 600px; }
.walima-arch { width: min(100%, 500px); min-height: 560px; padding: 62px 26px 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid var(--invitation-gold); border-radius: 48% 48% 1px 1px / 15% 15% 1px 1px; outline: 1px solid var(--invitation-gold); outline-offset: 7px; background: color-mix(in oklab, var(--invitation-paper) 82%, transparent); box-shadow: inset 0 0 0 7px color-mix(in oklab, var(--invitation-gold) 12%, transparent); }
.walima-ornament { font-size: 36px; color: var(--invitation-gold); }
.walima-blessing { margin-top: 22px; font-size: 16px; color: var(--invitation-wine); }
.walima-arch h2 { margin: 18px 0 0; font-size: clamp(53px, 10vw, 80px); line-height: 1; color: var(--invitation-wine); }
.walima-divider { margin: 18px 0 30px; color: var(--invitation-gold); }
.walima-time { font-size: 16px; font-family: var(--font-display); font-weight: 600; }
.walima-time span { padding: 0 8px; color: var(--invitation-gold); }
.walima-venue { margin-top: 40px; font-size: 31px; line-height: 1.1; font-family: var(--font-display); font-weight: 600; color: var(--invitation-wine); }
.walima-address { margin-top: 8px; font-size: 13px; line-height: 1.5; }
.walima-arch .scene-link { margin-top: 26px; }

/* A gold beam emerges from the envelope before the curtains move. */
.opening-stage { background: var(--invitation-paper); perspective: 1100px; }
.opening-stage::before { inset: 12px; border-radius: 46% 46% 0 0 / 9% 9% 0 0; }
.opening-preview { opacity: .09; }
.opening-light { position: absolute; z-index: 3; width: min(95vw, 640px); height: min(95vw, 640px); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, var(--invitation-paper) 0%, var(--invitation-gold) 16%, color-mix(in oklab, var(--invitation-gold) 54%, transparent) 39%, transparent 70%); filter: blur(8px); mix-blend-mode: screen; }
.envelope-aura { position: absolute; z-index: 1; inset: -35%; border-radius: 50%; opacity: .65; background: repeating-conic-gradient(from 0deg, transparent 0 13deg, color-mix(in oklab, var(--invitation-gold) 27%, transparent) 14deg 16deg, transparent 17deg 30deg); animation: aura-turn 24s linear infinite; }
@keyframes aura-turn { to { transform: rotate(360deg); } }
.envelope { transform: rotateX(5deg); }
.curtain { width: 50%; z-index: 5; }
.opening-envelope-scene { z-index: 6; }
.opening-light { z-index: 7; }
.opening-stage::before { z-index: 8; }
.opening-seal { animation: seal-breathe 3s ease-in-out infinite; }
@keyframes seal-breathe { 50% { box-shadow: 0 0 0 13px color-mix(in oklab, var(--invitation-gold) 17%, transparent), 0 12px 40px color-mix(in oklab, var(--invitation-wine) 30%, transparent); } }
@media (max-width: 600px) {
  .invitation-scene { padding: 58px 27px 72px; }
  .scene-peacock { width: 74px; opacity: .42; bottom: 10%; }
  .scene-peacock-left { left: -9px; }
  .scene-peacock-right { right: -9px; }
  .scene-flourish { display: none; }
  .walima-arch { min-height: 470px; padding: 58px 18px 38px; }
  .walima-time { font-size: 13px; }
  .walima-time span { padding: 0 3px; }
  .walima-venue { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-peacock, .scene-flourish, .envelope-aura, .opening-seal { animation: none; }
  .scene-peacock { opacity: .6; }
}

body.locked{overflow:hidden}.opening-stage[hidden]{display:none}.opening-stage{transition:opacity .55s}.opening-stage.gone{opacity:0;pointer-events:none}.opening-envelope-scene{transition:opacity .7s,transform 1s}.opening-stage.opening .opening-envelope-scene{transform:translateY(52px) scale(1.07)}.opening-stage.curtain-open .opening-envelope-scene{opacity:0}.envelope-flap{transition:transform .85s}.opening-stage.opening .envelope-flap,.opening-stage.curtain-open .envelope-flap{transform:rotateX(-175deg)}.envelope-letter{transition:transform 1s .18s,opacity .8s}.opening-stage.opening .envelope-letter,.opening-stage.curtain-open .envelope-letter{transform:translateY(-145px);opacity:1}.opening-light{opacity:0;transform:scale(.1);transition:opacity .45s,transform 1.5s}.opening-stage.opening .opening-light{opacity:1;transform:scale(3)}.opening-stage.curtain-open .opening-light{opacity:.8;transform:scale(3)}.curtain{transition:transform 1.8s cubic-bezier(.72,0,.2,1)}.opening-stage.curtain-open .curtain-left{transform:translateX(-105%)}.opening-stage.curtain-open .curtain-right{transform:translateX(105%)}.scene-inner{opacity:0;transform:translateY(65px) scale(.96);transition:opacity 1.1s,transform 1.1s}.scene-inner.visible{opacity:1;transform:none}.music-toggle{position:fixed;bottom:20px;right:20px;z-index:40;width:48px;height:48px;border-radius:50%;display:grid;place-items:center}.opening-seal{display:grid;place-items:center}.original-card{max-height:min(70svh,760px);object-fit:contain}.scene-inner{max-width:100%}.walima-arch{color:var(--invitation-text)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.curtain,.opening-light,.opening-envelope-scene,.envelope-flap,.envelope-letter,.scene-inner{transition-duration:.12s}}