/* ============ Rustam & Madinaxon — To'y taklifnomasi ============ */

:root{
  --ivory:#fbf6ec;
  --cream:#f6efe0;
  --sky:#e4edf9;
  --blush:#f4dcd8;
  --gold:#b98c4e;
  --gold-light:#e2c084;
  --gold-dark:#8a6a34;
  --ink:#3a3128;
  --ink-soft:#6d6152;
  --shadow-gold: 0 10px 30px rgba(138,106,52,.18);
  --maxw: 560px;
  --col: 480px; /* phone-width column used on tablets and desktops */
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* html/body deliberately have no background color and there is no fixed element at the
   top edge: iOS 26 Safari tints its address-bar strip from those, which drew a visible band */
body{
  margin:0;
  font-family:'Cormorant Garamond', serif;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* seamless (crossfaded) floral tile that scrolls with the page */
.page{
  position:relative;
  background: #f3f3f3 url('../img/bg_tile.webp') center top / 100% auto repeat-y;
}
img{max-width:100%;display:block;}
h1,h2{font-family:'Playfair Display',serif; margin:0; font-weight:600;}
p{margin:0 0 1em;}
.script{font-family:'Great Vibes', cursive; font-weight:400; letter-spacing:.5px;}
.script.small{font-size:1.8rem;}
.script.big{font-size:2.6rem; color:var(--gold-dark);}

.container{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 0 28px;
  text-align:center;
}
.section{ padding: 74px 0; position:relative; }
#intro .container, #dresscode .container{
  width: calc(100% - 32px);
  background: rgba(251,246,236,.86);
  border: 1px solid rgba(185,140,78,.22);
  border-radius: 24px;
  padding: 34px 24px;
  box-shadow: 0 12px 40px rgba(138,106,52,.10);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#intro .lead{ color: var(--ink); }
.dress-list{ margin-top:6px; }
.dress-item{ margin:0 0 18px; font-size:1.18rem; line-height:1.55; color:var(--ink); }
.dress-item:last-child{ margin-bottom:0; }
.dress-label{
  display:block; margin-bottom:2px; color:var(--gold-dark); font-weight:600;
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
}
#intro .signoff{ color: var(--ink); }
#intro::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:300px;
  background: linear-gradient(180deg,
    rgb(251,246,236) 0%, rgba(251,246,236,.9) 16%, rgba(251,246,236,.68) 38%,
    rgba(251,246,236,.36) 62%, rgba(251,246,236,.12) 84%, rgba(251,246,236,0) 100%);
  pointer-events:none; z-index:0;
}
#intro .container{ position:relative; z-index:1; }
.kicker{
  letter-spacing:.22em; font-size:.72rem; text-transform:uppercase;
  color:var(--gold-dark); font-family:'Cormorant Garamond',serif; font-weight:600;
  margin-bottom: 10px;
}
.title{ font-size: 2.1rem; color:var(--ink); margin-bottom: 18px; }
.lead{ font-size:1.25rem; line-height:1.65; color:var(--ink-soft); }
.lead.small{ font-size:1.05rem; }
.signoff{ margin-top:22px; font-size:1.1rem; color:var(--ink-soft); }
.eyebrow{
  letter-spacing:.3em; font-size:.85rem; color:var(--gold-dark);
  text-transform:uppercase; margin-bottom:14px; font-weight:700;
  text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 2px 12px rgba(255,255,255,.75);
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.9,.3,1); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- ambient drifting clouds (page-wide) ---------- */
/* starts 6px down so Safari doesn't treat it as a top-edge element to tint its bar from */
.ambient-clouds{ position:fixed; top:6px; left:0; right:0; bottom:0; pointer-events:none; z-index:1; overflow:hidden; }
.cloud{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  filter: blur(6px); opacity:.55;
}
.c1{ width:260px; height:100px; top:6%; left:-10%; animation: drift 46s linear infinite; }
.c2{ width:180px; height:70px; top:22%; right:-15%; animation: driftRev 60s linear infinite; opacity:.4;}
.c3{ width:320px; height:120px; top:48%; left:-20%; animation: drift 70s linear infinite; opacity:.35;}
.c4{ width:200px; height:80px; top:68%; right:-10%; animation: driftRev 54s linear infinite; opacity:.45;}
.c5{ width:150px; height:60px; top:85%; left:-12%; animation: drift 38s linear infinite; opacity:.4;}
@keyframes drift{ from{ transform: translateX(0);} to{ transform: translateX(140vw);} }
@keyframes driftRev{ from{ transform: translateX(0);} to{ transform: translateX(-140vw);} }

/* ============ ENVELOPE (four flaps that fly apart on open) ============ */
.envelope{
  --fly-ease: cubic-bezier(.55,.055,.675,.19);
  --env-ink:#8b5a2b;
  position:fixed; inset:0; z-index:100;
  background:#e8ded5; /* paper tone: fills beside the envelope on wide screens */
  overflow:hidden;
}
/* stage keeps the photo's exact proportions: full height, centered, sides cropped
   on phones — so fold lines, seal and text stay aligned with the image everywhere */
.envelope__stage{
  position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  aspect-ratio: 1520 / 2688;
  container-type: size;
}
.envelope__flap{
  position:absolute; inset:0;
  background:url('../img/envelope_bg.webp') center / 100% 100% no-repeat;
  will-change: transform;
}
/* polygons trace the folds measured on envelope_bg.webp */
.envelope__flap--bottom{ z-index:1; clip-path: polygon(0 63.55%, 50% 34.2%, 100% 64.46%, 100% 100%, 0 100%); }
.envelope__flap--left  { z-index:2; clip-path: polygon(0 0, 50% 34.2%, 0 63.55%); }
.envelope__flap--right { z-index:2; clip-path: polygon(100% 0, 50% 34.2%, 100% 64.46%); }
.envelope__flap--top   { z-index:3; clip-path: polygon(0 0, 100% 0, 100% 30.28%, 50% 59.4%, 0 29.87%); }
.envelope__flap--top{ transition: transform 2.4s var(--fly-ease); }
.envelope__flap--left, .envelope__flap--right, .envelope__flap--bottom{ transition: transform 2.1s var(--fly-ease); }

.envelope__title{
  position:absolute; top:23.5%; left:50%; transform:translate(-50%,-50%); z-index:6;
  margin:0; white-space:nowrap;
  letter-spacing:.05em; font-size:1.4rem; font-size:2.75cqh; color:var(--env-ink);
  text-transform:uppercase; font-family:'Cormorant Garamond',serif; font-weight:700;
  transition: transform 2.4s var(--fly-ease);
}
.envelope__hint{
  position:absolute; top:71%; left:50%; transform:translate(-50%,-50%); z-index:6;
  margin:0; width:12em; text-align:center; text-wrap:balance;
  color:var(--env-ink); font-size:1.2rem; font-size:2.4cqh; line-height:1.25;
  font-family:'Cormorant Garamond',serif; font-weight:500;
  animation: pulseHint 2.4s ease-in-out infinite;
  transition: opacity .3s ease;
}
@keyframes pulseHint{ 0%,100%{opacity:.7;} 50%{opacity:1;} }
.envelope__names{
  position:absolute; top:84%; left:50%; transform:translate(-50%,-50%); z-index:6;
  margin:0; white-space:nowrap; font-size:2.25rem; font-size:4.4cqh; color:var(--env-ink);
  transition: transform 2.1s var(--fly-ease);
}

/* the seal is a transparent image of real ivory wax covering the flap tip; it gently pulses to invite a tap */
.wax-seal{
  position:absolute; top:51%; left:50%; transform:translate(-50%,-50%);
  width:41%; aspect-ratio:1/1; z-index:7;
  border:none; cursor:pointer; padding:0; background:none;
  transition: transform .35s ease, opacity .5s ease;
}
.wax-seal img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 10px 14px rgba(90,60,25,.28));
  animation: sealBreathe 2.8s ease-in-out infinite;
}
.wax-seal:hover{ transform: translate(-50%,-50%) scale(1.04); }
.wax-seal:active{ transform: translate(-50%,-50%) scale(.95); }
@keyframes sealBreathe{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 10px 14px rgba(90,60,25,.28)); }
  50%{ transform: scale(1.035); filter: drop-shadow(0 12px 20px rgba(185,140,78,.45)); }
}

/* click: seal and hint fade, top flap flies up, the other three fall away */
.envelope.opening{ background:transparent; pointer-events:none; }
.envelope.opening .wax-seal{ opacity:0; animation:none; }
.envelope.opening .envelope__hint{ opacity:0; animation:none; }
.envelope.opening .envelope__flap--top{ transform: translateY(-150vh); }
.envelope.opening .envelope__title{ transform: translate(-50%,-50%) translateY(-150vh); }
.envelope.opening .envelope__flap--left,
.envelope.opening .envelope__flap--right,
.envelope.opening .envelope__flap--bottom{ transform: translateY(120vh); }
.envelope.opening .envelope__names{ transform: translate(-50%,-50%) translateY(120vh); }

body.locked{ overflow:hidden; height:100%; }

/* ============ LANGUAGE SWITCHER (top of first screen only, scrolls away) ============ */
.lang-switch{
  position:absolute; top:18px; right:18px; z-index:110;
  display:flex; gap:4px; padding:4px;
  background: rgba(251,246,236,.96);
  border:1px solid rgba(185,140,78,.35); border-radius:999px;
  box-shadow: var(--shadow-gold);
}
.lang-btn{
  border:none; background:transparent; cursor:pointer;
  padding:6px 12px; border-radius:999px; font-family:'Cormorant Garamond',serif;
  font-weight:600; font-size:.85rem; letter-spacing:.05em; color:var(--ink-soft);
  transition: background .25s ease, color .25s ease;
}
.lang-btn:hover{ color:var(--gold-dark); }
.lang-btn.is-active{ background: linear-gradient(120deg, var(--gold-light), var(--gold)); color:#3a2c12; }

/* ============ MUSIC TOGGLE ============ */
.music-toggle{
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--gold-light);
  background: rgba(251,246,236,.97);
  color: var(--gold-dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-gold);
  transition: transform .3s ease;
}
.music-toggle:hover{ transform: scale(1.08); }
.music-toggle .note-icon{ width:22px; height:22px; }
.music-toggle.is-playing .note-icon{ animation: spin 3.5s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.hero__bg-wrap{ position:absolute; inset:0; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation: kenBurns 22s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 96%);
}
@keyframes kenBurns{ from{ transform: scale(1);} to{ transform: scale(1.08) translateY(-1%);} }
.hero__scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(251,246,236,0) 38%, rgba(251,246,236,.55) 78%, rgba(251,246,236,.97) 100%);
}
.hero__inner{ position:relative; z-index:2; text-align:center; padding: 0 20px 64px; width:100%; }
.hero__names{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size: 3.6rem; color:var(--gold-dark); line-height:1;
  text-shadow: 0 2px 18px rgba(255,255,255,.6);
}
.hero__names .amp-big{ font-family:'Great Vibes',cursive; font-size:1.6rem; color:var(--gold); margin:2px 0; }
.gold-rule{
  width:0; height:1px; background: var(--gold); margin: 18px auto; opacity:.8;
  transition: width 1.4s ease 1.2s;
}
.gold-rule[data-draw].is-drawn{ width:120px; }
.hero__date{
  font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:600; letter-spacing:.14em;
  color:var(--gold-dark); text-transform:uppercase;
  text-shadow: 0 2px 14px rgba(255,255,255,.7);
}
.hero__date span{ color:var(--gold-dark); font-style:italic; }

.scroll-cue{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2; }
.scroll-cue span{
  display:block; width:1px; height:34px; background: linear-gradient(var(--gold), transparent);
  animation: cueMove 1.8s ease-in-out infinite;
}
@keyframes cueMove{ 0%{ opacity:0; transform: translateY(-8px);} 50%{opacity:1;} 100%{ opacity:0; transform: translateY(10px);} }

/* ============ CALENDAR ============ */
.cal-grid{
  display:grid; grid-template-columns: repeat(7,1fr); gap:8px;
  max-width:340px; margin: 20px auto 0;
}
.cal-day{
  font-size:.95rem; color: var(--ink-soft); padding:8px 0; position:relative;
}
.cal-day.head{ font-size:.72rem; letter-spacing:.08em; color:var(--gold-dark); text-transform:uppercase; font-weight:600; }
.cal-day.empty{ visibility:hidden; }
.cal-day.highlight{
  color:#fff; font-weight:700; border-radius:50%;
}
.cal-day.highlight::before{
  content:''; position:absolute; inset:2px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 70%);
  box-shadow: 0 0 0 0 rgba(185,140,78,.55);
  animation: heartPulse 2.4s ease-in-out infinite; z-index:-1;
}
.cal-day.highlight span{ position:relative; }
@keyframes heartPulse{
  0%{ box-shadow: 0 0 0 0 rgba(185,140,78,.5); }
  70%{ box-shadow: 0 0 0 10px rgba(185,140,78,0); }
  100%{ box-shadow: 0 0 0 0 rgba(185,140,78,0); }
}

/* ============ VENUE ============ */
.venue-time{ font-family:'Playfair Display',serif; letter-spacing:.08em; color:var(--gold-dark); margin-bottom:26px; }
.btn-gold{
  display:inline-block; padding: 14px 34px; border-radius:999px;
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
  color:#3a2c12; text-decoration:none; font-family:'Cormorant Garamond',serif;
  font-weight:600; letter-spacing:.05em; font-size:1.05rem;
  box-shadow: var(--shadow-gold); border:none; cursor:pointer;
  position:relative; overflow:hidden; transition: transform .3s ease;
}
.btn-gold::after{
  content:''; position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn-gold:hover::after{ transform: translateX(120%); }
.btn-gold:hover{ transform: translateY(-2px); }
.btn-block{ display:block; width:100%; text-align:center; }

/* ============ PROGRAM / TIMELINE (zigzag, connected by curved arrows) ============ */
.timeline{ position:relative; max-width:400px; margin:36px auto 0; }
.tl-row{
  position:relative; display:flex; flex-direction:column; width:66%;
}
.tl-row.side-left{ margin-right:auto; align-items:flex-start; text-align:left; }
.tl-row.side-right{ margin-left:auto; align-items:flex-end; text-align:right; }
.tl-media{
  width:150px; height:150px; border-radius:50%; overflow:hidden;
  border:5px solid var(--ivory); box-shadow: var(--shadow-gold); position:relative; z-index:2;
  background:var(--cream);
}
.tl-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tl-info{ margin-top:10px; }
.tl-time{
  display:block; margin:0; font-family:'Great Vibes',cursive; font-size:2.5rem; color:var(--gold-dark); line-height:1.1;
}
.tl-label{ font-size:1.2rem; color:var(--ink); margin:0; line-height:1.3; max-width:170px; }

/* curved arrow sits in the empty space beside a row, pointing down to the next one */
.tl-arrow{ width:28%; height:120px; margin-top:-100px; margin-bottom:-6px; color:var(--gold); }
.tl-arrow.dir-lr{ margin-left:auto; margin-right:16%; }
.tl-arrow.dir-rl{ margin-right:auto; margin-left:16%; }
.tl-arrow.dir-rl svg{ transform:scaleX(-1); }
.tl-arrow svg{ width:100%; height:100%; display:block; overflow:visible; }

/* ============ COUNTDOWN ============ */
.cd-grid{ display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.cd-cell{
  background: rgba(255,255,255,.55); border:1px solid rgba(185,140,78,.35);
  border-radius:16px; padding:16px 14px; min-width:74px;
  box-shadow: var(--shadow-gold);
}
.cd-num{
  display:block; font-family:'Playfair Display',serif; font-size:1.9rem; color:var(--gold-dark);
  font-variant-numeric: tabular-nums; transition: transform .25s ease;
}
.cd-num.tick{ transform: scale(1.18); }
.cd-label{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* ============ RSVP ============ */
.rsvp-form{ max-width:380px; margin: 24px auto 0; text-align:left; }
.field{ display:block; margin-bottom:18px; }
.field > span, .field legend{
  display:block; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:8px; font-weight:600; padding:0;
}
.field input[type="text"], .field input[type="number"]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(185,140,78,.4);
  background: rgba(255,255,255,.7); font-family:'Cormorant Garamond',serif; font-size:1.1rem;
  color:var(--ink);
}
.field input:focus{ outline:2px solid var(--gold-light); }
.radios{ border:none; margin:0 0 18px; }
.radio{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:1.05rem; cursor:pointer; }
.radio input{ accent-color: var(--gold); width:18px; height:18px; }

.rsvp-thanks{
  display:none; text-align:center; margin-top:22px; color: var(--gold-dark);
}
.rsvp-thanks.show{ display:block; animation: thanksIn .6s ease; }
.rsvp-thanks__icon{ font-size:2.2rem; margin-bottom:8px; animation: heartBeat 1.4s ease-in-out infinite; }
@keyframes heartBeat{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.2);} }
@keyframes thanksIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }
.rsvp-form.hide{ display:none; }
.rsvp-edit-btn{
  margin-top:16px; background:none; border:none; cursor:pointer;
  font-family:'Cormorant Garamond',serif; font-size:.95rem; color:var(--ink-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.rsvp-edit-btn:hover{ color:var(--gold-dark); }

/* ============ FOOTER ============ */
.footer{ text-align:center; padding: 60px 24px 90px; }
.footer__sub{ color:var(--ink-soft); margin-bottom:6px; }
.footer__fam{ color:var(--gold-dark); font-size:.95rem; letter-spacing:.04em; }
.footer__guests-link{
  display:inline-block; margin-top:26px; font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  border-bottom:1px solid rgba(185,140,78,.4); padding-bottom:2px;
  transition: color .25s ease, border-color .25s ease;
}
.footer__guests-link:hover{ color:var(--gold-dark); border-color:var(--gold-dark); }

/* petals */
.petal{
  position:fixed; top:-20px; z-index:2; pointer-events:none;
  width:10px; height:10px; border-radius: 50% 0;
  background: var(--blush); opacity:.85;
  animation-name: fall; animation-timing-function: linear; animation-iteration-count:1;
}
@keyframes fall{
  to{ transform: translateY(110vh) rotate(340deg); opacity:0; }
}

/* ============ TABLETS & DESKTOPS: the invitation as a centered phone-width card ============ */
@media (min-width: 700px){
  body{ background:#e8ded5; } /* same paper tone as the envelope */
  .page{
    max-width: var(--col); margin: 0 auto; overflow:hidden;
    box-shadow: 0 0 0 1px rgba(185,140,78,.12), 0 20px 70px rgba(90,70,40,.18);
  }
  .lang-switch{ right: calc(50% - var(--col) / 2 + 16px); }
  .music-toggle{ right: calc(50% - var(--col) / 2 + 18px); }
}