/* Manifesto: an endless web drifting behind the principle, and an emphasised
   word that keeps its letters on a leash (manifesto.js). */
.manifesto{
  --man-row-gap: clamp(18px, 3vw, 34px);
  --man-row-size: clamp(12px, 1.15vw, 15px);
  --man-row-alpha: .2;
  --man-drift: 90s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* The web, endless: real source domains from the Gravity audits, looping. */
.man-web{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;gap:var(--man-row-gap);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.man-row{display:flex;width:max-content;color:var(--faint);font:500 var(--man-row-size)/1 DM Mono,monospace;letter-spacing:.04em;white-space:nowrap;opacity:var(--man-row-alpha)}
.man-row span{padding-right:.9em}
html.motion .man-row{animation:man-drift var(--man-drift) linear infinite}
html.motion .man-row:nth-child(2){animation-duration:calc(var(--man-drift) * .72);animation-direction:reverse}
html.motion .man-row:nth-child(3){animation-duration:calc(var(--man-drift) * 1.25)}
@keyframes man-drift{to{transform:translate3d(-50%,0,0)}}

/* Lines fade up instead of rising out of a mask: the scattered letters need room. */
html.motion .manifesto h2.lines .ln{overflow:visible}
html.motion .manifesto h2.lines .ln>i{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--soft),transform .9s var(--rise)}
html.motion .manifesto h2.lines.in .ln>i{opacity:1;transform:none}

.man-chaos{white-space:nowrap}
.man-chaos .ch{display:inline-block;will-change:transform}
.man-chaos-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.manifesto h2 em{cursor:pointer}

@media(prefers-reduced-motion:reduce){.man-row{animation:none}}