/* Click-driven trails, a compact web button and the crosswalk return. */
html { scrollbar-gutter: stable; }
html.home-flow-enabled { scroll-behavior: auto; }
html.home-flow-enabled { scrollbar-gutter: auto; scrollbar-width: none; }
html.home-flow-enabled::-webkit-scrollbar { display: none; }
html.home-locked, html.home-locked body { overflow: hidden; }
.home-work[hidden] { display: none; }
.home-stage[hidden] { display: none; }
.home .masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  margin-top: -1rem;
  padding-top: 1rem;
  background: var(--bg);
}
.home .masthead::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--gutter));
  background: var(--bg);
  z-index: -1;
}
.home-stage {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 64px);
}
/* A small beveled link, like a button on an early Japanese portal. */
.work-launch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  vertical-align: baseline;
  min-height: 23px;
  margin: 0 .12rem;
  padding: .18rem .45rem;
  border: 1px solid var(--rule);
  border-radius: 1px;
  background: linear-gradient(var(--toolbar-top), var(--toolbar-bottom));
  box-shadow: inset 1px 1px 0 var(--bg), inset -1px -1px 0 var(--rule), 1px 1px 0 var(--rule);
  color: #24559b;
  font: 500 11px/1.3 var(--font-ui);
  text-shadow: 0 1px var(--bg);
  white-space: nowrap;
  text-decoration: none;
}
[data-theme="dark"] .work-launch { color: #a5c2e6; }
.work-launch::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent);
  box-shadow: 1px 1px 0 var(--rule);
}
.work-launch__label { text-decoration: underline; text-underline-offset: 2px; }
.work-launch__icon { width: 12px; height: 12px; color: var(--fg); flex: none; }
.work-launch:hover { animation: work-launch-registration .2s steps(1, end) 1; }
.work-launch:hover .work-launch__icon { color: var(--accent); }
.work-launch:active { transform: translate(1px, 1px); box-shadow: inset 1px 1px 2px var(--rule); }
.work-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes work-launch-registration {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, 0); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(0, -1px); }
}
.flow-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.home-work {
  position: relative;
  z-index: 1;
  background: var(--bg);
  min-height: calc(100svh - 64px);
  padding: 24px 0 32px;
  scroll-margin-top: 100px;
}
/* The lines appear on click; only the dive blurs the content. */
.home[data-void-dive="down"] .home-stage,
.home[data-void-dive="down"] .home-work { filter: url("#void-rush-blur"); will-change: filter; }
.void-rush {
  position: fixed;
  z-index: 20;
  inset: 80px 0 auto;
  height: 0;
  width: 90%;
  max-width: 880px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.void-rush span {
  flex: none;
  width: clamp(3px, .6vw, 6px);
  height: 68%;
  background: linear-gradient(transparent, var(--trail-colour, #cc745e) 18%, var(--trail-colour, #cc745e) 78%, transparent);
  opacity: .85;
  transform: translateY(-12%);
}
.void-rush span:nth-child(3n) { --trail-colour: #ceb06b; height: 93%; transform: translateY(18%); }
.void-rush span:nth-child(3n + 1) { height: 45%; transform: translateY(-28%); }
.void-rush span:nth-child(3n + 2) { --trail-colour: #8ca77e; }
.void-rush span:nth-child(4n) { height: 80%; transform: translateY(32%); }

/* Services stays in its final layout throughout the handoff. */
html.flow-transitioning, html.flow-transitioning body { overflow: hidden; }
.flow-transitioning .nav { pointer-events: none; }
.services-live { position: relative; }
.services-live[hidden] { display: none; }
.services-live .section { padding-bottom: var(--s6); }
.services-live .section__head { padding: var(--s3) 0 var(--s4); }
.services-live [data-reveal] { opacity: 1; transform: none; transition: none; }
.services-live .rate { position: relative; }
.services-live h2:focus { outline: none; }
.service-rule { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule); transform-origin: 100% 50%; }
.flow-outgoing {
  position: fixed;
  bottom: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}
.walking-crossing { position: absolute; display: flex; gap: 5px; transform: translate(-50%, -50%) rotate(-6deg); }
.walker-runner { display: block; flex: 1 1 0; min-width: 0; opacity: 1; filter: drop-shadow(0 0 1px currentColor); }
.walker-runner .walker { pointer-events: none; }

/* Crosswalk interstitial: content changes below the crisp, stationary toolbar. */
.return-screen {
  position: fixed;
  inset: 80px 0 0;
  z-index: 22;
  width: 90%;
  max-width: 880px;
  margin-inline: auto;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
[data-home-return] .return-screen,
[data-home-arrival] .return-screen { visibility: visible; opacity: 1; }
.return-screen__wash { position: absolute; inset: 0; background: var(--bg); opacity: 0; }
.return-screen .project-crossing__signals { z-index: 1; }
.return-screen__sweep { top: 68%; opacity: 0; }
.return-screen__large { top: 50%; width: 130%; max-width: none; opacity: 0; }
.return-screen .project-crossing__signal { animation: none; opacity: .55; }
.return-screen__large .project-crossing__signal { filter: blur(.6px) drop-shadow(0 0 4px currentColor); }
[data-home-return] .project-crossing > .project-crossing__link > .project-crossing__signals { opacity: 0; }
[data-home-return] #workGrid { pointer-events: none; }
[data-home-arrival] .return-screen__wash { opacity: 1; }
[data-home-arrival] .return-screen__large { opacity: .72; }

@media (max-width: 620px) {
  .home-stage { min-height: calc(100svh - 90px); }
  .return-screen__large { width: 170%; }
}
@media (prefers-reduced-motion: reduce) {
  .work-launch:hover { animation: none; }
  .void-rush { display: none; }
  .return-screen { display: none; }
  .walking-crossing { display: none; }
}