/* ============================================================
   Hero + opening animation — owner: lead
   ============================================================ */

/* ---- opening film ---------------------------------------- */
.opening{ display:none; }
html.js .opening{
  display:block;
  position:fixed;
  inset:0;
  z-index:120;
  cursor:pointer;
  background:#E8E0D7 url("../assets/img/lace-wall.jpg") center/cover no-repeat;
  opacity:1;
  transition:opacity 1.15s var(--e-soft);
  will-change:opacity;
}
.opening.is-done{ opacity:0; pointer-events:none; }

.opening__stage{
  position:absolute;
  top:0;
  left:50%;
  width:min(100vw, var(--col));
  aspect-ratio:432 / 774;
  margin-left:calc(min(100vw, var(--col)) / -2);
  overflow:hidden;
  container-type:inline-size;
  background:var(--paper);
}
.opening__video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  background:var(--paper);
}
.opening__live{ position:absolute; inset:0; z-index:2; }

/* the invitation gate */
.opening__enter{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:min(78vw, 340px);
  padding:26px 20px 22px;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:center;
  cursor:pointer;
  font:inherit;
  transition:opacity .7s var(--e-soft), transform .9s var(--e-expo);
}
.opening__enter-script{
  display:block;
  font-family:var(--ff-script);
  font-size:clamp(34px, 9vw, 46px);
  line-height:1.15;
  color:var(--ink);
}
.opening__enter-cue{
  display:block;
  margin-top:14px;
  font-family:var(--ff-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.opening__enter-cue::after{
  content:"";
  display:block;
  width:1px;
  height:34px;
  margin:14px auto 0;
  background:linear-gradient(to bottom, var(--hairline), transparent);
  animation:cueBreath 2.4s var(--e-soft) infinite;
}
@keyframes cueBreath{
  0%,100%{ opacity:.35; transform:scaleY(.7); transform-origin:top; }
  50%{ opacity:1; transform:scaleY(1); transform-origin:top; }
}
.opening.is-running .opening__enter{ opacity:0; transform:translate(-50%,-46%); pointer-events:none; }

html.is-intro, html.is-intro body{ overflow:hidden; height:100%; }

/* ---- hero ------------------------------------------------- */
.hero{
  position:relative;
  width:100%;
  aspect-ratio:432 / 774;
  background:var(--paper);
  overflow:hidden;
}
.hero__stage{
  position:absolute;
  inset:0;
  container-type:inline-size;
}
.hero__plate{
  position:absolute;
  inset:0;
  background:url("../assets/img/hero-plate.jpg") center/100% 100% no-repeat;
}
.hero__content{
  position:absolute;
  inset:0;
  z-index:2;
  text-align:center;
  color:var(--ink);
}
.hero__content > *{
  position:absolute;
  left:0;
  right:0;
  margin:0;
  opacity:0;
  transform:translate3d(0, 9px, 0) scaleX(var(--sx, 1));
  transition:opacity 1.5s var(--e-soft), transform 2s var(--e-expo);
}
.is-revealed .hero__content > *{ opacity:1; transform:scaleX(var(--sx, 1)); }
.is-revealed .hero__content > *:nth-child(1){ transition-delay:.05s; }
.is-revealed .hero__content > *:nth-child(2){ transition-delay:.16s; }
.is-revealed .hero__content > *:nth-child(3){ transition-delay:.28s; }
.is-revealed .hero__content > *:nth-child(4){ transition-delay:.44s; }
.is-revealed .hero__content > *:nth-child(5){ transition-delay:.60s; }
.is-revealed .hero__content > *:nth-child(6){ transition-delay:.72s; }
.is-revealed .hero__content > *:nth-child(7){ transition-delay:.90s; }
.is-revealed .hero__content > *:nth-child(8){ transition-delay:1.02s; }
.is-revealed .hero__content > *:nth-child(9){ transition-delay:1.10s; }

/* the bismillah */
.hero__bismillah{
  top:10.4%;
  font-family:var(--ff-arabic);
  font-size:5.1cqw;
  line-height:1.4;
  color:var(--ink);
  direction:rtl;
}
.hero__bismillah-en{
  top:15.3%;
  font-family:var(--ff-display);
  font-size:3.05cqw;
  line-height:1.45;
  letter-spacing:.015em;
  color:var(--ink-soft);
}
.hero__together{
  top:20.4%;
  font-family:var(--ff-display);
  font-size:4.1cqw;
  line-height:1.4;
  letter-spacing:.015em;
  color:var(--ink-soft);
}
.hero__name{
  --sx:.82;
  font-family:var(--ff-script);
  font-size:17.6cqw;
  line-height:.86;
  font-weight:400;
  color:var(--ink);
  white-space:nowrap;
}
.hero__name--one{ top:25.5%; }
.hero__name--two{ top:37.0%; }
.hero__amp{
  top:34.3%;
  font-family:var(--ff-display);
  font-style:italic;
  font-size:4.4cqw;
  line-height:1;
  color:var(--ink-soft);
}
.hero__date{
  top:47.0%;
  font-family:var(--ff-display);
  font-size:4.9cqw;
  letter-spacing:.13em;
  color:var(--ink);
}
.hero__venue{
  top:77.0%;
  font-family:var(--ff-display);
  font-size:4.35cqw;
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--ink);
}
.hero__city{
  top:80.8%;
  font-family:var(--ff-display);
  font-size:2.7cqw;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* couple portrait inside the lace frame */
.hero__photo-wrap{
  position:absolute;
  top:49.2%;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  z-index:1;
}
.hero__photo{
  width:32cqw;
  aspect-ratio:2 / 3;
  object-fit:cover;
  object-position:50% 46%;
  filter:saturate(.94) contrast(1.02) sepia(.05);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 49%, #000 54%, rgba(0,0,0,.55) 66%, transparent 78%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 49%, #000 54%, rgba(0,0,0,.55) 66%, transparent 78%);
}

/* ---- footer ---------------------------------------------- */
.footer{ padding-top:80px; padding-bottom:64px; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; }
.footer__rings{ width:20.5%; max-width:104px; margin-bottom:26px; mix-blend-mode:multiply; }
.footer__line{ max-width:300px; }
.footer__with{
  margin-top:22px;
  font-size:clamp(24px, 6.4vw, 31px);
  color:var(--ink-soft);
}
.footer__sig{
  margin-top:2px;
  font-size:clamp(34px, 9.4vw, 46px);
  line-height:1.15;
}
.footer__amp{
  font-family:var(--ff-display);
  font-style:italic;
  font-size:.52em;
  vertical-align:.12em;
  color:var(--ink-soft);
}
.footer__date{ margin-top:12px; }
.footer__credit{
  margin:38px 0 0;
  font-family:var(--ff-display);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---- rsvp success + errors (shared) ---------------------- */
.rsvp-done{ text-align:center; padding:26px 0 10px; }
.rsvp-done__script{
  font-family:var(--ff-script);
  font-size:clamp(40px, 11cqw, 56px);
  line-height:1.1;
  color:var(--cream);
  margin:0 0 10px;
}
.rsvp-done__text{
  font-family:var(--ff-body);
  font-size:15px;
  line-height:1.8;
  color:var(--cream-dim);
  margin:0 auto;
  max-width:300px;
}
.is-error .input,
.is-error .field__label{ border-color:#D9A9A3; color:#F0CFC9; }