:root {
  --ink: #1c1c1a;
  --paper: #faf9f6;
  --stone: #d8d5cd;
  --stone-dark: #a8a49a;
  --accent: #8a7a5c;
  --font-display: 'Cormorant Garamond', 'Noto Serif SC', serif;
  --font-body: 'Noto Sans SC', -apple-system, sans-serif;
  --font-figma-type: 'Anonymous Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max-width: 720px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #f6f6f4;
}

.page1-scene {
  position: relative;
  width: max(100vw, calc(100svh * 375 / 812));
  aspect-ratio: 375 / 812;
  overflow: hidden;
  flex: 0 0 auto;
  background: #0a1d10;
}

.page1-scene img {
  display: block;
  pointer-events: none;
  user-select: none;
}

.page1-bg {
  position: absolute;
  left: -12.8%;
  top: -0.47%;
  width: 163.34%;
  height: 100.58%;
  max-width: none;
  object-fit: fill;
}

.page1-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.page1-rotate {
  --r: 0deg;
  --sx: 1;
  --sy: 1;
  flex: 0 0 auto;
  transform: rotate(var(--r)) scaleX(var(--sx)) scaleY(var(--sy));
  transform-origin: 50% 50%;
  will-change: transform;
}

.page1-item:hover .page1-rotate,
.page1-item:focus-visible .page1-rotate,
.page1-item.is-wiggling .page1-rotate {
  animation: sticker-wiggle 0.72s ease-in-out both;
}

.page1-rotate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page1-img-6084 {
  left: 63.15%;
  top: 67.96%;
  width: 50.82%;
  height: 35.10%;
}

.page1-img-6084 .page1-rotate {
  width: 75.61%;
  height: 92.19%;
  --r: 169.25deg;
  --sy: -1;
}

.page1-subject-1 {
  left: 60.13%;
  top: -2.82%;
  width: 35.09%;
  height: 17.74%;
}

.page1-subject-1 .page1-rotate {
  width: 82.16%;
  height: 86.28%;
  --r: 12deg;
}

.page1-subject-2 {
  left: -3.2%;
  top: 76.62%;
  width: 36.43%;
  height: 17.3%;
}

.page1-subject-2 .page1-rotate {
  width: 68.94%;
  height: 75.88%;
  --r: 32.41deg;
}

.page1-img-6086-a {
  left: 17.87%;
  top: 53.39%;
  width: 14.68%;
  height: 6.61%;
}

.page1-img-6086-a .page1-rotate {
  width: 80.52%;
  height: 78.6%;
  --r: 17.71deg;
}

.page1-img-6086-b {
  left: 67.87%;
  top: 23.65%;
  width: 12.4%;
  height: 5.42%;
}

.page1-img-6086-b .page1-rotate {
  width: 100%;
  height: 100%;
  --r: 180deg;
  --sy: -1;
}

.page1-subject-5 {
  left: 48.8%;
  top: 91.75%;
  width: 21.18%;
  height: 9.69%;
}

.page1-subject-5 .page1-rotate {
  width: 74.54%;
  height: 77.02%;
  --r: -66.05deg;
}

.page1-title {
  position: absolute;
  left: 17.73%;
  top: 32.39%;
  width: 42%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  font-size: clamp(20px, 6.4vw, 24px);
  line-height: 1;
  text-align: left;
  word-break: break-word;
  overflow: visible;
}

.page1-title span {
  display: block;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
}

.page1-title span:nth-child(1) {
  animation:
    type-shujie 0.72s steps(6) 0.25s forwards,
    type-caret 0.72s step-end 0.25s;
}

.page1-title span:nth-child(2) {
  animation:
    type-and 0.42s steps(3) 1.05s forwards,
    type-caret 0.42s step-end 1.05s;
}

.page1-title span:nth-child(3) {
  animation:
    type-zhongjin 0.92s steps(8) 1.52s forwards,
    type-caret 0.92s step-end 1.52s;
}

@keyframes type-shujie {
  to { width: 7.4ch; }
}

@keyframes type-and {
  to { width: 4.8ch; }
}

@keyframes type-zhongjin {
  to { width: 10.8ch; }
}

@keyframes type-caret {
  0%, 100% { border-right-color: transparent; }
  1%, 99% { border-right-color: currentColor; }
}

@keyframes sticker-wiggle {
  0%, 100% {
    transform: rotate(var(--r)) scaleX(var(--sx)) scaleY(var(--sy));
  }
  22% {
    transform: translateY(-1px) rotate(calc(var(--r) - 2deg)) scaleX(var(--sx)) scaleY(var(--sy));
  }
  48% {
    transform: translateY(1px) rotate(calc(var(--r) + 1.5deg)) scaleX(var(--sx)) scaleY(var(--sy));
  }
  72% {
    transform: translateY(-0.5px) rotate(calc(var(--r) - 0.8deg)) scaleX(var(--sx)) scaleY(var(--sy));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page1-item:hover .page1-rotate,
  .page1-item:focus-visible .page1-rotate,
  .page1-item.is-wiggling .page1-rotate,
  .page1-title span {
    animation: none;
  }

  .page1-title span {
    width: auto;
    overflow: visible;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Figma pages ---------- */
.figma-section {
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  background: #f6f6f4;
}

.figma-frame,
.figma-scene {
  position: relative;
  width: max(100vw, calc(100svh * 375 / 812));
  aspect-ratio: 375 / 812;
  flex: 0 0 auto;
}

.figma-frame {
  overflow: visible;
}

.figma-scene {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f5f4f0;
  isolation: isolate;
}

.figma-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--page-bg);
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.figma-scene > :not(.figma-bg) {
  z-index: 1;
}

.figma-scene img,
.figma-bleed {
  display: block;
  pointer-events: none;
  user-select: none;
}

.figma-bleed {
  z-index: 2;
}

.figma-bg {
  display: none;
}

.figma-type {
  font-family: var(--font-figma-type);
  font-weight: 700;
  font-style: normal;
}

.page2-scene,
.page4-scene {
  color: #4c525a;
  letter-spacing: 0.1em;
}

.page2-scene {
  --page-bg: url("assets/figma/page2/background.jpg");
}

.page2-from {
  position: absolute;
  right: 13.33%;
  top: 30.3%;
  font-size: 12px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.page2-video {
  position: absolute;
  left: 50%;
  top: 33.37%;
  width: 73.33%;
  height: 25.37%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
  background: #9fbee6;
}

.page2-locations {
  position: absolute;
  left: 66.13%;
  top: 60.34%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.page2-petal-a,
.page2-petal-b {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page2-petal-a {
  left: 17.55%;
  top: -4.68%;
  width: 40.48%;
  height: 12.47%;
}

.page2-petal-a img {
  width: 98.38%;
  height: 96.25%;
  transform: rotate(-1.47deg);
  object-fit: fill;
}

.page2-petal-b {
  left: -5.81%;
  top: 0.99%;
  width: 33.44%;
  height: 17.05%;
}

.page2-petal-b img {
  width: 107.26%;
  height: 87.4%;
  transform: rotate(-88.1deg);
  object-fit: fill;
}

.page3-scene {
  --page-bg: url("assets/figma/page3/background.png");
  color: #4c525a;
  letter-spacing: 0.1em;
}

.page3-branch {
  position: absolute;
  left: -10.93%;
  top: -3.69%;
  width: 99.73%;
  height: 7.27%;
  max-width: none;
  object-fit: cover;
}

.page3-ivy {
  position: absolute;
  left: 65.87%;
  top: 1.85%;
  width: 23.2%;
  height: 35.1%;
  max-width: none;
  object-fit: cover;
}

.page3-photo-frame {
  position: absolute;
  inset: 0;
}

.page3-photo {
  position: absolute;
  left: 23.6%;
  top: 31.53%;
  width: 53.33%;
  height: 32.88%;
  max-width: none;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.page3-photo.is-changing {
  opacity: 0;
}

.page3-frame-top {
  position: absolute;
  left: 23.73%;
  top: 31.28%;
  width: 54.93%;
  height: 0.33%;
  max-width: none;
}

.page3-frame-left {
  position: absolute;
  left: 23.04%;
  top: 31.47%;
  width: 0.91%;
  height: 33.6%;
  max-width: none;
}

.page3-frame-right {
  position: absolute;
  left: 76.93%;
  top: 31.53%;
  width: 0.94%;
  height: 32.94%;
  max-width: none;
}

.page3-frame-bottom {
  position: absolute;
  left: 23.6%;
  top: 64.16%;
  width: 54%;
  height: 0.6%;
  max-width: none;
}

.page3-caption,
.page3-count {
  position: absolute;
  top: 66.13%;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.page3-caption {
  left: 23.73%;
}

.page3-count {
  right: 23.2%;
  text-align: right;
}

.page4-scene {
  --page-bg: url("assets/figma/page4/background.jpg");
  color: #4a4c4d;
}

.page4-details {
  position: absolute;
  left: 50%;
  top: 31.77%;
  width: 40.8%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.page4-details a {
  display: inline-block;
}

.page4-deer {
  position: absolute;
  left: 5.07%;
  top: 83.5%;
  width: 26.93%;
  height: 12.44%;
  max-width: none;
  transform: rotate(180deg) scaleY(-1);
  object-fit: cover;
}

.page4-flowers {
  position: absolute;
  left: 50%;
  top: 76.85%;
  width: 105.6%;
  height: 24.88%;
  max-width: none;
  transform: translateX(-50%);
  object-fit: cover;
}

.page4-photo-side {
  position: absolute;
  left: 84%;
  top: 84.61%;
  width: 26.67%;
  height: 14.78%;
  max-width: none;
  object-fit: cover;
}

/* ---------- RSVP page ---------- */
.rsvp-page { background: var(--paper); }

.rsvp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--stone);
}

.back-link {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--stone-dark);
}

.rsvp-header-title {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--stone-dark);
}

.rsvp-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 60px 24px 120px;
}

.form-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  margin-bottom: 10px;
}

.form-sub {
  font-size: 14px;
  color: var(--stone-dark);
  margin-bottom: 48px;
}

.field-group { margin-bottom: 32px; }

.field-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.required { color: var(--accent); }

.field-input, .field-select, .field-textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--stone-dark);
  background: transparent;
  padding: 10px 4px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}

.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.field-textarea { resize: vertical; min-height: 80px; }

.radio-group, .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.radio-label, .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--stone);
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.radio-label:has(input:checked), .checkbox-label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(138,122,92,0.06);
}

.submit-btn {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.submit-btn:hover { opacity: 0.85; }
.submit-btn:disabled { opacity: 0.5; cursor: default; }

.error-msg {
  color: #b5493a;
  font-size: 13px;
  margin-top: 16px;
  min-height: 18px;
}

.success-container {
  text-align: center;
  padding: 80px 0;
  animation: fadeUp 0.8s ease both;
}

.success-icon {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 20px;
}

.success-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  margin-bottom: 14px;
}

.success-body {
  font-size: 14px;
  color: var(--stone-dark);
  margin-bottom: 36px;
}

.back-home-link {
  font-size: 13px;
  border-bottom: 1px solid var(--stone-dark);
  padding-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .success-container { animation: none; }
}