:root {
  --canvas-width: 1900;
  --canvas-height: 1200;
  --avocado-light: #b5c86d;
  --avocado: #91aa51;
  --avocado-deep: #4e6c38;
  --forest: #182d23;
  --ink-light: #edf0de;
  --ink-muted: rgba(237, 240, 222, 0.68);
  --transition-duration: 980ms;
  --transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stage-scale: 1;
  --silk-a-duration: 20000ms;
  --silk-a-delay: -6200ms;
  --silk-a-blur: 40px;
  --silk-a-from-x: -2.8%;
  --silk-a-from-y: -1.2%;
  --silk-a-from-rotate: -1.2deg;
  --silk-a-from-scale: 1.06;
  --silk-a-from-opacity: 0.54;
  --silk-a-to-x: 3.4%;
  --silk-a-to-y: 2.1%;
  --silk-a-to-rotate: 1deg;
  --silk-a-to-scale: 1.115;
  --silk-a-to-opacity: 0.78;
  --silk-b-duration: 29000ms;
  --silk-b-delay: -13100ms;
  --silk-b-blur: 58px;
  --silk-b-from-x: 2.2%;
  --silk-b-from-y: -1.8%;
  --silk-b-from-rotate: 0.35deg;
  --silk-b-from-scale: 1.045;
  --silk-b-from-opacity: 0.68;
  --silk-b-to-x: -3.8%;
  --silk-b-to-y: 2.8%;
  --silk-b-to-rotate: -0.45deg;
  --silk-b-to-scale: 1.125;
  --silk-b-to-opacity: 0.76;
  --silk-c-duration: 38000ms;
  --silk-c-delay: -23900ms;
  --silk-c-blur: 28px;
  --silk-c-from-x: -1.4%;
  --silk-c-from-y: 2.5%;
  --silk-c-from-rotate: -0.6deg;
  --silk-c-from-scale: 1.035;
  --silk-c-from-opacity: 0.34;
  --silk-c-to-x: 2.8%;
  --silk-c-to-y: -2.2%;
  --silk-c-to-rotate: 0.65deg;
  --silk-c-to-scale: 1.095;
  --silk-c-to-opacity: 0.46;
  --background-grain-opacity: 0.07;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #10180f;
}

body {
  font-family: Baskerville, "Songti SC", STSong, "Noto Serif CJK SC", serif;
  color: var(--ink-light);
  cursor: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

body.is-operator-active,
body.is-operator-pinned {
  cursor: default;
}

.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--canvas-width) * 1px);
  height: calc(var(--canvas-height) * 1px);
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
  background: var(--avocado);
  isolation: isolate;
}

.stage[data-fit="stretch"] {
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

.stage-background,
.scene-track,
.scene,
.silk-placeholder,
.water-background,
.background-video,
.background-wash,
.background-grain {
  position: absolute;
  inset: 0;
}

.stage-background {
  z-index: 0;
  overflow: hidden;
}

.silk-placeholder {
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 18%, rgba(222, 234, 166, 0.34), transparent 30%),
    linear-gradient(118deg, var(--avocado-deep), var(--avocado) 46%, #adc365 72%, #6f8d42);
}

.silk-layer {
  position: absolute;
  width: 150%;
  height: 160%;
  left: -25%;
  top: -30%;
  opacity: 0.72;
  transform-origin: center;
  will-change: transform, opacity;
}

.silk-layer-a {
  background:
    repeating-radial-gradient(
      ellipse 82% 54% at 22% 28%,
      transparent 0 8%,
      rgba(240, 245, 203, 0.26) 10%,
      rgba(240, 245, 203, 0.08) 12%,
      transparent 15% 23%
    ),
    repeating-radial-gradient(
      ellipse 70% 48% at 78% 72%,
      transparent 0 10%,
      rgba(43, 70, 34, 0.18) 13%,
      transparent 17% 27%
    );
  mix-blend-mode: soft-light;
  filter: blur(var(--silk-a-blur));
  animation: silk-drift-a var(--silk-a-duration) cubic-bezier(0.45, 0, 0.22, 1) infinite alternate;
  animation-delay: var(--silk-a-delay);
}

.silk-layer-b {
  background:
    radial-gradient(ellipse 36% 24% at 18% 44%, rgba(228, 237, 183, 0.42), transparent 72%),
    radial-gradient(ellipse 44% 30% at 56% 22%, rgba(205, 222, 143, 0.3), transparent 74%),
    radial-gradient(ellipse 40% 28% at 68% 72%, rgba(42, 70, 34, 0.4), transparent 76%),
    radial-gradient(ellipse 28% 20% at 92% 38%, rgba(224, 234, 173, 0.28), transparent 70%);
  mix-blend-mode: soft-light;
  filter: blur(var(--silk-b-blur));
  animation: silk-drift-b var(--silk-b-duration) cubic-bezier(0.45, 0, 0.22, 1) infinite alternate;
  animation-delay: var(--silk-b-delay);
}

.silk-layer-c {
  background:
    repeating-radial-gradient(
      ellipse 56% 38% at 34% 58%,
      transparent 0 7%,
      rgba(244, 247, 213, 0.15) 9%,
      transparent 11% 18%
    ),
    repeating-radial-gradient(
      ellipse 48% 34% at 74% 34%,
      transparent 0 9%,
      rgba(233, 240, 190, 0.1) 11%,
      transparent 14% 22%
    );
  mix-blend-mode: screen;
  filter: blur(var(--silk-c-blur));
  animation: silk-drift-c var(--silk-c-duration) cubic-bezier(0.45, 0, 0.22, 1) infinite alternate;
  animation-delay: var(--silk-c-delay);
}

.water-background {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.water-background.is-ready {
  opacity: 1;
}

.background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.background-video.is-ready {
  opacity: 1;
}

.background-wash {
  background:
    linear-gradient(180deg, rgba(15, 35, 24, 0.04), rgba(14, 29, 21, 0.22)),
    radial-gradient(circle at center, transparent 34%, rgba(12, 25, 18, 0.22) 118%);
  mix-blend-mode: multiply;
}

.background-grain {
  opacity: var(--background-grain-opacity);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.scene-track {
  z-index: 1;
}

.scene {
  display: grid;
  padding: 96px 124px;
  opacity: 0;
  transform: translate3d(0, 18%, 0) scale(0.985);
  transition:
    transform var(--transition-duration) var(--transition-ease),
    opacity 680ms ease;
  pointer-events: none;
  visibility: hidden;
}

.scene.is-current,
.scene.is-previous,
.scene.is-next {
  visibility: visible;
}

.scene.is-current {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.scene.is-previous {
  opacity: 0;
  transform: translate3d(0, -18%, 0) scale(0.985);
}

.scene.is-next {
  opacity: 0;
  transform: translate3d(0, 18%, 0) scale(0.985);
}

.scene-content {
  position: relative;
  z-index: 1;
  text-wrap: pretty;
  will-change: transform, opacity;
}

.breath {
  animation: text-breathe 10s ease-in-out infinite alternate;
}

.breath-medium {
  animation-duration: 8.5s;
  animation-delay: -2.4s;
}

.breath-wide {
  animation-duration: 12s;
  animation-delay: -5.2s;
}

.opening-lockup {
  place-self: center;
  width: 100%;
  text-align: center;
}

.opening-kicker,
.opening-date,
.date-year,
.date-day,
.arrival-lockup small,
.welcome-lockup > p,
.family-kicker,
.video-notice {
  font-family: Menlo, Monaco, "Courier New", monospace;
  letter-spacing: 0.22em;
}

.opening-kicker {
  margin: 0 0 54px;
  color: var(--ink-muted);
  font-size: 22px;
}

.opening-lockup h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  margin: 0;
  font-size: 132px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
}

.opening-lockup h1 span {
  /* 中文名字用本地「汉仪文黑」细体 35W（数黑体仅 Bold 一字重，无细体）；未安装则回退宋体系 */
  font-family: "汉仪文黑-35W", "HYWenHei-35W", "汉仪文黑", "HYWenHei",
    "Songti SC", STSong, "Noto Serif CJK SC", serif;
  font-weight: 100;
}

.opening-lockup h1 i {
  display: block;
  width: 116px;
  height: 1px;
  background: rgba(237, 240, 222, 0.62);
}

.opening-date {
  margin: 58px 0 0;
  color: var(--ink-muted);
  font-size: 24px;
}

.scene-holding {
  padding: 0;
}

.holding-pages,
.holding-page {
  position: absolute;
  inset: 0;
}

.holding-pages {
  overflow: hidden;
}

.holding-page {
  display: grid;
  padding: 96px 124px;
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    transform 920ms var(--transition-ease),
    opacity 760ms ease;
  visibility: hidden;
  will-change: transform, opacity;
}

.holding-page.is-holding-current,
.holding-page.is-holding-previous,
.holding-page.is-holding-next {
  visibility: visible;
}

.holding-page.is-holding-current {
  z-index: 1;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.holding-page.is-holding-previous {
  opacity: 0;
  transform: translate3d(0, -32px, 0);
}

.holding-lockup h2,
.holding-lockup p {
  font-weight: 400;
}

.holding-page-arrived {
  place-items: center start;
}

.holding-arrived-lockup {
  width: 1220px;
  margin: -24px 0 0 104px;
}

.holding-arrived-lockup h2 {
  margin: 0;
  font-size: 154px;
  line-height: 1.04;
  letter-spacing: 0.06em;
}

.holding-arrived-lockup p {
  margin: 52px 0 0 10px;
  color: var(--ink-muted);
  font-size: 48px;
  letter-spacing: 0.12em;
}

.holding-page-dessert {
  place-items: end;
}

.holding-dessert-lockup {
  width: 1180px;
  margin: 0 92px 70px 0;
  text-align: right;
}

.holding-dessert-lockup > p {
  margin: 0 0 34px;
  color: var(--ink-muted);
  font-size: 40px;
  letter-spacing: 0.14em;
}

.holding-dessert-lockup h2 {
  margin: 0;
  font-size: 116px;
  line-height: 1.08;
  letter-spacing: 0.06em;
}

.holding-dessert-lockup > span {
  display: block;
  margin-top: 34px;
  color: var(--ink-light);
  font-size: 46px;
  letter-spacing: 0.06em;
}

.holding-page-stay {
  place-items: center;
}

.holding-stay-lockup {
  width: 1360px;
  text-align: center;
}

.holding-topic {
  margin: 0 0 54px;
  color: var(--ink-muted);
  font-size: 32px;
  letter-spacing: 0.34em;
}

.holding-stay-lockup h2 {
  margin: 0;
  font-size: 104px;
  line-height: 1.08;
  letter-spacing: 0.07em;
}

.holding-companion {
  margin: 42px 0 0;
  color: var(--ink-light);
  font-size: 46px;
  letter-spacing: 0.06em;
}

.holding-stay-lockup small {
  display: block;
  margin-top: 92px;
  color: var(--ink-muted);
  font-size: 34px;
  letter-spacing: 0.08em;
}

.scene-vow {
  place-items: end;
}

.vow-lockup {
  width: 1080px;
  margin: 0 108px 0 0;
  text-align: right;
}

.vow-lockup p {
  margin: 0 0 38px;
  color: var(--ink-muted);
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 27px;
  letter-spacing: 0.28em;
}

.vow-lockup h2 {
  margin: 0;
  font-size: 120px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}

.vow-lockup small {
  display: block;
  margin-top: 54px;
  color: var(--ink-muted);
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 20px;
  letter-spacing: 0.22em;
}

.scene-date {
  place-items: center;
}

.date-lockup {
  display: grid;
  grid-template-columns: 170px auto 190px;
  align-items: end;
  column-gap: 46px;
}

.date-year,
.date-day {
  padding-bottom: 28px;
  color: var(--ink-muted);
  font-size: 22px;
}

.date-day {
  text-align: right;
}

.date-display {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  font-size: 250px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0.82;
  letter-spacing: -0.04em;
}

.date-display i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-light);
  opacity: 0.72;
}

.scene-arrival {
  place-items: center end;
}

.arrival-lockup {
  width: 1110px;
  margin-right: 76px;
  text-align: right;
}

.arrival-lockup > p {
  margin: 0 0 26px;
  color: var(--ink-muted);
  font-size: 36px;
  letter-spacing: 0.2em;
}

.arrival-lockup h2 {
  margin: 0;
  font-size: 146px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.04em;
}

.arrival-lockup small {
  display: block;
  margin-top: 52px;
  color: var(--ink-muted);
  font-size: 20px;
}

.scene-welcome {
  place-items: center;
}

.welcome-lockup {
  text-align: center;
}

.welcome-lockup > p {
  margin: 0 0 40px;
  color: var(--ink-muted);
  font-size: 22px;
}

.welcome-lockup h2 {
  margin: 0;
  font-size: 132px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.08em;
}

.welcome-lockup > span {
  display: block;
  margin-top: 48px;
  color: var(--ink-muted);
  font-size: 30px;
  letter-spacing: 0.22em;
}

/* ---- Family 与家人共此刻：父母上台阶段，安静场景 ---- */
.scene-family {
  /* 现场按 LED 实际效果微调这几个值即可 */
  --family-left: 240px;
  --family-bottom: 175px;
  --family-gap: 28px;
  --family-kicker-size: 22px;
  --family-title-size: 72px;
  --family-title-opacity: 0.95;
  padding: 0;
  place-items: end start;
}

.family-content {
  margin: 0 0 var(--family-bottom) var(--family-left);
  text-align: left;
}

.family-kicker {
  margin: 0 0 var(--family-gap);
  color: rgba(237, 240, 222, 0.78);
  font-size: var(--family-kicker-size);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.family-title {
  margin: 0;
  font-size: var(--family-title-size);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  opacity: var(--family-title-opacity);
}

/* 进入场景：kicker 先入，标题晚 100ms 依次入场；之后整块轻微呼吸 */
.scene-family.is-current .family-content {
  animation: family-breathe 6.5s ease-in-out 1.2s infinite alternate;
}

.scene-family.is-current .family-kicker {
  animation: family-kicker-in 900ms var(--transition-ease) both;
}

.scene-family.is-current .family-title {
  animation: family-title-in 1050ms var(--transition-ease) 100ms both;
}

@keyframes family-kicker-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes family-title-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes family-breathe {
  from {
    transform: translate3d(0, -2px, 0) rotate(-0.03deg);
    opacity: 0.95;
  }
  to {
    transform: translate3d(0, 2px, 0) rotate(0.03deg);
    opacity: 1;
  }
}

.video-notice {
  position: absolute;
  z-index: 3;
  left: 48px;
  bottom: 34px;
  display: grid;
  gap: 8px;
  color: rgba(237, 240, 222, 0.66);
  font-size: 18px;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.video-notice small {
  color: rgba(237, 240, 222, 0.46);
  font-size: 14px;
  letter-spacing: 0.08em;
}

body.is-operator-active .video-notice.is-visible {
  opacity: 1;
}

@keyframes silk-drift-a {
  0% {
    transform: translate3d(var(--silk-a-from-x), var(--silk-a-from-y), 0)
      rotate(var(--silk-a-from-rotate)) scale(var(--silk-a-from-scale));
    opacity: var(--silk-a-from-opacity);
  }
  100% {
    transform: translate3d(var(--silk-a-to-x), var(--silk-a-to-y), 0)
      rotate(var(--silk-a-to-rotate)) scale(var(--silk-a-to-scale));
    opacity: var(--silk-a-to-opacity);
  }
}

@keyframes silk-drift-b {
  0% {
    transform: translate3d(var(--silk-b-from-x), var(--silk-b-from-y), 0)
      rotate(var(--silk-b-from-rotate)) scale(var(--silk-b-from-scale));
    opacity: var(--silk-b-from-opacity);
  }
  100% {
    transform: translate3d(var(--silk-b-to-x), var(--silk-b-to-y), 0)
      rotate(var(--silk-b-to-rotate)) scale(var(--silk-b-to-scale));
    opacity: var(--silk-b-to-opacity);
  }
}

@keyframes silk-drift-c {
  0% {
    transform: translate3d(var(--silk-c-from-x), var(--silk-c-from-y), 0)
      rotate(var(--silk-c-from-rotate)) scale(var(--silk-c-from-scale));
    opacity: var(--silk-c-from-opacity);
  }
  100% {
    transform: translate3d(var(--silk-c-to-x), var(--silk-c-to-y), 0)
      rotate(var(--silk-c-to-rotate)) scale(var(--silk-c-to-scale));
    opacity: var(--silk-c-to-opacity);
  }
}

.stage[data-background-motion="off"] .silk-layer {
  animation: none;
}

@keyframes text-breathe {
  0% {
    transform: translate3d(-3px, 4px, 0) rotate(-0.06deg) scale(0.998);
    opacity: 0.92;
  }
  46% {
    transform: translate3d(4px, -2px, 0) rotate(0.05deg) scale(1.002);
    opacity: 1;
  }
  100% {
    transform: translate3d(-1px, -5px, 0) rotate(-0.03deg) scale(1);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 1ms;
  }

  .silk-layer,
  .breath {
    animation: none;
  }

  .holding-page {
    transition: none;
  }

  .background-video {
    transition: none;
  }

  .water-background {
    display: none;
    transition: none;
  }

  .scene-family.is-current .family-content,
  .scene-family.is-current .family-kicker,
  .scene-family.is-current .family-title {
    animation: none;
  }
}