/* A bounded field of words: only this section moves. */
.encounters{display:block;padding-block:70px 55px}
.flow-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.flow-heading .eyebrow{font-size:10px;letter-spacing:.15em}
.flow-heading h2{font:400 32px/1.5 var(--serif);letter-spacing:.07em;margin-top:13px}



.encounter-field{--flow-columns:29;--flow-gap:4px;height:clamp(620px,76svh,780px);overflow:hidden;contain:layout paint;isolation:isolate;position:relative}
/* 上下渐隐：用纯色渐变覆盖层替代 mask，避免整棵动画子树被遮罩重绘 */
.encounter-field::before,.encounter-field::after{content:'';position:absolute;left:0;right:0;height:30px;pointer-events:none;z-index:3}
.encounter-field::before{top:0;background:linear-gradient(to bottom,rgba(245,244,239,1),rgba(245,244,239,0))}
.encounter-field::after{bottom:0;background:linear-gradient(to top,rgba(245,244,239,1),rgba(245,244,239,0))}
.flow-plane{position:absolute;left:50%;top:50%;width:var(--plane-width,100%);height:var(--plane-height,100%);display:grid;grid-template-columns:repeat(var(--flow-columns),minmax(0,1fr));gap:var(--flow-gap);transform:translate(-50%,-50%) rotate(-8deg);transform-origin:center}
.flow-lane{min-width:0;height:100%;overflow:hidden}
.flow-track{animation:encounter-drift var(--flow-duration,300s) linear var(--flow-delay,0s) infinite alternate;will-change:transform;animation-play-state:paused}
.encounter-field.is-ready .flow-track{animation-play-state:running}
.flow-quote{margin:0;padding:0 0 var(--fragment-gap,24px);break-inside:avoid;user-select:text}
.flow-quote blockquote{margin:0;font:15px/1.25 var(--serif);color:#424a3c}
.flow-size-1 blockquote{font-size:17px;color:#303a2e}
.flow-size-2 blockquote{font-size:14px;color:#68705e}
.flow-sentence-slot{display:block;position:relative;width:100%}
.flow-sentence{display:block;position:absolute;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;letter-spacing:.07em;transform:translate(calc(-50% + var(--push-x,0px)),calc(-50% + var(--push-y,0px))) rotate(calc(var(--piece-angle,0deg) + var(--push-r,0deg))) scale(var(--push-s,1));opacity:var(--push-o,1);transform-origin:center}
/* 逐帧推动时不做 transition（每帧重启过渡是主要卡顿源）；仅在整片散开收回时过渡 */
.encounter-field.is-releasing .flow-sentence{transition:transform .28s ease-out,opacity .28s ease-out}
.encounter-field.is-ready.is-resting .flow-track{animation-play-state:paused}
.encounter-field.is-ready.is-active .flow-track{animation-play-state:paused}
.encounter-field.is-static{height:clamp(620px,76svh,780px);overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:#9fa892 transparent}
.is-static .flow-plane{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none}
.is-static .flow-lane{height:auto;overflow:visible}
.is-static .flow-track{animation:none;transform:none;will-change:auto}
.is-static .flow-copy{display:none}
.encounter-field.is-static::before,.encounter-field.is-static::after{display:none}
.is-static .flow-sentence-slot{height:auto!important;margin-bottom:12px}
.is-static .flow-sentence{position:static;transform:none;margin:auto}
.flow-footnote{display:flex;justify-content:space-between;gap:20px;margin-top:21px;padding-top:18px;font-size:10px;line-height:1.8;color:var(--muted)}
@keyframes encounter-drift{from{transform:translate3d(0,var(--flow-start,0px),0)}to{transform:translate3d(0,var(--flow-end,0px),0)}}
@media(hover:hover){.encounter-field.is-ready:hover .flow-track{animation-play-state:paused}}
@media(max-width:760px){.encounters{padding-block:48px 40px}.flow-heading{gap:16px;margin-bottom:24px}.flow-heading h2{font-size:28px;margin-top:10px}.flow-heading .eyebrow{font-size:9px}.encounter-field{--flow-gap:3px;height:680px}.flow-quote blockquote{font-size:15px;letter-spacing:.07em}.flow-size-1 blockquote{font-size:16px}.flow-size-2 blockquote{font-size:14px}.flow-footnote{font-size:10px;display:block;margin-top:14px;padding-top:14px}.is-static.encounter-field{height:680px}}
@media(max-width:370px){.encounter-field{--flow-gap:3px}.flow-heading h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.flow-track{animation:none!important;transform:none!important;will-change:auto}.flow-sentence{transition:none}.flow-copy{display:none}}