:root {
  color-scheme: light;
  font-family: 'DM Sans', Arial, sans-serif;
  color: #233d56;
  background: #e8e7de;
  --ink: #203a51;
  --navy: #244867;
  --paper: #fcfaf3;
  --gold: #9a7846;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display: 'Playfair Display', Georgia, serif;
  --script: 'Great Vibes', 'Segoe Script', cursive;
  --opening-ease: cubic-bezier(.22, .68, .22, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stationery {
  width: min(100%, 490px);
  margin-inline: auto;
  background: #f3f1e5;
}

.cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: max(420px, 100svh);
  padding: 34px 26px;
  background: #f3f1e5 url('./assets/fondo-invitacion.png') center / 100% 100% no-repeat;
  list-style: none;
  pointer-events: none;
}

.cover::-webkit-details-marker { display: none; }
.cover::marker { content: ''; }
.continue-label, .invitation[open] .open-label { display: none; }
.invitation[open] .continue-label { display: inline; }

.cover:focus-visible { outline: none; }
.cover:focus-visible .envelope-art, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #244867;
  outline-offset: 6px;
}

.envelope-art {
  position: relative;
  isolation: isolate;
  width: min(100%, 340px);
  aspect-ratio: 1.57;
  margin-top: 8svh;
  transform: rotate(-4deg);
  transition: transform 1s var(--opening-ease);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.invitation[open] .envelope-art { transform: translateY(10%) rotate(-1deg); }

.envelope-back, .envelope-pocket {
  position: absolute;
  inset: 0;
  border-radius: 3px;
}

.envelope-back {
  background: #34536e;
  box-shadow: 0 15px 24px #1b33404a, 0 2px 5px #1c33464a;
}

.envelope-flap {
  position: absolute;
  z-index: 4;
  inset: 0 0 34%;
  background: linear-gradient(165deg, #7392a6, #4a6983 64%, #355672);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: center top;
}

.invitation[open] .envelope-flap {
  z-index: 1;
  transform: rotateX(180deg);
}

.letter-slot {
  position: absolute;
  inset: -105% 0 0;
  z-index: 2;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.invitation[open] .letter-slot { visibility: visible; }

.letter {
  position: absolute;
  inset: auto 6% 0;
  height: 48%;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(5px, 2vw, 12px);
  padding: 0 8px 8%;
  border: 5px double #8298aa;
  background: radial-gradient(ellipse at 50% 8%, #fffdf8, var(--paper) 75%);
  color: var(--ink);
  box-shadow: 0 7px 17px #1e35463d;
  pointer-events: auto;
}

.invitation[open] .letter {
  transform: translateY(-95%);
}

.letter-name {
  display: block;
  font: 400 clamp(1.7rem, 8.2vw, 3rem)/1.22 var(--script);
  white-space: nowrap;
}

.letter-ornament { color: var(--gold); font: 1.1rem/1 Georgia, serif; }

.envelope-pocket {
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(130deg, #6989a1, #385a75 59%, #294b65);
  clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%);
}

.envelope-pocket::before, .envelope-pocket::after {
  position: absolute;
  inset: 0;
  content: '';
}

.envelope-pocket::before {
  background: linear-gradient(240deg, #567994, #28465f 88%);
  clip-path: polygon(100% 0, 100% 100%, 23% 100%);
}

.envelope-pocket::after {
  background: linear-gradient(155deg, #7a9aad, #405f7b 80%);
  clip-path: polygon(50% 54%, 100% 100%, 0 100%);
}

.wax-seal {
  position: absolute;
  z-index: 5;
  top: 64%;
  left: 50%;
  width: clamp(38px, 12vw, 51px);
  aspect-ratio: 1;
  border: 1px solid #bda87e;
  border-radius: 48% 51% 46% 53%;
  background: radial-gradient(circle at 34% 25%, #f5e8c9, #cbae7c);
  box-shadow: 2px 4px 8px #26374d60, inset 0 0 0 4px #e6d5b1, inset 0 0 0 5px #ab9269;
  transform: translate(-50%, -50%);
  transition: opacity .35s ease, transform .45s var(--opening-ease);
}

.invitation[open] .wax-seal {
  opacity: 0;
  transform: translate(-50%, -39%) rotate(12deg) scale(.93);
}

@media (prefers-reduced-motion: no-preference) {
  .invitation[open] .envelope-flap {
    animation: lift-flap .68s .12s var(--opening-ease) both;
  }
  .invitation[open] .letter {
    animation: lift-letter .88s .51s var(--opening-ease) both;
  }
}

@keyframes lift-flap {
  0% { transform: perspective(680px) rotateX(0); z-index: 4; }
  50% { transform: perspective(680px) rotateX(90deg); z-index: 4; }
  51% { z-index: 1; }
  100% { transform: perspective(680px) rotateX(180deg); z-index: 1; }
}

@keyframes lift-letter {
  from { transform: translateY(82%); }
  to { transform: translateY(-95%); }
}

.invitation.interactive:not(.guide-revealed) .guide { display: none; }

.guide {
  position: relative;
  min-height: 100svh;
  padding: 53px clamp(31px, 10vw, 54px) max(74px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, #fcfaf3b5, #fcfaf3fa 25%, #fcfaf3fa 77%, #fcfaf3c2),
    url('./assets/fondo-invitacion.png') center / 100% 100% no-repeat,
    var(--paper);
}

.guide::before {
  position: absolute;
  inset: 15px;
  border: 3px double #859aa878;
  content: '';
  pointer-events: none;
}

.guide-heading { margin: 0 0 35px; text-align: center; }

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  max-width: 120px;
  margin: 0 auto 15px;
  color: var(--gold);
  font: 1.3rem/1 Georgia, serif;
}

.ornament::before, .ornament::after {
  width: 33px;
  height: 1px;
  background: #aa8c5a90;
  content: '';
}

.guide h1, .registration-page h1 {
  margin: 0;
  font: 500 clamp(2.18rem, 9.5vw, 3.15rem)/1.1 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}

.guide h1 span, .registration-page h1 span { display: block; }


.guide-heading p {
  margin: 16px 0 0;
  font: 600 1.28rem/1.2 var(--serif);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step { padding: 19px 0 21px; border-top: 1px solid #a1b0b7; text-align: center; }

.step h2 {
  margin: 0 0 8px;
  color: #354f63;
  font: 600 .72rem/1.35 'DM Sans', Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.step-detail {
  margin: 0;
  font: 600 1.54rem/1.16 var(--serif);
}

.venue-name span {
  display: block;
  margin-top: 5px;
  color: #465f71;
  font: 600 .78rem/1.3 'DM Sans', Arial, sans-serif;
  letter-spacing: .055em;
}

.venue-map {
  overflow: hidden;
  margin: 18px auto 0;
  padding: 5px;
  border: 1px solid #8ca1ae;
  border-radius: 8px;
  background: #fffdf7;
  box-shadow: 0 5px 15px #243f5615;
}

.venue-map iframe {
  display: block;
  width: 100%;
  height: clamp(184px, 54vw, 228px);
  border: 0;
  border-radius: 4px 4px 0 0;
  background: #e7edf1;
}

.venue-map figcaption {
  padding: 14px 9px 12px;
  border-top: 1px solid #b9c7ce;
}

.venue-map address {
  margin-top: 6px;
  color: #465f71;
  font: normal 400 .84rem/1.45 'DM Sans', Arial, sans-serif;
}

.venue-note {
  margin: 0;
  font: 700 1.25rem/1.15 var(--serif);
  text-wrap: balance;
}

.venue-map a {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 3px;
  font-size: .77rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

.registration-link, .registration-form button {
  position: relative;
  display: inline-flex;
  min-height: 53px;
  align-items: center;
  justify-content: center;
  padding: 12px clamp(14px, 6vw, 32px);
  border: 1px solid #233e56;
  border-radius: 28px;
  background: linear-gradient(150deg, #355d7d, #203f5b 72%);
  color: #fffaf1;
  box-shadow: 0 4px 10px #203a5129;
  font: 700 1.2rem/1.17 var(--serif);
  text-align: center;
  text-decoration: none;
  transition: box-shadow .22s ease, background-color .22s ease;
}

.registration-link::before, .registration-form button::before {
  position: absolute;
  inset: 4px;
  border: 1px solid #e2c8978c;
  border-radius: inherit;
  content: '';
  pointer-events: none;
}

.step-rsvp { padding-top: 26px; }
.registration-link {
  width: min(100%, 248px);
  margin-top: 9px;
}
.registration-link:hover, .registration-form button:hover {
  background: #365c7d;
  box-shadow: 0 5px 13px #203a5140;
}

.registration-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: max(36px, env(safe-area-inset-top)) clamp(26px, 9vw, 54px) max(38px, env(safe-area-inset-bottom));
  background: #fff url('./assets/fondo-registro.png') center / 100% 100% no-repeat;
}

.back-link {
  display: block;
  width: fit-content;
  margin-bottom: 24px;
  padding: 6px 7px;
  background: #fffffff2;
  font-size: .86rem;
  text-underline-offset: 3px;
}

.registration-page h1 {
  max-width: 320px;
  margin: 0 auto 29px;
  font-size: clamp(1.88rem, 8.6vw, 2.7rem);
  text-align: center;
}

.registration-panel {
  margin-top: clamp(12px, 4svh, 46px);
  padding: 29px clamp(17px, 5vw, 30px) 27px;
  border: 4px double #819aaa;
  border-radius: 38px 38px 8px 8px;
  background: #fffdf7f5;
  box-shadow: 0 8px 25px #27455c19;
}

.registration-form:not([hidden]) {
  display: grid;
  gap: 22px;
  text-align: left;
}

.name-field label {
  display: block;
  color: #465f71;
  font: 600 .73rem/1.3 'DM Sans', Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.name-field input {
  width: 100%;
  min-height: 46px;
  padding: 8px 1px 4px;
  border: 0;
  border-bottom: 1px solid #6e8797;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 1.3rem/1.2 var(--serif);
}

.name-field input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 1px var(--navy);
}

.registration-form button { justify-self: center; cursor: pointer; }
.registration-status { margin: 0 0 14px; color: var(--ink); line-height: 1.4; }

.registration-confirmation {
  margin: 0;
  padding: 24px clamp(12px, 5vw, 26px);
  border: 3px double #b29a70;
  border-radius: 5px;
  background: #f6f1e4;
  color: var(--ink);
  font: 600 clamp(1.65rem, 6vw, 2.15rem)/1.18 var(--serif);
  text-align: center;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .envelope-art, .envelope-flap, .letter, .wax-seal, .registration-link, .registration-form button { transition: none; }
}