/* 自托管字体 */
@font-face {
  font-family: 'ZCOOL Xiao Wei';
  src: url('fonts/ZCOOLXiaoWei-subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pinyon Script';
  src: url('fonts/PinyonScript-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
/* 京華老宋体 — 中式老宋体，正文与标题主字体 */
@font-face {
  font-family: 'KingHwa OldSong';
  src: url('fonts/KingHwaOldSong-subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* 重置与基础 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

:root {
  color-scheme: light dark;
}

body {
  background-color: #E3DACE;
  background-image: radial-gradient(ellipse at 50% 45%, #F3EEE4 0%, #E3DACE 55%, #D4C9BA 100%);
  color: #444;
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', 'STSong', 'SimSun', serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  padding: env(safe-area-inset-top) max(env(safe-area-inset-right), clamp(0.75rem, 4vw, 1.75rem)) env(safe-area-inset-bottom) max(env(safe-area-inset-left), clamp(0.75rem, 4vw, 1.75rem));
}

/* 入场与浮动动画 */
@-webkit-keyframes rise {
  from {
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes rise-soft {
  from {
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
  }
  to {
    opacity: 0.7;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes rise-soft {
  from {
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
  }
  to {
    opacity: 0.7;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* 爱心心跳 — 怦然心动：强拍、弱拍、停顿 */
@-webkit-keyframes heartbeat {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  5% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
  }
  10% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  15% {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
  }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes heartbeat {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  5% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
  }
  10% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  15% {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 1);
  }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* 请柬容器 — 自然文档流，最大宽度 720px，居中 */
.invitation {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background-color: #F0EBE1;
  background-image: linear-gradient(180deg, #F5F0E6 0%, #F0EBE1 12%, #F0EBE1 88%, #E9E3D7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: visible;
  box-shadow: 0 0 0 1px rgba(123, 24, 24, 0.05),
              0 22px 60px -18px rgba(123, 24, 24, 0.13),
              0 8px 24px -6px rgba(0, 0, 0, 0.06);
  -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

@media (max-width: 480px) {
  .invitation {
    box-shadow: 0 0 0 1px rgba(123, 24, 24, 0.05),
                0 14px 38px -12px rgba(123, 24, 24, 0.12),
                0 5px 16px -4px rgba(0, 0, 0, 0.06);
  }
}

@media (hover: hover) {
  .invitation:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(123, 24, 24, 0.06),
                0 28px 76px -20px rgba(123, 24, 24, 0.16),
                0 10px 32px -8px rgba(0, 0, 0, 0.08);
  }
}

/* 顶部 / 底部红条 */
.bar {
  width: 100%;
  height: clamp(12px, 2.4vw, 18px);
  flex-shrink: 0;
  background: linear-gradient(180deg, #8a2323 0%, #7B1818 55%, #651111 100%);
}

.bar-bottom {
  margin-top: clamp(1.25rem, 5vw, 2rem);
  background: linear-gradient(0deg, #8a2323 0%, #7B1818 55%, #651111 100%);
}

/* 「婚礼邀请函」标题 */
.page-title {
  margin-top: clamp(1.5rem, 6vw, 2.5rem);
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 5.2vw, 2.1rem);
  color: #6B1A1A;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
  text-shadow: none;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.1s forwards;
  animation: rise 0.75s ease-out 0.1s forwards;
}

/* Hi + 开场白 */
.opening {
  width: min(92%, 640px);
  margin-top: clamp(1rem, 4.5vw, 1.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 1.4vw, 0.75rem);
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.22s forwards;
  animation: rise 0.75s ease-out 0.22s forwards;
}

.hi {
  flex-shrink: 0;
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1.8rem, 6.5vw, 3.2rem);
  line-height: 1;
  color: #8B2500;
  -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg);
  -webkit-transform-origin: 50% 70%;
  transform-origin: 50% 70%;
  display: inline-block;
}

.opening-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  gap: clamp(0.85rem, 3vw, 1.5rem);
}

.opening-lines p {
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-size: clamp(0.95rem, 3.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.85;
  color: #555;
  letter-spacing: 0.06em;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  white-space: nowrap;
}

.opening-lines p:nth-child(3),
.opening-lines p:nth-child(4),
.opening-lines p:nth-child(5) {
  color: #8B2500;
  font-size: clamp(1.05rem, 3.8vw, 1.35rem);
  letter-spacing: 0.08em;
}

/* 小屏上诗句高度控制：略收紧字距，保证整体不臃肿 */
@media (max-width: 480px) {
  .opening-lines p {
    line-height: 1.75;
  }

  .opening-lines p:nth-child(3),
  .opening-lines p:nth-child(4),
  .opening-lines p:nth-child(5) {
    line-height: 1.8;
  }
}

/* 主视觉图 */
.visual {
  width: min(84%, 420px);
  margin: clamp(1.25rem, 5vw, 2.25rem) auto 0;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.34s forwards;
  animation: rise 0.75s ease-out 0.34s forwards;
}

.visual-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 新人姓名 */
.names {
  margin-top: clamp(1.25rem, 5vw, 2.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 5vw, 2.1rem);
  color: #7B1818;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(123, 24, 24, 0.08);
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.44s forwards;
  animation: rise 0.75s ease-out 0.44s forwards;
}

.names .gap {
  display: none;
}

/* 爱心分隔 */
.heart-divider {
  width: clamp(36px, 6vw, 60px);
  height: auto;
  margin-top: clamp(0.6rem, 2.2vw, 1rem);
  display: block;
  opacity: 0;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation: rise 0.75s ease-out 0.52s forwards, heartbeat 2.2s linear 1.2s infinite;
  animation: rise 0.75s ease-out 0.52s forwards, heartbeat 2.2s linear 1.2s infinite;
}

/* 日期 */
.date-main {
  margin-top: clamp(0.9rem, 3.4vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  max-width: 100%;
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-size: clamp(1.25rem, 4.4vw, 1.75rem);
  color: #444;
  letter-spacing: 0.08em;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.58s forwards;
  animation: rise 0.75s ease-out 0.58s forwards;
}

.date-main .year,
.date-main .weekday {
  font-weight: 400;
  font-size: 0.78em;
  color: #555;
}

.date-main .sep {
  margin: 0 0.15em;
}

.date-main .day {
  color: #7B1818;
  font-weight: 400;
  font-size: 1.9em;
  margin: 0 0.12em;
  text-shadow: 0 1px 0 rgba(123, 24, 24, 0.08);
}

.date-sub {
  width: min(92%, 600px);
  margin: clamp(0.45rem, 1.8vw, 0.85rem) auto 0;
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-size: clamp(1rem, 3.4vw, 1.25rem);
  font-weight: 400;
  color: #7B1818;
  letter-spacing: 0.14em;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.64s forwards;
  animation: rise 0.75s ease-out 0.64s forwards;
}

/* 地址 */
.address-title {
  margin-top: clamp(1.25rem, 5vw, 2rem);
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(1.8rem, 6.2vw, 3.1rem);
  line-height: 1;
  color: #8B2500;
  text-align: center;
  text-shadow: none;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.7s forwards;
  animation: rise 0.75s ease-out 0.7s forwards;
}

.venue {
  width: min(92%, 620px);
  margin: clamp(0.6rem, 2.4vw, 1rem) auto 0;
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  color: #333;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.76s forwards;
  animation: rise 0.75s ease-out 0.76s forwards;
}

.street {
  width: min(92%, 640px);
  margin: clamp(0.25rem, 1.2vw, 0.5rem) auto 0;
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 3.2vw, 1.15rem);
  color: #555;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  -webkit-animation: rise 0.75s ease-out 0.82s forwards;
  animation: rise 0.75s ease-out 0.82s forwards;
}

/* 版权行 */
.copyright {
  margin-top: clamp(1rem, 4vw, 1.5rem);
  font-family: 'KingHwa OldSong', 'ZCOOL Xiao Wei', 'Songti SC', serif;
  font-size: clamp(0.65rem, 2vw, 0.85rem);
  color: #A8A095;
  letter-spacing: 0.05em;
  opacity: 0;
  text-align: center;
  -webkit-animation: rise-soft 0.75s ease-out 1s forwards;
  animation: rise-soft 0.75s ease-out 1s forwards;
}

.copyright a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 160, 149, 0.22);
}

.gh-logo {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;
  fill: currentColor;
  margin-right: 0.15em;
  opacity: 0.75;
}

.copyright a:hover {
  color: #8B2500;
  border-bottom-color: #8B2500;
}

/* iOS 安全区兜底（WebKit 旧版用 constant，新版用 env） */
@supports (-webkit-touch-callout: none) {
  body {
    padding-top: max(0px, constant(safe-area-inset-top), env(safe-area-inset-top));
    padding-bottom: max(0px, constant(safe-area-inset-bottom), env(safe-area-inset-bottom));
    padding-left: max(1rem, constant(safe-area-inset-left), env(safe-area-inset-left));
    padding-right: max(1rem, constant(safe-area-inset-right), env(safe-area-inset-right));
  }
}

/* 深色模式 — 保持暖调中式质感，深色底 + 浅暖字 + 红 accent */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1A1614;
    background-image: radial-gradient(ellipse at 50% 45%, #2A2420 0%, #1A1614 55%, #0F0D0C 100%);
    color: #D8CFC4;
  }

  .invitation {
    background-color: #26211D;
    background-image: linear-gradient(180deg, #2C2622 0%, #26211D 12%, #26211D 88%, #1E1A17 100%);
    box-shadow: 0 0 0 1px rgba(214, 138, 138, 0.08),
                0 22px 60px -18px rgba(0, 0, 0, 0.45),
                0 8px 24px -6px rgba(0, 0, 0, 0.35);
  }

  @media (max-width: 480px) {
    .invitation {
      box-shadow: 0 0 0 1px rgba(214, 138, 138, 0.08),
                  0 14px 38px -12px rgba(0, 0, 0, 0.42),
                  0 5px 16px -4px rgba(0, 0, 0, 0.32);
    }
  }

  @media (hover: hover) {
    .invitation:hover {
      box-shadow: 0 0 0 1px rgba(214, 138, 138, 0.1),
                  0 28px 76px -20px rgba(0, 0, 0, 0.5),
                  0 10px 32px -8px rgba(0, 0, 0, 0.4);
    }
  }

  .page-title {
    color: #D68A8A;
  }

  .hi,
  .opening-lines p:nth-child(3),
  .opening-lines p:nth-child(4),
  .opening-lines p:nth-child(5),
  .address-title,
  .date-main .day {
    color: #D68A8A;
  }

  .opening-lines p,
  .date-main,
  .date-sub,
  .street {
    color: #BFB3A6;
  }

  .names,
  .venue {
    color: #E8E0D6;
  }

  .date-sub {
    color: #D68A8A;
  }

  .date-main .year,
  .date-main .weekday {
    color: #BFB3A6;
  }

  .copyright {
    color: #756C61;
  }

  .copyright a {
    border-bottom-color: rgba(117, 108, 97, 0.25);
  }

  .copyright a:hover {
    color: #D68A8A;
    border-bottom-color: #D68A8A;
  }
}

/* 减少动画偏好 — 关闭动效，保持内容可见 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .page-title,
  .opening,
  .visual,
  .names,
  .heart-divider,
  .date-main,
  .date-sub,
  .address-title,
  .venue,
  .street,
  .copyright {
    opacity: 1;
  }

  .invitation,
  .invitation:hover {
    -webkit-transform: none;
    transform: none;
  }
}