.btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
  transition:
    transform 220ms var(--ease-soft),
    box-shadow 220ms var(--ease-soft),
    background 220ms var(--ease-soft),
    color 220ms var(--ease-soft);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  color: var(--warm-ivory);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(135deg, var(--olive-deep), #68714b);
  border: 1px solid rgba(247, 241, 230, 0.16);
  box-shadow: 0 18px 42px rgba(79, 90, 58, 0.28);
}

.btn-ghost {
  color: var(--olive-deep);
  background: rgba(247, 241, 230, 0.86);
  border: 1px solid rgba(79, 90, 58, 0.16);
}

.btn-mini {
  min-height: 34px;
  padding: 7px 12px;
  color: var(--olive-deep);
  background: rgba(247, 241, 230, 0.74);
  border: 1px solid rgba(79, 90, 58, 0.14);
}

.btn-mini.is-copied {
  color: var(--warm-ivory);
  background: var(--olive-deep);
}

.menu-chapter {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--charcoal-olive);
  text-align: left;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(79, 90, 58, 0.1);
  border-radius: 8px;
  transition:
    transform 220ms var(--ease-soft),
    background 220ms var(--ease-soft),
    color 220ms var(--ease-soft);
}

.menu-chapter span {
  color: var(--champagne-gold);
  font-size: 0.78rem;
  font-weight: 800;
}

.menu-chapter strong {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.menu-chapter:hover,
.menu-chapter.is-active {
  color: var(--warm-ivory);
  background: var(--olive-deep);
  transform: translateX(6px);
}

.monogram-seal {
  position: relative;
  width: clamp(120px, 14vw, 176px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
  color: var(--warm-ivory);
  font-family: var(--font-display);
  font-size: 2.35rem;
  font-weight: 800;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 58%),
    var(--olive-deep);
  border: 1px solid rgba(200, 169, 106, 0.5);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}

.monogram-seal::before,
.monogram-seal::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(247, 241, 230, 0.38);
  border-radius: inherit;
}

.monogram-seal::after {
  inset: 19px;
  border-color: rgba(200, 169, 106, 0.5);
}

[data-tilt]:not(.parallax-item) {
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotate(var(--base-rotate, 0deg));
  transition: transform 320ms var(--ease-out);
}

.parallax-item {
  transform:
    translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0)
    rotate(var(--parallax-r, 0deg));
  transition: transform 260ms linear;
}

.parallax-item[data-tilt] {
  transform:
    translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0)
    perspective(1100px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    rotate(var(--base-rotate, var(--parallax-r, 0deg)));
  transition: transform 220ms var(--ease-soft);
}

.route {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

.route path,
.route circle,
.fake-map path,
.fake-map circle {
  fill: none;
  stroke: var(--champagne-gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}

.route circle {
  stroke-dasharray: 9 18;
}

.draw-ready {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
}

.scene.has-animated .draw-ready {
  animation: draw-path 1300ms var(--ease-soft) forwards;
}

.paper-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 24%, rgba(200, 169, 106, 0.18), transparent 24%),
    radial-gradient(ellipse at 16% 80%, rgba(168, 183, 154, 0.18), transparent 24%),
    linear-gradient(135deg, var(--warm-ivory), #fffaf2 48%, var(--paper-deep));
}

.paper-wash.olive {
  background:
    radial-gradient(circle at 84% 14%, rgba(216, 184, 168, 0.18), transparent 26%),
    linear-gradient(135deg, #f4eddf 0%, #e9ddc8 46%, #d9d0b6 100%);
}

.paper-wash.sand {
  background:
    radial-gradient(circle at 22% 20%, rgba(168, 183, 154, 0.2), transparent 24%),
    linear-gradient(135deg, #f7efe1, #e7d8bd);
}

.leaf,
.flower,
.envelope-shape {
  position: absolute;
  display: block;
  pointer-events: none;
}

.leaf {
  width: 260px;
  height: 92px;
  background:
    linear-gradient(110deg, rgba(79, 90, 58, 0.78), rgba(168, 183, 154, 0.5)),
    var(--sage-green);
  border-radius: 100% 0 100% 0;
  filter: drop-shadow(0 28px 40px rgba(32, 36, 25, 0.16));
}

.leaf::before,
.leaf::after {
  content: "";
  position: absolute;
  width: 45%;
  height: 68%;
  border-radius: inherit;
  background: rgba(247, 241, 230, 0.2);
}

.leaf::before {
  left: 20%;
  top: -18%;
  transform: rotate(-18deg);
}

.leaf::after {
  right: 12%;
  bottom: -22%;
  transform: rotate(18deg);
}

.flower {
  width: 220px;
  aspect-ratio: 1;
  border-radius: 46% 54% 48% 52%;
  background:
    radial-gradient(circle at 50% 50%, rgba(200, 169, 106, 0.58) 0 10%, transparent 11%),
    conic-gradient(from 12deg, rgba(247, 241, 230, 0.82), rgba(216, 199, 168, 0.78), rgba(247, 241, 230, 0.84), rgba(217, 184, 168, 0.48), rgba(247, 241, 230, 0.82));
  filter: drop-shadow(0 30px 45px rgba(32, 36, 25, 0.16));
  opacity: 0.84;
}

.plane {
  position: absolute;
  width: 88px;
  height: 32px;
  filter: drop-shadow(0 18px 22px rgba(32, 36, 25, 0.16));
}

.plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--olive-deep);
  clip-path: polygon(0 45%, 100% 0, 74% 50%, 100% 100%, 0 55%, 58% 50%);
  opacity: 0.88;
}

.line-icon {
  width: 38px;
  height: 38px;
  display: inline-block;
  color: var(--champagne-gold);
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.icon-ceremony {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 42h28M24 8v34M16 16h16M14 16l-6 13h12l-6-13Zm20 0-6 13h12l-6-13Z' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-toast {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 6h16l-2 14a7 7 0 0 1-12 0L16 6Zm8 21v13m-7 2h14M11 8h26' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-dress {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6h10l2 8-5 5 9 23H13l9-23-5-5 2-8Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-upload {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 32V8m0 0-9 9m9-9 9 9M10 30v10h28V30' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.98);
}

.scene.has-animated .reveal {
  animation: reveal-up 760ms var(--ease-out) forwards;
}

.scene.has-animated .reveal:nth-child(2) {
  animation-delay: 80ms;
}

.scene.has-animated .reveal:nth-child(3) {
  animation-delay: 160ms;
}

.scene.has-animated .reveal:nth-child(4) {
  animation-delay: 240ms;
}

@keyframes reveal-up {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes draw-path {
  to {
    stroke-dashoffset: 0;
  }
}

.cinema-vellum,
.foreground-veil,
.hero-vellum-card,
.hero-atlas-panel,
.hero-paper-cut,
.story-paper-coast,
.date-poster-shadow,
.schedule-paper-route,
.location-paper-island,
.rsvp-ticket-shadow,
.gift-string-line,
.closing-paper-sail {
  position: absolute;
  display: block;
  pointer-events: none;
}

.foreground-branch {
  position: absolute;
  width: 480px;
  height: 210px;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 14% 54%, rgba(79, 90, 58, 0.82) 0 12%, transparent 13%),
    radial-gradient(ellipse at 36% 42%, rgba(168, 183, 154, 0.7) 0 12%, transparent 13%),
    radial-gradient(ellipse at 58% 50%, rgba(79, 90, 58, 0.72) 0 11%, transparent 12%),
    radial-gradient(ellipse at 76% 38%, rgba(168, 183, 154, 0.62) 0 10%, transparent 11%);
  filter: blur(0.2px) drop-shadow(0 30px 30px rgba(32, 36, 25, 0.16));
}

.foreground-branch::before {
  content: "";
  position: absolute;
  left: 10%;
  top: 48%;
  width: 82%;
  height: 2px;
  background: linear-gradient(90deg, rgba(79, 90, 58, 0), rgba(79, 90, 58, 0.74), rgba(79, 90, 58, 0));
  transform: rotate(-8deg);
}