/* 纪念册 · 展示动画 (film mode for screen recording) */
html.mf-lock, html.mf-lock body { overflow: hidden; }
.mf-overlay { position: fixed; inset: 0; z-index: 200; overflow: hidden; color: #f4f2ff; cursor: none; isolation: isolate;
  background: radial-gradient(ellipse 70% 55% at 50% 55%, #1b1d4a 0%, #0b0d26 55%, #04050f 100%); animation: mf-in .8s ease both; }
.mf-overlay.is-awake, .mf-overlay.is-ended { cursor: default; }
@keyframes mf-in { from { opacity: 0; } }
.mf-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.mf-glow { position: absolute; left: 50%; top: 52%; width: 80vmin; height: 80vmin; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(255, 196, 120, .22), rgba(150, 120, 255, .08) 45%, transparent 70%); filter: blur(10px); animation: mf-breathe 6s ease-in-out infinite; }
@keyframes mf-breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .8; } }

/* Title cards */
.mf-titles { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.mf-card { grid-area: 1 / 1; text-align: center; opacity: 0; transform: translateY(18px) scale(.98); filter: blur(6px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1), filter 1s ease; }
.mf-card.is-on { opacity: 1; transform: none; filter: none; }
.mf-kicker { margin: 0 0 14px; font: 12px/1.4 var(--mono); letter-spacing: .4em; color: #ffdfa8; }
.mf-big { margin: 0; font: 700 clamp(56px, 11vmin, 120px)/1.05 Georgia, var(--serif); letter-spacing: .02em;
  background: linear-gradient(110deg, #b8873b, #ffe3a3 30%, #c9963f 48%, #fff3cc 58%, #b8873b 80%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mb-foil 6s linear infinite; }
.mf-big b { font-weight: 700; }
.mf-line { margin: 14px 0 0; font: 500 clamp(16px, 2.6vmin, 24px)/1.6 var(--serif); letter-spacing: .3em; color: #d9cffd; }

/* The book and the camera */
.mf-scene { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 1800px; }
.mf-camera { position: relative; transform-style: preserve-3d; transition: transform 2.2s cubic-bezier(.2, .75, .15, 1), opacity 1.4s ease; will-change: transform; }
.mf-book-wrap { width: min(92vw, calc((100vh - 170px) / 1.4 * 2), 1000px); }
.mf-book-wrap .mb-book { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .6)); }
.mf-camera[data-shot="enter"] { opacity: 0; transform: translateY(42vh) rotateX(58deg) rotateZ(-8deg) scale(.5); }
.mf-camera[data-shot="cover"] { opacity: 1; transform: translateX(calc(var(--pw, 400px) * -.5)) rotateX(16deg) rotateZ(-3deg) scale(.88); }
.mf-camera[data-shot="open"] { opacity: 1; transform: rotateX(9deg) scale(1); }
.mf-camera[data-shot="drift"] { opacity: 1; transform: rotateX(9deg) scale(1); animation: mf-drift 14s ease-in-out infinite alternate; }
.mf-camera[data-shot="end"] { opacity: .0; transform: translateX(calc(var(--pw, 400px) * .5)) translateY(-4vh) rotateX(14deg) rotateZ(2deg) scale(.7); transition-duration: 2.4s, 2s; }
.mf-camera.is-portrait[data-shot="cover"] { transform: rotateX(14deg) rotateZ(-3deg) scale(.86); }
.mf-camera.is-portrait[data-shot="end"] { transform: translateY(-4vh) rotateX(14deg) scale(.7); }
@keyframes mf-drift {
  0% { transform: rotateX(9deg) rotateY(-5deg) translateY(0) scale(1); }
  50% { transform: rotateX(6deg) rotateY(2deg) translateY(-8px) scale(1.035); }
  100% { transform: rotateX(10deg) rotateY(5deg) translateY(4px) scale(1.01); }
}
/* A band of light that crosses the foil cover once. */
.mf-sweep { position: absolute; inset: -10%; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, .55) 48%, rgba(255, 255, 255, .8) 50%, rgba(255, 236, 190, .5) 52%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; }
.mf-overlay.is-sweeping .mf-sweep { animation: mf-sweep 1.6s ease-in-out forwards; }
@keyframes mf-sweep { 0% { opacity: 0; background-position: 130% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }

/* Lower-third caption */
.mf-caption { position: absolute; left: 0; right: 0; bottom: 5vh; z-index: 4; margin: 0; text-align: center; font: 500 clamp(14px, 2.2vmin, 20px)/1.5 var(--serif); letter-spacing: .24em; color: #e9e2ff;
  opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.mf-caption.is-on { opacity: .92; transform: none; }

/* End card */
.mf-end { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; opacity: 0; pointer-events: none; transform: scale(.97); transition: opacity 1.4s ease, transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.mf-overlay.is-ended .mf-end { opacity: 1; transform: none; pointer-events: auto; }
.mf-end-title { margin: 6px 0 12px; font: 700 clamp(30px, 6vmin, 60px)/1.3 var(--serif); letter-spacing: .04em; }
.mf-end-title em { font-style: normal; background: linear-gradient(110deg, #ffd58a, #ffb2a0 60%, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mf-end-price { margin: 0; font: 15px/1.6 var(--sans); letter-spacing: .14em; color: #c7b6ff; }
.mf-end-qr { width: clamp(120px, 18vmin, 180px); height: auto; margin: 26px 0 12px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 213, 138, .5), 0 20px 50px rgba(0, 0, 0, .45), 0 0 60px rgba(255, 213, 138, .25); }
.mf-end-hint { margin: 0; font-size: 14px; letter-spacing: .12em; color: #b9c6e6; }

/* Controls only appear when the mouse moves (or at the end), so they stay out of recordings. */
.mf-ui { position: absolute; top: 18px; right: 18px; z-index: 8; display: flex; gap: 10px; opacity: 0; transition: opacity .4s; }
.mf-overlay.is-awake .mf-ui, .mf-overlay.is-ended .mf-ui { opacity: 1; }
.mf-ui button { height: 38px; min-width: 38px; padding: 0 14px; border: 1px solid rgba(214, 222, 255, .25); border-radius: 999px; color: #e8ecff; background: rgba(20, 24, 56, .7); font: 14px var(--sans); cursor: pointer; }
.mf-ui .mf-close { padding: 0; font-size: 20px; }
.mf-overlay.is-playing .mf-replay { display: none; }

/* The film button under the book */
.mb-btn.mb-film { color: #1a1220; border-color: transparent; background: linear-gradient(120deg, #ffd58a, #ffb2a0); font-weight: 600; }