.stationery-hero {
  --paper: #fffaf1;
  --burgundy: var(--wedding-wine);
  --olive: var(--wedding-moss);
  --text-serif: var(--wedding-serif);
  --detail-serif: var(--wedding-serif);
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  min-height: 100svh;
  padding: 0 24px 26px;
  color: var(--olive);
  text-align: center;
}

@media (forced-colors: none) {
  .stationery-hero :is(
    .stationery-navigation .stationery-label, .stationery-kicker, .stationery-invite-copy,
    .stationery-suite :not(.stationery-seal) > .stationery-label, .stationery-date time,
    .stationery-venue, .stationery-address, .stationery-voucher-title, .stationery-voucher-note,
    .stationery-message span, .stationery-countdown .stationery-label
  ) {
    opacity: .89;
    text-shadow: 0 0 .55px color-mix(in srgb, currentColor 24%, transparent);
  }
}

.stationery-kicker, .stationery-label {
  font: 600 .78rem/1.08 var(--detail-serif);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.stationery-navigation {
  position: relative;
  z-index: 10;
  justify-self: stretch;
  display: flex;
  align-items: center;
  gap: clamp(12px, 4vw, 28px);
  padding: 3px max(0px, calc(5vw - 24px));
}

.stationery-navigation .wedding-monogram { margin-inline-end: auto; }

.stationery-navigation .stationery-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--burgundy);
  text-decoration: none;
  text-underline-offset: .35em;
  white-space: nowrap;
}

.stationery-navigation .stationery-label:is(:hover, [aria-current]) { text-decoration: underline; }
.stationery-navigation a:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

.stationery-kicker {
  margin: 0;
  font-size: .9rem;
  color: var(--burgundy);
}

.stationery-content {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
  padding-top: 12px;
}

.stationery-heading { margin-bottom: 7px; }
.stationery-hint {
  margin: 4px 0 0;
  color: #7d756e;
  font: 400 clamp(.73rem, 2.55vw, .79rem)/1.25 var(--text-serif);
}

.stationery-suite {
  position: relative;
  isolation: isolate;
  width: min(100%, 550px);
  aspect-ratio: 1 / 1.12;
  container-type: inline-size;
}

.stationery-suite > * { position: absolute; }
.stationery-hero button { cursor: pointer; }
.stationery-hero button:focus-visible { outline: 2px solid #a82163; outline-offset: 4px; }

.stationery-envelope,
.stationery-envelope-flap {
  inset: 0 3% auto auto;
  width: 70%;
  height: auto;
  object-fit: contain;
  object-position: top right;
  transform: rotate(6deg);
  filter: hue-rotate(9deg) saturate(.85) brightness(.91) drop-shadow(3px 11px 13px #45371f36);
}

.stationery-envelope-flap {
  display: none;
  clip-path: inset(0 0 61.5%);
  transform-origin: 50% 38.5%;
  backface-visibility: hidden;
}

.stationery-closed {
  display: none;
  z-index: 8;
  inset: 19% 9% auto auto;
  width: 57%;
  height: auto;
  transform: rotate(6deg);
  transform-origin: 50% 10%;
  filter: drop-shadow(3px 9px 10px #45371f38);
  pointer-events: none;
}

.stationery-wax {
  inset: 2.5% 1.5% auto auto;
  z-index: 9;
  width: 10.374%;
  height: auto;
  transform: scaleY(.93);
  filter: drop-shadow(2px 3px 3px #43242b50);
  pointer-events: none;
  font: 400 25px 'Pinyon Script', 'Segoe Script', cursive;
}

.stationery-wax-shadow { fill: #650627; opacity: .76; }
.stationery-wax-highlight { fill: #eb638a; opacity: .7; }
.stationery-wax-lettering { fill: #aa063a; }

.is-preparing :is(.stationery-closed, .stationery-wax) { visibility: hidden; }
.is-opening .stationery-wax { animation: lift-wax 2800ms 1600ms ease-in-out both; }

.stationery-teo {
  z-index: 1;
  display: grid;
  align-items: center;
  inset: 2.7% auto auto 7%;
  width: 29%;
  aspect-ratio: .9;
  overflow: hidden;
  border: 1px solid #dfcdbd;
  border-radius: 48% 48% 8% 8% / 39% 39% 7% 7%;
  background: var(--wedding-linen), #fcf3e7;
  box-shadow: 0 5px 14px #45371f24;
  transform: rotate(-10deg);
}

.stationery-teo img {
  display: block;
  width: 100%;
  transform: scale(1.24);
  mix-blend-mode: multiply;
}

.stationery-invite {
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  inset: 20% 33% 20% 0;
  padding: 6cqw 13cqw 2cqw 5cqw;
  transform: rotate(-3deg);
}

.stationery-oval {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px #47392236);
}

.stationery-names {
  margin: .75cqw 0 2.3cqw;
  color: #541630;
  font: 400 11.1cqw/.94 'Mrs Saint Delafield', 'Segoe Script', cursive;
  -webkit-text-stroke: .017em currentColor;
  white-space: nowrap;
}

.stationery-names span { display: block; }
.stationery-names:focus { outline: none; }
.stationery-names em { font-size: .78em; font-style: normal; }

.stationery-invite-copy {
  margin: 1.3cqw 0 .5cqw;
  font: italic clamp(.62rem, 2.15cqw, .8rem)/1.18 Baskerville, 'Libre Baskerville', Georgia, serif;
}

.stationery-botanical-echo {
  inset: 8% -3% auto auto;
  width: 65%;
  opacity: .14;
  transform: rotate(16deg);
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse 24% 35% at 77% 29%, #000, transparent);
  pointer-events: none;
}

.stationery-invite::after, .stationery-details-paper::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--wedding-linen);
  mask: var(--linen-shape) center / 100% 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.stationery-invite { --linen-shape: url('/assets/papelaria-cartao-oval.webp'); }
.stationery-details-paper { --linen-shape: url('/assets/papelaria-quintal-relevo.webp'); }

.stationery-seal, .stationery-place, .stationery-instructions {
  color: inherit;
  font: inherit;
}

.stationery-seal {
  z-index: 6;
  display: grid;
  place-content: center;
  justify-items: center;
  inset: 43% 9.5% auto auto;
  width: 33%;
  aspect-ratio: 1;
  padding: 3% 3% 5%;
  border: 1px solid #d1ad9b;
  border-radius: 43% 57% 51% 49% / 52% 44% 56% 48%;
  background: var(--wedding-linen), var(--paper);
  box-shadow: -7px 6px 0 var(--wedding-wine), 0 8px 16px #49362738;
  color: var(--burgundy);
  transform: rotate(4deg);
}

.stationery-seal img {
  width: 12cqw;
  height: 11cqw;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.stationery-rsvp {
  font: 600 8.25cqw/1 var(--detail-serif);
  letter-spacing: .015em;
}

.stationery-seal .stationery-label {
  margin-top: .6cqw;
  font-size: clamp(.61rem, 2.12cqw, .84rem);
  line-height: 1.13;
  letter-spacing: .01em;
  text-transform: none;
  text-wrap: balance;
}

.stationery-instructions {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  right: 26%;
  bottom: -16px;
  width: max-content;
  min-width: min(100%, 134px);
  min-height: 44px;
  padding: 1.2cqw 2cqw;
  border: 1px solid #a67f70;
  border-radius: 3px 11px 4px 9px;
  background: var(--wedding-linen), #f7eadc;
  color: var(--burgundy);
  box-shadow: 0 5px 10px #4739222b;
  /* Counter the 2-degree tilt of the paper underneath. */
  transform: translateX(50%) rotate(-2deg);
}

.stationery-instructions img { width: 7cqw; height: 6cqw; object-fit: contain; }
.stationery-instructions .stationery-label { font-size: clamp(.66rem, 2.25cqw, .86rem); }

.stationery-details-paper {
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1.13fr;
  gap: 4%;
  inset: 73% 5% 0 3%;
  padding: 3.3cqw 11.5cqw 2.6cqw;
  color: var(--olive);
  transform: rotate(2deg);
}

.stationery-place-paper {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: saturate(.84) drop-shadow(0 6px 7px #47392236);
}

.stationery-venue-art {
  position: absolute;
  z-index: -1;
  inset: 16% auto auto 40%;
  width: 24%;
  height: 68%;
  object-fit: contain;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.stationery-place, .stationery-date {
  display: grid;
  align-content: center;
  justify-items: center;
}

.stationery-venue {
  margin: 0 0 .7cqw;
  font: 400 clamp(.92rem, 4.15cqw, 1.4rem)/1 var(--detail-serif);
}
.stationery-address { font: 400 clamp(.69rem, 2.25cqw, .88rem)/1.13 var(--detail-serif); }

.stationery-date .stationery-label { font-size: clamp(.61rem, 1.65cqw, .71rem); }
.stationery-date time { display: grid; justify-items: center; row-gap: .35cqw; margin-top: .65cqw; }
.stationery-date-day { font: 600 6.65cqw/.94 var(--detail-serif); }
.stationery-date-month { font: 600 clamp(.71rem, 2.66cqw, .98rem)/1.08 var(--detail-serif); }
.stationery-date-hour { font: 600 clamp(.68rem, 2.2cqw, .84rem)/1.06 var(--detail-serif); }

.stationery-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 10px;
  width: min(100%, 460px);
  margin-top: 31px;
}

.stationery-message {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  white-space: nowrap;
  padding: 7px 12px;
  border: 1px solid #c5a58c;
  border-radius: 3px 10px 3px 8px;
  background: var(--wedding-linen), #fff8ee;
  box-shadow: 0 4px 10px #4d322021;
  color: var(--burgundy);
  font: 600 clamp(.8rem, 3.6vw, 1.08rem)/1.18 var(--detail-serif);
}

.stationery-message svg { width: 20px; height: 20px; flex: none; }
.stationery-message:hover span { text-decoration: underline; text-underline-offset: .2em; }

.stationery-extra, .stationery-countdown {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 86px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--burgundy);
}

.stationery-extra {
  position: relative;
  isolation: isolate;
  padding: 9px 9px 8px;
}

.stationery-extra::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: center / 100% 100% no-repeat var(--tag-paper);
  filter: drop-shadow(0 4px 5px #4e37222e);
}

.stationery-extra img { width: 47px; height: 42px; object-fit: contain; mix-blend-mode: multiply; }
.stationery-slippers {
  position: absolute;
  z-index: 3;
  inset: 51% 0 auto auto;
  width: min(16.2%, 79px);
  min-height: 0;
  padding: 0;
  container-type: inline-size;
  transform: rotate(8deg);
}

.stationery-slippers::before { content: none; }
.stationery-slippers .stationery-voucher-art {
  display: block;
  position: relative;
  z-index: -1;
  width: 100%;
  height: auto;
  mix-blend-mode: normal;
  filter: drop-shadow(0 4px 6px #4e372238);
}

.stationery-voucher-title,
.stationery-voucher-note {
  position: absolute;
  inset-inline: 17% 15%;
  font: 600 14.5cqw/1.08 var(--detail-serif);
  text-align: center;
}

.stationery-voucher-title { top: 49%; }

.stationery-voucher-title em {
  display: block;
  margin-top: 3cqw;
  font: inherit;
}

.stationery-voucher-note {
  top: 70%;
  color: #716b64;
  font-size: 11.5cqw;
}

.stationery-slippers:hover .stationery-voucher-note {
  text-decoration: underline;
  text-underline-offset: .18em;
}
.stationery-gifts {
  position: absolute;
  z-index: 3;
  inset: 29% 0 auto auto;
  width: 26%;
  min-height: 0;
  aspect-ratio: 1.18;
  padding: 1.6cqw 1cqw 1.7cqw;
  border: 1px solid #d1b9a4;
  border-radius: 4px 13px 4px 5px;
  background: var(--wedding-linen), #fbefe2;
  box-shadow: 0 6px 14px #4e37223d;
  transform: rotate(13deg);
}
.stationery-gifts::before {
  inset: 4px;
  border: 1px solid #dec4ad;
  border-radius: 2px 9px 2px 3px;
  background: none;
  filter: none;
}
.stationery-gifts img { width: 17cqw; height: 13cqw; }
.stationery-extra .stationery-label { font-size: clamp(.58rem, 2.4vw, .75rem); letter-spacing: .04em; }
.stationery-countdown { min-height: 75px; }
.stationery-counts {
  display: flex;
  gap: clamp(6px, 2.2vw, 15px);
  margin-top: 5px;
  font: 600 clamp(.63rem, 2vw, .82rem)/1 var(--detail-serif);
}
.stationery-counts strong { display: block; font-size: clamp(1.03rem, 4.3vw, 1.75rem); font-variant-numeric: tabular-nums; }

.stationery-hero button:hover .stationery-label { text-decoration: underline; text-underline-offset: .18em; }






.modal-backdrop {
  background: #35281f65;
}

.modal-backdrop .modal {
  --dialog-burgundy: var(--wedding-wine);
  --dialog-ink: var(--wedding-moss);
  --dialog-text: var(--wedding-serif);
  --dialog-detail: var(--wedding-serif);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  border: 1px solid #ae887b;
  border-radius: 22px 8px 19px 7px;
  background: var(--wedding-linen), #fff8ee;
  box-shadow: 0 15px 35px #32241c4d;
  color: var(--dialog-ink);
  font-family: var(--dialog-text);
}

.modal-backdrop .modal h2 {
  color: var(--dialog-burgundy);
  font: 600 clamp(2.25rem, 6.5vw, 3rem)/.97 var(--dialog-detail);
}

.modal-backdrop .modal p {
  color: var(--dialog-ink);
  font: 400 1rem/1.48 var(--dialog-text);
}

.modal-backdrop .modal .kicker,
.modal-backdrop .modal label {
  color: var(--dialog-burgundy);
  font: 600 1rem/1.15 var(--dialog-detail);
}

.modal-backdrop .modal .kicker { letter-spacing: .13em; }
.modal-backdrop .modal .close { color: var(--dialog-burgundy); }
.modal-backdrop .modal :is(input, select) {
  border-color: #cbb19d;
  background: #fffaf2;
  color: var(--dialog-ink);
  font: 400 1rem/1.4 var(--dialog-text);
}

.modal-backdrop .modal :is(.primary, .secondary) {
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--dialog-burgundy);
  border-radius: 3px 10px 3px 10px;
  background: var(--wedding-linen), #fff8ee;
  color: var(--dialog-burgundy);
  font: 600 1.12rem/1.15 var(--dialog-detail);
}

.modal-backdrop .modal .primary {
  background: var(--dialog-burgundy);
  color: #fff8ee;
}

.modal-backdrop .modal .gift-payment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  text-decoration: none;
}

.modal-backdrop .mural-modal {
  max-height: calc(100dvh - 36px);
  overscroll-behavior: contain;
}

.modal-backdrop .mural-modal p { text-align: left; text-align-last: auto; }

.mural-modal textarea {
  width: 100%;
  min-height: 82px;
  padding: 10px;
  border: 1px solid #cbb19d;
  background: #fffaf2;
  color: var(--dialog-ink);
  font: 400 1rem/1.4 var(--dialog-text);
  resize: vertical;
}

.mural-modal textarea:focus-visible { outline: 2px solid #9f3865; outline-offset: 3px; }
.mural-replies { margin-top: 24px; border-top: 1px solid #d9c9ad; padding-top: 15px; }
.mural-replies h3 { margin: 0 0 10px; color: var(--dialog-burgundy); font: 600 1.5rem/1.15 var(--dialog-detail); }
.mural-replies ul { list-style: none; margin: 0; padding: 0; }
.mural-replies li { border-top: 1px solid #e3d3bd; padding: 10px 0; overflow-wrap: anywhere; }
.mural-replies li p { margin: 3px 0 0; white-space: pre-wrap; }
.mural-replies li strong { color: var(--dialog-burgundy); }

.invitation-choice {
  --detail-serif: var(--wedding-serif);
  width: min(86vw, 440px);
  max-width: none;
  padding: clamp(20px, 6vw, 37px);
  border: 1px solid #b99584;
  border-radius: 4px 18px 4px 13px;
  background: #fff8efeb;
  box-shadow: 0 16px 42px #3e282c38;
  color: var(--wedding-wine);
  text-align: center;
  font: 600 1.1rem/1.2 var(--wedding-serif);
}

.invitation-choice::backdrop {
  background: #fcf5eb88;
  backdrop-filter: blur(2px);
}

.invitation-choice-kicker { margin: 0; font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; }
.invitation-choice h2 { margin: 9px 0 22px; font: 600 clamp(1.65rem, 5.8vw, 2.35rem)/1.02 var(--wedding-serif); }
.invitation-choice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.invitation-choice-actions form { margin: 0; }
.invitation-choice-actions :is(button, a) {
  display: grid;
  place-content: center;
  width: 100%;
  min-height: 46px;
  padding: 7px 5px;
  border: 1px solid var(--wedding-wine);
  border-radius: 3px 8px;
  background: #fff8ef;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.invitation-choice-actions button { background: var(--wedding-wine); color: #fff8ef; }
.invitation-choice-actions :is(button, a):focus-visible { outline: 2px solid #a13365; outline-offset: 3px; }
.invitation-choice-actions :is(button, a):hover { text-decoration: underline; text-underline-offset: .15em; }
.invitation-choice-countdown { margin-top: 17px; border-top: 1px solid #dcc6b3; padding-top: 13px; }
.invitation-choice-countdown .stationery-counts { justify-content: center; gap: 14px; }

.modal-backdrop .modal :is(button, a, input, select):focus-visible {
  outline: 2px solid #9f3865;
  outline-offset: 3px;
}

.modal-backdrop .modal :is(.stationery-schedule, .stationery-uber) { text-align: center; }
.stationery-uber { display: block; text-decoration: none; }
#map-modal .modal :is(#google-maps, #waze, .stationery-uber) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 12px 14px;
  background: var(--dialog-burgundy);
  color: #fff8ee;
  border: 1px solid var(--dialog-burgundy);
  font: 600 1rem/1.25 var(--dialog-detail);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.modal-backdrop .modal .arrival-animation {
  display: block;
  width: min(46vw, 180px);
  height: auto;
  margin: 10px auto 18px;
  object-fit: contain;
}
.modal-backdrop .modal .rsvp-animation {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 10px auto 18px;
  object-fit: contain;
}
.modal-backdrop .modal .koi-animation {
  display: block;
  width: min(48vw, 180px);
  height: auto;
  margin: -12px auto 0;
  object-fit: contain;
}
.modal-backdrop .modal .slipper-animation {
  display: block;
  width: min(52vw, 180px);
  height: auto;
  margin: 10px auto 18px;
  object-fit: contain;
}
.modal-backdrop .modal .guestbook-animation {
  display: block;
  width: min(44vw, 150px);
  height: auto;
  margin: 4px auto 18px;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop .modal :is(.arrival-animation, .rsvp-animation, .koi-animation, .slipper-animation, .guestbook-animation) { display: none; }
}

.stationery-suite > :is(.stationery-teo, .stationery-invite, .stationery-seal, .stationery-details-paper, .stationery-extra),
.stationery-instructions {
  transition: translate 230ms ease, scale 230ms ease, filter 230ms ease;
}

.stationery-suite > :is(.stationery-teo, .stationery-invite, .stationery-seal, .stationery-details-paper, .stationery-extra) {
  translate: var(--paper-drift-x, 0px) var(--paper-lift, 0px);
  filter: drop-shadow(var(--paper-shadow-x, 3px) var(--paper-shadow-y, 7px) var(--paper-shadow-blur, 7px) #49312636);
}
.stationery-teo, .stationery-gifts { box-shadow: none; }
.stationery-seal { box-shadow: -7px 6px 0 var(--wedding-wine); }
.stationery-place-paper { filter: saturate(.84); }
.stationery-slippers .stationery-voucher-art { filter: none; }

.stationery-suite > :is(.stationery-seal:focus-visible, .stationery-details-paper:has(:focus-visible), .stationery-extra:focus-visible) {
  z-index: 12;
  --paper-lift: -8px;
  --paper-shadow-y: 15px;
  --paper-shadow-blur: 12px;
  scale: 1.07;
}

@media (hover: hover) and (pointer: fine) {
  .stationery-suite > :is(.stationery-teo, .stationery-invite, .stationery-seal, .stationery-details-paper, .stationery-extra):hover {
    z-index: 12;
    --paper-lift: -10px;
    --paper-shadow-y: 18px;
    --paper-shadow-blur: 13px;
    scale: 1.12;
  }

  .stationery-instructions:hover {
    translate: 0 -3px;
    filter: drop-shadow(0 5px 5px #49312632);
  }
}

.stationery-hero :is(.stationery-seal, .stationery-extra, .stationery-instructions):active {
  scale: .98;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .stationery-suite { width: min(100%, 630px, max(460px, calc(100svh - 205px))); }
  .stationery-content { padding-block: 16px 12px; }
}

@media (hover: none), (pointer: coarse) {
  .stationery-suite > :is(.stationery-seal, .stationery-details-paper:has(button:active), .stationery-extra):active {
    --paper-lift: -4px;
    --paper-shadow-y: 12px;
    --paper-shadow-blur: 10px;
    scale: 1.025;
    z-index: 12;
  }
}

@media (max-width: 359px) {
  .stationery-navigation { gap: 9px; padding-inline: 0; }
  .stationery-navigation .stationery-label { font-size: .61rem; letter-spacing: .07em; }
  .stationery-message { padding-inline: 8px; gap: 5px; }
  .stationery-tray { gap: 6px; }
}

.is-preparing :is([data-reveal-paper], .stationery-envelope, .stationery-tray) {
  visibility: hidden;
}

:is(.is-preparing, .is-opening) .stationery-closed { display: block; }
.stationery-opening-envelope { inset: 0; z-index: 8; pointer-events: none; }
.stationery-opening-envelope > :is(.stationery-closed, .stationery-wax) { position: absolute; }
.is-opening .stationery-opening-envelope {
  transform-origin: 62% 35%;
  animation: envelope-camera 1600ms cubic-bezier(.25,.65,.25,1) both;
}
@keyframes envelope-camera {
  0%, 24% { transform: translate(-12%, 10%) rotate(-6deg) scale(1.65); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}
.is-opening .stationery-closed {
  animation: closed-envelope 3200ms 1600ms ease-in-out both, release-wax 3350ms step-end forwards;
}
.is-opening .stationery-envelope { animation: envelope-pocket 1500ms 3300ms ease both; clip-path: inset(38.5% 0 0); }
.is-opening .stationery-envelope-flap { display: block; animation: unfold-envelope 1700ms 3300ms cubic-bezier(.23,.74,.25,1) both; }
.is-opening [data-reveal-paper] {
  animation: release-paper 800ms var(--reveal-delay) cubic-bezier(.2,.67,.24,1) both;
}
.is-opening :is([data-reveal-paper], .stationery-tray) { pointer-events: none; }
.is-opening .stationery-tray { animation: stationery-fade 450ms 7500ms both; }
.stationery-skip-opening { position: absolute; z-index: 25; right: 20px; bottom: 14px; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--wedding-wine); font: 400 13px var(--wedding-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@keyframes closed-envelope {
  0%, 55% { opacity: 1; transform: perspective(640px) rotate(6deg) rotateX(0); }
  100% { opacity: 0; transform: perspective(640px) rotate(6deg) rotateX(-48deg); }
}

@keyframes release-wax {
  to { mask-image: radial-gradient(ellipse 9% 14% at 49.3% 65.1%, transparent 95%, #000 100%); }
}

@keyframes lift-wax {
  0%, 12%, 29%, 45% {
    translate: var(--wax-x) var(--wax-y);
    transform: rotate(6deg) scale(1.06);
    filter: none;
  }
  20%, 37% { translate: calc(var(--wax-x) - 2px) calc(var(--wax-y) - 3px); transform: perspective(320px) rotate(3deg) rotateX(14deg) scale(1.03, .97); filter: drop-shadow(0 2px 2px #49312640); }
  57% { translate: var(--wax-x) calc(var(--wax-y) - 7px); transform: perspective(320px) rotate(9deg) rotateX(24deg) scale(1.03); filter: drop-shadow(0 7px 5px #49312655); }
  68% { translate: var(--wax-x) calc(var(--wax-y) - 22px); transform: rotate(-8deg) scale(1.07); filter: drop-shadow(0 16px 10px #49312645); }
  86% { transform: rotate(3deg) scale(1.04, .95); }
  100% { translate: 0 0; transform: scaleY(.93); }
}

@keyframes envelope-pocket {
  0%, 22% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes unfold-envelope {
  0%, 18% { transform: perspective(680px) rotate(6deg) rotateX(145deg); }
  100% { transform: perspective(680px) rotate(6deg) rotateX(0); }
}

@keyframes release-paper {
  0% { opacity: 0; visibility: hidden; translate: var(--from-x) var(--from-y); scale: .48; }
  18% { opacity: 1; visibility: visible; scale: .6; }
  52% { opacity: 1; visibility: visible; translate: calc(var(--from-x) * .55) calc(var(--from-y) - 60px); scale: .82; }
  100% { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
}

@keyframes stationery-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 520px) {
  .stationery-hero { padding: 0 13px 12px; }
  .stationery-navigation { gap: clamp(8px, 3.2vw, 16px); padding-inline: 7px; }
  .stationery-navigation .stationery-label { font-size: clamp(.68rem, 3.05vw, .78rem); }
  .stationery-content { padding-top: 8px; }
  .stationery-suite { aspect-ratio: 1 / 1.27; }
  .stationery-botanical-echo { right: 13%; }
  .stationery-tray { width: min(100%, 335px); margin-top: 26px; }
}

@media (prefers-reduced-motion: no-preference) {
  .stationery-hero .stationery-suite > .is-touch-raised,
  .stationery-hero .stationery-message.is-touch-raised {
    animation: none !important;
    z-index: 18 !important;
    translate: 0 -7px !important;
    scale: 1.065 !important;
    filter: drop-shadow(2px 18px 12px #49312655) !important;
    transition: translate 240ms ease, scale 240ms ease, filter 240ms ease;
  }
}

/* Small screens: a slow drift, independent of the envelope opening. */
@keyframes paper-float {
  0%, 100% {
    translate: 0 0;
    filter: drop-shadow(3px 7px 7px #49312636);
  }
  50% {
    translate: .5px -3px;
    filter: drop-shadow(2px 11px 9px #4931262e);
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .stationery-hero:not(.is-preparing):not(.is-opening) .stationery-suite > :is(.stationery-teo, .stationery-seal, .stationery-gifts) {
    animation: paper-float var(--float-duration, 7s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
  }
  .stationery-teo { --float-duration: 8s; --float-delay: -2s; }
  .stationery-seal { --float-duration: 7s; --float-delay: -4s; }
  .stationery-gifts { --float-duration: 9s; --float-delay: -6s; }
  main[inert] .stationery-suite > :is(.stationery-teo, .stationery-seal, .stationery-gifts),
  body:has(.invitation-choice[open]) .stationery-suite > :is(.stationery-teo, .stationery-seal, .stationery-gifts) {
    animation-play-state: paused !important;
  }
  .stationery-hero:not(.is-preparing):not(.is-opening) .stationery-suite > :is(.stationery-seal, .stationery-gifts):is(:active, :focus-visible) {
    animation: none;
  }
}
@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .stationery-hero:not(.is-preparing):not(.is-opening) .stationery-suite > :is(.stationery-teo, .stationery-seal, .stationery-gifts):hover { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stationery-hero * {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
  .stationery-suite > :is(.stationery-teo, .stationery-invite, .stationery-seal, .stationery-details-paper, .stationery-extra) {
    filter: drop-shadow(3px 7px 7px #49312636);
  }
}