@font-face { font-family: Alizee; src: url("./assets/alizee.woff") format("woff"); font-display: swap; }
@font-face { font-family: Edgethorn; src: url("./assets/edgethorn.woff") format("woff"); font-style: italic; font-display: swap; }
@font-face { font-family: Allura; src: url("./assets/allura.woff") format("woff"); font-display: swap; }
@font-face { font-family: Auckland; src: url("./assets/auckland.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: Circular; src: url("./assets/circular-book.woff") format("woff"); font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { background: #ffe7ee; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: #414f41; }
.page {
  --screen-height: 100vh;
  --gutter: clamp(10px, 3.2vw, 60px);
  --left: max(var(--gutter), env(safe-area-inset-left, 0px));
  --right: max(var(--gutter), env(safe-area-inset-right, 0px));
  --top: max(12px, env(safe-area-inset-top, 0px));
  --bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --width: min(1500px, calc(100vw - var(--left) - var(--right)), calc((var(--screen-height) - var(--top) - var(--bottom)) * 1.06));
  --unit: calc(var(--width) / 540);
  display: grid;
  place-items: center;
  height: var(--screen-height);
  padding: var(--top) var(--right) var(--bottom) var(--left);
  overflow: hidden;
}
@supports (height: 100dvh) { .page { --screen-height: 100dvh; } }

.stationery {
  position: relative;
  width: var(--width);
  height: calc(var(--unit) * 424.98);
  isolation: isolate;
}
.envelope, .flap-wrap, .flap, .open-control { position: absolute; inset: 0; }
.front img, .flap > img:first-child { display: block; width: 100%; height: 100%; }
.back {
  background: #f1eae2;
  box-shadow: 0 3px 8px rgba(75, 44, 38, .10), 0 16px 42px -14px rgba(87, 47, 57, .23);
}
.front { z-index: 5; }
.flap-wrap { z-index: 6; pointer-events: none; }
.flap { transform-origin: center top; }
.monogram {
  position: absolute;
  width: 14%;
  height: auto;
  top: 17%;
  left: 43%;
}
.hint {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: 75%;
  text-align: center;
  font: 400 clamp(11px, calc(var(--unit) * 10), 17px)/1.2 Circular, sans-serif;
  color: #65574f;
  text-transform: uppercase;
  letter-spacing: .15em;
  pointer-events: none;
}
.open-control {
  z-index: 8;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.open-control:focus-visible { outline: 3px solid #755561; outline-offset: 4px; }
@media (hover: hover) {
  .stationery:not(.opened):hover .hint { color: #41362e; }
}

.card-window {
  position: absolute;
  z-index: 3;
  top: 3.55%;
  left: 1.1111%;
  width: 97.7778%;
  height: 96.0045%;
}
.card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 7px rgba(73, 48, 46, .13), 0 13px 35px -12px rgba(73, 48, 46, .18);
}
.card:focus { outline: none; }
.paper {
  position: absolute;
  left: -2.2727%;
  top: -2.9412%;
  width: 104.5455%;
  height: 105.8824%;
  object-fit: cover;
}
.line {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1;
}
.occasion { top: 31%; font: 400 calc(25 * var(--unit))/1.1 Alizee, serif; letter-spacing: .05em; text-transform: uppercase; }
.prelude, .closing { font: italic calc(13 * var(--unit))/1.15 Edgethorn, serif; letter-spacing: .065em; }
.prelude { top: 42%; }
.names { top: 49%; font: 400 calc(42 * var(--unit))/1.06 Allura, cursive; }
.details { top: 63%; font: 700 calc(12.5 * var(--unit))/1.2 Auckland, serif; letter-spacing: .065em; }
.closing { top: 72%; }

@media (max-width: 600px), (max-height: 520px) {
  .occasion { top: 29.3%; font-size: calc(28 * var(--unit)); }
  .prelude, .closing { font-size: calc(16 * var(--unit)); letter-spacing: .035em; }
  .prelude { top: 39%; }
  .names { top: 46%; font-size: calc(49 * var(--unit)); }
  .details { top: 60%; font-size: calc(17.6 * var(--unit)); line-height: 1.2; letter-spacing: .025em; }
  .details time, .details span:last-child { display: block; }
  .details .divider { display: none; }
  .closing { top: 74%; }
}

/* The card, its lettering, and the floral paper lift together as the envelope falls away. */
.opened .hint { display: none; }
.opened .card-window { top: 1.3%; transition: top 1s ease .7s; }
.opened .envelope, .opened .flap-wrap {
  transform: translateY(calc(60vh + 100%));
  transition: transform 2s ease-out .7s;
}
.opened .flap { transform: rotateX(180deg); transition: transform .5s ease-in-out; }
.opened .flap-wrap { z-index: 1; transition: transform 2s ease-out .7s, z-index 0s ease .4s; }
.hearts { position: absolute; z-index: 4; top: 50%; left: 0; width: 100%; pointer-events: none; }
.heart { position: absolute; top: 0; opacity: 0; width: calc(100 * var(--unit)); height: calc(90 * var(--unit)); }
.heart::before, .heart::after {
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  width: 50%;
  height: 89%;
  background: #d00000;
  border-radius: 100% 100% 0 0 / 62.5% 62.5% 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.opened .one { left: 20%; transform: scale(.6); --rise: 2s; --sway: 1s; --swings: 4; }
.opened .two { left: 55%; transform: scale(1); --rise: 3s; --sway: 2s; --swings: 2; }
.opened .three { left: 10%; transform: scale(.8); --rise: 4s; --sway: 1s; --swings: 4; }
.opened .heart { animation: rise var(--rise) .2s linear forwards, sway var(--sway) .2s ease-in-out var(--swings) alternate; }
@keyframes rise {
  0% { top: 0; opacity: 1; }
  99% { opacity: 1; }
  100% { top: calc(-55vh - 100 * var(--unit)); opacity: 0; }
}
@keyframes sway { from { margin-left: 0; } to { margin-left: calc(50 * var(--unit)); } }
@media (prefers-reduced-motion: reduce) {
  .opened .envelope, .opened .flap-wrap, .opened .hearts { display: none; }
  .opened .card-window { transition: none; }
}