:root{
  --forest:#092c26;
  --forest-2:#0f3f36;
  --ivory:#fbf7ee;
  --paper:#fffdf8;
  --champagne:#d6b878;
  --gold:#b89248;
  --ink:#1d2d29;
  --muted:#6d7772;
  --line:rgba(184,146,72,.28);
  --shadow:0 30px 90px rgba(5,35,29,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--forest)}
body{margin:0;font-family:'Noto Kufi Arabic',sans-serif;background:var(--forest);color:var(--ink);overflow-x:hidden}
button,input,textarea,select{font-family:inherit}
.invitation-shell{width:100%;max-width:760px;margin:0 auto;background:var(--ivory);min-height:100vh;position:relative;overflow:hidden;box-shadow:0 0 100px rgba(0,0,0,.34)}

/* Opening scene */
.envelope-scene{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:
 radial-gradient(circle at 50% 5%,rgba(255,255,255,.12),transparent 30%),
 radial-gradient(circle at 10% 20%,rgba(214,184,120,.13),transparent 22%),
 linear-gradient(160deg,#061e1a 0%,#0b332b 48%,#051714 100%);transition:opacity .9s ease,visibility .9s ease}
.envelope-scene:before,.envelope-scene:after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(214,184,120,.12);border-radius:50%;filter:blur(.2px)}
.envelope-scene:before{left:-210px;top:-130px;box-shadow:0 0 0 34px rgba(214,184,120,.025),0 0 0 70px rgba(214,184,120,.018)}
.envelope-scene:after{right:-230px;bottom:-150px;box-shadow:0 0 0 34px rgba(214,184,120,.025),0 0 0 70px rgba(214,184,120,.018)}
.envelope-scene.opened{opacity:0;visibility:hidden;pointer-events:none}
.envelope{position:relative;width:min(92vw,430px);height:min(82dvh,720px);min-height:570px;border:0;background:transparent;padding:0;cursor:pointer;perspective:1600px;filter:drop-shadow(0 34px 44px rgba(0,0,0,.38));isolation:isolate}
.envelope span{position:absolute;display:block}
.envelope-back{inset:0;border-radius:28px;background:
 linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.12)),
 repeating-linear-gradient(0deg,rgba(166,135,82,.035) 0 1px,transparent 1px 5px),#e8dcc2;border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 0 0 10px rgba(255,255,255,.22)}
.envelope-back:before{content:"";position:absolute;inset:18px;border:1px solid rgba(147,112,54,.26);border-radius:20px}
.letter-card{left:7%;right:7%;top:6%;bottom:10%;z-index:2;border-radius:20px;background:
 radial-gradient(circle at 50% 5%,rgba(214,184,120,.12),transparent 34%),
 repeating-linear-gradient(90deg,rgba(117,89,45,.025) 0 1px,transparent 1px 4px),var(--paper);border:1px solid rgba(165,128,66,.26);box-shadow:0 18px 42px rgba(57,42,16,.18);display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:38px 24px;transition:transform 1.15s .32s cubic-bezier(.17,.84,.27,1),opacity .7s ease}
.letter-card:before,.letter-card:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:58%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.letter-card:before{top:20%}.letter-card:after{bottom:20%}
.letter-card .monogram{position:static;font-family:'Noto Naskh Arabic',serif;font-size:clamp(46px,14vw,72px);line-height:1;color:var(--forest);text-shadow:0 2px 0 rgba(255,255,255,.9)}
.letter-card small{position:static;color:#806d49;font-size:12px;letter-spacing:.03em}
.envelope-front-left{left:0;bottom:0;width:51%;height:63%;z-index:5;clip-path:polygon(0 0,100% 57%,100% 100%,0 100%);background:linear-gradient(135deg,#efe4ce,#cbb482)}
.envelope-front-right{right:0;bottom:0;width:51%;height:63%;z-index:5;clip-path:polygon(100% 0,0 57%,0 100%,100% 100%);background:linear-gradient(225deg,#f4ead6,#c9b17d)}
.envelope-bottom{left:0;right:0;bottom:0;height:61%;z-index:6;clip-path:polygon(0 100%,50% 28%,100% 100%);background:linear-gradient(0deg,#c4aa72 0%,#eadcc0 72%);border-radius:0 0 28px 28px}
.envelope-flap{left:0;right:0;top:0;height:48%;z-index:8;clip-path:polygon(0 0,50% 100%,100% 0);background:linear-gradient(180deg,#f5ebd7 0%,#cfb77f 100%);transform-origin:top center;transition:transform 1s cubic-bezier(.18,.88,.2,1),z-index .1s .45s;border-radius:28px 28px 0 0;backface-visibility:hidden}
.envelope-flap:after{content:"";position:absolute;inset:16px 18px auto;height:1px;background:rgba(135,101,45,.24)}
.wax-seal{z-index:10;left:50%;top:45%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid!important;place-items:center;background:
 radial-gradient(circle at 32% 24%,#e2c480 0 12%,#b68a3e 42%,#76531f 100%);color:#fff5da;font-size:31px;border:1px solid rgba(255,255,255,.38);box-shadow:0 12px 24px rgba(68,47,13,.33),inset 0 0 0 6px rgba(255,255,255,.12);transition:opacity .3s,transform .5s}
.envelope.is-open .envelope-flap{transform:rotateX(180deg);z-index:1}
.envelope.is-open .letter-card{transform:translateY(-37%);opacity:1}
.envelope.is-open .wax-seal{opacity:0;transform:translate(-50%,-50%) scale(.72)}
.tap-hint{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));margin:0;color:#f7eed9;font-size:13px;letter-spacing:.025em;animation:pulse 1.8s infinite}
.tap-hint:before{content:"";display:block;width:42px;height:1px;margin:0 auto 10px;background:linear-gradient(90deg,transparent,var(--champagne),transparent)}
.floating-petal{position:absolute;width:13px;height:23px;border-radius:90% 0 90% 0;background:linear-gradient(145deg,#e8d9b5,#b99452);opacity:.68;animation:float 8s infinite ease-in-out}
.petal-one{left:13%;top:18%}.petal-two{right:13%;bottom:18%;animation-delay:-3s}

/* Site */
.invitation-content{opacity:0;transition:opacity .8s ease}.invitation-content.visible{opacity:1}
.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;padding:12px 16px;background:rgba(251,247,238,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.icon-btn{width:43px;height:43px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.76);color:var(--forest);font-size:17px;display:grid;place-items:center;box-shadow:0 8px 22px rgba(12,50,42,.08)}
.language-switch{justify-self:center;display:flex;padding:3px;border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:999px}
.language-switch button{border:0;background:transparent;padding:7px 14px;border-radius:999px;color:#746f63;font-size:12px}
.language-switch .active{background:var(--forest);color:#fff;box-shadow:0 4px 12px rgba(9,44,38,.2)}
.section{min-height:86vh;padding:96px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden}
.hero{min-height:100dvh;background:
 radial-gradient(circle at 50% 16%,rgba(214,184,120,.22),transparent 27%),
 linear-gradient(180deg,#fffdf8 0%,#f7efdf 56%,#e8dcc2 100%)}
.hero:before{content:"";position:absolute;inset:0;background:
 linear-gradient(115deg,transparent 0 48%,rgba(184,146,72,.05) 49% 51%,transparent 52%),
 radial-gradient(circle at 50% 50%,transparent 0 60%,rgba(9,44,38,.05) 100%);pointer-events:none}
.hero:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(184,146,72,.18);border-radius:50%;top:12%;left:50%;transform:translateX(-50%);box-shadow:0 0 0 20px rgba(184,146,72,.035),0 0 0 42px rgba(184,146,72,.02)}
.butterfly{width:126px;height:92px;position:relative;margin-bottom:25px;z-index:2;animation:fly 5s ease-in-out infinite}
.butterfly span{position:absolute;top:8px;width:63px;height:73px;border:1px solid rgba(64,82,75,.45);background:
 radial-gradient(circle at 66% 35%,rgba(255,255,255,.9) 0 8%,transparent 9%),
 linear-gradient(135deg,#f5e7c7,#c7a861);box-shadow:inset 0 0 0 7px rgba(255,255,255,.25),0 9px 20px rgba(55,50,28,.12)}
.butterfly span:first-child{left:0;border-radius:88% 12% 72% 28%;transform-origin:right center;animation:wingL .72s infinite alternate}
.butterfly span:nth-child(2){right:0;border-radius:12% 88% 28% 72%;transform-origin:left center;animation:wingR .72s infinite alternate}
.butterfly i{position:absolute;left:50%;top:22px;width:6px;height:55px;border-radius:10px;background:#30463f;transform:translateX(-50%)}
.eyebrow{margin:0 0 13px;color:var(--gold);font-size:12px;font-weight:600;letter-spacing:.06em;position:relative;z-index:2}
.hero h1{margin:0;position:relative;z-index:2;font-family:'Noto Naskh Arabic',serif;color:var(--forest);font-size:clamp(62px,18vw,116px);line-height:.86;font-weight:700;text-shadow:0 10px 28px rgba(9,44,38,.09)}
.hero h1 span,.hero h1 em{display:block}.hero h1 em{font-size:.3em;color:var(--gold);font-style:normal;margin:.25em 0}
.lead,.body-copy{max-width:560px;line-height:2.1;color:var(--muted);font-size:15px;position:relative;z-index:2}
.scroll-cue{position:absolute;bottom:28px;color:var(--gold);font-size:32px;animation:bounce 1.7s infinite}
.countdown-section{background:
 radial-gradient(circle at 50% 15%,rgba(214,184,120,.18),transparent 32%),
 linear-gradient(160deg,#0f4037,#082a24 64%,#061d19);color:#fff}
.countdown-section:before{content:"";position:absolute;inset:20px;border:1px solid rgba(214,184,120,.18);border-radius:32px}
.glass-card{width:100%;padding:46px 18px;border:1px solid rgba(255,255,255,.14);border-radius:30px;background:rgba(255,255,255,.055);backdrop-filter:blur(14px);box-shadow:0 28px 70px rgba(0,0,0,.22)}
.countdown-section .eyebrow{color:#e5cd96}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:30px 0}
.countdown div{padding:18px 5px;border-radius:18px;border:1px solid rgba(214,184,120,.18);background:rgba(255,255,255,.045)}
.countdown strong{display:block;font-family:'Noto Naskh Arabic',serif;font-size:clamp(27px,8vw,48px);line-height:1;color:#fff7e7}
.countdown span{font-size:10px;color:#d8c99f}.event-date{font-family:'Noto Naskh Arabic',serif;font-size:22px;color:#f7efd9}
.section h2{font-family:'Noto Naskh Arabic',serif;font-size:clamp(38px,10vw,66px);line-height:1.1;color:var(--forest);margin:0 0 18px}
.section-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--gold);font-size:29px;box-shadow:0 14px 34px rgba(9,44,38,.10);margin-bottom:20px}
.map-card{width:100%;margin-top:30px;padding:10px;border-radius:28px;background:#fff;box-shadow:var(--shadow);border:1px solid rgba(184,146,72,.17)}
.map-grid{height:285px;border-radius:20px;background:
 linear-gradient(26deg,transparent 46%,rgba(132,158,148,.28) 47% 50%,transparent 51%),
 linear-gradient(112deg,#edf1ec 40%,#d9e2dc 41% 58%,#eef2ef 59%);background-size:84px 84px;display:grid;place-items:center;overflow:hidden;position:relative}
.map-grid:before{content:"";position:absolute;width:120px;height:120px;border:1px solid rgba(9,44,38,.18);border-radius:50%;box-shadow:0 0 0 18px rgba(9,44,38,.035)}
.pin{width:48px;height:48px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(145deg,#c5a35d,#8e6b2b);color:white;display:grid;place-items:center;font-size:12px;box-shadow:0 14px 24px rgba(73,51,15,.24)}
.primary-btn{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 26px;margin-top:14px;border:0;border-radius:999px;background:linear-gradient(135deg,#174d43,#082a24);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 14px 28px rgba(9,44,38,.22)}
.story-section{background:
 radial-gradient(circle at 15% 20%,rgba(214,184,120,.13),transparent 24%),
 linear-gradient(180deg,#f8f1e5,#eee1c8)}
.story-section:before,.story-section:after{content:"";position:absolute;width:160px;height:260px;border:1px solid rgba(73,103,92,.14);border-radius:50% 50% 10% 90%}
.story-section:before{left:-95px;top:80px;transform:rotate(-25deg)}.story-section:after{right:-100px;bottom:70px;transform:rotate(150deg)}
.rsvp-form{width:100%;display:grid;gap:14px;margin-top:26px;text-align:right}.rsvp-form label{font-size:12px;color:#5c6a65}
.rsvp-form input,.rsvp-form textarea,.rsvp-form select{width:100%;margin-top:8px;border:1px solid rgba(90,112,103,.2);border-radius:16px;background:rgba(255,255,255,.9);padding:15px;color:var(--ink);outline:none;transition:.2s}
.rsvp-form input:focus,.rsvp-form textarea:focus,.rsvp-form select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(184,146,72,.11)}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-row label{position:relative}.choice-row input{position:absolute;opacity:0}.choice-row span{display:block;text-align:center;padding:14px;border:1px solid rgba(90,112,103,.2);border-radius:16px;background:#fff}.choice-row input:checked+span{background:var(--forest);color:#fff;border-color:var(--forest)}
.full{width:100%;font-size:14px}.success-message{width:100%;padding:14px;border-radius:14px;background:#e7f3ed;color:#1d654f;border:1px solid #c8e3d7}
.footer{padding:82px 24px;min-height:auto;background:linear-gradient(160deg,#0f4037,#061e1a);color:#fff}.footer-monogram{font-family:'Noto Naskh Arabic',serif;font-size:58px;color:#e4ca91}.footer p{margin:8px}.footer small{opacity:.68}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}.reveal.in-view{opacity:1;transform:none}
@keyframes pulse{50%{opacity:.48;transform:translateY(4px)}}@keyframes float{50%{transform:translate(24px,54px) rotate(170deg)}}@keyframes fly{50%{transform:translateY(-13px) rotate(2deg)}}@keyframes wingL{to{transform:rotateY(57deg)}}@keyframes wingR{to{transform:rotateY(-57deg)}}@keyframes bounce{50%{transform:translateY(8px)}}
@media(max-width:480px){
  .envelope{width:92vw;height:84dvh;min-height:0}
  .letter-card{left:6%;right:6%;top:5%;bottom:8%}
  .wax-seal{width:70px;height:70px}
  .tap-hint{font-size:12px}
  .section{padding:86px 22px}
  .topbar{padding:10px 12px}
  .countdown{gap:6px}.countdown div{padding:15px 3px}
}
@media(min-width:760px){body{padding:24px}.invitation-shell{border-radius:32px}.section{padding-inline:72px}.rsvp-form{grid-template-columns:1fr 1fr}.rsvp-form label:nth-of-type(3),.rsvp-form label:nth-of-type(4),.choice-row,.rsvp-form .full{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}