:root {
  --ink: #4a2c32;
  --rose: #b76e79;
  --rose-deep: #8d3d4e;
  --cream: #fffaf7;
  --blush: #f6e4e1;
  --gold: #c6a07a;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100dvh;
  color: var(--ink);
  font-family: "Cormorant Garamond", Palatino, Georgia, serif;
  background:
    radial-gradient(ellipse at 50% -8%, #f8e7e4 0%, transparent 42%),
    radial-gradient(ellipse at 0% 100%, rgba(120, 52, 64, 0.18), transparent 46%),
    radial-gradient(ellipse at 100% 0%, rgba(198, 160, 122, 0.28), transparent 40%),
    linear-gradient(168deg, #e7c5c6 0%, #d7a7ae 46%, #c98e98 100%);
  overflow: hidden;
}

body.is-reading { overflow: auto; }

.glow {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 18%;
  width: 70vw;
  height: 40vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 248, 244, 0.7), transparent 68%);
  pointer-events: none;
}

.sparkles { position: fixed; inset: 0; pointer-events: none; }
.sparkles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff6ee;
  opacity: 0.55;
  animation: twinkle 5.5s ease-in-out infinite;
}
.sparkles i:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s; }
.sparkles i:nth-child(2) { left: 78%; top: 14%; animation-delay: 0.8s; }
.sparkles i:nth-child(3) { left: 88%; top: 62%; animation-delay: 1.4s; }
.sparkles i:nth-child(4) { left: 8%; top: 70%; animation-delay: 2s; }
.sparkles i:nth-child(5) { left: 46%; top: 8%; animation-delay: 1.1s; }
.sparkles i:nth-child(6) { left: 64%; top: 78%; animation-delay: 2.6s; }
.sparkles i:nth-child(7) { left: 28%; top: 40%; width: 2px; height: 2px; animation-delay: 3s; }
.sparkles i:nth-child(8) { left: 70%; top: 36%; width: 2px; height: 2px; animation-delay: 0.4s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.6); }
}

.stage {
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.35rem;
  padding: 2rem 1rem 3rem;
  transition: opacity 0.55s ease;
}

.stage.is-gone {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  inset: 0;
}

.kicker, .hint, .sound, .actions a {
  font-family: Outfit, "Trebuchet MS", sans-serif;
}

.kicker {
  margin: 0;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--rose-deep);
}

.envelope {
  position: relative;
  width: min(460px, 92vw);
  height: max(260px, calc(min(460px, 92vw) * 0.74));
  perspective: 1400px;
  transform-style: preserve-3d;
}

.env-back,
.env-letter,
.env-pocket,
.env-flap {
  position: absolute;
}

.env-back {
  inset: 0;
  border-radius: 12px;
  background-color: #f6d5d6;
  background-image:
    linear-gradient(165deg, rgba(255, 248, 246, 0.2), rgba(196, 120, 132, 0.18)),
    url("/img/vine.svg");
  background-size: auto, 78px 210px;
  border: 1px solid rgba(141, 61, 78, 0.28);
  box-shadow: 0 26px 40px rgba(92, 38, 48, 0.22);
}

.env-letter {
  z-index: 2;
  left: 9%;
  right: 9%;
  bottom: 10%;
  height: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 0.4rem;
  border-radius: 6px 6px 2px 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), transparent 28%),
    #fffdfb;
  border: 1px solid rgba(183, 110, 121, 0.28);
  box-shadow: 0 10px 18px rgba(90, 40, 50, 0.08);
  transform: translateY(55%);
  transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.env-letter p {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1;
  color: #6e2436;
  text-align: center;
}

.envelope.is-risen .env-letter {
  z-index: 6;
  transform: translateY(-16%);
}

.env-pocket {
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
  border-radius: 0 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 30%),
    linear-gradient(165deg, #f8e4df 0%, #e7c0c4 55%, #f6ebe7 100%);
  clip-path: polygon(0 42%, 50% 0, 100% 42%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.env-flap {
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  transform-origin: top center;
  transform-style: preserve-3d;
  background: linear-gradient(180deg, #fffaf7 0%, #f0cfc9 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform 1.2s cubic-bezier(0.55, 0.04, 0.2, 1), z-index 0s linear 0.45s;
  box-shadow: 0 10px 16px rgba(120, 60, 70, 0.08);
}

.envelope.is-open .env-flap {
  z-index: 1;
  transform: rotateX(180deg);
}

.seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  color: #fff6f1;
  background:
    radial-gradient(circle at 34% 30%, #f0c4c8 0%, #c56d7c 28%, #9a4456 62%, #6e2c3b 100%);
  box-shadow:
    0 12px 20px rgba(80, 24, 36, 0.35),
    inset 0 0 0 7px rgba(255, 228, 216, 0.18),
    inset 0 -8px 14px rgba(70, 16, 28, 0.25);
  transition: transform 0.2s ease;
}

.seal svg {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
}

.seal span {
  position: relative;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
}

.seal:hover { transform: translate(-50%, -50%) scale(1.04); }
.seal:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.envelope.is-cracking .seal {
  animation: crack 0.7s ease forwards;
}

@keyframes crack {
  30% { transform: translate(-50%, -50%) scale(1.08) rotate(-8deg); }
  100% { transform: translate(-42%, -78%) scale(0.15) rotate(24deg); opacity: 0; }
}

.hint {
  border: 0;
  background: transparent;
  color: var(--rose-deep);
  letter-spacing: 0.02em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  cursor: pointer;
  animation: pulse 2.4s ease-in-out infinite;
}

.hint:hover { color: var(--ink); }

@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.invitation[hidden] {
  display: none !important;
}

.invitation {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.invitation.is-shown {
  opacity: 1;
  transform: none;
}

.opening {
  min-height: calc(100dvh - 5vh);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 1rem 0 0;
}

.sheet {
  position: relative;
  width: min(680px, calc(100% - 1.25rem));
  margin: 2.5vh auto 10vh;
  padding: 1.6rem 2.6rem 3rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 22%),
    var(--cream);
  border: 1px solid rgba(141, 61, 78, 0.28);
  box-shadow:
    0 0 0 10px #fffaf7,
    0 0 0 11px rgba(166, 124, 90, 0.55),
    0 30px 70px rgba(80, 30, 40, 0.22);
}

.sheet::before,
.sheet::after {
  content: "";
  position: absolute;
  top: 132px;
  bottom: 132px;
  width: 64px;
  background: url("/img/vine.svg") center top / 64px 186px repeat-y;
  pointer-events: none;
  z-index: 1;
}

.sheet::before { left: 8px; }
.sheet::after { right: 8px; transform: scaleX(-1); }

.floral {
  position: absolute;
  width: min(148px, 38vw);
  height: auto;
  pointer-events: none;
  z-index: 2;
}

.floral.tl { top: -6px; left: -4px; }
.floral.tr { top: -6px; right: -4px; transform: scaleX(-1); }
.floral.bl { bottom: -6px; left: -4px; transform: scaleY(-1); }
.floral.br { bottom: -6px; right: -4px; transform: scale(-1); }

.sheet-inner {
  position: relative;
  z-index: 3;
}

.sheet-inner::before {
  content: "";
  position: absolute;
  inset: -1.4rem 0.15rem;
  border: 1px solid rgba(166, 124, 90, 0.4);
  pointer-events: none;
}

.surprise {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.35rem, 8vw, 4.2rem);
  font-weight: 400;
  line-height: 0.95;
}

.surprise span {
  display: block;
  color: #5c1c2e;
}

.surprise span + span { font-size: 0.82em; margin-top: 0.08em; }

.rule {
  width: 72px;
  height: 1px;
  margin: 1.15rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}

.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--cream);
}

.names {
  margin: 0.2rem 0 0;
  font-weight: 400;
  line-height: 0.85;
}

.name {
  display: block;
  font-family: "Great Vibes", cursive;
  font-size: clamp(4rem, 14vw, 6.4rem);
}

.amp {
  display: block;
  margin: 0.15rem 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--rose);
}

.turning, .invite-line, .when, .venue-note, .address, .secret, .close {
  margin: 0;
}

.turning {
  margin-top: 0.35rem;
  font-style: italic;
  font-size: 1.45rem;
}

.invite-line {
  max-width: 22rem;
  margin: 1.15rem auto 0;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.35;
}

.when, .address {
  display: grid;
  gap: 0.15rem;
  margin-top: 0.85rem;
  font-size: clamp(1.05rem, 4.6vw, 1.32rem);
}

.venue {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  color: var(--rose-deep);
}

.venue-note {
  font-style: italic;
  font-size: 1.15rem;
}

.rsvp {
  position: relative;
  max-width: 18rem;
  margin: 1.7rem auto 0;
  display: grid;
  gap: 0.45rem;
}

.rsvp-lead {
  margin: 0 0 0.2rem;
  font-family: Outfit, "Trebuchet MS", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--rose-deep);
}

.rsvp label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.rsvp input[name="name"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(141, 61, 78, 0.4);
  background: transparent;
  text-align: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.28rem;
  color: var(--ink);
  padding: 0.4rem 0.2rem 0.35rem;
}

.rsvp input[name="name"]:focus {
  outline: none;
  border-bottom-color: var(--rose-deep);
}

.rsvp button {
  margin-top: 0.45rem;
  border: 1px solid var(--rose);
  border-radius: 999px;
  background: transparent;
  color: var(--rose-deep);
  font-family: Outfit, "Trebuchet MS", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
}

.rsvp button:hover,
.rsvp button:focus-visible {
  background: var(--rose-deep);
  color: var(--cream);
  outline: none;
}

.rsvp button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.rsvp-note {
  min-height: 1.2em;
  margin: 0.35rem 0 0;
  font-style: italic;
  font-size: 1.05rem;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.actions a {
  display: inline-block;
  padding: 0.8rem 1.05rem;
  border: 1px solid var(--rose);
  border-radius: 999px;
  color: var(--rose-deep);
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.actions a:hover,
.actions a:focus-visible {
  background: var(--rose-deep);
  color: var(--cream);
  outline: none;
}

.secret {
  max-width: 26rem;
  margin: 1.7rem auto 0;
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--ink);
}

.close {
  margin-top: 1.15rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: Outfit, "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  color: var(--rose-deep);
}

.sound {
  margin: 1.35rem auto 0;
  border: 1px solid rgba(141, 61, 78, 0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--rose-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.66rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
}

.sound:not([hidden]) { display: block; }

@media (min-width: 720px) {
  .sheet { padding: 1.8rem 4.8rem 3.4rem; }
}

@media (max-width: 520px) {
  .sheet { padding: 1.2rem 2.15rem 2.6rem; }
  .sheet::before, .sheet::after { width: 34px; background-size: 34px 120px; top: 108px; bottom: 108px; }
  .floral { width: 88px; }
  .sheet-inner::before { inset: -1rem 0.1rem; }
}

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