/* Content sits on the shared mountain/ribbon backdrop (750px canvas). */
.page.content-motion > .cm-item {
  --cm-x: 0px;
  --cm-y: 8px;
  --cm-delay: 0ms;
  --cm-duration: 650ms;
  --cm-time: var(--cm-duration);
  --cm-wait: var(--cm-delay);
  transform-origin: 50% 70%;
}
/* 待入场元素只用透明度藏起（不用 visibility），翻书时就能提前栅格化成独立图层，出场不再临时绘制 */
.page.content-motion.cm-prepared > .cm-item {
  opacity: 0;
  transform: translate3d(var(--cm-x), var(--cm-y), 0);
  animation: none;
  pointer-events: none;
  will-change: transform, opacity;
}
.page.content-motion.cm-running > .cm-item {
  will-change: transform, opacity;
  animation: cm-arrive var(--cm-time) cubic-bezier(.22,.72,.25,1) var(--cm-wait) both;
}
.page.content-motion.cm-running > .cm-item:not(.cm-hot) {
  pointer-events: none;
}
.page.content-motion.cm-running > .cm-copy {
  animation-name: cm-ink;
}
.page.content-motion.cm-running > .cm-title {
  animation-name: cm-title-soft;
}
.page.content-motion.cm-running > .cm-sea {
  transform-origin: 50% 60%;
  animation:
    cm-ink var(--cm-time) ease-out var(--cm-wait) both,
    cm-sea-breathe 4800ms ease-in-out calc(var(--cm-wait) + var(--cm-time)) infinite;
}

/* Story node entrance motions (750px baseline amplitudes). */
.page.content-motion.cm-running > .cm-story-fish {
  --cm-x: -4px;
  animation-name: cm-fish;
}
.page.content-motion.cm-running > .cm-story-truck {
  --cm-x: -8px;
  animation-name: cm-truck;
}
.page.content-motion.cm-running > .cm-story-book {
  transform-origin: 50% 80%;
  animation-name: cm-book;
}
.page.content-motion.cm-running > .cm-story-factory {
  animation-name: cm-factory;
}
.page.content-motion.cm-running > .cm-story-grass {
  transform-origin: 50% 92%;
  animation-name: cm-grass-in;
}

.page.content-motion.cm-quick > .cm-item {
  --cm-y: 4px;
  --cm-time: 420ms;
  --cm-wait: var(--cm-quick-delay, 0ms);
}
.page.content-motion.cm-leaving > .cm-item {
  visibility: visible;
  animation: cm-depart 280ms ease-in both;
}
.page.content-motion.cm-settled > .cm-item {
  animation: none;
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* 翻页/返回按钮等画面出完再淡入 */
.page.content-motion.cm-leaving > .btn-next,
.page.content-motion.cm-leaving > .btn-back,
.page.content-motion.cm-prepared > .btn-next,
.page.content-motion.cm-prepared > .btn-back,
.page.content-motion.cm-running > .btn-next,
.page.content-motion.cm-running > .btn-back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.page.content-motion.cm-settled > .btn-next,
.page.content-motion.cm-settled > .btn-back {
  transition: opacity .4s ease, scale .12s ease, filter .12s ease;
}
/* P3 overlays sit above the shared blank book plate. */
#page-p3.content-motion > .p3-swipe,
#page-p3.content-motion > .p3-guide {
  transform-origin: 50% 45%;
}
/* Ambient after entrance: waves only; the combined grass/caption stays still. */
.page.content-motion.cm-settled > .cm-sea {
  animation: cm-sea-breathe 5200ms ease-in-out infinite;
}

/* Soft gold anchor: light once on entrance, again on tap — never five bouncing labels. */
.page.content-motion > .cm-hot {
  isolation: isolate;
  border-radius: 12px;
  transition: filter 160ms ease;
  transform-origin: 50% 60%;
}
.page.content-motion > .cm-hot::after {
  content: "";
  position: absolute;
  left: var(--cm-dot-x);
  top: var(--cm-dot-y);
  width: 27px;
  height: 27px;
  margin: -13.5px 0 0 -13.5px;
  border: 2px solid rgba(250,211,103,.88);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,222,137,.55);
  opacity: 0;
  pointer-events: none;
}
.page.content-motion.cm-running > .cm-hot::after {
  animation: cm-anchor-once 900ms ease-out calc(var(--cm-wait) + 280ms) both;
}
.page.content-motion > .cm-hot:active {
  filter: brightness(1.06) drop-shadow(0 2px 4px rgba(167,86,26,.2));
}
.page.content-motion > .cm-hot:focus-visible {
  outline: 3px solid #99501f;
  outline-offset: 5px;
  filter: brightness(1.04) drop-shadow(0 2px 5px rgba(184,99,29,.2));
}
.page.content-motion > .cm-hot.cm-tapped::after {
  animation: cm-tap-ring 430ms ease-out both;
}
.page.content-motion > .cm-story-factory.cm-tapped::before,
.page.content-motion.cm-running > .cm-story-factory::before {
  content: "";
  position: absolute;
  inset: 8% 12% 18% 10%;
  border-radius: 10px;
  background: linear-gradient(115deg, transparent 30%, rgba(255,245,210,.0) 42%, rgba(255,240,190,.45) 50%, rgba(255,245,210,.0) 58%, transparent 70%);
  background-size: 220% 100%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.page.content-motion.cm-running > .cm-story-factory::before {
  animation: cm-shine-sweep 700ms ease-out calc(var(--cm-wait) + 200ms) both;
}
.page.content-motion > .cm-story-factory.cm-tapped::before {
  animation: cm-shine-sweep 520ms ease-out both;
}
.page.content-motion > .cm-story-book.cm-tapped {
  animation: cm-book-tap 480ms ease-out both;
}
.page.content-motion.cm-prepared > .cm-hot::after,
.page.content-motion.cm-leaving > .cm-hot::after {
  animation: none;
  opacity: 0;
}
/* 入场后常驻的点击提示：金点向外扩散光波，各节点按路线错开 */
.page.content-motion.cm-settled > .cm-hot:not(.cm-tapped)::after {
  border: 3px solid rgba(255, 214, 110, .95);
  background: radial-gradient(circle, rgba(255, 246, 200, .9) 0%, rgba(255, 222, 137, .35) 40%, rgba(255, 222, 137, 0) 68%);
  animation: cm-hot-wave 6000ms cubic-bezier(.2, .7, .3, 1) var(--cm-wave-delay, 0ms) infinite;
}
/* 小手点击提示：外层随按钮跳站（只动 transform），内层做点按；入场完才出现 */
.page.content-motion > .cm-hand {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: transform 420ms cubic-bezier(.3, .7, .3, 1), opacity .4s ease;
}
.page.content-motion > .cm-hand img {
  display: block;
  width: 66px;
  margin: -3px 0 0 -7px;
  transform-origin: 10% 5%;
}
.page.content-motion.cm-settled > .cm-hand.is-placed { opacity: 1; }
.page.content-motion.cm-settled > .cm-hand img {
  animation: cm-hand-tap 1200ms ease-in-out infinite;
}
.page.content-motion > .cm-hand.is-done { display: none; }
@keyframes cm-hand-tap {
  0%, 38% { transform: translate3d(8px, 10px, 0); }
  52% { transform: translate3d(0, 0, 0) scale(.88); }
  66% { transform: translate3d(3px, 4px, 0) scale(1); }
  100% { transform: translate3d(8px, 10px, 0); }
}
@media (hover:hover) and (pointer:fine) {
  .page.content-motion > .cm-hot:hover {
    filter: brightness(1.05) drop-shadow(0 3px 5px rgba(184,99,29,.22));
  }
}

/* P1: one soft brightness pass along the ribbon (BR → TL), 0.8–1.6s. */
.page.content-motion > .cm-ribbon-pass {
  position: absolute;
  inset: 180px 40px 220px 60px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
.page.content-motion > .cm-ribbon-pass::before {
  content: "";
  position: absolute;
  left: -70%;
  top: -70%;
  width: 240%;
  height: 240%;
  background: linear-gradient(125deg, transparent 44%, rgba(255, 236, 196, .16) 50%, transparent 56%);
  transform: translate3d(35%, 35%, 0);
}
.page.content-motion.cm-running > .cm-ribbon-pass {
  animation: cm-ribbon-pass 900ms ease-in-out 550ms both;
}
.page.content-motion.cm-running > .cm-ribbon-pass::before {
  animation: cm-ribbon-pass-x 900ms ease-in-out 550ms both;
}

/* P1 主标题：背光 + 沿字形扫光，只在入场时出现 */
.page.content-motion > .cm-title-halo,
.page.content-motion > .cm-title-shine {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.page.content-motion > .cm-title-halo {
  z-index: 2;
  background: radial-gradient(ellipse 50% 46% at 50% 52%, rgba(255, 232, 176, .7), rgba(255, 206, 136, .28) 55%, rgba(255, 206, 136, 0) 75%);
}
/* 扫光：遮罩固定为标题字形，里面的光条只做位移 */
.page.content-motion > .cm-title-shine {
  z-index: 4;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.page.content-motion.cm-running > .cm-title-halo {
  animation: cm-title-halo 700ms ease-out var(--fx-delay, 0ms) both;
}
.page.content-motion > .cm-title-shine::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 248, 214, .95) 50%, transparent 80%);
  transform: translate3d(-100%, 0, 0);
}
.page.content-motion.cm-running > .cm-title-shine {
  animation: cm-title-shine 560ms linear var(--fx-delay, 0ms) both;
}
.page.content-motion.cm-running > .cm-title-shine::before {
  animation: cm-title-shine-x 560ms ease-in-out var(--fx-delay, 0ms) both;
}
/* P2/P3 标题落版后常驻：每 4.8s 轻轻放大一次并扫过一道金光 */
#page-p2.content-motion.cm-settled > .p2-title,
#page-p3.content-motion.cm-settled > .p3-title {
  transform-origin: 50% 55%;
  animation: cm-title-breathe 4800ms ease-in-out 600ms infinite;
}
#page-p2.content-motion.cm-settled > .cm-title-shine,
#page-p3.content-motion.cm-settled > .cm-title-shine {
  animation: cm-title-shine-loop 4800ms linear 600ms infinite;
}
#page-p2.content-motion.cm-settled > .cm-title-shine::before,
#page-p3.content-motion.cm-settled > .cm-title-shine::before {
  animation: cm-title-shine-x-loop 4800ms ease-in-out 600ms infinite;
}
#page-p2.content-motion.cm-settled > .cm-title-halo,
#page-p3.content-motion.cm-settled > .cm-title-halo {
  animation: cm-title-halo-loop 4800ms ease-in-out 600ms infinite;
}
@keyframes cm-title-breathe {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.045); }
  26% { transform: scale(1); }
}
@keyframes cm-title-shine-loop {
  0%, 22% { opacity: 1; }
  23%, 100% { opacity: 0; }
}
@keyframes cm-title-shine-x-loop {
  0% { transform: translate3d(-100%, 0, 0); }
  22%, 100% { transform: translate3d(170%, 0, 0); }
}
@keyframes cm-title-halo-loop {
  0%, 100% { opacity: 0; transform: scale(.9); }
  12% { opacity: .55; transform: scale(1.08); }
  30% { opacity: 0; transform: scale(1.2); }
}
/* 主标题拆成逐字块，原图只留作定位 */
.page.content-motion > .cm-title-source { visibility: hidden; }
/* 入场结束换回整张原图（逐字块拼好后与原图一致），常驻动效作用在原图上 */
.page.content-motion.cm-settled > .cm-title-source { visibility: visible; }
.page.content-motion.cm-settled > .cm-title-char { visibility: hidden; }
.page.content-motion > .cm-title-char {
  position: absolute;
  z-index: 3;
  background-repeat: no-repeat;
  pointer-events: none;
}

.page.content-motion.cm-prepared > .cm-ribbon-pass,
.page.content-motion.cm-settled > .cm-ribbon-pass,
.page.content-motion.cm-leaving > .cm-ribbon-pass,
.page.content-motion.cm-quick > .cm-ribbon-pass,
.page.content-motion.cm-prepared > .cm-title-halo,
.page.content-motion.cm-settled > .cm-title-halo,
.page.content-motion.cm-leaving > .cm-title-halo,
.page.content-motion.cm-quick > .cm-title-halo,
.page.content-motion.cm-prepared > .cm-title-shine,
.page.content-motion.cm-settled > .cm-title-shine,
.page.content-motion.cm-leaving > .cm-title-shine,
.page.content-motion.cm-quick > .cm-title-shine {
  animation: none;
  opacity: 0;
}

/* P1 元素入场：右下自下右升起、左上自左上落下、旗帜从旗杆根部展开、文案带墨晕侧入 */
.page.content-motion.cm-running > .cm-rise-br { transform-origin: 70% 100%; animation-name: cm-rise-br; }
.page.content-motion.cm-running > .cm-drop-tl { transform-origin: 30% 0%; animation-name: cm-drop-tl; }
.page.content-motion.cm-running > .cm-flag { transform-origin: 8% 100%; animation-name: cm-flag; }
.page.content-motion.cm-running > .cm-copy-l { --cm-x: -16px; animation-name: cm-copy-side; }
.page.content-motion.cm-running > .cm-copy-r { --cm-x: 16px; animation-name: cm-copy-side; }
.page.content-motion.cm-running > .cm-title-burst {
  transform-origin: 50% 50%;
  animation-name: cm-title-burst;
  animation-timing-function: cubic-bezier(.2, .8, .25, 1);
}

/* Keep this after animation shorthands so tap effects pause with the page too. */
.page.content-motion.cm-paused > .cm-item,
.page.content-motion.cm-paused > .cm-item::before,
.page.content-motion.cm-paused > .cm-item::after,
.page.content-motion.cm-paused > .cm-ribbon-pass,
.page.content-motion.cm-paused > .cm-ribbon-pass::before,
.page.content-motion.cm-paused > .cm-title-halo,
.page.content-motion.cm-paused > .cm-title-shine,
.page.content-motion.cm-paused > .cm-title-shine::before,
.page.content-motion.cm-paused > .cm-hand img {
  animation-play-state: paused;
}

@keyframes cm-arrive {
  0% { opacity:0; transform:translate3d(var(--cm-x),var(--cm-y),0); }
  100% { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes cm-ink {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes cm-title-soft {
  0% { opacity:0; transform:translate3d(0,10px,0); }
  55% { opacity:.85; transform:translate3d(0,2px,0); }
  100% { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes cm-depart {
  from { opacity:var(--cm-out-opacity,1); transform:var(--cm-out-transform,translate3d(0,0,0)); }
  to { opacity:0; transform:translate3d(var(--cm-exit-x, -6px),0,0); }
}
@keyframes cm-sea-breathe {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  45% { transform:translate3d(-2px,-2px,0) scale(1.006); }
  72% { transform:translate3d(1px,-1px,0) scale(1.003); }
}
@keyframes cm-fish {
  0% { opacity:0; visibility:hidden; transform:translate3d(-5px,6px,0); }
  1% { visibility:visible; }
  55% { opacity:1; transform:translate3d(4px,-1px,0); }
  100% { opacity:1; visibility:visible; transform:translate3d(0,0,0); }
}
@keyframes cm-truck {
  0% { opacity:0; visibility:hidden; transform:translate3d(-8px,5px,0); }
  1% { visibility:visible; }
  100% { opacity:1; visibility:visible; transform:translate3d(0,0,0); }
}
@keyframes cm-book {
  0% { opacity:0; visibility:hidden; transform:rotate(-2deg) translate3d(0,8px,0); }
  1% { visibility:visible; }
  58% { opacity:1; transform:rotate(1.6deg) translate3d(0,0,0); }
  100% { opacity:1; visibility:visible; transform:rotate(0deg) translate3d(0,0,0); }
}
@keyframes cm-book-tap {
  0% { transform:rotate(0deg); }
  40% { transform:rotate(-2deg); filter:brightness(1.08); }
  100% { transform:rotate(0deg); filter:none; }
}
@keyframes cm-factory {
  0% { opacity:0; visibility:hidden; transform:translate3d(0,8px,0); }
  1% { visibility:visible; }
  100% { opacity:1; visibility:visible; transform:translate3d(0,0,0); }
}
@keyframes cm-grass-in {
  0% { opacity:0; visibility:hidden; transform:translate3d(0,8px,0) rotate(-1deg); }
  1% { visibility:visible; }
  100% { opacity:1; visibility:visible; transform:translate3d(0,0,0) rotate(0deg); }
}
@keyframes cm-shine-sweep {
  0% { opacity:0; background-position:100% 0; }
  30% { opacity:.9; }
  100% { opacity:0; background-position:0% 0; }
}
@keyframes cm-anchor-once {
  0% { opacity:0; transform:scale(.7); }
  18% { opacity:.8; transform:scale(1); }
  100% { opacity:0; transform:scale(1.65); }
}
@keyframes cm-hot-wave {
  0% { opacity:0; transform:scale(.5); box-shadow:0 0 0 0 rgba(255,214,110,.9); }
  4% { opacity:1; transform:scale(.9); box-shadow:0 0 14px 4px rgba(255,214,110,.85); }
  30% { opacity:0; transform:scale(2.9); box-shadow:0 0 22px 8px rgba(255,214,110,0); }
  100% { opacity:0; transform:scale(2.9); }
}
@keyframes cm-tap-ring {
  from { opacity:.9; transform:scale(.9); }
  to { opacity:0; transform:scale(2.1); }
}
@keyframes cm-rise-br {
  0% { opacity:0; transform:translate3d(30px,34px,0) scale(.9); }
  65% { opacity:1; transform:translate3d(-3px,-4px,0) scale(1.015); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes cm-drop-tl {
  0% { opacity:0; transform:translate3d(-30px,-30px,0) scale(.9); }
  65% { opacity:1; transform:translate3d(3px,4px,0) scale(1.015); }
  100% { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes cm-flag {
  0% { opacity:0; transform:scale(.2,.05) rotate(-8deg); }
  45% { opacity:1; transform:scale(1.04,1.06) rotate(2deg); }
  70% { transform:scale(.98,.98) rotate(-1deg); }
  100% { opacity:1; transform:none; }
}
@keyframes cm-copy-side {
  0% { opacity:0; transform:translate3d(var(--cm-x),0,0); }
  60% { opacity:1; }
  100% { opacity:1; transform:translate3d(0,0,0); }
}
/* 落印：从稍大处压下，轻回弹定住 */
@keyframes cm-title-burst {
  0% { opacity:0; transform:translate3d(0,-8px,0) scale(1.38); }
  40% { opacity:1; transform:translate3d(0,0,0) scale(.94); }
  62% { transform:scale(1.03); }
  80% { transform:scale(.995); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes cm-title-halo {
  0% { opacity:0; transform:scale(.5); }
  35% { opacity:1; transform:scale(1.05); }
  100% { opacity:0; transform:scale(1.35); }
}
@keyframes cm-title-shine {
  0%, 100% { opacity:1; }
}
@keyframes cm-title-shine-x {
  from { transform:translate3d(-100%,0,0); }
  to { transform:translate3d(170%,0,0); }
}
@keyframes cm-ribbon-pass {
  0% { opacity:0; }
  18% { opacity:1; }
  100% { opacity:0; }
}
@keyframes cm-ribbon-pass-x {
  from { transform:translate3d(35%,35%,0); }
  to { transform:translate3d(-35%,-35%,0); }
}
@media (prefers-reduced-motion:reduce) {
  .page.content-motion.cm-running > .cm-item,
  .page.content-motion.cm-settled > .cm-item {
    animation:none !important;
    opacity:1;
    visibility:visible;
    transform:none;
    filter:none;
  }
  .page.content-motion > .cm-hot,
  .page.content-motion > .cm-hot::after,
  .page.content-motion > .cm-hot::before,
  .page.content-motion > .cm-ribbon-pass,
  .page.content-motion > .cm-title-halo,
  .page.content-motion > .cm-title-shine { animation:none !important; transition:none; }
  .page.content-motion > .cm-hand { display:none; }
  .page.content-motion > .cm-hot::after,
  .page.content-motion > .cm-ribbon-pass,
  .page.content-motion > .cm-title-halo,
  .page.content-motion > .cm-title-shine { opacity:0; }
}