:root {
  --paper: #fffaf7;
  --surround: #e9dfd7;
  --focus: #7b5841;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--surround);
}

body {
  margin: 0;
  background: var(--surround);
  color: #2f2a26;
  font-family: Arial, Helvetica, sans-serif;
}

body.introLocked {
  overflow: hidden;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  padding: 28px 20px;
  color: #342b28;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgb(255 252 248 / 96%), transparent 42%),
    linear-gradient(145deg, #eadbd0 0%, #f7eee8 48%, #dfcbbf 100%);
  transition: opacity 850ms ease, visibility 850ms ease;
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;
  width: min(56vw, 580px);
  aspect-ratio: 1;
  border: 1px solid rgb(121 88 71 / 11%);
  border-radius: 50%;
}

.intro::before {
  top: -31vw;
  left: -19vw;
}

.intro::after {
  right: -22vw;
  bottom: -35vw;
}

.introGlow {
  position: absolute;
  width: min(90vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 52%), transparent 68%);
  animation: glow 4s ease-in-out infinite alternate;
}

.introDate,
.introNames,
.openInvitation {
  position: relative;
  z-index: 1;
}

.introDate {
  margin: 0 0 8px;
  color: #785e51;
  font: 600 12px/1.2 Arial, sans-serif;
  letter-spacing: 0.35em;
}

.introNames {
  margin: 0 0 clamp(24px, 5vh, 52px);
  font: 400 clamp(30px, 6vw, 52px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -0.03em;
}

.introNames span {
  color: #c49b88;
  font-style: italic;
}

.openInvitation {
  width: min(88vw, 470px);
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.envelopeStage {
  display: block;
  width: 100%;
  padding: 8% 7% 13%;
  perspective: 1100px;
}

.envelope {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.62;
  filter: drop-shadow(0 28px 25px rgb(83 57 45 / 22%));
  animation: envelopeFloat 3.2s ease-in-out infinite;
}

.envelopeBack,
.envelopeFront,
.envelopeFlap,
.letter {
  position: absolute;
  inset: 0;
  display: block;
}

.envelopeBack {
  border: 1px solid #d4b7a8;
  border-radius: 5px;
  background: #f4e5dc;
}

.letter {
  inset: 8% 7% 7%;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid #e5d8ce;
  border-radius: 3px;
  background: #fffdf9;
  box-shadow: 0 3px 12px rgb(87 58 44 / 10%);
  transition: transform 1.1s cubic-bezier(.2,.75,.22,1) 420ms;
}

.letterMonogram {
  color: #4b403b;
  font: 400 clamp(24px, 6vw, 38px)/1 Georgia, serif;
}

.letterMonogram i {
  color: #c39b88;
  font-weight: 400;
}

.letterLine {
  width: 92px;
  height: 1px;
  margin-top: 16px;
  background: #dbc9be;
}

.letterLine.short {
  width: 58px;
  margin-top: 8px;
}

.envelopeFlap {
  z-index: 5;
  height: 57%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(165deg, #f8ece4, #ddc2b4);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
  transition: transform 900ms cubic-bezier(.25,.75,.25,1);
}

.envelopeFront {
  z-index: 4;
  border-radius: 0 0 5px 5px;
  background:
    linear-gradient(33deg, #ead5ca 49.6%, transparent 50%) 0 100% / 51% 100% no-repeat,
    linear-gradient(-33deg, #e4cbbf 49.6%, transparent 50%) 100% 100% / 51% 100% no-repeat,
    linear-gradient(to top, #f0ddd3 0 53%, transparent 53%);
  pointer-events: none;
}

.waxSeal {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 7;
  display: grid;
  width: clamp(48px, 12vw, 64px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgb(255 234 222 / 32%);
  border-radius: 50%;
  color: #f8e9df;
  font: 400 clamp(15px, 3.6vw, 20px)/1 Georgia, serif;
  background: radial-gradient(circle at 38% 32%, #b98272, #8f5d51 72%);
  box-shadow: 0 5px 10px rgb(73 42 35 / 28%), inset 0 0 0 3px rgb(104 56 47 / 22%);
  transform: translate(-50%, -50%);
  transition: opacity 260ms ease, transform 380ms ease;
}

.waxSeal span {
  margin: 0 -3px;
  font-style: italic;
}

.openLabel {
  display: block;
  margin-top: 2px;
  font: 400 clamp(18px, 4.5vw, 22px)/1.2 Georgia, serif;
  letter-spacing: 0.02em;
}

.openHint {
  display: block;
  margin-top: 8px;
  color: #876f64;
  font: 500 11px/1.2 Arial, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.openInvitation:hover .waxSeal,
.openInvitation:focus-visible .waxSeal {
  transform: translate(-50%, -50%) scale(1.08);
}

.openInvitation:focus-visible {
  outline: 2px solid #805f50;
  outline-offset: 7px;
  border-radius: 8px;
}

.intro.isOpening .envelope {
  animation: none;
}

.intro.isOpening .envelopeFlap {
  z-index: 1;
  transform: rotateX(180deg);
}

.intro.isOpening .waxSeal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
}

.intro.isOpening .letter {
  z-index: 6;
  transform: translateY(-48%);
}

.intro.isOpening .openLabel,
.intro.isOpening .openHint {
  opacity: 0;
  transition: opacity 250ms ease;
}

.intro.isLeaving {
  visibility: hidden;
  opacity: 0;
}

.soundToggle {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 13px 7px 8px;
  border: 1px solid rgb(117 85 69 / 25%);
  border-radius: 999px;
  color: #4a3b34;
  background: rgb(255 250 247 / 91%);
  box-shadow: 0 8px 24px rgb(76 49 36 / 17%);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.soundToggle[hidden] {
  display: none;
}

.soundIcon {
  display: grid;
  width: 27px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #a77465;
  animation: soundPulse 1.8s ease-in-out infinite;
}

.soundLabel {
  font-size: 12px;
}

.soundToggle[aria-pressed="true"] .soundIcon {
  opacity: .55;
  animation: none;
}

.page {
  min-height: 100svh;
  display: grid;
  place-items: start center;
  padding: clamp(0px, 3vw, 36px);
}

.invitation {
  position: relative;
  width: min(100%, 720px);
  background: var(--paper);
  box-shadow: 0 22px 70px rgb(63 41 27 / 18%);
  overflow: hidden;
}

.invitationImage {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.mapLink {
  position: absolute;
  top: 68.7%;
  width: 21.3%;
  height: 2.25%;
  border-radius: 999px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(123 88 65 / 18%);
}

.ceremonyLink {
  left: 8.8%;
}

.celebrationLink {
  left: 32%;
}

.mapLink:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 740px) {
  .page {
    padding: 0;
  }

  .invitation {
    width: 100%;
    box-shadow: none;
  }
}

@keyframes envelopeFloat {
  0%, 100% { transform: translateY(0) rotate(-.3deg); }
  50% { transform: translateY(-8px) rotate(.3deg); }
}

@keyframes glow {
  from { opacity: .55; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes soundPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  .invitation {
    animation: reveal 700ms ease-out both;
  }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .introGlow,
  .envelope,
  .soundIcon {
    animation: none;
  }

  .intro.isOpening .envelopeFlap {
    transform: rotateX(180deg);
  }
}