:root{
  --olive:#3f452d;
  --olive-deep:#2d321f;
  --olive-soft:#5b6140;
  --gold:#b89a5e;
  --gold-soft:#d8c58b;
  --gold-dark:#957239;
  --cream:#f8f1e7;
  --ivory:#fffaf1;
  --paper:#fff7ec;
  --ink:#303322;
  --muted:#746b5a;
  --burgundy:#6e1e27;
  --shadow:0 24px 60px rgba(52,42,26,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#efe4d4;
  color:var(--ink);
  font-family:"Tajawal","Tahoma",Arial,sans-serif;
}
a,button{font:inherit}
a{text-decoration:none;color:inherit}
.page{
  width:min(100%,560px);
  min-height:100svh;
  margin:auto;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.95),transparent 26%),
    radial-gradient(circle at 92% 18%,rgba(184,154,94,.12),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.10)),
    var(--cream);
  border-inline:1px solid rgba(184,154,94,.28);
}
.page::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(184,154,94,.44);
  pointer-events:none;
  z-index:0;
}
.corner{
  position:absolute;
  top:24px;
  width:78px;height:78px;
  border-top:2px solid rgba(184,154,94,.58);
  z-index:2;
  pointer-events:none;
}
.corner.right{right:24px;border-right:2px solid rgba(184,154,94,.58);border-radius:0 18px 0 0}
.corner.left{left:24px;border-left:2px solid rgba(184,154,94,.58);border-radius:18px 0 0 0}
.section{position:relative;z-index:1;padding:0 22px 24px}
.ar-title{
  font-family:"Aref Ruqaa","Amiri","Times New Roman",serif;
  letter-spacing:0;
}

/* Envelope landing */
.hero{
  min-height:100svh;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:24px;
}
.envelope-stage{
  width:min(92vw,450px);
  height:360px;
  position:relative;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.envelope{
  position:absolute;
  left:50%;
  top:94px;
  transform:translateX(-50%) rotate(-1.2deg);
  width:400px;
  max-width:88vw;
  height:202px;
  border-radius:7px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.05),transparent 38%),
    linear-gradient(145deg,#535a3b,#303621);
  box-shadow:0 32px 72px rgba(32,28,18,.26);
  overflow:hidden;
}
.envelope::before,.envelope::after{
  content:"";
  position:absolute;
  bottom:0;
  width:65%;
  height:94%;
  background:rgba(0,0,0,.10);
  clip-path:polygon(0 100%,100% 100%,50% 0);
}
.envelope::before{right:-8%;transform:skewX(-8deg)}
.envelope::after{left:-8%;transform:skewX(8deg)}
.envelope-flap{
  position:absolute;
  inset:0 0 auto 0;
  height:126px;
  background:linear-gradient(180deg,#5d6442,#40472f);
  clip-path:polygon(0 0,100% 0,86% 68%,50% 100%,14% 68%);
  transform-origin:top center;
  transition:transform .85s cubic-bezier(.2,.72,.2,1);
  z-index:3;
}
.envelope-flap::after{
  content:"";
  position:absolute;
  inset:22px 58px;
  border-top:1px solid rgba(217,190,126,.28);
  border-radius:50%;
  opacity:.7;
}
.inner-card{
  position:absolute;
  left:50%;
  top:136px;
  transform:translateX(-50%);
  width:250px;
  height:148px;
  border:2px solid rgba(184,154,94,.62);
  border-radius:20px;
  background:rgba(255,250,241,.96);
  box-shadow:0 16px 34px rgba(72,57,31,.14);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  z-index:1;
  transition:transform .88s cubic-bezier(.2,.72,.2,1), opacity .88s;
}
.inner-card small{font-size:18px;color:var(--gold-dark);font-weight:700}
.inner-card strong{font-size:34px;color:var(--olive);font-family:"Aref Ruqaa","Amiri",serif;line-height:1.2}
.seal{
  position:absolute;
  left:50%;
  top:98px;
  z-index:5;
  transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle,#f3df9e 0 28%,#c7903c 58%,#76511f 100%);
  color:#5e3e14;
  box-shadow:0 9px 18px rgba(0,0,0,.25),inset 0 0 0 6px rgba(255,255,255,.16);
  font-size:30px;
  font-weight:800;
}
.envelope-stage.opened .envelope-flap{transform:rotateX(75deg)}
.envelope-stage.opened .inner-card{transform:translateX(-50%) translateY(-82px)}
.flower{
  position:absolute;
  width:138px;height:146px;
  z-index:6;
  pointer-events:none;
  filter:drop-shadow(0 10px 10px rgba(48,39,24,.15));
}
.flower::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%,#fff9e9 0 12px,#e8d8b8 13px 21px,transparent 22px),
    radial-gradient(circle at 49% 21%,#fff9e9 0 13px,#e8d8b8 14px 23px,transparent 24px),
    radial-gradient(circle at 65% 41%,#fff9e9 0 12px,#e8d8b8 13px 21px,transparent 22px),
    radial-gradient(circle at 38% 58%,#fff9e9 0 12px,#e8d8b8 13px 21px,transparent 22px),
    radial-gradient(circle at 73% 65%,#fff9e9 0 10px,#e8d8b8 11px 18px,transparent 19px),
    radial-gradient(circle at 56% 49%,#ffffff 0 5px,transparent 6px);
}
.flower::after{
  content:"";
  position:absolute;
  left:42%;top:72px;width:70px;height:92px;
  border-radius:0 0 58% 58%;
  background:
    linear-gradient(160deg,transparent 15%,rgba(80,104,52,.45) 16% 18%,transparent 19% 34%,rgba(80,104,52,.36) 35% 37%,transparent 38% 52%,rgba(80,104,52,.28) 53% 55%,transparent 56%),
    linear-gradient(70deg,transparent 0 22%,rgba(80,104,52,.22) 23% 25%,transparent 26%);
}
.f-hero-a{right:14px;top:20px}
.f-hero-b{left:18px;top:170px;transform:scale(.90)}
.f-card{right:-10px;top:-58px;transform:scale(.88)}
.f-bottom-a{right:5px;bottom:8px;transform:scale(.76)}
.f-bottom-b{left:5px;bottom:8px;transform:scale(.76)}
.open-caption{
  margin-top:8px;
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:31px;
  font-weight:700;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:9px;
}
.ornament{
  color:var(--gold);
  width:230px;
  display:flex;align-items:center;gap:14px;justify-content:center;
  margin-top:12px;
}
.ornament::before,.ornament::after{
  content:"";
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* Invitation page */
.top-space{height:40px}
.card{
  position:relative;
  background:rgba(255,250,241,.93);
  border:2px solid rgba(184,154,94,.72);
  border-radius:34px;
  box-shadow:var(--shadow);
}
.card::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(184,154,94,.22);
  border-radius:25px;
  pointer-events:none;
}
.invite-card{
  text-align:center;
  padding:62px 20px 36px;
  overflow:visible;
}
.pattern-tab{
  position:absolute;
  top:80px;
  width:78px;
  height:190px;
  border-radius:18px;
  background:
    radial-gradient(circle at 28% 30%,rgba(184,154,94,.18),transparent 4px),
    radial-gradient(circle at 68% 65%,rgba(184,154,94,.14),transparent 4px),
    rgba(218,202,170,.22);
  z-index:-1;
}
.pattern-tab.left{left:-56px}
.pattern-tab.right{right:-56px}
.invite-card h1{
  margin:0 0 18px;
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:58px;
  color:var(--gold-dark);
  line-height:1.08;
}
.names{
  display:grid;
  line-height:1.04;
  gap:3px;
  font-family:"Aref Ruqaa","Amiri",serif;
  color:var(--olive);
  font-weight:700;
}
.names span{font-size:64px}
.names em{
  font-style:normal;
  color:var(--gold);
  font-family:"Tajawal",Arial,sans-serif;
  font-size:37px;
  line-height:1;
}
.divider{
  margin:15px auto 10px;
  width:185px;
  color:var(--gold);
  display:flex;align-items:center;gap:12px;justify-content:center;
}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--gold)}
.invite-card p{
  margin:0;
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:28px;
  font-weight:700;
  line-height:1.6;
}
.couple-frame{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(184,154,94,.44);
  border-radius:30px;
  background:var(--paper);
  box-shadow:var(--shadow);
}
.couple-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border:7px solid rgba(255,255,255,.58);
  border-radius:30px;
  pointer-events:none;
}
.couple-frame img{
  display:block;
  width:100%;
  height:auto;
}
.details-card{
  text-align:center;
  padding:28px 16px 22px;
}
.details-card h2{
  margin:0 0 22px;
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:44px;
  color:var(--olive);
}
.details-card h2::before,.details-card h2::after{
  content:"✦";
  color:var(--gold);
  font-size:19px;
  margin:0 12px;
}
.details-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  direction:ltr;
}
.detail{
  direction:rtl;
  padding:10px 8px;
  border-left:1px solid rgba(184,154,94,.42);
}
.detail:first-child{border-left:0}
.icon-circle{
  width:60px;height:60px;
  border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto 10px;
  background:rgba(184,154,94,.13);
  border:1px solid rgba(184,154,94,.32);
}
.icon-circle svg{width:30px;height:30px;stroke:var(--gold-dark);fill:none;stroke-width:1.8}
.detail strong{display:block;font-size:24px;line-height:1.35}
.detail small{display:block;font-size:16px;color:var(--muted);line-height:1.55;margin-top:6px}
.location-card{
  padding:22px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  overflow:hidden;
}
.location-copy{text-align:right}
.location-copy h2{
  margin:0 0 12px;
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:35px;
  color:var(--olive);
}
.location-copy p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}
.gold-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  background:linear-gradient(90deg,#a98238,#d6bd76,#a98238);
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 24px rgba(152,119,52,.22);
}
.pin-badge{
  flex:0 0 112px;
  height:112px;
  border-radius:32% 68% 64% 36%/35% 34% 66% 65%;
  background:var(--olive);
  border:4px solid rgba(184,154,94,.74);
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 18px 34px rgba(43,38,23,.18);
}
.pin-badge svg{width:58px;height:58px;fill:#fff}
.closing{
  padding-bottom:62px;
}
.closing-card{
  text-align:center;
  padding:25px 20px 22px;
  border:1.5px solid rgba(184,154,94,.60);
  background:rgba(255,250,241,.78);
  border-radius:999px;
  box-shadow:0 12px 30px rgba(64,55,35,.09);
}
.closing-card p{
  margin:0;
  font-family:"Aref Ruqaa","Amiri",serif;
  font-size:34px;
  font-weight:700;
}
.closing-card span{display:block;margin-top:6px;color:var(--gold);font-size:23px}

/* Smooth entrance */
.reveal{opacity:0;transform:translateY(22px);animation:reveal .7s ease forwards}
.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.24s}.reveal.d4{animation-delay:.36s}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}

@media(max-width:430px){
  .hero{padding:18px}
  .envelope-stage{height:330px}
  .envelope{width:342px;height:172px;top:102px}
  .envelope-flap{height:108px}
  .seal{top:83px;width:56px;height:56px;font-size:26px}
  .inner-card{width:214px;height:126px;top:138px}
  .inner-card strong{font-size:28px}
  .flower{width:113px;height:122px}
  .f-hero-a{right:18px;top:32px}
  .f-hero-b{left:18px;top:178px}
  .open-caption{font-size:27px}
  .section{padding-inline:18px}
  .invite-card{padding-top:58px}
  .invite-card h1{font-size:50px}
  .names span{font-size:56px}
  .invite-card p{font-size:23px}
  .details-card h2{font-size:38px}
  .details-grid{grid-template-columns:1fr}
  .detail{border-left:0;border-top:1px solid rgba(184,154,94,.35)}
  .detail:first-child{border-top:0}
  .location-card{display:block;text-align:center}
  .location-copy{text-align:center}
  .pin-badge{margin:0 auto 16px}
  .closing-card p{font-size:30px}
}