/* The epilogue: a heart of photos, the last words, and a way back to the beginning. */
.epilogue { position:relative; z-index:1; padding:var(--scene-space,80px) 0 calc(var(--scene-space,80px) * 1.4); text-align:center; overflow-x:clip; }
.epilogue-heart { --tile:min(42px, calc((100vw - 40px) / var(--cols))); position:relative; width:calc(var(--tile) * var(--cols)); height:calc(var(--tile) * var(--rows)); margin:0 auto; }
.epilogue-heart:after { content:""; position:absolute; inset:-18%; z-index:-1; background:radial-gradient(circle at 50% 45%, #f387b544, transparent 62%); opacity:0; transition:opacity 2s 2.4s; }
.epilogue-heart.is-gathered:after { opacity:1; }
.epilogue-tile { position:absolute; left:calc(var(--col) * var(--tile)); top:calc(var(--row) * var(--tile)); width:calc(var(--tile) - 2px); height:calc(var(--tile) - 2px); border-radius:3px; background:#3a2a33 center / cover no-repeat; box-shadow:0 2px 6px #0006; opacity:0; transform:translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.6); transition:transform 1.8s cubic-bezier(.2,.7,.15,1) var(--delay), opacity 1s ease var(--delay); }
.epilogue-heart.is-gathered .epilogue-tile { opacity:1; transform:none; }
.epilogue-heart.is-gathered { animation:epilogue-beat 1.6s ease-in-out 3.6s infinite; }
@keyframes epilogue-beat { 0%,100% { transform:scale(1); } 12% { transform:scale(1.045); } 24% { transform:scale(.99); } 36% { transform:scale(1.03); } 50% { transform:scale(1); } }

.epilogue-words { margin-top:56px; }
.epilogue-words h2 { margin-top:16px; }
.epilogue-words h2 .zh { display:block; font-size:clamp(30px,3.6vw,48px); line-height:1.35; color:var(--ink); }
.epilogue-words h2 em { display:block; margin-top:8px; font:italic clamp(26px,2.8vw,38px)/1.2 var(--serif); }
.epilogue-letter { margin:30px auto 0; max-width:520px; font:16px/2.1 var(--zh); letter-spacing:.06em; color:#e1cdd6; }
.epilogue-letter-en { margin:14px auto 0; max-width:480px; font:italic 19px/1.5 var(--serif); color:var(--muted); }
.epilogue-sign { margin-top:28px; font:15px/1.8 var(--zh); letter-spacing:.2em; color:var(--pink); }
.epilogue-sign span { display:block; font:italic 18px var(--serif); letter-spacing:0; }
.epilogue-replay { margin-top:40px; }
.epilogue-credit { margin-top:34px; font:11px var(--mono); letter-spacing:.2em; color:var(--muted); opacity:.75; }
/* The words arrive after the heart has formed. */
.epilogue-words > * { opacity:0; transform:translateY(14px); transition:opacity 1.1s, transform 1.1s var(--motion); }
.epilogue-heart.is-gathered + .epilogue-words > * { opacity:1; transform:none; }
.epilogue-heart.is-gathered + .epilogue-words > :nth-child(1) { transition-delay:2.6s; }
.epilogue-heart.is-gathered + .epilogue-words > :nth-child(2) { transition-delay:2.9s; }
.epilogue-heart.is-gathered + .epilogue-words > :nth-child(3) { transition-delay:3.4s; }
.epilogue-heart.is-gathered + .epilogue-words > :nth-child(4) { transition-delay:3.8s; }
.epilogue-heart.is-gathered + .epilogue-words > :nth-child(5) { transition-delay:4.2s; }
.epilogue-heart.is-gathered + .epilogue-words > :nth-child(n+6) { transition-delay:4.6s; }

@media(max-width:760px) {
  .epilogue-letter { font-size:14px; }
  .epilogue-letter-en { font-size:16px; padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .epilogue-tile,.epilogue-words > * { transition:none; }
  .epilogue-heart.is-gathered { animation:none; }
}