/* Main wedding invitation entrance. */
body.invitation-open { overflow: hidden; }
.wedding-intro:not([open]) { display: none; }
.wedding-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: #553c2f;
  background: radial-gradient(ellipse at 50% 36%, #fffdf9 0%, #f4efe7 64%, #eae2d6 100%);
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(.22, 1, .36, 1);
}
.wedding-intro::backdrop { background: transparent; }
.wedding-intro img { height: auto; }
.intro-frame {
  position: absolute;
  inset: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  border: 1px solid rgba(119, 87, 57, .12);
  pointer-events: none;
}
.intro-skip {
  position: absolute;
  z-index: 20;
  top: max(1.35rem, env(safe-area-inset-top));
  right: 1.5rem;
  min-height: 44px;
  padding: .6rem .7rem;
  border: 0;
  background: transparent;
  color: #715948;
  font: 500 .67rem var(--sans, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.intro-skip span { margin-left: .35rem; }
.intro-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.5rem 2.5rem;
  transform: translateY(0) scale(1);
  transition: transform 1200ms cubic-bezier(.22, 1, .36, 1);
}
.intro-eyebrow {
  margin: 0 0 .5rem;
  font: 500 .62rem var(--sans, sans-serif);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.intro-title {
  margin: 0;
  color: #654431;
  font: 400 clamp(2.5rem, 5vw, 3.6rem)/1.2 var(--serif, serif);
  letter-spacing: -.04em;
}
.intro-title, .intro-eyebrow, .intro-hint { transition: opacity 300ms ease, transform 600ms ease; }
.envelope-scene {
  position: relative;
  width: min(580px, calc(100vw - 3.5rem), calc((100svh - 290px) * 1.6));
  aspect-ratio: 1.6;
  margin: 2.6rem 0 1.8rem;
  perspective: 1600px;
}
.wedding-intro[open] .envelope-scene { animation: intro-arrive 1000ms cubic-bezier(.22, 1, .36, 1); }
.wedding-intro.is-opening .envelope-scene { animation: none; }
.envelope-shadow {
  position: absolute;
  width: 82%;
  height: 9%;
  bottom: -9%;
  left: 9%;
  border-radius: 50%;
  background: rgba(84, 59, 36, .15);
  filter: blur(18px);
  transition: opacity 1200ms ease, transform 1200ms cubic-bezier(.22, 1, .36, 1);
}
.envelope {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  transform: translateY(0);
  transition: transform 1300ms cubic-bezier(.22, 1, .36, 1) 180ms;
}
.envelope-back {
  position: absolute;
  inset: 0;
  border: 1px solid #d6c9b6;
  border-radius: 4px;
  background: linear-gradient(145deg, #e8ddcc, #f3eadc 50%, #dfd1ba);
  box-shadow: 0 24px 60px rgba(82, 56, 29, .09), 0 2px 5px rgba(82, 56, 29, .05);
}
.invitation-card {
  position: absolute;
  z-index: 2;
  inset: 5% 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.25rem 1rem;
  border: 1px solid #cdbb9d;
  outline: 1px solid rgba(187, 165, 130, .3);
  outline-offset: -8px;
  background: #fffdf7;
  box-shadow: 0 8px 18px rgba(70, 49, 29, .1);
  transform: translateY(0);
  transition: transform 1250ms cubic-bezier(.22, 1, .36, 1) 420ms;
}
.invitation-card img { width: 28%; max-width: 112px; mix-blend-mode: multiply; }
.invitation-card p { margin: 0; text-align: center; }
.invitation-card-kicker, .invitation-card-date {
  font: 500 clamp(.43rem, .8vw, .61rem)/1.4 var(--sans, sans-serif);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.invitation-card-names { font: 400 clamp(1.2rem, 3.4vw, 2rem)/1.2 var(--serif, serif); }
.envelope-pocket {
  position: absolute;
  z-index: 4;
  inset: 0;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 4px 4px;
  background:
    linear-gradient(32deg, transparent 49.7%, rgba(158, 126, 86, .2) 50%, transparent 50.4%) bottom left / 50% 100% no-repeat,
    linear-gradient(-32deg, transparent 49.7%, rgba(158, 126, 86, .16) 50%, transparent 50.4%) bottom right / 50% 100% no-repeat,
    linear-gradient(160deg, #f6efe2, #eaddc7);
}
.envelope-flap {
  position: absolute;
  z-index: 6;
  top: 0;
  width: 100%;
  height: 57%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #faf4e9 4%, #ecdfc9 100%);
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform 1100ms cubic-bezier(.4, 0, .15, 1) 100ms, z-index 0s 560ms;
}
.intro-open {
  appearance: none;
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.intro-open:focus-visible { outline: 2px solid #7b5337; outline-offset: 12px; }
.envelope-seal {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 19%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(51, 22, 15, .55);
  border-radius: 49% 51% 48% 52% / 51% 47% 53% 49%;
  background: radial-gradient(circle at 35% 25%, #805141, #63392b 62%, #46251c);
  box-shadow: inset 0 0 0 4px rgba(210, 158, 117, .12), inset 0 0 0 6px rgba(45, 17, 10, .16), 0 5px 8px rgba(70, 37, 21, .22);
  transform: translate(-50%, -50%);
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1), opacity 280ms ease, box-shadow 350ms ease;
}
.envelope-seal img { width: 87%; filter: invert(1); mix-blend-mode: screen; opacity: .9; }
@media (hover: hover) {
  .intro-open:hover .envelope-seal { transform: translate(-50%, -53%) rotate(-4deg); box-shadow: inset 0 0 0 4px rgba(210, 158, 117, .16), inset 0 0 0 6px rgba(45, 17, 10, .16), 0 8px 12px rgba(70, 37, 21, .2); }
}
.intro-hint { margin: .5rem 0 0; font: 400 .77rem/1.5 var(--sans, sans-serif); letter-spacing: .04em; color: #6d5440; }
.intro-hint span { margin-left: .4rem; }
.intro-details { margin: 1.3rem 0 0; font: 500 .56rem/1.9 var(--sans, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: #88725d; text-align: center; }
.intro-details span { display: block; }
.intro-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wedding-intro.is-opening .envelope-seal { transform: translate(-50%, -65%) rotate(-8deg) scale(1.08); opacity: 0; }
.wedding-intro.is-opening .intro-open { visibility: hidden; transition: visibility 0s 300ms; }
.wedding-intro.is-opening .envelope-flap { transform: rotateX(180deg); z-index: 1; }
.wedding-intro.is-opening .invitation-card { transform: translateY(-53%); }
.wedding-intro.is-opening .envelope { transform: translateY(8%); }
.wedding-intro.is-opening .envelope-shadow { opacity: .55; transform: scaleX(.9); }
.wedding-intro.is-opening .intro-title, .wedding-intro.is-opening .intro-eyebrow, .wedding-intro.is-opening .intro-hint { opacity: 0; transform: translateY(-8px); }
.wedding-intro.is-leaving { opacity: 0; pointer-events: none; }
.wedding-intro.is-leaving .intro-content { transform: translateY(-20px) scale(1.025); }
  body.invitation-revealing .hero { animation: intro-page-reveal 1100ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes intro-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes intro-page-reveal {
  from { opacity: .65; transform: translateY(12px) scale(1.015); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.replay-invitation { padding: .2rem 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
@media (max-width: 540px) {
  .intro-content { padding-inline: 1rem; }
  .intro-eyebrow { font-size: .55rem; }
  .envelope-scene { margin-top: 2.2rem; }
  .invitation-card { gap: .35rem; padding: .8rem; }
  .envelope-seal { width: 23%; }
  .intro-details { letter-spacing: .13em; }
}
@media (max-height: 600px) {
  .intro-content { padding: 2.5rem 1rem 1.5rem; }
  .intro-title { display: none; }
  .intro-eyebrow { margin-bottom: .1rem; }
  .envelope-scene { width: min(440px, calc(100vw - 5rem), calc((100svh - 190px) * 1.35)); margin: 1rem 0 .7rem; }
  .intro-hint { margin-top: .3rem; font-size: .66rem; }
  .intro-details { margin-top: .4rem; font-size: .48rem; }
  .intro-details span { display: inline; margin-left: .6rem; }
  .invitation-card { gap: .25rem; padding: .65rem; }
  .invitation-card img { width: 22%; }
  .invitation-card-names { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wedding-intro { transition: opacity 150ms ease !important; }
  .wedding-intro *, .intro-open:hover .envelope-seal { transition: none !important; animation: none !important; }
  .wedding-intro.is-leaving .intro-content { transform: none; }
  body.invitation-revealing .hero { animation: none; }
}