@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Montserrat:wght@400;500;600&display=swap');
:root{--wine:#741619;--wine2:#3a090b;--ink:#160707;--cream:#f3dfc4;--paper:#f8ead6;--gold:#d8a65d;--gold2:#f0c986;--white:#fff7eb}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#080303}body{margin:0;background:#080303;color:var(--white);font-family:Montserrat,Arial,sans-serif;overflow-x:hidden}.progress{position:fixed;left:0;top:0;height:2px;background:var(--gold);width:0;z-index:99}.nav{position:fixed;z-index:80;top:0;left:0;right:0;height:74px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#120505cc,transparent);mix-blend-mode:normal}.brand{color:inherit;text-decoration:none;font:600 19px 'Cormorant Garamond';letter-spacing:.06em}.brand span{color:var(--gold);font-size:13px}.brand b{font:500 8px Montserrat;border:1px solid #d7a45a88;border-radius:12px;padding:4px 7px;margin-left:5px}.menu{border:0;background:none;width:36px;height:36px;display:grid;align-content:center;gap:7px}.menu i{display:block;height:1px;background:currentColor}.menu i:last-child{width:65%;justify-self:end}
.hero{height:100svh;min-height:720px;position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#0b020255 0,#0b020200 36%,#0b020244 62%,#100303 100%),radial-gradient(circle at 50% 45%,transparent 20%,#12040477 85%)}.hero-title{position:absolute;top:17%;left:0;right:0;text-align:center;text-shadow:0 4px 30px #000}.hero-title span{font-size:10px;letter-spacing:.28em}.hero-title h1{font:500 clamp(68px,19vw,104px)/.8 'Cormorant Garamond';margin:10px 0 15px;color:#e8c88f}.hero-title h2{font:500 24px/1 Montserrat;letter-spacing:.3em;margin:0;color:#e5bd7c}.hero-title em{display:block;font:500 italic 18px/1.2 'Cormorant Garamond';margin-top:24px;color:#f4dfc1}.glass{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.hero-guest{z-index:3;width:calc(100% - 48px);max-width:420px;margin-bottom:74px;text-align:center;padding:17px 18px 14px;border:1px solid #d4a05b55;border-radius:18px;background:#190607a8;box-shadow:0 20px 50px #0008}.hero-guest>span,.kicker{font-size:8px;letter-spacing:.22em;color:#d9b275}.hero-guest strong{display:block;font:500 32px/1.05 'Cormorant Garamond';margin:7px 0;color:#f8e5ca}.hero-guest>i{display:block;width:38px;height:1px;background:#c08b49;margin:8px auto}.hero-guest p{font:500 13px/1.35 'Cormorant Garamond';margin:8px}.open-btn,.wine-btn,.outline-btn{border:0;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center}.open-btn{width:100%;height:48px;border-radius:999px;color:#f9e9d0;font-weight:600;letter-spacing:.08em;background:linear-gradient(180deg,#8e2226,#5a0c0f);border:1px solid #efbd6c77;box-shadow:0 9px 30px #0007}.open-btn b{margin-right:12px;color:#efc270}.scroll{position:absolute;z-index:4;bottom:23px;color:#d9c2a3;text-decoration:none;font-size:10px}.scroll span{font-size:16px;margin-left:6px}
.light{background:radial-gradient(circle at 50% 0,#fff6e8,#f3dfc4 65%);color:var(--ink)}.invite{min-height:100svh;padding:104px 24px 64px;display:grid;place-items:center}.invite-inner{width:100%;max-width:520px;text-align:center}.invite h2{font:600 clamp(50px,14vw,78px)/.84 'Cormorant Garamond';margin:17px 0;color:#3b1011}.heart-rule{display:flex;align-items:center;justify-content:center;gap:10px;color:#8b4b2d}.heart-rule i{width:42px;height:1px;background:#9b6a48}.invite-copy{font:500 18px/1.3 'Cormorant Garamond';margin:17px 0 32px}.facts{display:grid;grid-template-columns:repeat(3,1fr);padding:21px 0;border-top:1px solid #7d4c3033;border-bottom:1px solid #7d4c3033}.facts>div+div{border-left:1px solid #7d4c3033}.facts .ico{display:block;font-size:25px;color:#713a23}.facts strong{display:block;font:600 28px 'Cormorant Garamond';margin:7px 0 2px}.facts small{font-size:8px;line-height:1.5;letter-spacing:.09em}.count-title{font-size:8px;letter-spacing:.2em;margin:27px 0 14px;color:#6b4a36}.countdown{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:28px}.countdown b{display:block;font:600 36px 'Cormorant Garamond'}.countdown span{font-size:7px;letter-spacing:.1em}.wine-btn{height:52px;border-radius:999px;background:linear-gradient(180deg,#8b1d21,#5d0d10);border:1px solid #a94d4e;color:#fff5e7;font-size:10px;font-weight:600;letter-spacing:.05em;box-shadow:0 11px 25px #5e15152b}.more{display:block;margin-top:18px;color:#3c211b;text-decoration:none;font-size:9px}.more span{display:block;font-size:18px}
.concept{background:var(--paper);color:#2d0d0e;padding:72px 20px 48px}.concept-head{text-align:center}.concept-head h2{font:600 clamp(42px,12vw,66px)/1 'Cormorant Garamond';margin:0}.concept-head h2 span{font-weight:400;font-size:.6em}.concept-head p{font-size:9px;letter-spacing:.25em;margin:10px 0 28px}.split{position:relative;height:66svh;min-height:540px;max-width:560px;margin:auto;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 30px 70px #4b1d1733}.side{position:relative;overflow:hidden}.side img{position:absolute;height:100%;width:200%;object-fit:cover;top:0}.pop img{left:0;filter:brightness(.42) saturate(.65)}.tradition img{right:0;filter:sepia(.12) brightness(1.15) saturate(.7)}.side .shade{position:absolute;inset:0}.pop .shade{background:#03030355}.tradition .shade{background:#f5dfbf55}.side-copy{position:absolute;z-index:2;top:11%;left:0;right:0;text-align:center}.side-copy strong{display:block;font:600 44px 'Cormorant Garamond'}.pop .side-copy{color:#f4dfc0}.tradition .side-copy{color:#5a1516}.side-copy i{display:block;width:18px;height:1px;background:currentColor;margin:12px auto}.side-copy span{font-size:8px;line-height:1.7;letter-spacing:.13em}.split-handle{position:absolute;z-index:5;left:50%;top:47%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;border:1px solid #8b5738;background:#efd6b5;color:#4a1a15;font:500 25px 'Cormorant Garamond';box-shadow:0 10px 30px #0004}.split-handle span{margin-left:8px}.concept blockquote{text-align:center;font:500 18px/1.35 'Cormorant Garamond';margin:32px 0 0;color:#6b3327}
.cards{background:#090303;padding:24px 20px 70px;display:grid;gap:18px}.card{position:relative;overflow:hidden;min-height:500px;padding:30px 28px;border:1px solid #c28c4d66;border-radius:28px;background:radial-gradient(circle at 50% 120%,#5b0c0e55,transparent 40%),linear-gradient(180deg,#130606,#090303);box-shadow:inset 0 0 80px #4b0a0b22}.section-kicker{display:block;text-align:center;font:600 17px 'Cormorant Garamond';letter-spacing:.09em;color:#e1b676}.card>small{display:block;text-align:center;font-size:7px;letter-spacing:.16em;color:#c69658;margin-top:6px}.timeline{margin:38px 0}.timeline>div{display:grid;grid-template-columns:52px 18px 1fr;align-items:start;min-height:73px}.timeline b{font:500 11px Montserrat;color:#e6c18a}.timeline i{width:8px;height:8px;border:1px solid #d8a65d;border-radius:50%;margin-top:3px;position:relative}.timeline i:after{content:"";position:absolute;width:1px;height:62px;background:#8b5e39;left:3px;top:9px}.timeline>div:last-child i:after{display:none}.timeline p{margin:0}.timeline p strong{display:block;font-size:9px;letter-spacing:.08em}.timeline p span{font-size:8px;color:#b9a18b}.outline-btn{width:100%;height:46px;border-radius:999px;background:#4c0b0d66;border:1px solid #c67b4f;color:#f1d7b0;font-size:9px;letter-spacing:.08em}.palace{height:265px;margin:26px -28px 20px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 35%,#d39c4c55,transparent 28%),linear-gradient(#09070a,#17100c 70%,#060303)}.moon{position:absolute;width:28px;height:28px;border-radius:50%;background:#f4d699;left:50%;top:18%;transform:translateX(-50%);box-shadow:0 0 35px #e5b55c}.building{position:absolute;left:8%;right:8%;bottom:44px;height:110px;border:1px solid #d7ad6b88;background:linear-gradient(90deg,#2a170d,#70411c 50%,#2a170d);box-shadow:0 0 35px #d89d3a33}.building:before{content:"";position:absolute;left:36%;right:36%;height:42px;top:-42px;background:#4b2a14;clip-path:polygon(50% 0,100% 100%,0 100%)}.building i{position:relative;display:inline-block;width:10%;height:58%;margin:24px 4.6%;border:1px solid #f0c77a88;border-radius:12px 12px 0 0;background:#f2bb5655}.fountain{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:110px;height:27px;border:1px solid #e4bd7c88;border-radius:50%;box-shadow:0 0 30px #e3a84f33}.location p{font:500 13px/1.5 'Cormorant Garamond';color:#e4c7a2}.location p span{font:400 10px Montserrat;color:#a88d74}.location .outline-btn{margin-top:18px}.location .outline-btn b{margin-left:auto;margin-right:16px}.dress{text-align:center}.bow{font:500 70px 'Cormorant Garamond';color:#e3b876;margin:38px 0 5px}.dress h3{font:500 15px Montserrat;letter-spacing:.13em;color:#e4bd7f}.dress p{font:500 14px 'Cormorant Garamond';color:#d7c2a5}.dress h4{font-size:8px;letter-spacing:.15em;color:#d2a566;margin-top:38px}.swatches{display:flex;justify-content:center;gap:12px;margin:15px}.swatches i{width:35px;height:35px;border-radius:50%;border:1px solid #d4a35b88}.swatches i:nth-child(1){background:#d89d48}.swatches i:nth-child(2){background:#7c1118}.swatches i:nth-child(3){background:#090909}.swatches i:nth-child(4){background:#c6a98b}.family{margin-top:55px;color:#dcb06c;font-size:34px}.family strong,.family span{display:block}.family strong{font:600 9px Montserrat;margin-top:9px}.family span{font:500 13px 'Cormorant Garamond';color:#d7c2a5;margin-top:6px}.rsvp form{margin-top:34px}.rsvp label{display:block;font-size:8px;color:#c5a383;margin-bottom:16px}.rsvp input,.rsvp select{margin-top:7px;width:100%;height:43px;border:1px solid #a96f55;border-radius:8px;background:#1b090a;color:#f6e4ca;padding:0 12px;outline:none}.rsvp form p{text-align:center;font:500 13px/1.35 'Cormorant Garamond';color:#d8bea1;margin:25px}.rsvp .wine-btn{width:100%}.thanks{text-align:center;font:500 italic 40px 'Cormorant Garamond';color:#e7b96e;margin-top:45px;text-shadow:0 0 20px #d98d38}
.sound{position:fixed;right:14px;bottom:14px;z-index:90;height:42px;padding:0 12px;border:1px solid #d3a55d66;border-radius:999px;background:#190607cc;color:#dcb36f;display:flex;align-items:center;gap:3px}.sound i{width:2px;height:8px;background:currentColor}.sound.playing i{animation:eq .65s infinite alternate}.sound.playing i:nth-child(2){animation-delay:.2s}.sound.playing i:nth-child(3){animation-delay:.4s}.sound span{font-size:7px;margin-left:6px}@keyframes eq{to{height:18px}}.reveal{opacity:0;transform:translateY(25px);transition:.8s ease}.reveal.on{opacity:1;transform:none}
@media(min-width:800px){.nav{padding:0 5vw}.hero{max-width:560px;margin:auto;border-left:1px solid #3e2117;border-right:1px solid #3e2117}.invite,.concept{max-width:760px;margin:auto}.cards{grid-template-columns:repeat(2,minmax(0,460px));justify-content:center;padding-top:60px}.card{min-height:560px}}
@media(max-width:380px){.hero-title h1{font-size:64px}.hero-guest{margin-bottom:62px}.facts strong{font-size:24px}.split{min-height:500px}.side-copy strong{font-size:36px}}

/* v8.1 — functional horizontal POP × TRADITË slider */
.split{
  --split:50%;
  display:block !important;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  cursor:ew-resize;
}
.split .side{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.split .side img{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
}
.split .pop{
  z-index:1;
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
}
.split .tradition{
  z-index:2;
  clip-path:inset(0 0 0 var(--split));
}
.split .split-handle{
  z-index:8;
  left:var(--split) !important;
  top:47%;
  transition:box-shadow .2s ease,transform .2s ease;
}
.split.dragging .split-handle{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 12px 35px #0006,0 0 0 7px rgba(239,214,181,.18);
}
.split:after{
  content:"";
  position:absolute;
  z-index:7;
  top:0;bottom:0;
  left:var(--split);
  width:1px;
  background:linear-gradient(transparent,rgba(239,214,181,.75) 16%,rgba(239,214,181,.75) 84%,transparent);
  pointer-events:none;
}

/* =========================================================
   V9 — MOBILE IMAGE FIT + READABLE TRADITION + MOTION SYSTEM
   ========================================================= */

/* Full image inside the POP × TRADITË viewport:
   no more cover-cropping on mobile. */
.split{
  --split:50%;
  background:#0a0504;
  overflow:hidden;
  isolation:isolate;
}
.split .side{
  background:#0a0504;
}
.split .side img{
  width:100% !important;
  height:100% !important;
  inset:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
}

/* Keep each half visually distinct without destroying readability */
.split .pop .shade{
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 42%,rgba(0,0,0,.2));
}
.split .tradition .shade{
  background:linear-gradient(180deg,rgba(250,229,198,.16),rgba(250,229,198,.03) 46%,rgba(87,30,21,.06));
}

/* Readable labels, especially TRADITË */
.split .side-copy{
  top:8.5%;
  width:min(43%,190px);
  left:auto;
  right:auto;
  padding:13px 10px 12px;
  border-radius:16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.split .pop .side-copy{
  left:4%;
  color:#fff3df;
  background:linear-gradient(180deg,rgba(8,4,4,.82),rgba(8,4,4,.54));
  border:1px solid rgba(238,197,132,.18);
  text-shadow:0 2px 16px #000;
}
.split .tradition .side-copy{
  right:4%;
  color:#64181b;
  background:linear-gradient(180deg,rgba(255,240,216,.94),rgba(244,219,186,.84));
  border:1px solid rgba(104,37,28,.18);
  text-shadow:none;
  box-shadow:0 12px 35px rgba(55,20,13,.08);
}
.split .side-copy strong{
  font-size:clamp(31px,9vw,48px);
  line-height:.9;
}
.split .side-copy span{
  display:block;
  font-size:8px;
  font-weight:600;
  line-height:1.75;
  letter-spacing:.12em;
}
.split .tradition .side-copy i{background:#7b2526}

/* On mobile use the image's natural aspect ratio so the WHOLE artwork is visible */
@media(max-width:620px){
  .split{
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1024 / 1456;
    border-radius:24px;
  }
  .split .side img{
    object-fit:contain !important;
  }
  .concept{
    padding-left:16px;
    padding-right:16px;
  }
  .concept-head h2{
    font-size:clamp(42px,12vw,62px);
    white-space:nowrap;
  }
  .split .side-copy{top:7%;padding:11px 7px}
  .split .side-copy strong{font-size:8.2vw}
  .split .side-copy span{font-size:7px;line-height:1.65}
  .split .pop .side-copy{left:2.5%}
  .split .tradition .side-copy{right:2.5%}
  .split-handle{width:58px;height:58px}
}

/* ---------- V9 global animation language ---------- */
@keyframes softRise{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}}
@keyframes softScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(180%) skewX(-18deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.32)}50%{box-shadow:0 12px 38px rgba(209,153,76,.22)}}
@keyframes slowZoom{from{transform:scale(1.01)}to{transform:scale(1.065)}}
@keyframes goldSweep{0%{background-position:200% 50%}100%{background-position:-100% 50%}}

/* Hero cinematic entrance */
.hero-img{animation:slowZoom 12s ease-out both}
.hero-title span,.hero-title h1,.hero-title h2,.hero-title em{
  opacity:0;animation:softRise .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title span{animation-delay:.18s}
.hero-title h1{animation-delay:.32s}
.hero-title h2{animation-delay:.48s}
.hero-title em{animation-delay:.65s}
.hero-guest{opacity:0;animation:softRise .9s .82s cubic-bezier(.2,.8,.2,1) forwards}
.scroll{animation:floatY 2s ease-in-out infinite}

/* Buttons get a premium light sweep */
.open-btn,.wine-btn,.outline-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.open-btn:after,.wine-btn:after,.outline-btn:after{
  content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;width:32%;
  left:-45%;background:linear-gradient(90deg,transparent,rgba(255,232,188,.18),transparent);
}
.open-btn:hover:after,.wine-btn:hover:after,.outline-btn:hover:after{animation:shimmer .85s ease}
.open-btn:active,.wine-btn:active,.outline-btn:active{transform:scale(.975)}

/* Reveal variants assigned by JS */
.reveal.motion-left{transform:translate3d(-28px,18px,0)}
.reveal.motion-right{transform:translate3d(28px,18px,0)}
.reveal.motion-scale{transform:scale(.95)}
.reveal.on{opacity:1;transform:none}

/* Invite detail stagger */
.invite .facts>div,.invite .countdown>div{
  opacity:0;transform:translateY(18px);
  transition:opacity .65s ease,transform .65s ease;
}
.invite .on .facts>div,.invite .on .countdown>div{opacity:1;transform:none}
.invite .on .facts>div:nth-child(2),.invite .on .countdown>div:nth-child(2){transition-delay:.09s}
.invite .on .facts>div:nth-child(3),.invite .on .countdown>div:nth-child(3){transition-delay:.18s}
.invite .on .countdown>div:nth-child(4){transition-delay:.27s}

/* Slider arrives like a poster */
.split{opacity:0;transform:translateY(25px) scale(.975);transition:opacity .85s ease,transform .85s ease}
.split.motion-in{opacity:1;transform:none}
.split-handle{animation:glowPulse 2.4s ease-in-out infinite}
.split-handle:active{transform:translate(-50%,-50%) scale(.93) !important}

/* Cards: elegant sequential movement */
.card{
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .45s ease,opacity .75s ease;
}
.card.on{box-shadow:inset 0 0 80px #4b0a0b22,0 24px 65px rgba(0,0,0,.18)}
@media(hover:hover){
  .card:hover{transform:translateY(-7px);border-color:#d6a45f99}
}

/* Palace / dress / thanks micro-motion */
.moon{animation:glowPulse 3s ease-in-out infinite}
.bow{animation:floatY 3.2s ease-in-out infinite}
.thanks{
  background:linear-gradient(90deg,#d89b45,#ffe0a3,#d89b45);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldSweep 5s linear infinite;
}
.sound.playing{animation:glowPulse 2.2s ease-in-out infinite}

/* Parallax-safe performance */
.hero-img,.split .side img{will-change:transform}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ====================== V10 ====================== */
/* Opening invitation animation */
.opening{position:fixed;inset:0;z-index:200;background:#0d0304;display:grid;place-items:center;overflow:hidden;transition:opacity .9s ease,visibility .9s ease}
.opening.hide{opacity:0;visibility:hidden;pointer-events:none}
.opening:before,.opening:after{content:"";position:absolute;top:0;bottom:0;width:51%;background:linear-gradient(90deg,#160506,#2a080a);transition:transform 1.25s cubic-bezier(.7,0,.2,1)}
.opening:before{left:0;border-right:1px solid rgba(224,177,105,.16)}.opening:after{right:0;border-left:1px solid rgba(224,177,105,.16)}
.opening.opening-active:before{transform:translateX(-101%)}.opening.opening-active:after{transform:translateX(101%)}
.opening-glow{position:absolute;width:65vw;height:65vw;max-width:500px;max-height:500px;border-radius:50%;background:radial-gradient(circle,rgba(206,143,66,.22),transparent 67%);animation:openingPulse 3s ease-in-out infinite}
.opening-inner{position:relative;z-index:3;text-align:center;padding:30px;opacity:0;transform:translateY(22px);animation:openingIn 1s .2s forwards}
.opening-kicker{font-size:8px;letter-spacing:.28em;color:#d5a45f}.opening-guest{font:500 clamp(50px,14vw,82px)/.9 'Cormorant Garamond';color:#f4dfbd;margin:17px 0}.opening-ornament{color:#d6a05a;letter-spacing:.35em}.opening-inner p{text-transform:uppercase;letter-spacing:.25em;font-size:9px;color:#b99a77;margin:20px 0 28px}.opening-button{height:52px;padding:0 27px;border-radius:999px;border:1px solid #e0aa6266;background:linear-gradient(#8b1d21,#5c0d10);color:#fff0d8;font-weight:600;letter-spacing:.08em;box-shadow:0 18px 45px #0008}.opening-button span{color:#efc376;margin-right:9px}
@keyframes openingIn{to{opacity:1;transform:none}}@keyframes openingPulse{50%{transform:scale(1.08);opacity:.72}}

/* Hero: remove competing/overlapping baked-image copy on mobile */
@media(max-width:620px){
 .hero-title{top:14.5%;padding:0 22px}
 .hero-title span{font-size:8px}
 .hero-title h1{font-size:18vw;line-height:.82;margin-top:8px}
 .hero-title h2{font-size:18px;letter-spacing:.24em}
 .hero-title em{font-size:15px;margin-top:16px}
 .hero-guest{margin-bottom:68px;background:rgba(18,4,5,.88)}
}
/* Real location photo */
.palace-photo{height:auto!important;aspect-ratio:1/1;margin:26px -28px 20px!important;background:#080303!important}
.palace-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.location.on .palace-photo img{animation:locationReveal 1.2s both}
@keyframes locationReveal{from{opacity:.25;transform:scale(1.09);filter:brightness(.55)}to{opacity:1;transform:scale(1);filter:brightness(.92)}}

/* Slider v10: two clean visual states.
   POP = Michael Jackson side; TRADITË = traditional side.
   Hide overlay labels because artwork already contains its own typography. */
.split .side-copy{display:none!important}
.split .pop img,.split .tradition img{object-fit:cover!important;height:100%!important;width:100%!important}
.split .pop img{object-position:left center!important}
.split .tradition img{object-position:right center!important}
.split .pop{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.split .tradition{clip-path:inset(0 0 0 var(--split))}
@media(max-width:620px){
 .split{aspect-ratio:0.70;height:auto!important;min-height:0!important}
 .split .pop img,.split .tradition img{object-fit:cover!important}
}

/* Every section receives a distinct entrance */
section{position:relative}
section:before{pointer-events:none}
.invite-inner.on .kicker{animation:sectorFade .7s both}
.invite-inner.on h2{animation:sectorRise .85s .08s both}
.invite-inner.on .heart-rule{animation:sectorScale .75s .16s both}
.invite-inner.on .invite-copy{animation:sectorRise .75s .23s both}
.concept-head{opacity:0;transform:translateY(22px);transition:.8s ease}.concept.sector-on .concept-head{opacity:1;transform:none}
.concept blockquote{opacity:0;transform:translateY(20px);transition:.8s .25s ease}.concept.sector-on blockquote{opacity:1;transform:none}
.card .section-kicker,.card>small{opacity:0;transform:translateY(10px);transition:.6s ease}.card.on .section-kicker,.card.on>small{opacity:1;transform:none}.card.on>small{transition-delay:.1s}
.program.on .timeline>div{animation:sectorRise .55s both}.program.on .timeline>div:nth-child(2){animation-delay:.09s}.program.on .timeline>div:nth-child(3){animation-delay:.18s}.program.on .timeline>div:nth-child(4){animation-delay:.27s}
.dress.on .swatches i{animation:sectorScale .5s both}.dress.on .swatches i:nth-child(2){animation-delay:.08s}.dress.on .swatches i:nth-child(3){animation-delay:.16s}.dress.on .swatches i:nth-child(4){animation-delay:.24s}
.rsvp.on form{animation:sectorRise .8s .15s both}
@keyframes sectorFade{from{opacity:0}to{opacity:1}}@keyframes sectorRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes sectorScale{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}

/* ================= V11 ================= */

/* 1) Preserve full vertical artwork instead of cropping it */
.hero{height:auto!important;min-height:100svh;aspect-ratio:707/1536;background:#130405}
.hero-img{
  object-fit:contain!important;
  object-position:center top!important;
  width:100%!important;height:100%!important;
  animation:none!important;
  transform:none!important;
}
@media(max-width:620px){
  .hero{min-height:0!important;height:auto!important;aspect-ratio:707/1536}
  .hero-img{object-fit:contain!important}
  .hero-guest{
    bottom:5.8%;margin:0!important;position:absolute;
    width:calc(100% - 48px);max-width:none;
  }
  .scroll{bottom:1.7%}
}

/* POP/TRADITË artwork: vertical full-height presentation.
   The full composition stays visible; clipping only reveals which half is active. */
.split{
  aspect-ratio:707/1536!important;
  height:auto!important;
  min-height:0!important;
  background:#0b0504!important;
}
.split .side img{
  object-fit:contain!important;
  object-position:center center!important;
  width:100%!important;height:100%!important;
}
.split .pop img,.split .tradition img{
  object-fit:contain!important;
  object-position:center center!important;
}
@media(max-width:620px){
  .split{aspect-ratio:707/1536!important}
}

/* 2) Hero hierarchy: artwork owns title typography; UI only adds guest invitation. */
.hero-vignette{background:linear-gradient(180deg,rgba(8,2,2,.05),rgba(8,2,2,.02) 52%,rgba(8,2,2,.78) 77%,rgba(8,2,2,.96) 100%)}
.hero-guest{z-index:5}
.nav{z-index:85}

/* 3) Final theatrical curtain section */
.finale{
  min-height:100svh;position:relative;overflow:hidden;
  display:grid;place-items:center;text-align:center;
  background:#160305;color:#f7ead7;
  isolation:isolate;
}
.finale:before{
  content:"";position:absolute;z-index:1;top:-8%;left:50%;transform:translateX(-50%);
  width:46%;height:83%;
  background:linear-gradient(180deg,rgba(237,195,127,.48),rgba(188,125,69,.17) 48%,transparent 100%);
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
  filter:blur(2px);opacity:.78;
}
.curtain{
  position:absolute;z-index:2;top:0;bottom:0;width:42%;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 5%,rgba(0,0,0,.11) 5% 13%),
    linear-gradient(90deg,#3e080c,#7a1118 45%,#39070a);
  box-shadow:inset 0 0 55px rgba(0,0,0,.45);
}
.curtain-left{left:0;clip-path:polygon(0 0,100% 0,73% 100%,0 100%)}
.curtain-right{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,73% 100%,0 100%)}
.finale-stage{position:relative;z-index:4;width:min(92%,680px);padding:80px 20px}
.finale-mini{display:block;font-size:10px;font-weight:600;letter-spacing:.34em;color:#e8c58e;margin-bottom:38px}
.finale-mark{display:flex;align-items:center;justify-content:center;color:#d8a65d;margin-bottom:45px}
.finale-mark i{width:88px;height:1px;background:#d8a65d;transform:rotate(-24deg);transform-origin:right center}
.finale-mark i:last-child{transform:rotate(24deg);transform-origin:left center}
.finale-mark b{font-size:26px;font-weight:400;margin:0 -3px}
.finale h2{font:500 clamp(68px,14vw,112px)/.82 'Cormorant Garamond';letter-spacing:-.04em;margin:0;color:#fff1dd}
.finale p{font:500 italic clamp(23px,5vw,37px)/1.25 'Cormorant Garamond';color:#e5bb82;margin:48px auto 62px}
.finale a{color:#f3e3cd;text-decoration:none;font-size:11px;letter-spacing:.24em}
.finale.sector-on .finale-mini{animation:sectorRise .7s both}
.finale.sector-on .finale-mark{animation:sectorScale .8s .1s both}
.finale.sector-on h2{animation:sectorRise 1s .2s both}
.finale.sector-on p{animation:sectorRise .9s .4s both}
.finale.sector-on a{animation:sectorFade .9s .65s both}
.finale .curtain-left,.finale .curtain-right{transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.finale.sector-on .curtain-left{transform:translateX(-7%)}
.finale.sector-on .curtain-right{transform:scaleX(-1) translateX(-7%)}

@media(max-width:620px){
 .finale-stage{padding:70px 25px}
 .finale h2{font-size:17vw;line-height:.86}
 .finale p{font-size:7vw;margin-top:38px}
 .curtain{width:45%}
}

/* Refined motion for vertical artwork */
.split.motion-in{animation:posterEnter 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes posterEnter{from{opacity:0;transform:translateY(35px) scale(.97)}to{opacity:1;transform:none}}
/* V12 — two genuinely separate slider artworks */
.split{
  --split:100%;
  aspect-ratio:778/718!important;
  background:#100807!important;
  overflow:hidden!important;
}
.split .side{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
.split .side img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
.split .pop{z-index:1!important;clip-path:none!important}
.split .tradition{z-index:2!important;clip-path:inset(0 0 0 var(--split))!important}
.split:after{left:var(--split)!important}
.split .split-handle{left:var(--split)!important}
@media(max-width:620px){
 .split{aspect-ratio:778/718!important;height:auto!important;min-height:0!important;border-radius:24px!important}
 .split .side img{object-fit:cover!important}
}

/* V12.1 — full-state slider + centered location CTA */

/* Tradition must be able to occupy the entire card. The old 12–88% clamp
   left a permanent POP strip over the first letters of TRADITË. */
.split .tradition img{
  object-fit:cover!important;
  object-position:left center!important;
}
.split[style*="--split: 0%"] .tradition img,
.split[style*="--split:0%"] .tradition img{
  object-position:center center!important;
}

/* Keep the location label mathematically centered while the pin stays right. */
.location .outline-btn{
  position:relative!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0 48px!important;
}
.location .outline-btn b{
  position:absolute!important;
  right:18px!important;
  margin:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

/* ================= V12.2 — edge fixes ================= */

/* Never allow a 1px layout/viewport overflow on mobile */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}
body{position:relative}
*,*:before,*:after{box-sizing:border-box}
main,section,.concept,.split,.cards,.card,.finale{
  max-width:100%;
}

/* Header must stay inside the visual viewport */
.nav{
  width:100%!important;
  max-width:100vw!important;
  left:0!important;
  right:0!important;
  padding-left:max(20px,env(safe-area-inset-left))!important;
  padding-right:max(20px,env(safe-area-inset-right))!important;
}

/* Full TRADITË state: eliminate the residual seam/crop.
   Overscan by 2px so rounding/compositing cannot leave a POP strip. */
.split{
  overflow:hidden!important;
  width:100%!important;
  max-width:100%!important;
}
.split .pop,
.split .tradition{
  inset:-1px!important;
  width:calc(100% + 2px)!important;
  height:calc(100% + 2px)!important;
}
.split .tradition img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Explicit end states added by JS */
.split.is-tradition .pop{
  clip-path:inset(0 100% 0 0)!important;
  opacity:0!important;
  visibility:hidden!important;
}
.split.is-tradition .tradition{
  clip-path:inset(0 0 0 0)!important;
  opacity:1!important;
}
.split.is-pop .pop{
  clip-path:inset(0 0 0 0)!important;
  opacity:1!important;
}
.split.is-pop .tradition{
  clip-path:inset(0 0 0 100%)!important;
}
.split.is-tradition .split-handle{left:0!important}
.split.is-pop .split-handle{left:100%!important}

/* Remove common mobile horizontal overflow sources */
@media(max-width:620px){
  .concept,.invite,.cards-wrap{
    width:100%!important;
    max-width:100%!important;
  }
  .concept{padding-left:16px!important;padding-right:16px!important}
  .split{margin-left:0!important;margin-right:0!important}
  .concept-head h2{
    white-space:normal!important;
    max-width:100%!important;
  }
  .finale-stage{max-width:100%!important}
}

/* V12.3 RSVP */
#rsvp input[readonly]{cursor:default;caret-color:transparent;opacity:1;}
#rsvp input[readonly]:focus{outline:none;}

/* V12.4 — bespoke creator signature */
.signature-credit{position:relative;z-index:8;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.55em;width:100%;padding:24px 20px calc(24px + env(safe-area-inset-bottom));background:#0d0203;border-top:1px solid rgba(215,166,94,.16);color:rgba(226,197,157,.58);font-size:8px;font-weight:500;letter-spacing:.24em;text-align:center}.signature-credit a{color:#e1b26d;text-decoration:none;letter-spacing:.22em;transition:color .25s ease,opacity .25s ease}.signature-credit a:hover{color:#f3d29c}@media(max-width:620px){.signature-credit{gap:.45em;padding-top:21px;font-size:7px;letter-spacing:.19em}.signature-credit a{letter-spacing:.18em}}

/* ================= V13 SIGNATURE INTERACTIONS ================= */
/* 1 — Gold particle touch/cursor trail */
#goldTrail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:150}
body:not(.trail-zone) #goldTrail{opacity:0}
#goldTrail{opacity:1;transition:opacity .35s ease}

/* 2 — Interactive theatrical spotlight */
.finale{--spot-x:50%;--curtain-shift:0px}
.interactive-spotlight{
 position:absolute;z-index:3;top:-12%;left:var(--spot-x);transform:translateX(-50%);
 width:52%;height:92%;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,220,158,.52),rgba(220,155,87,.15) 52%,transparent);
 clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
 filter:blur(4px);opacity:.75;
 transition:left .12s linear;
 mix-blend-mode:screen;
}
.finale .curtain-left{margin-left:calc(var(--curtain-shift) * -1)}
.finale .curtain-right{margin-right:var(--curtain-shift)}
.finale-stage{transition:transform .18s ease-out}
.finale.spot-active .finale-stage{transform:translateX(calc((var(--spot-num) - 50) * .035px))}

/* 5 — POP × TRADITË becomes a complete atmosphere transition */
.concept{
 --mix:50;
 transition:background .18s linear,color .18s linear;
 background:
 radial-gradient(circle at calc(var(--mix) * 1%) 30%,rgba(197,139,72,.10),transparent 36%),
 var(--paper);
}
.split:before{
 content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
 opacity:calc((100 - var(--mix)) / 150);
 background:radial-gradient(circle at 75% 32%,rgba(245,202,128,.20),transparent 36%);
 mix-blend-mode:screen;
}
.split:after{transition:box-shadow .15s linear}
.split.tradition-energy:after{box-shadow:0 0 18px rgba(229,173,94,.55)}
.split-handle{
 transition:left .06s linear,box-shadow .2s ease,transform .2s ease!important;
}
.concept-head h2{
 background:linear-gradient(90deg,#2d0d0e 0%,#2d0d0e calc(var(--mix)*1%),#7c291f calc(var(--mix)*1%),#b27b45 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(prefers-reduced-motion:reduce){
 #goldTrail{display:none}.interactive-spotlight{transition:none}.finale-stage{transition:none}
}

/* V14 — real soundtrack UI refinement */
#monarAudio{display:none}
.sound{transition:background .3s ease,border-color .3s ease,transform .25s ease}
.sound.playing{
  border-color:rgba(224,177,105,.72);
  background:rgba(54,10,12,.92);
}
.sound.playing span{color:#efc47f}

/* ================= V15 — ALL 5 SIGNATURE INTERACTIONS ================= */

/* 3 — Interactive parallax invitation */
.opening-inner{
  --tilt-x:0deg;--tilt-y:0deg;--px:0px;--py:0px;
  transform-style:preserve-3d;
  perspective:900px;
}
.opening-inner.parallax-ready{
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition:transform .12s ease-out;
}
.depth-layer{transition:transform .12s ease-out;will-change:transform}
.depth-title{transform:translate3d(calc(var(--px)*.35),calc(var(--py)*.35),36px)}
.depth-ornament{transform:translate3d(calc(var(--px)*.18),calc(var(--py)*.18),22px)}
.depth-button{transform:translate3d(calc(var(--px)*.10),calc(var(--py)*.10),14px)}
.opening-glow{
  transform:translate3d(calc(var(--px)*-.20),calc(var(--py)*-.20),0);
  transition:transform .15s ease-out;
}

/* 4 — Interactive metallic gold foil typography */
.foil-text{
  --foil-x:50%;
  position:relative;
  background:
    radial-gradient(circle at var(--foil-x) 42%,#fff0bd 0 4%,#e5b66d 13%,#9e652d 28%,#f0ce8e 45%,#c38a43 62%,#fff0bd 78%,#b77a36 100%);
  background-size:180% 100%;
  background-position:var(--foil-x) center;
  -webkit-background-clip:text;background-clip:text;
  color:transparent!important;
  filter:drop-shadow(0 2px 12px rgba(164,104,42,.12));
  transition:background-position .12s linear,filter .2s ease;
}
.foil-text.foil-active{filter:drop-shadow(0 3px 16px rgba(215,158,74,.28))}

/* 5 — richer POP/TRADITË atmosphere while preserving the real MP3 */
.concept{--tradition-level:0}
.concept:after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:
   radial-gradient(circle at 75% 25%,rgba(229,171,91,calc(var(--tradition-level)*.0018)),transparent 32%),
   linear-gradient(180deg,transparent,rgba(115,35,26,calc(var(--tradition-level)*.00065)));
 transition:background .08s linear;
}
.concept>*{position:relative;z-index:1}
.split .pop,.split .tradition{transition:filter .12s linear}
.split.tradition-energy .tradition{filter:saturate(1.08) brightness(1.025)}
.split:not(.tradition-energy) .pop{filter:contrast(1.03)}
.split-handle:before{
 content:"";position:absolute;inset:-7px;border-radius:50%;
 border:1px solid rgba(224,177,105,.28);opacity:.5;
 transform:scale(.88);transition:transform .2s ease,opacity .2s ease;
}
.split.dragging .split-handle:before{transform:scale(1.12);opacity:1}

/* Interactive sections should not create horizontal overflow */
.opening,.concept,.finale{overflow:hidden}
@media(max-width:620px){
 .opening-inner.parallax-ready{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.985)}
}
@media(prefers-reduced-motion:reduce){
 .opening-inner.parallax-ready,.depth-layer,.opening-glow,.foil-text{transition:none!important;transform:none!important}
}

/* V15.1 — particles removed for smoother mobile performance */
#goldTrail{display:none!important}

/* V16 — dual soundtrack */
#monarPopAudio,#monarTradAudio{display:none}
.sound.playing{
  border-color:rgba(224,177,105,.78);
  background:rgba(54,10,12,.94);
}

/* V16.3 stability: one compositor-friendly slider */
.split{touch-action:pan-y!important;contain:layout paint;--split:100%}
.split .pop{clip-path:inset(0 calc(100% - var(--split)) 0 0)!important}
.split .tradition{clip-path:inset(0 0 0 var(--split))!important}
.split .pop,.split .tradition{transition:none!important}
.split-handle{left:var(--split)!important;transition:none!important}
.split.is-pop .pop{clip-path:inset(0)!important;opacity:1!important;visibility:visible!important}
.split.is-pop .tradition{clip-path:inset(0 0 0 100%)!important}
.split.is-tradition .pop{clip-path:inset(0 100% 0 0)!important;opacity:0!important}
.split.is-tradition .tradition{clip-path:inset(0)!important;opacity:1!important;visibility:visible!important}

/* V16.4 — opening overlay reliability */
.opening.hide{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.opening.opening-active{pointer-events:none}

/* ================= V16.5 — POP × TRADITË VISIBILITY FIX ================= */
/* The old reveal system left .split at opacity:0 after its observer was removed.
   Slider now has a safe visible baseline; JS only adds a one-time entrance class. */
.split{
  opacity:1!important;
  transform:none!important;
  visibility:visible!important;
}
.split.slider-enter{
  animation:v165SliderEnter .8s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes v165SliderEnter{
  from{opacity:0;transform:translateY(24px) scale(.98)}
  to{opacity:1;transform:none}
}
.split .pop,.split .tradition{
  visibility:visible;
}

/* V21: center TRADITË copy in the reveal area on mobile */
.split-img.trad{object-position:42% center!important;}
@media(max-width:768px){.split-img.trad{object-position:38% center!important;}}

/* V22 — RSVP removed */
#rsvp,.rsvp-section,.rsvp-card,.rsvp-form,[href="#rsvp"],
#rsvpBtn,#confirmBtn,.confirm-attendance{display:none!important;}

/* ================= V24 — HERO TYPOGRAPHY ================= */
.hero-anniversary{
  margin:0 auto 12px;
  font-size:clamp(.68rem,1.8vw,.82rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#d8aa66;
  text-align:center;
}
.hero h1{
  text-align:center;
  text-wrap:balance;
}

/* Navigation hamburger — champagne gold, no legacy blue */
.menu-toggle span,
.nav-toggle span,
.hamburger span,
.menu-btn span,
button[aria-label*="menu" i] span{
  background:#d8aa66!important;
  border-color:#d8aa66!important;
}
.menu-toggle,.nav-toggle,.hamburger,.menu-btn{
  color:#d8aa66!important;
  border-color:rgba(216,170,102,.45)!important;
}

/* V27 — one functional champagne-gold menu */
.menu{position:relative;z-index:102;color:#d8aa66!important;cursor:pointer;width:42px!important;height:42px!important;padding:7px 2px!important;display:flex!important;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px!important;border:0!important;background:transparent!important}
.menu i{display:block!important;height:2px!important;border-radius:2px;background:#d8aa66!important;transition:transform .35s ease,opacity .25s ease,width .3s ease}
.menu i:nth-child(1){width:30px}.menu i:nth-child(2){width:24px}.menu i:nth-child(3){width:18px}
.menu.is-open i:nth-child(1){width:28px;transform:translateY(8px) rotate(45deg)}.menu.is-open i:nth-child(2){opacity:0}.menu.is-open i:nth-child(3){width:28px;transform:translateY(-8px) rotate(-45deg)}
.menu-panel{position:fixed;z-index:100;top:18px;right:max(16px,env(safe-area-inset-right));min-width:210px;padding:64px 20px 20px;border:1px solid rgba(216,170,102,.38);border-radius:24px;background:rgba(22,5,5,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:top right;transition:.3s ease}
.menu-panel.is-open{opacity:1;visibility:visible;transform:none}.menu-panel a{display:block;padding:12px 8px;color:#f4e3ca;text-decoration:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid rgba(216,170,102,.13)}.menu-panel a:last-child{border-bottom:0}