/* Scroll moves space; triggered content always finishes. */
/* Hero choreography: the words rise, the written word is inked in and dries, the pen underlines it, the nib draws the sheet, the question box lands. */
.page[data-view="home"] .bar .wordmark-logo { animation: ink-write .8s .15s cubic-bezier(.45, 0, .2, 1) both; }
#home .h1 .w { animation: word-rise 1.05s var(--ease) both; animation-delay: calc(90ms + var(--i) * 70ms); }
#home .h1 .it .w { animation: ink-write .72s .5s cubic-bezier(.45, 0, .2, 1) both, ink-dry 1.1s .62s ease-out both; }
#home .h1 .stroke path { animation: pen 1.1s 1.1s cubic-bezier(.6, 0, .25, 1) both; }
#home .promise { animation: fade-up .9s .52s var(--ease) both; }
#home .hero-start { animation: land 1.1s .64s var(--ease) both; }
#home .caret { animation: blink 1.1s steps(1, end) 1.4s infinite; }
#home .hero-new { animation: fade-up .9s .76s var(--ease) both; }
#home .hero-new::after { animation: sheen 1.5s 1.7s cubic-bezier(.4, 0, .2, 1) both; }
#home .hero-new-tag { animation: ping 1.2s 1.5s ease-out 1; }
#home .hero-sheet { animation: lay 1.6s .12s var(--ease) both; }
#home .clip { animation: ink 1.9s .5s cubic-bezier(.5, 0, .3, 1) both; }
#home .clip img { animation: settle 2.2s .5s var(--ease) both; }
#home .nib { animation: nib 1.9s .5s cubic-bezier(.5, 0, .3, 1) both, nib-life 2.05s .5s linear both; }
#home details[open] > p { animation: disclose 360ms var(--ease) both; }
@keyframes word-rise { from { transform: translate3d(0, 118%, 0); } }
@keyframes pen { from { stroke-dashoffset: calc(var(--pen, 1.2) + .05); } to { stroke-dashoffset: 0; } }
@keyframes ink-write { from { clip-path: inset(-.3em 100% -.35em -.1em); } to { clip-path: inset(-.3em -.25em -.35em -.1em); } }
@keyframes ink-dry { from { color: var(--signal); } 55% { color: var(--signal-text); } to { color: var(--ink); } }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes land { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ping { from { box-shadow: 0 0 0 0 #f0442073; } to { box-shadow: 0 0 0 12px #f0442000; } }
@keyframes sheen { to { transform: translateX(110%); } }
@keyframes lay { from { opacity: 0; transform: rotate(-4.5deg) translate3d(36px, -18px, 0) scale(1.04); } }
@keyframes ink { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 108% 0, 100% 100%, 0 100%); } }
@keyframes nib { from { left: 0%; } to { left: 104%; } }
@keyframes nib-life { 0% { opacity: 0; translate: 0 -8px; } 6%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -10px; } }
@keyframes settle { from { scale: 1.05; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes disclose { from { opacity: 0; translate: 0 6px; } }
@keyframes drift { to { translate: 0 -56px; } }
@keyframes pop { from { opacity: 0; scale: .6; } }
@keyframes band-open { from { clip-path: inset(0 max(20px, 3.4vw) round 32px); } to { clip-path: inset(0 0 round 0); } }
@keyframes band-close { from { clip-path: inset(0 0 round 0); } to { clip-path: inset(0 max(20px, 3.4vw) round 32px); } }
@keyframes hairline { to { opacity: 1; } }
@keyframes progress { to { transform: scaleX(1); } }
@keyframes focus-in { from { opacity: 0; filter: blur(.16em); transform: translate3d(0, .12em, 0); } }
@keyframes type-word { from { opacity: 0; transform: translate3d(0, .18em, 0); } }
@keyframes press { 45% { scale: .9; background-color: var(--signal-hover); } }
@keyframes card-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes sweep { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes render-head-life { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ribbon-wipe { from { clip-path: inset(-12% 100% -12% 0); } to { clip-path: inset(-12% 0 -12% 0); } }
@keyframes type-line { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes print-land { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.97); } }
/* Motion, part 1: the scroll moves space (header, hero depth, the night band). The page is complete without it. */
@supports (animation-timeline: view()) {
  .page[data-view="home"] .bar::before { animation: hairline linear both; animation-timeline: scroll(nearest); animation-range: 0px 120px; }
  .page[data-view="home"] .bar::after { animation: progress linear both; animation-timeline: scroll(nearest); }
  #home .clip img { animation: settle 2.2s .5s var(--ease) both, drift linear both; animation-timeline: auto, scroll(nearest); animation-range: normal, 0px 760px; }
  /* The night band opens like a lens as it arrives and closes again as it leaves. */
  #home .night { animation: band-open var(--scrub) both, band-close var(--scrub) forwards; animation-timeline: view(), view(); animation-range: cover 0px cover 420px, cover calc(100% - 420px) cover 100%; }
}
/* Motion, part 2: content plays once when it arrives and always finishes, however fast the scroll.
       The script adds .is-animated; without it (or with reduced motion) nothing is ever hidden. */
#home.is-animated [data-reveal="fade"]:not(.is-in) { opacity: 0; }
#home [data-reveal="fade"].is-playing { animation: fade-up 900ms var(--ease) both; animation-delay: var(--d, 0ms); }
/* Statements rise from behind their baseline, the written word is inked in, then the pen underlines. */
#home.is-animated [data-reveal="rise"]:not(.is-in) .w { transform: translate3d(0, 118%, 0); }
#home [data-reveal="rise"].is-playing .w { animation: word-rise 1050ms var(--ease) both; animation-delay: calc(var(--i) * 62ms); }
#home.is-animated [data-reveal="rise"]:not(.is-in) .it .w { transform: none; clip-path: inset(-.3em 100% -.35em -.1em); }
#home [data-reveal="rise"].is-playing .it .w { animation: ink-write 720ms cubic-bezier(.45, 0, .2, 1) both, ink-dry 1100ms ease-out both; animation-delay: calc(var(--i) * 62ms + 260ms), calc(var(--i) * 62ms + 380ms); }
#home.is-animated :is([data-reveal="rise"], [data-reveal="focus"]):not(.is-in) .stroke path { stroke-dashoffset: calc(var(--pen, 1.2) + .05); }
#home [data-reveal="rise"].is-playing .stroke path { animation: pen 1150ms cubic-bezier(.6, 0, .25, 1) both; animation-delay: calc(var(--n) * 62ms + 480ms); }
/* The vision comes into focus word by word, at the pace of speech, with a breath before "video." */
#home.is-animated [data-reveal="focus"]:not(.is-in) .w { opacity: 0; }
#home [data-reveal="focus"] .mark .w { --beat: 170ms; }
#home [data-reveal="focus"].is-playing .w { animation: focus-in 1500ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 92ms + var(--beat, 0ms)); }
#home [data-reveal="focus"].is-playing .stroke path { animation: pen 1250ms cubic-bezier(.6, 0, .25, 1) both; animation-delay: calc(var(--n) * 92ms + 820ms); }
/* Render: each print lands, starts as its question on a blank composer; Explain is pressed and a render head renders the picture. */
#home .poster { container-type: inline-size; }
#home .poster-card { position: absolute; inset: -1px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 6.4cqi 7cqi; background: var(--paper); }
#home .poster-q { max-width: 16em; color: var(--ink); font: 700 clamp(15px, 5.6cqi, 46px)/1.08 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
#home .qw { display: inline-block; }
#home .poster-go { align-self: flex-end; display: inline-flex; align-items: center; gap: .6em; padding: .78em 1.2em; border-radius: .6em; background: var(--signal); color: var(--ink); font: 700 clamp(8px, 1.55cqi, 15px)/1 var(--sans); box-shadow: 0 1px 0 #171a192e, inset 0 1px 0 #ffffff47; }
#home .poster-go span { font-weight: 400; font-size: 1.35em; }
#home :is(.render-head, .rivals-nib) { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
#home :is(.render-head, .rivals-nib)::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--signal); }
#home :is(.render-head, .rivals-nib)::after { content: ""; position: absolute; left: -6px; top: 0; width: 12px; height: 14px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); }
#home :is(.render-head, .rivals-nib) i { position: absolute; right: 100%; top: 0; bottom: 0; width: 14cqi; background: linear-gradient(to right, #f0442000, #f044201a); }
#home.is-animated [data-reveal="film"]:not(.is-in) :is(.print, .play, .dur, .film-title, .qw, .poster-go, .example-facts) { opacity: 0; }
#home [data-reveal="film"].is-playing .print { animation: print-land 900ms var(--ease) both; animation-delay: var(--d0); }
#home [data-reveal="film"].is-playing .qw { animation: type-word 360ms var(--ease) both; animation-delay: calc(var(--d0) + 200ms + var(--i) * 34ms); }
#home [data-reveal="film"].is-playing .poster-go { animation: fade-up 520ms var(--ease) both, press 320ms cubic-bezier(.3, 0, .3, 1) both; animation-delay: calc(var(--d0) + 200ms), var(--t-press); }
#home [data-reveal="film"].is-playing .poster-card { animation: card-out var(--sweep) cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--t-sweep); }
#home [data-reveal="film"].is-playing .render-head { animation: sweep var(--sweep) cubic-bezier(.65, 0, .35, 1) both, render-head-life var(--sweep) linear both; animation-delay: var(--t-sweep), var(--t-sweep); }
#home [data-reveal="film"].is-playing .poster-media img { animation: settle 1700ms var(--ease) both; animation-delay: var(--t-sweep); }
#home [data-reveal="film"].is-playing :is(.play, .dur) { animation: pop 650ms var(--ease) both; animation-delay: calc(var(--t-sweep) + var(--sweep) * .72); }
#home [data-reveal="film"].is-playing .film-title { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--t-sweep) + var(--sweep) * .4); }
#home [data-reveal="film"].is-playing .example-facts { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--t-sweep) + var(--sweep) * .6); }
/* Ribbon: one continuous stroke draws across all three drawings (ease in, glide, ease out) and each caption follows the pen. */
#home .path:nth-child(1) { --seg: 620ms; --seg-at: 0ms; --seg-ease: cubic-bezier(.5, 0, 1, 1); --copy-at: 240ms; }
#home .path:nth-child(2) { --seg: 310ms; --seg-at: 620ms; --seg-ease: linear; --copy-at: 700ms; }
#home .path:nth-child(3) { --seg: 620ms; --seg-at: 930ms; --seg-ease: cubic-bezier(0, 0, .5, 1); --copy-at: 1100ms; }
#home .path-copy > p { --k: 1; }
#home .path-copy > .arrow { --k: 2; }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-art { clip-path: inset(-12% 100% -12% 0); }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-copy > * { opacity: 0; }
#home [data-reveal="ribbon"].is-playing .path-art { animation: ribbon-wipe var(--seg) var(--seg-ease) both; animation-delay: var(--seg-at); }
#home [data-reveal="ribbon"].is-playing .path-copy > * { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--copy-at) + var(--k, 0) * 70ms); }
/* The request types itself out, line by line, as the card turns toward the reader. */
#home .code .cl { width: max-content; }
#home.is-animated [data-reveal="code"]:not(.is-in) { opacity: 0; }
#home.is-animated [data-reveal="code"]:not(.is-in) .code { transform: rotateY(-16deg) rotateX(5deg) translate3d(40px, 30px, 0); }
#home.is-animated [data-reveal="code"]:not(.is-in) .cl { clip-path: inset(0 100% 0 0); }
#home [data-reveal="code"].is-playing { animation: fade-up 1100ms var(--ease) both; }
#home [data-reveal="code"].is-playing .cl { animation: type-line var(--dur) steps(var(--c), jump-end) both; animation-delay: var(--at); }
/* Rivals: all three start on one clock, and the reader watches twenty-two minutes pass in eight seconds.
       Until a maker is done its poster is a blank sheet with the clock running on it; then the render head sweeps the picture in. */
#rivals.is-racing .rivals-lane.is-done .rivals-sheet { animation: card-out 760ms cubic-bezier(.65, 0, .35, 1) both; }
#rivals.is-racing .rivals-lane.is-done .rivals-nib { display: block; animation: sweep 760ms cubic-bezier(.65, 0, .35, 1) both, render-head-life 760ms linear both; }
#rivals.is-racing .rivals-lane.is-done .rivals-run { animation: fade-out 300ms 560ms ease-out both; }
#rivals.is-racing .rivals-lane.is-done .poster-media img { animation: settle 1500ms var(--ease) both; }
#rivals.is-racing .rivals-lane.is-done .play { animation: pop 620ms 480ms var(--ease) both; }
#rivals.is-racing .rivals-lane.is-done .rivals-made { animation: fade-up 800ms 380ms var(--ease) both; }
/* The bill draws itself to scale: the dearer the bar, the longer the pen takes. */
#home.is-animated [data-reveal="bars"]:not(.is-in) :is(.rivals-bar-name, .rivals-bar-val) { opacity: 0; }
#home.is-animated [data-reveal="bars"]:not(.is-in) .rivals-fill { transform: scaleX(0); }
#home [data-reveal="bars"].is-playing :is(.rivals-bar-name, .rivals-bar-val) { animation: fade-up 750ms var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
#home [data-reveal="bars"].is-playing .rivals-fill { animation: draw-x var(--draw, 900ms) cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
#home.is-animated [data-reveal="list"]:not(.is-in) > * { opacity: 0; }
#home [data-reveal="list"].is-playing > * { animation: fade-up 850ms var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
@media (prefers-reduced-motion: reduce) {
  html:has(#home:not([hidden])) { scroll-behavior: auto; }
  .page[data-view="home"] *, .page[data-view="home"] *::before, .page[data-view="home"] *::after { animation: none !important; transition: none !important; }
}

/* Without the script (or once Home has been left and returned to) the hero simply stands: no entrance, no nib, no caret. */
#home:not(.is-animated) :is(.h1 .w, .h1 .stroke path, .promise, .hero-start, .caret, .hero-new, .hero-new-tag, .hero-sheet, .clip, .clip img, .nib) { animation: none; }
#home:not(.is-animated) .hero-new::after { animation: none; }
#home:not(.is-animated) .nib, #home.motion-settled .nib, #home.motion-settled .caret { display: none; }
#home.motion-settled *, #home.motion-settled *::before, #home.motion-settled *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #home [data-reveal], #home [data-reveal] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  #home .stroke path { stroke-dashoffset: 0 !important; }
  #home .poster-card, #home .render-head, #home .nib, #home .caret { display: none; }
  #home .clip { clip-path: none !important; }
  .page[data-view="home"] .bar::before, .page[data-view="home"] .bar::after { animation: none !important; }
}

/* Create still uses this underline entrance. */
@keyframes landing-ink-draw { from { transform: scaleX(0) rotate(-.5deg); } to { transform: scaleX(1) rotate(-.5deg); } }