@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/great-vibes-latin-400-normal.woff2') format('woff2');}

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/playfair-display-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/playfair-display-latin-600-normal.woff2') format('woff2');}

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');}

@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/vazirmatn-arabic-400-normal.woff2') format('woff2');}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/vazirmatn-arabic-500-normal.woff2') format('woff2');}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/vazirmatn-arabic-600-normal.woff2') format('woff2');}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/vazirmatn-arabic-700-normal.woff2') format('woff2');}

:root{
  --blush:#f2ddda;
  --blush-deep:#e6c3c0;
  --rose:#bd8089;
  --rose-deep:#95545f;
  --cream:#fbf4ea;
  --paper:#f7ecdd;
  --ink:#3c2b28;
  --ink-soft:#6f5652;
  --gold:#b8935e;
  --gold-light:#e7d3a3;
  --gold-deep:#8a6a37;
  --app-max:480px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Cormorant Garamond', 'Vazirmatn', serif;
  background:#1c1310;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden;height:100%;}

img{max-width:100%;display:block;}
button{font-family:inherit;}
a{color:inherit;}

.fa{ direction:rtl; font-family:'Vazirmatn','Cormorant Garamond',serif; unicode-bidi:isolate; }

/* ---------- app shell (phone-frame on wide screens) ---------- */
#app{
  max-width:var(--app-max);
  margin:0 auto;
  position:relative;
  background:var(--cream);
  min-height:100vh;
  box-shadow:0 0 60px rgba(0,0,0,.5);
  overflow:hidden;
}
@media (min-width:560px){
  body{padding:24px 0;}
  #app{min-height:calc(100vh - 48px);border-radius:18px;}
}

/* ---------- divider ornament ---------- */
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;width:100%;}
.ornament .line{height:1px;width:36px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.ornament svg{flex:none;}

/* ================= GATE (full-bleed envelope intro) ================= */
#gate{
  position:fixed;
  inset:0;
  z-index:50;
  max-width:var(--app-max);
  margin:0 auto;
  overflow:hidden;
  perspective:2200px;
  background:
    radial-gradient(150% 90% at 50% 28%, #3d2721 0%, #241713 55%, #170f0d 100%);
  transition:opacity .8s ease, visibility .8s ease;
}
#gate::after{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(231,211,163,.045) 0 2px, transparent 2px 15px);
  mix-blend-mode:overlay;
  opacity:.6;
  pointer-events:none;
}
#gate.hide{opacity:0;visibility:hidden;pointer-events:none;}

.gate-corner{
  position:absolute;
  width:15vh;height:15vh;
  max-width:120px;max-height:120px;
  opacity:.4;
  pointer-events:none;
  z-index:1;
}
.gate-corner.tl{top:calc(18px + var(--safe-t));left:18px;}
.gate-corner.br{bottom:calc(18px + var(--safe-b));right:18px;transform:rotate(180deg);}

.env-flap{
  position:absolute;
  top:0;left:0;
  width:100%;height:50%;
  transform-origin:50% 0%;
  transform:rotateX(0deg);
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(200deg, #4a352f, #2f201c 70%);
  border-bottom:1px solid rgba(231,211,163,.3);
  transition:transform 1.15s cubic-bezier(.65,0,.35,1);
  z-index:3;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.env-flap::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(115deg, rgba(231,211,163,.06) 0 2px, transparent 2px 16px);
  mix-blend-mode:overlay;
}
.env-flap::after{
  content:"";
  position:absolute;
  left:50%;top:10%;
  width:1px;height:36%;
  background:linear-gradient(180deg, transparent, rgba(231,211,163,.35), transparent);
  transform:translateX(-50%);
}
#gate.open .env-flap{transform:rotateX(-178deg);}

.env-burst{
  position:absolute;
  left:50%;top:50%;
  width:14vmax;height:14vmax;
  transform:translate(-50%,-50%) scale(0);
  border-radius:50%;
  background:radial-gradient(circle, rgba(238,214,163,.95) 0%, rgba(238,214,163,.5) 30%, rgba(238,214,163,0) 70%);
  z-index:2;
  pointer-events:none;
  opacity:0;
}
#gate.crack .env-burst{
  animation:burst .9s ease-out forwards;
}
@keyframes burst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0);}
  25%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(11);}
}

.seal-btn{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:clamp(84px,24vw,112px);
  height:clamp(84px,24vw,112px);
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  z-index:5;
  border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.seal-ring{
  position:absolute;inset:-10px;
  border-radius:50%;
  border:1px solid rgba(238,214,163,.55);
  animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.86);opacity:.9;}
  70%{transform:scale(1.28);opacity:0;}
  100%{opacity:0;}
}
.seal-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35);
  background:#b3495a;
}
.seal-img img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05);
}
.seal-half{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  border-radius:50%;
  overflow:hidden;
  transition:transform .6s cubic-bezier(.6,0,.4,1), opacity .6s ease;
}
.seal-half.left{clip-path:inset(0 50% 0 0);}
.seal-half.right{clip-path:inset(0 0 0 50%);}
#gate.crack .seal-half.left{transform:translate(-14px,-6px) rotate(-18deg);opacity:0;}
#gate.crack .seal-half.right{transform:translate(14px,6px) rotate(18deg);opacity:0;}

#gate.crack .seal-btn{pointer-events:none;}

/* ================= INVITE (main content) ================= */
#invite{
  position:relative;
  opacity:0;
  transform:scale(.97);
  transition:opacity 1s ease .1s, transform 1s ease .1s;
}
#invite.show{opacity:1;transform:scale(1);}

section{
  position:relative;
  padding:64px 30px;
  text-align:center;
}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s ease;}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ---- hero ---- */
#hero{
  padding:0;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  background-image:linear-gradient(180deg, rgba(28,19,16,.15) 0%, rgba(28,19,16,.35) 55%, rgba(20,13,11,.88) 100%), url('../assets/images/wed2.jpeg');
  background-size:cover;
  background-position:center 30%;
}
.hero-inner{
  width:100%;
  padding:0 28px calc(46px + var(--safe-b));
  color:var(--cream);
}
.hero-kicker{
  letter-spacing:.28em;
  font-size:12px;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:14px;
}
.hero-names{
  font-family:'Great Vibes',cursive;
  font-size:clamp(46px,13vw,64px);
  line-height:1.05;
  margin:0 0 10px;
}
.hero-fa{font-size:16px;color:var(--blush);opacity:.9;margin-bottom:18px;}
.hero-date{
  font-family:'Playfair Display',serif;
  font-size:15px;
  letter-spacing:.18em;
  color:var(--gold-light);
}
.scroll-cue{
  position:absolute;
  left:50%;bottom:22px;
  transform:translateX(-50%);
  width:22px;height:34px;
  border:1px solid rgba(251,244,234,.6);
  border-radius:12px;
}
.scroll-cue::before{
  content:"";
  position:absolute;
  left:50%;top:6px;
  width:3px;height:6px;
  background:var(--cream);
  border-radius:2px;
  transform:translateX(-50%);
  animation:cue 1.6s ease-in-out infinite;
}
@keyframes cue{
  0%{opacity:1;top:6px;}
  70%{opacity:0;top:16px;}
  100%{opacity:0;top:6px;}
}

/* ---- eyebrow / heading shared ---- */
.eyebrow{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:10px;
}
.eyebrow-fa{
  font-size:15px;
  color:var(--rose-deep);
  margin-bottom:18px;
}
h2.section-title{
  font-family:'Playfair Display',serif;
  font-weight:600;
  font-size:clamp(24px,6vw,30px);
  margin:0 0 6px;
  color:var(--ink);
}

/* ---- intro / portrait ---- */
#intro{background:var(--cream);}
.portrait-frame{
  width:180px;height:220px;
  margin:22px auto 26px;
  border-radius:90px 90px 8px 8px;
  overflow:hidden;
  border:1px solid var(--gold-light);
  box-shadow:0 16px 32px -12px rgba(60,43,40,.35);
  position:relative;
}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.portrait-frame::after{
  content:"";
  position:absolute;inset:6px;
  border:1px solid rgba(184,147,94,.55);
  border-radius:84px 84px 6px 6px;
  pointer-events:none;
}
.intro-copy{
  max-width:340px;
  margin:0 auto 26px;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.6;
}
.intro-copy .fa{display:block;margin-top:10px;font-size:16px;line-height:1.9;}

.couple-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:8px;
}
.couple-name{text-align:center;}
.couple-name .name{
  font-family:'Playfair Display',serif;
  font-size:19px;
  font-weight:600;
  color:var(--ink);
}
.couple-name .role{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rose-deep);
  margin-top:4px;
}
.couple-name .role .fa{font-size:13px;letter-spacing:0;text-transform:none;}
.amp{
  font-family:'Great Vibes',cursive;
  font-size:30px;
  color:var(--gold);
}

/* ---- date / countdown ---- */
#date-section{
  background:linear-gradient(180deg, var(--blush) 0%, var(--blush-deep) 100%);
}
.big-date{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,7vw,32px);
  color:var(--ink);
  margin:6px 0 2px;
}
.persian-date{
  font-size:20px;
  color:var(--rose-deep);
  margin-bottom:28px;
}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  max-width:360px;
  margin:0 auto;
}
.cd-box{
  background:var(--cream);
  border:1px solid var(--gold-light);
  border-radius:10px;
  padding:14px 4px 12px;
  box-shadow:0 10px 20px -12px rgba(60,43,40,.3);
}
.cd-num{
  font-family:'Playfair Display',serif;
  font-size:clamp(20px,5.4vw,26px);
  color:var(--rose-deep);
  font-variant-numeric:tabular-nums;
}
.cd-label{
  font-size:11px;
  margin-top:4px;
  color:var(--gold-deep);
}
.cd-label .fa{display:block;font-size:12px;color:var(--ink-soft);}

/* ---- gallery ---- */
#gallery{background:var(--cream);}
.gallery-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:auto auto;
  gap:10px;
  margin-top:24px;
}
.gallery-grid img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 12px 24px -14px rgba(60,43,40,.4);
}
.g-item.g1{grid-row:1/3;}
.g-item.g1 img{height:100%;min-height:280px;}
.g-item.g2 img{height:135px;}
.g-item.g3 img{height:135px;}

/* ---- location ---- */
#location{
  background:linear-gradient(180deg, var(--blush-deep) 0%, var(--blush) 100%);
}
.pin{
  margin:4px auto 18px;
  width:34px;height:34px;
  color:var(--rose-deep);
}
.addr-card{
  background:var(--cream);
  border:1px solid var(--gold-light);
  border-radius:12px;
  padding:22px 20px;
  max-width:360px;
  margin:0 auto 22px;
  box-shadow:0 14px 28px -16px rgba(60,43,40,.35);
}
.addr-card .fa{
  font-size:18px;
  line-height:2;
  color:var(--ink);
}
.btn-gold{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  color:#3a2a17;
  text-decoration:none;
  font-family:'Vazirmatn',serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.03em;
  padding:13px 26px;
  border-radius:30px;
  box-shadow:0 10px 20px -8px rgba(138,106,55,.55);
}

/* ---- closing ---- */
#closing{
  background:linear-gradient(180deg, #241713 0%, #1a1210 100%);
  color:var(--cream);
  padding-bottom:120px;
}
.closing-script{
  font-family:'Great Vibes',cursive;
  font-size:34px;
  color:var(--gold-light);
  margin:14px 0 8px;
}
.closing-fa{font-size:16px;color:var(--blush);opacity:.9;margin-bottom:22px;}
.monogram-final{
  font-family:'Playfair Display',serif;
  font-size:14px;
  letter-spacing:.3em;
  color:var(--gold);
  margin-top:18px;
}
#closing .ornament .line{background:linear-gradient(90deg,transparent,var(--gold-light),transparent);}

/* ---- music toggle ---- */
#music-toggle{
  position:fixed;
  right:calc(18px + (100vw - var(--app-max)) / 2);
  bottom:calc(18px + var(--safe-b));
  width:48px;height:48px;
  border-radius:50%;
  border:1px solid rgba(231,211,163,.6);
  background:rgba(28,19,16,.72);
  backdrop-filter:blur(6px);
  color:var(--gold-light);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
  cursor:pointer;
}
@media (max-width:559px){
  #music-toggle{right:18px;}
}
#music-toggle.show{opacity:1;transform:translateY(0);}
#music-toggle svg{width:20px;height:20px;}
.eq{display:flex;align-items:flex-end;gap:2px;height:16px;}
.eq span{width:3px;background:var(--gold-light);border-radius:1px;animation:eqbar 1s ease-in-out infinite;}
.eq span:nth-child(1){height:40%;animation-delay:-.6s;}
.eq span:nth-child(2){height:100%;animation-delay:-.2s;}
.eq span:nth-child(3){height:65%;animation-delay:-.9s;}
#music-toggle.paused .eq span{animation-play-state:paused;height:30% !important;}
@keyframes eqbar{
  0%,100%{height:30%;}
  50%{height:100%;}
}

@media (min-width:560px){
  #music-toggle{right:calc((100vw - var(--app-max))/2 + 18px);}
}