/* ===========================================================================
   Feature Belt — pinned headline + scale-through belt of feature cards
   Same mechanic as gallery.css (.sgal) — items are flat tonal cards, not media.
   Motion driven by the FeatureBelt React binding.
   =========================================================================== */
.fbelt{position:relative;height:calc(var(--fbelt-len,5) * 100vh)}
.fbelt__stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
.fbelt__headline{position:absolute;top:clamp(28px,7vh,76px);left:50%;transform:translateX(-50%);margin:0;z-index:120;white-space:nowrap;font-family:var(--font-serif);font-weight:var(--weight-regular);font-size:clamp(24px,3.2vw,42px);letter-spacing:-0.01em;color:var(--ink-tertiary)}
.fbelt__word{color:var(--ink);font-style:italic;display:inline-block;animation:fbelt-word-in 260ms var(--ease-out)}
@keyframes fbelt-word-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fbelt__belt{position:absolute;inset:0}
.fbelt__item{position:absolute;top:0;left:0;margin:0;opacity:0;isolation:isolate;overflow:hidden;will-change:transform;transition:opacity 240ms var(--ease-out);display:flex;flex-direction:column;box-sizing:border-box;padding:clamp(20px,3.5vh,30px);background:var(--surface-raised);border-radius:var(--radius-lg)}
.fbelt__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.fbelt__media video,.fbelt__media img{width:100%;height:100%;object-fit:cover;display:block}
.fbelt__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12) 55%,rgba(0,0,0,.05))}
.fbelt__item[data-media] .fbelt__kicker,.fbelt__item[data-media] .fbelt__index{color:rgba(255,255,255,.72)}
.fbelt__item[data-media] .fbelt__title{color:#fff}
.fbelt__item[data-media] .fbelt__desc{color:rgba(255,255,255,.82)}
.fbelt--ready .fbelt__item{opacity:1}
.fbelt__kicker{display:flex;align-items:baseline;gap:10px;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-tertiary);margin:0}
.fbelt__index{font-family:var(--font-numeric,var(--font-mono-tech));color:var(--ink-secondary)}
.fbelt__visual{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin:10px 0;color:var(--ink-secondary)}
.fbelt__visual svg{width:72%;max-height:100%;height:auto}
.fbelt__item[data-media] .fbelt__visual{color:rgba(255,255,255,.8)}
.fbelt__title{margin:auto 0 12px;font-family:var(--font-serif);font-weight:var(--weight-regular);font-size:clamp(24px,3.6vh,30px);letter-spacing:-0.01em;line-height:1.15;color:var(--ink)}
.fbelt__desc{margin:0;font-family:var(--font-mono-tech);font-size:var(--fs-body-sm);line-height:1.55;color:var(--ink-secondary)}
@media (prefers-reduced-motion: reduce){.fbelt__word{animation:none}.fbelt__item{transition:none}}