/* /demo and /founder: a big word or line that builds itself, letter by letter, and a video's skeleton under it
   until the video is ready. They stand on styles.css and flow.css (tokens, type, the
   quiet header and the footer). word.js splits the word into letters */

.word-page{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(8px,3vw,40px)}

/* ---------- the word ----------
   Each letter rises out of its own slot, unblurring as it comes, a beat (--step) after the one before it, and lands a
   little heavy (Geist goes from 400 to 700) before settling. Afterwards the letters near the pointer get heavier,
   as if it pressed on them (word.js sets --w) */
.word{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.24em;margin:0;font:600 clamp(92px,21vw,280px)/.88 var(--font);letter-spacing:-.065em;color:var(--ink);
  user-select:none;-webkit-user-select:none}
/* the smaller size both pages use, with the letters following each other quicker */
.word.small{--step:28ms;font-size:clamp(40px,6.4vw,92px);line-height:1;letter-spacing:-.05em}
.word .w-word{display:inline-flex;white-space:nowrap}
.word .w-slot{display:inline-block;overflow:clip;padding:.04em .02em .1em;margin:0 -.02em}
.word .w-ch{display:inline-block;font-variation-settings:'wght' var(--w,600);transform:translateY(108%) rotate(9deg);filter:blur(10px);opacity:0;
  transform-origin:0 100%;animation:letter 1.05s var(--ease) calc(.18s + var(--i) * var(--step,75ms)) forwards,heavy 1.4s var(--ease) calc(.18s + var(--i) * var(--step,75ms));
  transition:font-variation-settings .5s var(--ease)}
@keyframes letter{to{transform:none;filter:none;opacity:1}}
@keyframes heavy{0%,35%{font-variation-settings:'wght' 700}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.word:not(.split){opacity:0}            /* until word.js has split it: no flash of the whole word first */

/* the placeholder look: a sand block with a light sweeping across it */
.sk{background:linear-gradient(100deg,var(--panel) 40%,#f6f3ec 50%,var(--panel) 60%) 0 0/300% 100% var(--panel);animation:sweep 1.8s linear infinite}
@keyframes sweep{from{background-position:100% 0}to{background-position:-50% 0}}

/* ---------- where the video goes (/demo, /founder) ----------
   The video's skeleton, there from the start. Scrolling down widens it to the page's full width (--p, reel.js) */
.reel{position:relative;width:min(100%,calc(1000px + 200px * var(--p,0)));margin:clamp(36px,5vw,64px) auto 0}
.reel-frame{aspect-ratio:16/9;border-radius:var(--r-lg)}

/* no motion asked for: everything simply there */
@media (prefers-reduced-motion:reduce){
  .word .w-ch,.sk{animation:none;opacity:1;transform:none;filter:none}
  .word .w-ch{transition:none}
}