.letter-ending { position: fixed; inset: 0; z-index: 100; pointer-events: none; --ending-x: 60%; --ending-y: 45%; }
.letter-ending[hidden] { display: none; }
.letter-ending.is-playing { pointer-events: auto; touch-action: none; }
.letter-ending__veil, .letter-ending__flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.letter-ending__veil { background: var(--moon-paper, #edf1eb); }
.letter-ending__flow { mix-blend-mode: multiply; filter: grayscale(1) brightness(.3); }
.letter-ending__light, .letter-ending__smoke { position: absolute; left: var(--ending-x); top: var(--ending-y); transform: translate(-50%, -50%); width: min(90vw, 680px); height: min(90vw, 680px); opacity: 0; }
.letter-ending__light { mix-blend-mode: screen; mask-image: radial-gradient(circle, #000 15%, transparent 68%); }
.letter-ending__light canvas, .letter-ending__smoke canvas { z-index: 0; }
body[data-letter-ending] { overflow: hidden; }
body[data-letter-ending] .wind-controls { pointer-events: none; opacity: 0; transition: opacity 400ms; }