:root {
  --forest-cream: #f7f1d4;
  --forest-deep: #155a45;
  --forest-gold: #dce9a8;
  --forest-ink: #173f35;
  --forest-leaf: #4b9b5f;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: var(--forest-deep);
}

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.page-shell {
  isolation: isolate;
}

button:focus-visible {
  outline: 4px solid var(--forest-gold);
  outline-offset: 4px;
}

.forest-background {
  filter: saturate(0.94) contrast(0.96);
}

.forest-overlay {
  background:
    linear-gradient(90deg, rgb(8 55 42 / 60%), rgb(8 55 42 / 32%)),
    linear-gradient(180deg, rgb(7 57 44 / 14%), rgb(5 43 33 / 55%));
}

.sun-wash {
  background: rgb(220 233 168 / 26%);
  filter: blur(4rem);
}

.responsive-layout {
  --mascot-space: clamp(7rem, 25vw, 8rem);

  max-width: 72rem;
  padding-top: var(--mascot-space);
  animation: invitation-arrive 720ms 120ms var(--ease-out-quint) both;
}

.page-mascot {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  z-index: 0;
  width: clamp(11rem, 52vw, 14rem);
  aspect-ratio: 1;
  overflow: hidden;
  opacity: 0.52;
  filter: saturate(0.9) contrast(1.05) brightness(0.86);
  mask-image: radial-gradient(ellipse 46% 44% at 50% 48%, #000 46%, transparent 100%);
  transform: translateX(-50%);
}

.page-mascot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invitation-paper {
  z-index: 1;
  padding: 1.35rem 1rem 1rem;
  border: 1px solid rgb(21 90 69 / 28%);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 16% 12%, rgb(220 233 168 / 42%), transparent 18rem),
    linear-gradient(135deg, rgb(255 249 220 / 98%), rgb(247 241 212 / 96%));
  box-shadow:
    0 0.35rem 0 #d6c99e,
    0 1.8rem 4rem rgb(2 41 31 / 38%);
}

.invitation-paper::before {
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgb(21 90 69 / 18%);
  border-radius: 0.68rem;
  content: "";
  pointer-events: none;
}

.paper-pin {
  position: absolute;
  z-index: 2;
  top: -0.5rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid #8d7336;
  border-radius: 50%;
  background: #d9b95f;
  box-shadow: inset 0.15rem 0.15rem 0 rgb(255 249 220 / 65%), 0 0.25rem 0.35rem rgb(70 52 20 / 28%);
}

.paper-pin--left {
  left: 16%;
}

.paper-pin--right {
  right: 16%;
}

.mini-stamp {
  flex-shrink: 0;
  padding: 0.4rem 0.48rem;
  border: 2px solid var(--forest-leaf);
  border-radius: 0.38rem;
  color: var(--forest-leaf);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  transform: rotate(7deg);
}

.qr-mount img {
  border-radius: 0.62rem;
}

.link-ticket {
  border: 1px dashed rgb(21 90 69 / 55%);
  border-radius: 0.8rem;
  background: rgb(220 233 168 / 38%);
}

.copy-icon-button {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.copy-icon-button:hover {
  color: var(--forest-deep);
  background: rgb(75 155 95 / 12%);
}

.copy-icon-button:active {
  background: rgb(75 155 95 / 20%);
}

.copy-icon-button:disabled {
  cursor: wait;
  opacity: 0.56;
}

.primary-button {
  border: 2px solid var(--forest-deep);
  border-radius: 0.85rem;
  background: var(--forest-leaf);
  box-shadow: 0 0.48rem 0 #10483a;
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease, background 150ms ease;
}

.primary-button:hover {
  background: #438e58;
}

.primary-button:active {
  box-shadow: 0 0.14rem 0 #10483a;
  transform: translateY(0.34rem);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

@media (min-width: 640px) {
  .invitation-paper {
    padding: 1.65rem 1.55rem 1.25rem;
  }
}

@media (min-width: 768px) {
  .page-mascot {
    top: 0;
    left: calc(50% - 15rem);
    width: clamp(16rem, 26vw, 21rem);
    opacity: 0.62;
    filter: saturate(0.92) contrast(1.05) brightness(0.84) drop-shadow(0 1.2rem 1.5rem rgb(4 45 34 / 22%));
    transform: translateX(-50%) rotate(-3deg);
  }
}

@keyframes invitation-arrive {
  from {
    opacity: 0;
    transform: translateY(-4.5rem) rotate(-0.5deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

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