:root {
  --app-width: 480px;
  --primary: #b7004f;
  --tertiary: #9c53cd;
  --cover-texture-image: none;
  --envelope-back-scale: 1.018;
  --envelope-front-scale: 1.018;
  --envelope-flap-width: 94.8%;
  --envelope-flap-offset-y: -4.6%;
  --envelope-paper-open-y: -164px;
  --envelope-front-open-y: -6px;
  --cover-base-motion-duration: 16s;
  --cover-top-motion-duration: 11s;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(188, 156, 112, 0.12), transparent 30%),
    radial-gradient(circle at 20% 20%, rgba(143, 111, 86, 0.08), transparent 28%),
    #fcfaf7;
  color: #2f2624;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

button {
  border: 0;
  padding: 0;
  font: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: wait;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined.filled {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.entry-screen {
  width: min(100%, var(--app-width));
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #fcfaf7;
  background-image:
    var(--cover-texture-image),
    radial-gradient(circle at 70% 16%, rgba(188, 156, 112, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(248, 242, 235, 0.72));
  background-size: cover, 100% 100%, 100% 100%;
  background-position: center center, center center, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: multiply, normal, normal;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
}

.cover-unavailable {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 28px;
}

.cover-unavailable-card {
  width: 100%;
  padding: 34px 28px;
  border: 1px solid rgba(143, 111, 86, 0.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 242, 235, 0.97));
  box-shadow: 0 28px 60px rgba(80, 61, 48, 0.08);
  text-align: center;
}

.cover-unavailable-card p,
.cover-unavailable-card h1,
.cover-unavailable-card span {
  margin: 0;
}

.cover-unavailable-card p {
  color: #8f6f56;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cover-unavailable-card h1 {
  margin-top: 14px;
  color: #4d3f3b;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.06;
}

.cover-unavailable-card span {
  display: block;
  margin-top: 14px;
  color: #6f5f57;
  font-size: 15px;
  line-height: 1.55;
}

.entry-screen::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 1;
  border: 1px solid rgba(143, 111, 86, 0.12);
  border-radius: 24px;
  pointer-events: none;
}

.entry-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.96), rgba(255, 250, 242, 0.72) 28%, rgba(248, 242, 235, 0.18) 58%, transparent 76%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.12), rgba(255, 253, 249, 0.94));
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
}

.entry-screen.opening {
  pointer-events: none;
}

.entry-screen.revealing::after {
  animation: cover-cinematic-reveal 1080ms cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.entry-content {
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 18px 30px;
}

.entry-screen.revealing .entry-content {
  animation: cover-content-depart 940ms cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.entry-copy {
  text-align: center;
  animation: entry-rise 700ms ease both;
  position: relative;
  z-index: 10;
  margin-bottom: -112px;
}

.entry-copy h2 {
  margin: 0;
  max-width: 290px;
  margin-inline: auto;
  color: #103f47;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: clamp(28px, 7vw, 40px);
  font-style: italic;
  font-weight: 700;
  line-height: 0.95;
  text-transform: uppercase;
}

.guest-greeting {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 8px 16px;
  border: 1px solid rgba(16, 63, 71, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #29525a;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.1;
}

.guest-greeting strong {
  color: #103f47;
  font-size: 16px;
  font-weight: 700;
}

.envelope-stage {
  width: min(100%, 420px);
  height: clamp(430px, 60vh, 620px);
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  perspective: 1100px;
  animation: envelope-float 4.8s ease-in-out infinite;
}

.envelope {
  width: 100%;
  height: 100%;
  position: relative;
  filter: drop-shadow(0 24px 34px rgba(92, 64, 44, 0.14));
  transform-style: preserve-3d;
  transition: transform 700ms ease;
}

.custom-envelope-art {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 420ms ease, transform 700ms ease;
}

.custom-envelope-back,
.custom-envelope-body,
.custom-envelope-flap {
  position: absolute;
  pointer-events: none;
}

.custom-envelope-back {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--envelope-back-scale));
  transform-origin: center center;
  transition: opacity 420ms ease, transform 700ms ease;
}

.custom-envelope-body {
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--envelope-front-scale));
  transform-origin: center center;
  transition: opacity 420ms ease, transform 700ms ease;
}

.custom-envelope-flap {
  top: 0;
  left: 50%;
  z-index: 5;
  width: var(--envelope-flap-width);
  height: auto;
  transform: translateX(-50%) translateY(var(--envelope-flap-offset-y));
  transform-origin: 50% 0%;
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.1, 1), opacity 380ms ease;
}

.envelope.has-custom-art .envelope-back,
.envelope.has-custom-art .envelope-left,
.envelope.has-custom-art .envelope-right,
.envelope.has-custom-art .envelope-bottom,
.envelope.has-custom-art .envelope-flap,
.envelope.has-custom-back .envelope-back,
.envelope.has-custom-body .envelope-back,
.envelope.has-custom-body .envelope-left,
.envelope.has-custom-body .envelope-right,
.envelope.has-custom-body .envelope-bottom,
.envelope.has-custom-flap .envelope-flap {
  opacity: 0;
}

.envelope.has-custom-back .custom-envelope-art,
.envelope.has-custom-body .custom-envelope-art,
.envelope.has-custom-flap .custom-envelope-art {
  opacity: 0;
}

.envelope-back,
.envelope-left,
.envelope-right,
.envelope-bottom,
.envelope-flap {
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.envelope-back {
  z-index: 1;
  background: #fffdf9;
  border: 1px solid #e5ddd1;
}

.envelope-left {
  z-index: 4;
  background: linear-gradient(35deg, #fffdf9 0 50%, transparent 50.3%);
}

.envelope-right {
  z-index: 4;
  background: linear-gradient(-35deg, #fffdf9 0 50%, transparent 50.3%);
}

.envelope-bottom {
  z-index: 4;
  background: linear-gradient(to top, #fffdf9 0 50%, transparent 50.4%);
}

.envelope-flap {
  z-index: 5;
  clip-path: polygon(0 0, 100% 0, 50% 56%);
  transform-origin: top center;
  background: #f3ede5;
  border: 1px solid #ddd2c4;
  box-shadow: 0 7px 18px rgba(92, 64, 44, 0.08);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.1, 1);
}

.letter-card {
  width: calc(100% - 42px);
  height: 78%;
  position: absolute;
  left: 21px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 24px 22px;
  border: 1px solid rgba(143, 111, 86, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(143, 111, 86, 0.12) 0 1px, transparent 1px) 18px 18px / 34px 34px no-repeat,
    linear-gradient(315deg, rgba(183, 154, 115, 0.12) 0 1px, transparent 1px) calc(100% - 18px) calc(100% - 18px) / 34px 34px no-repeat,
    radial-gradient(circle at 17% 18%, rgba(183, 154, 115, 0.08), transparent 22%),
    radial-gradient(circle at 84% 82%, rgba(143, 111, 86, 0.08), transparent 25%),
    linear-gradient(180deg, #fffefd, #fbf6ef);
  color: rgba(143, 111, 86, 0.25);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.54);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.1, 1), opacity 600ms ease, z-index 0ms linear 380ms;
}

.letter-card::before,
.letter-card::after {
  content: "";
  width: 88px;
  height: 88px;
  position: absolute;
  pointer-events: none;
  opacity: 0.58;
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--primary) 32%, white) 0 12%, transparent 13%) 28px 8px / 22px 30px no-repeat,
    radial-gradient(ellipse at 100% 50%, color-mix(in srgb, var(--primary) 26%, white) 0 16%, transparent 17%) 8px 28px / 30px 22px no-repeat,
    radial-gradient(ellipse at 0 50%, color-mix(in srgb, var(--secondary) 24%, white) 0 15%, transparent 16%) 48px 34px / 30px 22px no-repeat,
    linear-gradient(135deg, transparent 46%, color-mix(in srgb, var(--primary) 34%, white) 47% 52%, transparent 53%);
}

.letter-card::before {
  top: -22px;
  left: -22px;
  transform: rotate(-18deg);
}

.letter-card::after {
  right: -22px;
  bottom: -22px;
  transform: rotate(162deg);
}

.letter-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #8f6f56;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(25px, 7vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
}

.letter-card small {
  position: relative;
  z-index: 1;
  width: min(100%, 230px);
  color: #6b5a55;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
}

.letter-card small strong {
  display: block;
  margin-top: 5px;
  color: #8f6f56;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(18px, 5.3vw, 25px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
  overflow-wrap: anywhere;
}

.wax-seal {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 4px solid #7b5f49;
  border-radius: 50%;
  background: linear-gradient(135deg, #a88364, #8f6f56);
  box-shadow: 0 9px 18px rgba(92, 64, 44, 0.22), inset 0 2px 4px rgba(255, 255, 255, 0.18);
  transition: transform 520ms ease, opacity 380ms ease;
}

.wax-seal span {
  color: white;
  font-size: 24px;
  letter-spacing: 0.08em;
}

.custom-seal-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wax-seal.has-custom-art {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wax-seal.has-custom-art span {
  opacity: 0;
}

.entry-screen.opening .envelope {
  transform: translateY(-10px) rotateX(5deg);
}

.entry-screen.revealing .envelope-stage {
  animation: cover-envelope-depart 980ms cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.entry-screen.opening .custom-envelope-art {
  opacity: 0.18;
  transform: translateY(-8px);
}

.entry-screen.opening .custom-envelope-body {
  z-index: 6;
  transform: translateY(var(--envelope-front-open-y)) scale(var(--envelope-front-scale));
}

.entry-screen.opening .custom-envelope-back {
  z-index: 3;
  transform: scale(var(--envelope-back-scale));
}

.entry-screen.opening .envelope-left,
.entry-screen.opening .envelope-right,
.entry-screen.opening .envelope-bottom,
.entry-screen.opening .envelope-back {
  z-index: 6;
}

.entry-screen.opening .envelope-flap {
  z-index: 1;
  transform: rotateX(178deg);
}

.entry-screen.opening .custom-envelope-flap {
  z-index: 1;
  opacity: 0.98;
  transform: translateX(-50%) translateY(var(--envelope-flap-offset-y)) rotateX(178deg);
}

.entry-screen.opening .letter-card {
  z-index: 5;
  opacity: 1;
  transform: translateY(var(--envelope-paper-open-y)) scale(1.02);
  transition-delay: 260ms, 260ms, 0ms;
}

.entry-screen.opening .wax-seal {
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35) rotate(28deg);
}

.sparkle {
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  background: rgba(168, 131, 100, 0.22);
  opacity: 0;
}

.sparkle-one { top: 8%; right: 12%; }
.sparkle-two { top: 42%; left: -5%; }
.sparkle-three { right: 3%; bottom: 8%; }

.entry-screen.opening .sparkle {
  animation: sparkle-pop 850ms ease forwards;
}

.entry-screen.opening .sparkle-two { animation-delay: 120ms; }
.entry-screen.opening .sparkle-three { animation-delay: 240ms; }

.entry-footer {
  display: grid;
  gap: 24px;
  justify-items: center;
  animation: entry-rise 700ms ease 160ms both;
  position: relative;
  z-index: 10;
  margin-top: -34px;
}

.open-invitation {
  width: min(100%, 360px);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #a88364, #8f6f56);
  color: white;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(92, 64, 44, 0.22);
}

.open-invitation:disabled {
  opacity: 0.82;
}

.rsvp-date {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #8a766d;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rsvp-date i {
  width: 54px;
  height: 1px;
  background: rgba(143, 111, 86, 0.22);
}

.rsvp-date span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.entry-dots {
  display: flex;
  gap: 7px;
}

.entry-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2e2e2;
}

.entry-dots .active {
  background: var(--primary);
}

@keyframes entry-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes envelope-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes sparkle-pop {
  0% { opacity: 0; transform: scale(0.4); }
  45% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(2.3); }
}

@keyframes cover-cinematic-reveal {
  0% {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(10px);
  }

  42% {
    opacity: 0.72;
    transform: scale(1.02);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1.18);
    filter: blur(0);
  }
}

@keyframes cover-content-depart {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(1.035) translateY(-14px);
    filter: blur(8px);
  }
}

@keyframes cover-envelope-depart {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-18px) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 360px) {
  .entry-content,
  .entry-nav {
    padding-inline: 18px;
  }

  .wax-seal {
    width: 68px;
    height: 68px;
  }

  .wax-seal span {
    font-size: 20px;
  }
}

.entry-content {
  padding: 34px 26px 34px;
}

.entry-copy,
.entry-footer {
  position: relative;
  z-index: 10;
}

.entry-copy h2 {
  color: rgba(42, 50, 57, 0.74);
  font-size: clamp(24px, 6vw, 34px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.guest-greeting {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(84, 104, 118, 0.16);
  color: rgba(44, 58, 69, 0.72);
}

.guest-greeting strong {
  color: rgba(43, 71, 91, 0.88);
}

.envelope-stage {
  width: 100%;
  max-width: none;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  aspect-ratio: auto;
  animation: none;
  perspective: 1300px;
}

.envelope {
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: none;
  transform: translateZ(0);
}

.cover-base-layer,
.cover-top-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cover-base-layer {
  z-index: 1;
  background:
    linear-gradient(135deg, rgba(210, 223, 228, 0.42), rgba(255, 255, 255, 0.12) 52%, rgba(255, 255, 255, 0.96) 52.2%),
    #fbfbfa;
  will-change: transform, filter;
  transition:
    transform 1320ms cubic-bezier(0.18, 0.86, 0.18, 1),
    opacity 720ms ease,
    filter 720ms ease;
}

.cover-base-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(142deg, transparent 0 55%, rgba(0, 0, 0, 0.14) 55.2%, transparent 58.4%),
    radial-gradient(circle at 78% 18%, rgba(110, 128, 142, 0.11), transparent 32%);
  opacity: 0.44;
}

.cover-top-layer {
  z-index: 5;
  clip-path: polygon(0 0, 100% 0, 100% 34%, 0 100%);
  transform-origin: 54% 42%;
  background:
    linear-gradient(135deg, rgba(240, 247, 248, 0.78), rgba(205, 221, 228, 0.86)),
    repeating-linear-gradient(32deg, rgba(255, 255, 255, 0.16) 0 2px, rgba(122, 149, 163, 0.08) 2px 4px);
  box-shadow: 0 18px 32px rgba(37, 43, 48, 0.2);
  will-change: transform, filter;
  transition:
    transform 1320ms cubic-bezier(0.18, 0.86, 0.18, 1),
    opacity 720ms ease,
    filter 720ms ease,
    box-shadow 720ms ease;
}

.cover-top-layer::before {
  content: "";
  position: absolute;
  left: -20%;
  top: 56%;
  width: 148%;
  height: 34px;
  background: linear-gradient(180deg, rgba(24, 35, 44, 0.22), transparent);
  filter: blur(6px);
  transform: rotate(-37deg);
  transform-origin: center;
  opacity: 0.46;
}

.cover-top-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 28% 22%, rgba(255, 255, 255, 0.52), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.44), transparent 62%);
  mix-blend-mode: screen;
}

.custom-cover-base,
.custom-cover-top {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.custom-cover-base {
  opacity: 0.92;
}

.custom-cover-top {
  filter: saturate(0.96) brightness(1.02);
}

.entry-screen[data-cover-base-motion="drift"] .custom-cover-base {
  animation: cover-base-drift var(--cover-base-motion-duration) ease-in-out infinite alternate;
}

.entry-screen[data-cover-base-motion="zoom"] .custom-cover-base {
  animation: cover-base-zoom calc(var(--cover-base-motion-duration) + 4s) ease-in-out infinite alternate;
}

.entry-screen[data-cover-top-motion="parallax"] .custom-cover-top {
  animation: cover-top-parallax var(--cover-top-motion-duration) ease-in-out infinite alternate;
}

.entry-screen[data-cover-top-motion="sweep"] .custom-cover-top {
  animation: cover-top-sweep calc(var(--cover-top-motion-duration) + 2s) ease-in-out infinite alternate;
}

.custom-envelope-art,
.custom-envelope-back,
.custom-envelope-body,
.custom-envelope-flap,
.envelope-back,
.envelope-left,
.envelope-right,
.envelope-bottom,
.envelope-flap {
  display: none;
}

.letter-card {
  width: min(68%, 270px);
  height: auto;
  min-height: 136px;
  left: 50%;
  bottom: 22%;
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, 20px) scale(0.96);
  border-color: rgba(74, 91, 105, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 46px rgba(31, 39, 46, 0.08);
  backdrop-filter: blur(12px);
  display: none;
}

.letter-card::before,
.letter-card::after {
  display: none;
}

.letter-card p,
.letter-card small strong {
  color: rgba(38, 62, 78, 0.88);
}

.wax-seal {
  width: clamp(116px, 30vw, 152px);
  height: clamp(116px, 30vw, 152px);
  top: 57%;
  left: 48%;
  z-index: 8;
  border: 0;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.56), transparent 23%),
    radial-gradient(circle at 50% 55%, #7d9ab0, #4b6a82 66%, #344f63);
  box-shadow:
    0 18px 30px rgba(22, 31, 39, 0.24),
    inset 0 0 0 5px rgba(255, 255, 255, 0.16),
    inset 0 0 0 12px rgba(35, 58, 75, 0.18);
  will-change: transform, opacity, filter;
  transition:
    transform 1320ms cubic-bezier(0.18, 0.86, 0.18, 1),
    opacity 720ms ease,
    filter 720ms ease;
}

.wax-seal::before,
.wax-seal::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 2px solid rgba(240, 248, 252, 0.52);
}

.wax-seal::after {
  inset: 17%;
  border-color: rgba(25, 45, 60, 0.22);
}

.wax-seal span {
  z-index: 2;
  color: rgba(245, 250, 252, 0.92);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 8vw, 42px);
  letter-spacing: -0.03em;
  text-shadow: 0 2px 2px rgba(20, 34, 44, 0.28);
}

.wax-seal.has-custom-art::before,
.wax-seal.has-custom-art::after {
  display: none;
}

.custom-seal-art {
  filter: drop-shadow(0 14px 18px rgba(22, 31, 39, 0.24));
}

.open-invitation {
  width: min(100%, 268px);
  min-height: 64px;
  border-radius: 999px;
  background: #33dceb;
  color: #103f47;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(51, 220, 235, 0.24);
}

.rsvp-date {
  color: #1b4a52;
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-screen.opening .cover-top-layer {
  opacity: 0.94;
  filter: brightness(1.02) drop-shadow(0 34px 34px rgba(20, 29, 37, 0.18));
  box-shadow: 0 34px 58px rgba(23, 35, 45, 0.2);
  transform: translate3d(-28%, -34%, 88px) rotateZ(-10deg) rotateX(13deg) scale(1.04);
}

.entry-screen.opening .cover-base-layer {
  filter: brightness(1.01);
  transform: translate3d(14%, 18%, 0) scale(1.05);
}

.entry-screen[data-envelope-animation="dramatic"].opening .cover-top-layer {
  transform: translate3d(-34%, -42%, 104px) rotateZ(-13deg) rotateX(16deg) scale(1.06);
}

.entry-screen[data-envelope-animation="dramatic"].opening .cover-base-layer {
  transform: translate3d(18%, 22%, 0) scale(1.07);
}

.entry-screen[data-envelope-animation="float"].opening .cover-top-layer {
  transform: translate3d(-18%, -24%, 60px) rotateZ(-6deg) rotateX(10deg) scale(1.02);
}

.entry-screen[data-envelope-animation="float"].opening .cover-base-layer {
  transform: translate3d(10%, 12%, 0) scale(1.03);
}

.entry-screen.opening .letter-card {
  opacity: 0;
  transform: translate(-50%, 20px) scale(0.96);
  transition-delay: 0ms;
}

.entry-screen[data-envelope-animation="dramatic"].opening .letter-card {
  opacity: 0;
  transform: translate(-50%, 20px) scale(0.96);
}

.entry-screen[data-envelope-animation="float"].opening .letter-card {
  opacity: 0;
  transform: translate(-50%, 20px) scale(0.96);
}

.entry-screen.opening .wax-seal {
  opacity: 0.98;
  filter: drop-shadow(0 22px 22px rgba(22, 31, 39, 0.22));
  transform: translate(calc(-50% - 94px), calc(-50% - 126px)) scale(0.96) rotate(-10deg);
}

.entry-screen[data-envelope-animation="dramatic"].opening .wax-seal {
  transform: translate(calc(-50% - 112px), calc(-50% - 146px)) scale(0.92) rotate(-13deg);
}

.entry-screen[data-envelope-animation="float"].opening .wax-seal {
  transform: translate(calc(-50% - 72px), calc(-50% - 102px)) scale(0.98) rotate(-8deg);
}

.entry-screen.revealing .envelope-stage {
  animation: cover-paper-reveal-depart 980ms cubic-bezier(0.16, 0.86, 0.22, 1) both;
}

.entry-screen.revealing .cover-top-layer {
  opacity: 0.18;
  filter: blur(2px);
  transform: translate3d(-40%, -48%, 94px) rotateZ(-14deg) rotateX(17deg) scale(1.08);
}

.entry-screen.revealing .cover-base-layer {
  opacity: 0.86;
  filter: blur(1px);
  transform: translate3d(20%, 24%, 0) scale(1.08);
}

.entry-screen.revealing .wax-seal {
  opacity: 0;
  filter: blur(2px);
  transform: translate(calc(-50% - 128px), calc(-50% - 170px)) scale(0.88) rotate(-15deg);
}

@keyframes cover-paper-reveal-depart {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0.74;
    transform: scale(1.015);
  }
}

@keyframes cover-base-drift {
  0% {
    transform: translate3d(-2%, 0, 0) scale(1.02);
  }

  100% {
    transform: translate3d(2%, -1.5%, 0) scale(1.06);
  }
}

@keyframes cover-base-zoom {
  0% {
    transform: scale(1.02);
    filter: saturate(0.96);
  }

  100% {
    transform: scale(1.11);
    filter: saturate(1.04);
  }
}

@keyframes cover-top-parallax {
  0% {
    transform: translate3d(-1.4%, 0, 0) rotate(0deg) scale(1.01);
  }

  100% {
    transform: translate3d(1.2%, -2.2%, 0) rotate(-1.4deg) scale(1.05);
  }
}

@keyframes cover-top-sweep {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.01);
    filter: saturate(0.94) brightness(1.02);
  }

  100% {
    transform: translate3d(-2.6%, -3.2%, 0) rotate(-2.8deg) scale(1.08);
    filter: saturate(1) brightness(1.06);
  }
}

@media (max-width: 360px) {
  .entry-copy h2 {
    font-size: 23px;
  }

  .wax-seal {
    width: 92px;
    height: 92px;
  }
}