/* ==========================================================
   李纲 & 熊欣睿 · 婚礼邀请函（复刻自婚贝模板 A17090fd220ff）
   设计稿宽 375px；1rem = 卡片宽度 / 10（移动端满宽，PC 居中卡片）
   ========================================================== */

/* ---------- 字体（子集，与原站相同的 _1/_2 双子集方案） ---------- */
@font-face {
  font-family: "song-changgui-1";
  src: url("../assets/fonts/siyuansongtichanggui-1.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "song-changgui-2";
  src: url("../assets/fonts/siyuansongtichanggui-2.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "song-jixi-2";
  src: url("../assets/fonts/siyuansongtijixi-2.ttf") format("truetype");
  font-display: swap;
}
.f-song {
  font-family: "song-changgui-1", "song-changgui-2", "Songti SC", "STSong",
    "SimSun", "Noto Serif SC", serif !important;
}
.f-jixi {
  font-family: "song-jixi-2", "song-changgui-1", "Songti SC", "STSong",
    "SimSun", "Noto Serif SC", serif !important;
}

/* ---------- 根缩放：移动端铺满屏宽，PC 固定 440px 卡片 ---------- */
html {
  font-size: 10vw;
}
@media (min-width: 700px) {
  html {
    font-size: 44px;
  }
}

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

body {
  background:
    radial-gradient(120rem 60rem at 85% -10%, rgba(214, 106, 106, 0.1), transparent 60%),
    radial-gradient(100rem 55rem at -15% 105%, rgba(196, 148, 108, 0.12), transparent 60%),
    linear-gradient(165deg, #f6f2e9 0%, #efe8db 48%, #f2ebe1 100%);
  font-family: "song-changgui-1", "Songti SC", "STSong", "SimSun", serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 舞台卡片 ---------- */
.stage {
  position: relative;
  width: 10rem;
  margin: 0 auto;
  background: #f7f3ea;
}
@media (min-width: 700px) {
  body {
    padding: 2.2rem 0 2.6rem;
  }
  .stage {
    border-radius: 0.18rem;
    box-shadow:
      0 0.04rem 0.1rem rgba(96, 62, 40, 0.1),
      0 0.6rem 1.6rem rgba(96, 62, 40, 0.22);
    outline: 1px solid rgba(145, 1, 1, 0.08);
    overflow: hidden;
  }
}

/* ---------- 长画布 ---------- */
.canvas {
  position: relative;
  height: 166rem; /* 原站 183.413rem，去除底部礼物面板后为 166rem */
  overflow: hidden;
}

/* ---------- 元素定位基类 ---------- */
.canvas > div,
.canvas > form {
  position: absolute;
}
.ele-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ele-img.bgimg {
  pointer-events: none;
}
img {
  -webkit-user-drag: none;
  user-select: none;
}

/* 圆形肖像 / 胶囊专辑图 */
.ele-img.round img {
  border-radius: 50%;
}
.ele-img.pill {
  overflow: hidden;
  border-radius: 0.88rem;
}
/* 专辑图如黑胶唱片随音乐旋转；暂停时停在当前角度 */
.ele-img.pill img {
  border-radius: 50%;
  animation: album-spin 12s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.ele-img.pill.spinning img {
  animation-play-state: running;
}
/* 唱片中心轴孔，更像黑胶 */
.ele-img.pill::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.28rem;
  height: 0.28rem;
  transform: translate(-50%, -50%);
  background: rgba(248, 244, 237, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(145, 1, 1, 0.3);
  pointer-events: none;
}
@keyframes album-spin {
  to {
    transform: rotate(360deg);
  }
}
/* 拱门照片：蒙版裁切（与原站 -webkit-mask-box-image 方案一致） */
.ele-img.arch img {
  -webkit-mask-box-image-source: url("../assets/img/arch-mask.png");
  -webkit-mask-box-image-slice: 0 fill;
  mask-image: url("../assets/img/arch-mask.png");
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* 文本 */
.ele-text .t {
  white-space: nowrap;
}
.ele-text .t br {
  white-space: normal;
}

/* ---------- 进场动效（进入视口淡入上移；仅 JS 可用时启用） ---------- */
.js .eles {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 1s ease, transform 1s ease;
}
.js .eles.bgimg {
  transform: none;
}
.js .eles.in {
  opacity: 1;
  transform: translateY(0);
}
/* 内联 transform 的组件（日历缩放等）只做淡入 */
.js .ele-widget,
.js .ele-widget.in {
  transform: translateY(0);
}
.js .ele-widget {
  transition: opacity 1s ease;
}
/* ?static=1：跳过全部入场动画（也用于自动化截图验证） */
.static .eles,
.static .ele-widget {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.static #countdown,
.static #calendar {
  transform: scale(0.75) !important;
}

/* ---------- 音乐播放器胶囊 ---------- */
.player-capsule {
  width: 100%;
  height: 100%;
  background: rgba(248, 244, 237, 1);
  border: 0.02667rem solid #666;
  border-radius: 1.04rem;
  opacity: 0.81;
}
#player-controls {
  cursor: pointer;
}
#player-controls .ctrl-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#player-controls .ctrl-play {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.32rem;
  height: 0.32rem;
  transform: translate(-42%, -50%);
  background: #f8f4ed;
  border-radius: 50%;
  padding: 0.03rem;
}
#player-controls.paused .ctrl-play {
  display: block;
}
.ctrl-hit {
  position: absolute;
  left: 30%;
  top: -150%;
  width: 40%;
  height: 400%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* ---------- 倒计时 ---------- */
#countdown .count-flip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: scale(0.855);
  transform-origin: center;
}
#countdown .c-com {
  min-width: 1.33333rem;
  margin: 0.16rem;
  padding: 0.13333rem 0 0.16rem;
  text-align: center;
}
#countdown .c-nums {
  display: flex;
  justify-content: center;
  font-size: 0.53333rem;
  line-height: 0.72rem;
  color: rgb(145, 1, 1);
}
#countdown .c-nums .n {
  font-family: "song-jixi-2", "Songti SC", serif;
}
#countdown .c-text {
  font-size: 0.32rem;
  color: rgb(145, 1, 1);
  white-space: nowrap;
}

/* ---------- 日历 ---------- */
#calendar .cal-box {
  width: 100%;
  height: 100%;
  border: 0.05333rem solid rgb(145, 1, 1);
}
.cal-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1;
  padding: 0.48rem 0.88rem 0.26667rem;
  color: rgb(145, 1, 1);
}
.cal-top .cal-size {
  font-size: 0.96rem;
  font-family: "song-jixi-2", "Songti SC", serif;
}
.cal-top .cal-size span {
  font-size: 0.42667rem;
}
.cal-top .cal-year {
  font-size: 0.53333rem;
}
.cal-week {
  display: flex;
  height: 1.06667rem;
  line-height: 1.06667rem;
  padding: 0 0.90667rem;
  border-bottom: 0.02667rem solid rgb(145, 1, 1);
}
.cal-week span {
  width: 14.2857%;
  text-align: center;
  font-size: 0.32rem;
  font-weight: 600;
  color: rgb(145, 1, 1);
}
.cal-dates {
  font-size: 0;
  padding: 0.13333rem 0.88rem 0;
  list-style: none;
  text-align: left;
}
.cal-dates li {
  position: relative;
  display: inline-block;
  width: 14.2857%;
  height: 0.66667rem;
  margin-top: 0.21333rem;
  text-align: center;
}
.cal-dates li span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  color: #666;
  font-size: 0.34667rem;
  transform: translate(-50%, -52%);
}
.cal-dates li .heart {
  display: none;
  position: absolute;
  left: 12%;
  top: 0.05333rem;
  width: 0.69333rem;
  height: 0.62rem;
  animation: jumpheart 0.8s ease infinite alternate;
}
.cal-dates li.active .heart {
  display: block;
}
@keyframes jumpheart {
  from {
    transform: scale(0.92);
  }
  to {
    transform: scale(1.1);
  }
}

/* ---------- 地图卡片 ---------- */
#map-card .map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.11rem;
  box-shadow: 0 0.04rem 0.14rem rgba(80, 60, 40, 0.14);
}
.map-navs {
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}
.map-btn {
  display: block;
  width: 1.7rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  border-radius: 0.3rem;
  font-size: 0.24rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0.03rem 0.1rem rgba(0, 0, 0, 0.2);
}
.map-btn.amap {
  background: #26b47f;
}
.map-btn.baidu {
  background: #3b7cff;
}
.map-btn:active {
  opacity: 0.85;
}

/* ---------- 出席回执表单 ---------- */
#rsvp .f-row {
  position: relative;
  display: flex;
  align-items: center;
  border: 0.02667rem solid #999;
  background: rgba(255, 255, 255, 0.35);
}
#rsvp .req {
  position: absolute;
  left: 0.13rem;
  top: 0.02rem;
  color: #e34d4d;
  font-size: 0.3rem;
  line-height: 1.1;
}
#rsvp input {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0 0.34rem;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.34667rem;
  color: #6e6e6e;
}
#rsvp input::placeholder {
  color: #9a9a9a;
}
#rsvp .f-submit {
  display: block;
  width: 100%;
  height: 0.98667rem;
  margin-top: 0.34rem;
  border: 0;
  background: rgb(142, 1, 1);
  color: rgb(235, 234, 231);
  font-size: 0.32rem;
  font-family: inherit;
  letter-spacing: 0.1rem;
  text-align: center;
  cursor: pointer;
}
#rsvp .f-submit:active {
  opacity: 0.88;
}
#rsvp.err .f-row {
  border-color: #d9534f;
  animation: shake 0.3s ease;
}
@keyframes shake {
  25% {
    transform: translateX(-0.06rem);
  }
  75% {
    transform: translateX(0.06rem);
  }
}

/* ---------- 加载页 ---------- */
#loading {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #f5f1e8;
  transition: opacity 0.7s ease;
}
#loading.off {
  opacity: 0;
  pointer-events: none;
}
.ld-heart {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  animation: heartbeat 1.1s ease infinite alternate;
}
.ld-heart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ld-heart svg:last-child {
  transform: translate(18%, 14%) scale(0.72);
}
@keyframes heartbeat {
  from {
    transform: scale(0.94);
  }
  to {
    transform: scale(1.06);
  }
}
.ld-txt {
  font-size: 0.26rem;
  letter-spacing: 0.08rem;
  color: #910101;
}

/* ---------- 浮动按钮（自动浏览 / 回顶部） ---------- */
#float-btns {
  position: fixed;
  right: max(0.18rem, env(safe-area-inset-right));
  bottom: max(0.26rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
#float-btns button {
  width: 1rem;
  height: 1rem;
  border: 0.03rem solid rgba(145, 1, 1, 0.55);
  border-radius: 50%;
  background: #f8f4ed;
  color: #910101;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0.05rem 0.16rem rgba(96, 62, 40, 0.3),
    inset 0 0 0 0.06rem rgba(255, 255, 255, 0.65);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#float-btns button:active {
  transform: scale(0.92);
}
#float-btns svg {
  width: 0.52rem;
  height: 0.52rem;
}
#btn-auto .ic-play {
  display: none;
}
#btn-auto.paused .ic-play {
  display: block;
}
#btn-auto.paused .ic-pause {
  display: none;
}

/* ---------- 提示 toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 12%;
  z-index: 80;
  transform: translateX(-50%);
  max-width: 80vw;
  padding: 0.18rem 0.34rem;
  background: rgba(50, 38, 28, 0.82);
  color: #f7f3ea;
  font-size: 0.26rem;
  letter-spacing: 0.02rem;
  border-radius: 0.6rem;
  white-space: nowrap;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .eles {
    transition: opacity 0.4s ease;
    transform: none;
  }
  .ld-heart,
  .cal-dates li .heart,
  .ele-img.pill img {
    animation: none;
  }
}