/* Everything fixed to the screen: top bar + wordmark, loader, bottom project rail. */

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:20;padding:calc(env(safe-area-inset-top,0px) + 22px) var(--gutter) 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:linear-gradient(var(--paper) 55%,transparent) /* taste-skill-ignore: a fade under the fixed bar, works as a scrim */}
.top nav{display:flex;gap:22px;font-size:var(--fs-1);font-weight:600}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--blue)}

/* wordmark: SHARIF in ink, SPECIALPROJECTS in blue */
.mark{display:inline-block;font-weight:800;font-size:var(--fs-1);letter-spacing:0;line-height:1;text-decoration:none;white-space:nowrap;color:var(--ink);transition:opacity .3s}
.mark .b{color:var(--blue)}
.mark.pre{opacity:0;animation:mark-failsafe 0s 6s forwards}  /* revealed by js; failsafe if scripts never run */
@keyframes mark-failsafe{to{opacity:1}}
.mark i{font-style:normal;display:inline-block}
.mark i.k{color:var(--ink)}
.mark i.bl{color:var(--blue)}
/* scrolled down: everything but S, S, P fades and those three slide together into SSP (js/wordmark.js) */
.mark i{transition:transform .28s var(--ease-out),opacity .2s var(--ease-out)}
.mark.folded i{opacity:0;transform:translate3d(0,-.3em,0)}
.mark.folded i.keep{opacity:1;transform:translate3d(var(--to,0),0,0)}
.mark.instant i{transition:none}

/* loader: the wordmark fills in SHARIF → SPECIAL → PROJECTS, then cuts to the page */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding-inline:16px;background:var(--paper);
  /* safety net: if scripts never run, the loader still gets out of the way */
  animation:loader-failsafe 0s 6s forwards}
@keyframes loader-failsafe{to{visibility:hidden}}
.ld-word{position:relative;font-weight:800;font-size:var(--fs-3);letter-spacing:0;line-height:1;white-space:nowrap}
.ld-word .ghost{color:var(--rule)}
.ld-word .fill{position:absolute;inset:0;clip-path:inset(-10% 100% -10% 0);color:var(--ink)}
.ld-word .b{color:var(--blue)}

/* bottom rail: every project, drifting sideways, faster when you scroll */
.rail{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);
  padding-bottom:env(safe-area-inset-bottom,0px);overflow:hidden}
.rail-track{display:flex;align-items:center;width:max-content;will-change:transform}
/* one client per stop, spaced wide so the row reads as a sequence, not a cluster */
.rail button{flex:none;display:flex;align-items:center;height:var(--rail-h);gap:12px;padding:0 clamp(26px,3.5vw,52px);background:none;border:0;cursor:pointer;color:var(--ink);font-size:var(--fs-1);--logo-h:19px;transition:color .25s ease,transform var(--press) var(--ease-out)}
.rail-t{font-weight:700;font-size:var(--fs-1);white-space:nowrap}
.rail button:hover{color:var(--blue)}
.rail button.on{color:var(--blue)}
.rail button:active{transform:scale(.97)}

/* phones: the links collapse to one pill, Musings (or Work, on the Musings pages) */
.top-pill{display:none;align-items:center;min-height:36px;padding:0;font-weight:700;font-size:var(--fs-1);color:var(--ink);text-decoration:none;transition:transform var(--press) var(--ease-out)}
.top-pill:active{transform:scale(.97)}
@media (max-width:760px){
  .top nav{display:none}
  .top-pill{display:inline-flex}
  .top{padding-top:calc(env(safe-area-inset-top,0px) + 14px);padding-bottom:12px}
}