/* ============================================================
   Rauf & Aina — nişan dəvətnaməsi
   Tam ekran, adaptiv (mobil sütun deyil). ivory + sage,
   gümüşü pərdələr və ağ güllər (La Maison Dorée), Bakı hero.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Pinyon+Script&display=swap');

:root{
  --content: 700px;
  --ivory:   #f7f3ea;
  --ivory-2: #efe8d7;
  --cream:   #e9e0cc;
  --sage:    #6d7a92;
  --sage-dark:#33425c;
  --sage-deep:#212f49;
  --ink:     #2e3a4e;
  --gold:    #b49a68;
  --line:    #d8cfb9;
  --serif: 'EB Garamond','Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script:'Pinyon Script','Cormorant Garamond', cursive;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--ivory); }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--ivory);
  min-height:100vh;
  /* fill the notch/status-bar area so there is no white strip on phones */
  min-height:100dvh;
}
/* horizontal decoration overflow is clipped by .app{overflow-x:clip} and
   .sec{overflow:hidden} — never on html/body, which would break vertical scroll */
img{ max-width:100%; display:block; }

/* full-width container; only horizontal overflow is clipped (clip = scroll-safe) */
.app{
  position:relative;
  width:100%;
  min-height:100vh;
  background:var(--ivory);
  overflow-x:clip;
}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-weight:500; text-transform:uppercase; letter-spacing:.42em;
  font-size:.72rem; color:var(--sage); margin:0; padding-left:.42em;
}
.script{ font-family:var(--script); font-weight:400; line-height:.9; color:var(--sage-dark); }
.title{ font-family:var(--serif); font-weight:500; letter-spacing:.02em; color:var(--sage-deep); margin:0; }
.lede{ font-size:1.08rem; line-height:1.75; color:#3c4759; }
.muted{ color:var(--sage); }
.center{ text-align:center; }

/* ornamental divider: pearls + shell */
.orn{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:1.4rem auto; opacity:.9; }
.orn::before,.orn::after{ content:""; height:1px; width:46px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.orn img{ width:16px; height:auto; opacity:.9; }
.orn .sh{ width:30px; }

/* ---------- section base ---------- */
.sec{ position:relative; padding:clamp(3.8rem,6vw,5.6rem) 1.6rem; overflow:hidden; }
.sec + .sec{ border-top:1px solid rgba(216,207,185,.5); }
.sec-head{ text-align:center; margin:0 auto 2.4rem; max-width:var(--content); position:relative; z-index:2; }
.sec-head .eyebrow{ padding:0; }
.sec-head .script{ font-size:clamp(2.7rem,6vw,3.4rem); margin:.1rem 0 .2rem; }

/* decorative pngs */
.dec{ position:absolute; pointer-events:none; user-select:none; z-index:1; }

/* reveal on scroll */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============================================================
   INTRO COVER  (does NOT lock page scroll — safe if JS fails)
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.1rem; text-align:center; cursor:pointer;
  background:radial-gradient(120% 90% at 50% 30%, #f8f4ec 0%, #eee5d3 55%, #e4d9c1 100%);
  transition:opacity 1.1s ease, visibility 1.1s;
}
.intro.is-hidden{ opacity:0; visibility:hidden; }
.intro .seal{ width:118px; margin-bottom:.4rem; filter:drop-shadow(0 10px 18px rgba(80,80,90,.25)); animation:floaty 5s ease-in-out infinite; }
.intro .i-names{ font-family:var(--script); font-size:clamp(3rem,9vw,4rem); color:var(--sage-dark); line-height:.95; }
.intro .i-sub{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.4em; font-size:.72rem; color:var(--sage); }
.intro .i-tap{ margin-top:1rem; font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); animation:pulse 2.4s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes pulse{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

/* ============================================================
   HERO — full-bleed
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 1.6rem; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0; background-color:#cdd7db;
  background-image:
    linear-gradient(180deg, rgba(247,243,234,0) 40%, rgba(247,243,234,.5) 78%, var(--ivory) 100%),
    linear-gradient(180deg,#c3d2dc 0%,#d9e0d8 55%,#efe7d5 100%);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat;
}
.hero-veil{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 70% at 50% 90%, rgba(247,243,234,.7), rgba(247,243,234,0) 60%); }

/* silver crystal curtains (La Maison Dorée) frame the full-width hero and gently sway */
.curtain{ position:absolute; top:-10vh; z-index:2; width:clamp(180px,38vw,460px); height:auto; opacity:.97;
  filter:drop-shadow(0 12px 24px rgba(90,90,100,.14)); }
.curtain-l{ left:-10vw; transform-origin:top left; animation:swayL 7.5s ease-in-out infinite; }
.curtain-r{ right:-10vw; transform-origin:top right; animation:swayR 8.6s ease-in-out infinite; }
.curtain-c{ left:50%; top:-10vh; width:min(94vw,820px); height:auto; opacity:.9; z-index:1;
  transform:translateX(-50%); transform-origin:top center; animation:swayC 10s ease-in-out infinite; }
@keyframes swayL{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(1.3deg) } }
@keyframes swayR{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(-1.3deg) } }
@keyframes swayC{ 0%,100%{ transform:translateX(-50%) rotate(-.6deg) } 50%{ transform:translateX(-50%) rotate(.6deg) } }

.hero-inner{ position:relative; z-index:3; max-width:720px; }
.hero .eyebrow{ color:var(--sage-dark); }
.hero .kicker{ font-family:var(--serif); font-style:italic; font-size:1.05rem; letter-spacing:.06em; color:var(--sage); margin:.5rem 0 1rem; }
.hero .names{ font-family:var(--script); font-weight:400; color:var(--sage-deep); line-height:.82;
  font-size:clamp(4.2rem,15vw,7.2rem); margin:.2rem 0; text-shadow:0 2px 20px rgba(247,243,234,.6); }
.hero .names .amp{ display:block; font-size:.42em; color:var(--gold); margin:.05em 0; }
.hero .when{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.34em; font-size:.9rem; color:var(--sage-dark); margin-top:1rem; }
.hero .when b{ font-weight:600; }
.scroll-hint{ position:absolute; bottom:clamp(1.4rem,4vh,2.6rem); left:50%; transform:translateX(-50%);
  z-index:4; background:none; border:0; cursor:pointer; color:var(--sage);
  font-family:var(--serif); letter-spacing:.24em; text-transform:uppercase; font-size:.66rem;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.scroll-hint svg{ width:20px; height:20px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* ============================================================
   COUNTDOWN
   ============================================================ */
/* padding-top is coupled to the garland's rendered height (img ≈ 0.72×width) so the
   title/numbers always clear the drooping lights, at any screen width */
/* garland spans full width and bleeds off both sides; a fixed-height band (object-fit)
   keeps it from becoming enormous; padding-top clears the band via the shared --gar-h */
.countdown{ background:linear-gradient(180deg,var(--ivory),var(--ivory-2)); text-align:center;
  --gar-h:clamp(200px,24vw,300px); padding-top:calc(var(--gar-h) + 2.6rem); }
.hanging{ position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:112vw; max-width:none; height:var(--gar-h); object-fit:cover; object-position:center top; z-index:1; opacity:.92; }
.cd-grid{ position:relative; z-index:2; display:flex; justify-content:center; gap:1.2rem; margin-top:.6rem; }
.cd-cell{ min-width:72px; }
.cd-num{ font-family:var(--serif); font-weight:500; font-size:clamp(3rem,7vw,3.6rem); line-height:1; color:var(--sage-deep); }
.cd-lab{ text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:var(--sage); margin-top:.5rem; }
.cd-sep{ font-family:var(--serif); font-size:2.4rem; color:var(--line); align-self:flex-start; margin-top:.2rem; }
/* white urns hug the centered content on desktop, screen edges on mobile */
/* left urn sits lower — its base sinks below the section border (behind the next block) */
.countdown .vase-l{ left:max(-46px, calc(50% - 360px)); bottom:-96px; width:clamp(100px,13vw,140px); z-index:1; opacity:.96; }
.countdown .vase-r{ right:max(-46px, calc(50% - 360px)); bottom:-6px; width:clamp(100px,13vw,140px); z-index:1; opacity:.96; }

/* ============================================================
   INVITATION
   ============================================================ */
.invite{ text-align:center; }
.invite-photo{ width:100%; margin:1.1rem 0 0; aspect-ratio:5/4;
  border-radius:0; position:relative; z-index:2;
  background-color:#cdd7db; background-image:url('../assets/baku-hero.png');
  background-size:cover; background-position:center; background-repeat:no-repeat; }
/* roses framing the top of the Bakı photo */
.invite-figure{ position:relative; margin-top:2.6rem; z-index:2; }
.invite-figure .invite-photo{ margin:0; }
.fig-rose{ position:absolute; top:-44px; z-index:3; width:clamp(112px,17vw,152px); pointer-events:none; }
.fig-rose.fig-l{ left:-24px; }
.fig-rose.fig-r{ right:-24px; transform:scaleX(-1); }
.invite-card{
  position:relative; z-index:2; max-width:780px; margin:0 auto;
  background:#ffffff; border:1px solid var(--line); border-radius:2px;
  padding:clamp(1.7rem,3.4vw,2.3rem) 0 0; overflow:hidden;
  box-shadow:0 20px 50px -34px rgba(70,65,45,.55);
}
/* keep the text readable while the photo goes full-bleed to the card edges */
.invite-card .date-line,
.invite-card .lede{ padding-left:clamp(1.1rem,3vw,2rem); padding-right:clamp(1.1rem,3vw,2rem); }
.invite-card .roses-tl{ position:absolute; top:-24px; left:-24px; width:clamp(130px,20vw,170px); z-index:1; }
.invite-card .roses-br{ position:absolute; bottom:-24px; right:-24px; width:clamp(130px,20vw,170px); z-index:3; }
.invite-card .inner{ position:relative; z-index:2; }
.invite .lede{ margin:1.1rem 0; font-size:clamp(1.24rem,3.4vw,1.6rem); line-height:1.7; color:var(--sage-deep); }
.invite .sign{ font-family:var(--script); font-size:2.4rem; color:var(--sage-dark); margin-top:1rem; }
.invite .date-line{ text-transform:uppercase; letter-spacing:.24em; font-size:clamp(.95rem,2.6vw,1.18rem); color:var(--sage); margin-top:.4rem; margin-bottom:.4rem; }

/* ============================================================
   VENUE — «Baku Castle» + Bakı şəkli
   ============================================================ */
.venue-sec{ background:linear-gradient(180deg,var(--ivory-2),var(--ivory)); text-align:center; }
.venue-card{ position:relative; z-index:2; max-width:560px; margin:0 auto; }
.venue-photo{ width:100%; aspect-ratio:6/5; border-radius:4px; border:1px solid var(--line); margin:2rem 0 0;
  background-color:#e9e3d4;
  background-image:url('../assets/baku-castle.png');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  box-shadow:0 24px 55px -34px rgba(70,65,45,.55); }
.venue-card h3{ font-family:var(--serif); font-weight:600; font-size:1.55rem; margin:.2rem 0; color:var(--sage-deep); }
.venue-card p{ margin:.1rem 0 1.2rem; color:var(--sage); letter-spacing:.06em; }
.btn{ display:inline-block; font-family:var(--serif); text-transform:uppercase; letter-spacing:.22em;
  font-size:.74rem; color:var(--ivory); background:var(--sage-dark); padding:.85rem 1.9rem; border-radius:999px;
  text-decoration:none; border:0; cursor:pointer; transition:background .3s, transform .3s; }
.btn:hover{ background:var(--sage-deep); transform:translateY(-1px); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ text-align:left; }
.faq-list{ position:relative; z-index:2; max-width:560px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:1.12rem; color:var(--sage-deep);
  padding:1.2rem .2rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .chev{ transition:transform .3s; color:var(--gold); flex:none; }
.faq-item.open .faq-q .chev{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .34s ease; }
.faq-a p{ margin:0; padding:0 .2rem 1.2rem; color:#444e60; line-height:1.65; font-size:1rem; }

/* ============================================================
   RSVP
   ============================================================ */
.rsvp{ text-align:center; }
.rsvp .deadline{ color:var(--sage); font-style:italic; margin-bottom:2rem; }
.form{ position:relative; z-index:2; max-width:460px; margin:0 auto; text-align:left; }
.rsvp-form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:block; margin:0; }
.field-label{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.16em; color:var(--sage); margin-bottom:.55rem; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.input{ width:100%; font-family:var(--serif); font-size:1.04rem; color:var(--ink);
  background:rgba(255,253,248,.7); border:1px solid var(--line); border-radius:2px; padding:.8rem .9rem; }
.input:focus{ outline:none; border-color:var(--sage); background:#fffdf8; }
.input::placeholder{ color:#a7a48f; }
.input.error{ border-color:#c89494; background:#fbf1ef; }

/* dynamic guest list */
.guest-list{ display:flex; flex-direction:column; gap:.7rem; }
.guest-list:empty{ display:none; }
.guest-row{ position:relative; }
.guest-row .input{ padding-right:46px; }
.guest-remove{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:rgba(255,253,248,.8);
  color:var(--sage); font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.guest-remove:hover{ border-color:var(--sage-dark); color:var(--sage-dark); }
.btn-add{ align-self:flex-start; font-family:var(--serif); font-size:.92rem; letter-spacing:.03em;
  color:var(--sage-dark); background:transparent; border:1px dashed var(--line); border-radius:999px;
  padding:.55rem 1.2rem; cursor:pointer; transition:.2s; }
.btn-add:hover{ border-color:var(--sage-dark); background:rgba(255,253,248,.5); }
.rsvp-hint{ font-size:.85rem; color:var(--sage); font-style:italic; margin:-.3rem 0 .2rem; }
.rsvp-form .btn{ width:100%; margin-top:.4rem; }

.rsvp-done{ max-width:460px; margin:0 auto; text-align:center; }
.rsvp-done-title{ font-family:var(--script); font-size:2.4rem; color:var(--sage-dark); margin:0 0 .6rem; }
.rsvp-done-title .orn-star{ color:var(--gold); font-family:var(--serif); font-size:1.4rem; }
.rsvp-done-text{ color:#3c4759; line-height:1.75; font-size:1.06rem; margin:0; }

.form-status{ margin:1rem 0 0; padding:.8rem 1rem; border-radius:2px; font-size:.95rem; text-align:center; }
.form-status--ok{ background:#e7eede; color:#41603a; border:1px solid #ccdcbf; }
.form-status--error{ background:#f6e5e2; color:#8a463c; border:1px solid #e6cabf; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ text-align:center; padding:clamp(3rem,5vw,4rem) 1.6rem 4rem; background:linear-gradient(180deg,var(--ivory-2),var(--cream)); position:relative; }
.footer .f-names{ font-family:var(--script); font-size:clamp(2.6rem,6vw,3.2rem); color:var(--sage-dark); line-height:.9; }
.footer .f-date{ text-transform:uppercase; letter-spacing:.34em; font-size:.8rem; color:var(--sage); margin-top:.6rem; }
.footer .f-shell{ width:52px; margin:0 auto 1rem; opacity:.85; }
.footer .credit{ margin-top:2rem; font-size:.7rem; letter-spacing:.1em; color:var(--sage); opacity:.7; }

/* ---------- fixed UI ---------- */
.lang{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; background:rgba(247,243,234,.9); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang button{ font-family:var(--serif); letter-spacing:.14em; font-size:.74rem; padding:.28rem .8rem;
  border:0; background:none; border-radius:999px; cursor:pointer; color:var(--sage); }
.lang button[aria-pressed="true"]{ background:var(--sage-dark); color:var(--ivory); }

.sound{ position:fixed; bottom:18px; right:18px; z-index:60;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(247,243,234,.92); backdrop-filter:blur(6px); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--sage-dark);
  box-shadow:0 8px 22px -10px rgba(60,55,40,.5); }
.sound .bars{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.sound .bars i{ width:2.5px; background:currentColor; height:5px; border-radius:2px; }
.sound.on .bars i{ animation:eq .9s ease-in-out infinite; }
.sound .bars i:nth-child(2){ animation-delay:.2s } .sound .bars i:nth-child(3){ animation-delay:.4s } .sound .bars i:nth-child(4){ animation-delay:.1s }
@keyframes eq{ 0%,100%{ height:5px } 50%{ height:16px } }