@font-face {
  font-family: "Antique Legacy";
  src: url("fonts/AntiqueLegacy-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root { --ink: #010101; --bg: #EFF0DC; --duo-dark: #010101; --duo-light: #EFF0DC; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
}

body {
  font-family: "Antique Legacy", Helvetica, Arial, sans-serif;
  color: var(--ink);
}

#stage-wrap {
  overflow: hidden;
}

#stage {
  position: relative;
  width: 402px;
  height: 2279px;
  background: var(--bg);
  transform-origin: top left;
}

.el { position: absolute; }

:root { --ease-reveal: cubic-bezier(0.23, 1, 0.32, 1); }

html, body, #stage { transition: background-color 600ms ease; }

/* palette morph on non-.el ink pieces */
#oval-1, #oval-2, #input-box { transition: background-color 600ms ease; }

/* reveal-on-scroll: hidden only when JS is running and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js .el {
    opacity: 0;
    translate: 0 10px;
    filter: blur(4px);
    transition: opacity 700ms var(--ease-reveal),
                translate 700ms var(--ease-reveal),
                filter 700ms var(--ease-reveal),
                background-color 600ms ease,
                color 600ms ease;
  }
  html.js .el.in {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js .el { transition: background-color 600ms ease, color 600ms ease; }
}

.heart-btn { cursor: pointer; }


.ink {
  background-color: var(--ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* --- hero --- */
#greta   { left: 41px;  top: 170px; width: 325px; height: 107px; }
#wes     { left: 123px; top: 258px; width: 207px; height: 108px; }

#hero {
  left: 0; top: 216px; width: 402px;
  font-size: 64px;
  line-height: 105%;
  font-weight: 400;
  text-align: center;
}
#amp { display: inline-block; transform: translateX(-89px); }
#married { display: inline-block; transform: translateY(-1px); }

#heart-1 { left: 155px; top: 548px; width: 85px; height: 71px; }

#come-celebrate { left: 29px; top: 671px; width: 373px; height: 88px; }
#with-us        { left: 97px; top: 728px; width: 206px; height: 84px; }

/* --- body text blocks --- */
.body-text {
  font-size: 16px;
  line-height: 110%;
  text-align: center;
  text-transform: uppercase;
}

#address { left: 65px; top: 841.5px; width: 276px; }

#apple-maps  { left: 65px;  top: 902px; }
#apple-maps .ink  { width: 158px; height: 29px; }
#google-maps { left: 192px; top: 893px; }
#google-maps .ink { width: 163.5px; height: 55px; }

#heart-2 { left: 155px; top: 995px; width: 85px; height: 71px; }

/* --- schedule --- */
#drop-in { left: 68px;  top: 1120px; width: 267px; height: 45px; }
#program { left: 116px; top: 1220px; width: 169px; height: 45px; }
#dancing { left: 130px; top: 1323px; width: 139px; height: 45px; }

.time {
  font-size: 16px;
  line-height: 110%;
  text-transform: uppercase;
  text-align: center;
  left: 0;
  width: 402px;
  white-space: nowrap;
}
#time-1 { top: 1167px; }
#time-2 { top: 1257px; }
#time-3 { top: 1369px; }

#photo { left: 134px; top: 1452px; width: 137px; height: 162px; }
#photo-border { left: 122px; top: 1443.5px; width: 159px; height: 186.5px; transform: rotate(1deg); }

#no-gifts { left: 65px; top: 1696px; width: 276px; }

/* --- sign up --- */
#sign-up { left: 103px; top: 1871px; width: 196px; height: 55px; }

#rsvp-form { left: 80px; top: 1926px; width: 242px; height: 64px; }
#input-box { width: 242px; height: 64px; }
#phone {
  position: absolute;
  left: 8px; top: 10px;
  width: 226px; height: 44px;
  background: transparent;
  border: none;
  outline: none;
  font-family: "Antique Legacy", Helvetica, Arial, sans-serif;
  font-size: 20px;
  color: var(--ink);
  caret-color: var(--ink);
  text-align: center;
  border-radius: 4px;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
              filter 160ms cubic-bezier(0.23, 1, 0.32, 1),
              color 600ms ease, caret-color 600ms ease;
}
#phone::placeholder { color: var(--ink); font-size: 16px; }
#phone:focus::placeholder { color: transparent; }

#submit-btn {
  font-family: "Antique Legacy", Helvetica, Arial, sans-serif;
  position: absolute;
  right: -44px; top: 12px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 22px;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
              color 600ms ease;
}
#rsvp-form:focus-within #submit-btn,
#rsvp-form.has-value #submit-btn { opacity: 1; transform: translateX(0); }
#submit-btn:active { transform: scale(0.97); }
#rsvp-form[data-state="done"] #submit-btn { opacity: 0; pointer-events: none; }

#thanks {
  font-family: "Antique Legacy", Helvetica, Arial, sans-serif;
  position: absolute;
  left: 8px; top: 10px;
  width: 226px; height: 44px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  filter: blur(2px);
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              filter 200ms cubic-bezier(0.23, 1, 0.32, 1),
              color 600ms ease;
}

#rsvp-form[data-state="done"] #phone {
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
}
#rsvp-form[data-state="done"] #thanks {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  #thanks { transform: none; transition: opacity 200ms ease; }
  #phone { transition: opacity 200ms ease; }
}

#get-updates {
  left: 121px; top: 1996px; width: 159px;
  font-size: 11px;
  line-height: 110%;
  text-transform: uppercase;
  text-align: center;
}

#doodle { left: 38px; top: 2072px; width: 344px; height: 207px; }

/* --- ink masks --- */
#greta { -webkit-mask-image: url("assets/masks/greta.png"); mask-image: url("assets/masks/greta.png"); }
#wes { -webkit-mask-image: url("assets/masks/wes.png"); mask-image: url("assets/masks/wes.png"); }
#heart-1 { -webkit-mask-image: url("assets/masks/heart-1.png"); mask-image: url("assets/masks/heart-1.png"); }
#heart-2 { -webkit-mask-image: url("assets/masks/heart-2.png"); mask-image: url("assets/masks/heart-2.png"); }
#come-celebrate { -webkit-mask-image: url("assets/masks/come-celebrate.png"); mask-image: url("assets/masks/come-celebrate.png"); }
#with-us { -webkit-mask-image: url("assets/masks/with-us.png"); mask-image: url("assets/masks/with-us.png"); }
#oval-1 { -webkit-mask-image: url("assets/masks/oval-1.png"); mask-image: url("assets/masks/oval-1.png"); }
#oval-2 { -webkit-mask-image: url("assets/masks/oval-2.png"); mask-image: url("assets/masks/oval-2.png"); }
#drop-in { -webkit-mask-image: url("assets/masks/drip-in-reception.png"); mask-image: url("assets/masks/drip-in-reception.png"); }
#program { -webkit-mask-image: url("assets/masks/program.png"); mask-image: url("assets/masks/program.png"); }
#dancing { -webkit-mask-image: url("assets/masks/dancing.png"); mask-image: url("assets/masks/dancing.png"); }
#sign-up { -webkit-mask-image: url("assets/masks/sign-up.png"); mask-image: url("assets/masks/sign-up.png"); }
#input-box { -webkit-mask-image: url("assets/masks/input-box.png"); mask-image: url("assets/masks/input-box.png"); }
#photo { -webkit-mask-image: url("assets/masks/photo.png"); mask-image: url("assets/masks/photo.png"); }
#photo-border { -webkit-mask-image: url("assets/masks/photo-border.png"); mask-image: url("assets/masks/photo-border.png"); }
#doodle { -webkit-mask-image: url("assets/masks/doodle-couple.png"); mask-image: url("assets/masks/doodle-couple.png"); }