@media (max-width: 767px) {
  html.is-wechat-webview .home {
    overflow: clip;
  }

  html.is-wechat-webview .home-story__pin {
    position: relative;
    top: auto;
    height: 1189px;
    min-height: 1189px;
    contain: none;
  }

  html.is-wechat-webview .home-hero-stage {
    position: sticky;
    top: 126px;
    right: auto;
    left: auto;
    width: calc(100% - 72px);
    margin: 0 36px;
    transform: none;
    will-change: auto;
  }

  /* Restored checkpoint 13 baseline: preserve its proven card relationship and side spacing. */
  html.is-wechat-webview .home-video {
    top: auto;
    right: 18px;
    bottom: 621px;
    left: 18px;
    z-index: 3;
    width: auto;
    height: auto;
    aspect-ratio: 9 / 16;
    transform: translate3d(0, 144px, 0);
  }

  /* Keep the next-layer opening card synchronized with the video. */
  html.is-wechat-webview .home-hero-stage {
    transform: translate3d(0, 144px, 0);
  }

  /* Shift the entire invitation page down so its blue edge clears the couple's faces. */
  html.is-wechat-webview .home-invitation {
    margin-top: 280px;
  }

  /* End the first-page card after a short 100px tail; keep the remaining invitation offset cream. */
  html.is-wechat-webview .home-story::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 2;
    height: 280px;
    background:
      linear-gradient(
        to right,
        var(--home-cream) 0 36px,
        var(--home-ivory) 36px calc(100% - 36px),
        var(--home-cream) calc(100% - 36px) 100%
      ) top / 100% 100px no-repeat,
      var(--home-cream);
    pointer-events: none;
  }

  .home-video::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 4;
    width: 64px;
    height: 32px;
    background: #fff;
    background-image: none;
    border-radius: 32px 32px 0 0;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .home-video::before {
    content: "上滑继续";
    position: absolute;
    bottom: 44px;
    left: 50%;
    z-index: 5;
    padding: 18px 0 0;
    color: #fff;
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none'%3E%3Cpath d='M2 8L9 2L16 8' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 18px 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-shadow: 0 1px 4px rgba(17, 17, 17, .72);
    font-family: "Site WenKai", "KaiTi", serif;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .08em;
    white-space: nowrap;
    transform: translate3d(-50%, 0, 0);
    animation: home-swipe-hint 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.home-swipe-hint-hidden .home-video::before {
    opacity: 0;
    animation: none;
    transform: translate3d(-50%, 4px, 0);
  }
}

@keyframes home-swipe-hint {
  0%,
  100% {
    opacity: .86;
    transform: translate3d(-50%, 0, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(-50%, -7px, 0);
  }
}

@keyframes home-hero-card-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 575px, 0);
  }
}

@supports (animation-timeline: scroll()) and (animation-range: 0px 960px) {
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    html:not(.is-wechat-webview) .home-hero-stage {
      animation: home-hero-card-scroll linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px max(960px, 114svh);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-video::before {
    animation: none;
  }
}