/* ==========================================================================
   PAGE — background, layout around the envelope, buttons under it.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--noise), radial-gradient(110% 80% at 50% 25%, var(--linen), var(--linen-2));
  background-color: var(--linen);
  color: var(--green);
  font-family: var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: hidden;
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 24px 40px;
}
.wrap { padding-top: calc(var(--env-h) * 1.02); padding-bottom: calc(var(--env-h) * .3); }

.hint {
  margin: 6px 0 0;
  font-family: var(--caps);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--green);
  opacity: .7;
  transition: opacity .6s;
}
.started .hint { opacity: 0; }

.after {
  display: grid;
  justify-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
}
.done .after { opacity: 1; pointer-events: auto; }

.rsvp {
  font-family: var(--caps);
  font-size: 17px;
  letter-spacing: .2em;
  padding: 10px 64px;
  border: 2px solid var(--green);
  border-radius: 8px;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(30,50,30,.5);
  transition: background .3s, color .3s;
}
.done .rsvp { animation: pulse-gentle 2s ease-in-out infinite; }
.rsvp:hover { background: var(--green); color: var(--paper); }
.deadline { font-size: 15px; font-style: italic; }

.replay {
  margin-top: 6px;
  background: none; border: 0;
  font-family: var(--caps);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.rsvp:focus-visible, .replay:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

@keyframes pulse-gentle { 50% { transform: scale(1.05); } }
.no-anim, .no-anim * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .done .rsvp { animation: none; } }