/* 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 .hero-layer { animation: fade-up .9s .02s var(--ease) both; }
#home .hero-layer a::before { animation: draw-x .7s .38s cubic-bezier(.6, 0, .25, 1) both; }
#home .hero-deck { animation: fade-up .9s .44s var(--ease) 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-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 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 { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@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; } }
/* The ribbon's frame slides in from the left while its picture slides the other way, so the picture holds still and the frame's edge is the pen: two transforms, drawn by the compositor, never repainted. */
@keyframes ribbon-frame { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes ribbon-picture { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 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); } }
@keyframes run-through { 0% { opacity: 1; transform: scaleX(0); } 78% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
/* The arrow accelerates out through its edge, then glides back in from the opposite one. */
@keyframes arrow-ne {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .8, .2); }
  40% { translate: var(--through) calc(-1 * var(--through)); }
  40.01% { translate: calc(-1 * var(--through)) var(--through); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { translate: 0 0; }
}
@keyframes arrow-e {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(.55, 0, .8, .2); }
  40% { translate: var(--through) 0; }
  40.01% { translate: calc(-1 * var(--through)) 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { translate: 0 0; }
}
@keyframes card-focus { from { scale: .94; opacity: .7; } 32%, 68% { scale: 1; opacity: 1; } to { scale: .94; opacity: .7; } }
/* Phone carousels: the card at rest is full size; its neighbours wait a step back, and grow as they are swiped in. */
@supports (animation-timeline: view(inline)) {
  @media (max-width: 640px) {
    #home :is(.films > .example, .paths > .path) { animation: card-focus linear both; animation-timeline: view(inline); }
  }
}
/* 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%; }
}
/* The header turns to night glass exactly where the night band runs under it: the edge crosses the bar line for line,
   the ink flips as it passes the middle, and on the way out the dark follows the lens as it closes. */
@property --night-top { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --night-end { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --on-night { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lens { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --lens-round { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes night-top { from { --night-top: 100%; } to { --night-top: 0%; } }
@keyframes night-end { from { --night-end: 100%; } to { --night-end: 0%; } }
@keyframes night-ink-in { from { --on-night: 0; } to { --on-night: 1; } }
@keyframes night-ink-out { from { --on-night: 1; } to { --on-night: 0; } }
@keyframes night-lens { to { --lens: max(20px, 3.4vw); } }
@keyframes night-round { from { --lens-round: 0px; } to { --lens-round: 32px; } }
@supports (timeline-scope: --night) {
  .page[data-view="home"] { timeline-scope: --night, --night-lens; }
  /* --night measures against the true top edge; --night-lens keeps the band lens's own frame (the anchor scroll padding), so the two close together. */
  #home .night { view-timeline: --night block, --night-lens block; view-timeline-inset: 0px, auto; }
  /* The ranges follow the lifted glass capsule (bar-glass.css): its top edge, its foot and its middle. */
  .page[data-view="home"] .bar {
    --glass-foot: calc(var(--cap-top) + var(--cap-h));
    --glass-mid: calc(var(--cap-top) + var(--cap-h) / 2);
    /* Important because the site-wide reduced-motion rule stops every animation, and these only track position. */
    animation-name: night-top, night-end, night-ink-in, night-ink-out, bar-lift !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both, both, both, forwards, both !important;
    animation-timeline: --night, --night, --night, --night, scroll(root) !important;
    animation-range:
      exit-crossing calc(0% - var(--glass-foot)) exit-crossing calc(0% - var(--cap-top)),
      exit-crossing calc(100% - var(--glass-foot)) exit-crossing calc(100% - var(--cap-top)),
      exit-crossing calc(0% - var(--glass-mid) - 10px) exit-crossing calc(0% - var(--glass-mid) + 10px),
      exit-crossing calc(100% - var(--glass-mid) - 10px) exit-crossing calc(100% - var(--glass-mid) + 10px),
      0px 72px !important;
  }
  .page[data-view="home"] .bar-inner {
    animation: night-lens var(--scrub) both, night-round linear both;
    animation-timeline: --night-lens, --night;
    animation-range: cover calc(100% - 420px) cover 100%, exit-crossing calc(100% - var(--glass-foot) - 32px) exit-crossing calc(100% - var(--glass-foot));
  }
  .page:has(#home.motion-settled) .bar-inner { animation: none; }
  /* The dark itself: the band's colour over the capsule's blurred band, cut to the band's shape. The lens is measured from the
     viewport edge, so only the part of it that reaches past the capsule's own edge cuts into the capsule. */
  .page[data-view="home"] .bar-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
  .page[data-view="home"] .bar-inner::before { --lens-in: max(0px, var(--lens) - var(--cap-x)); background: #171d1cd6; clip-path: inset(var(--night-top) var(--lens-in) calc(100% - var(--night-end)) round 0 0 var(--lens-round) var(--lens-round)); }
  .page[data-view="home"] .landing-nav a, .page[data-view="home"] .bar-link { color: color-mix(in srgb, #ffffffad calc(var(--on-night) * 100%), var(--ink-2)); }
  .page[data-view="home"] :is(.landing-nav a:hover, .landing-nav a[aria-current], .bar-link:hover) { color: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); }
  .page[data-view="home"] .bar-link:hover { background: color-mix(in srgb, #ffffff14 calc(var(--on-night) * 100%), var(--paper-2)); }
  .page[data-view="home"] .bar-link:focus-visible { outline-color: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); }
  .page[data-view="home"] .account-button-balance { color: color-mix(in srgb, #ffffff8c calc(var(--on-night) * 100%), var(--ink-3)); }
  .page[data-view="home"] .nav-pill { background: color-mix(in srgb, #ffffff14 calc(var(--on-night) * 100%), var(--paper-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff1f calc(var(--on-night) * 100%), var(--line)); }
  .page[data-view="home"] .landing-header-cta { background: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); --cta-ink: color-mix(in srgb, #171a19 calc(var(--on-night) * 100%), var(--paper)); }
  .page[data-view="home"] .landing-header-cta:hover { background: color-mix(in srgb, #ecece8 calc(var(--on-night) * 100%), #242a28); }
  .page[data-view="home"] .profile { background: color-mix(in srgb, #ffffff0a calc(var(--on-night) * 100%), var(--paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff38 calc(var(--on-night) * 100%), var(--line-2)); color: color-mix(in srgb, #fff calc(var(--on-night) * 100%), var(--ink)); }
  .page[data-view="home"] .profile:hover { background: color-mix(in srgb, #ffffff1f calc(var(--on-night) * 100%), var(--paper-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff5c calc(var(--on-night) * 100%), var(--ink-4)); }
  .page[data-view="home"] .profile::before { background: color-mix(in srgb, #ffffff24 calc(var(--on-night) * 100%), var(--line)); }
}
/* 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 { transform: translate3d(-100%, 0, 0); }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-art img { transform: translate3d(100%, 0, 0); }
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-copy > * { opacity: 0; }
/* The frame clips its picture at its own sides and lets it hang over top and bottom as it always has. Waiting, it sits over the card to its left, so it takes no pointer. */
#home.is-animated [data-reveal="ribbon"]:not(.is-in) .path-art, #home [data-reveal="ribbon"].is-playing .path-art { clip-path: inset(-12% 0); pointer-events: none; }
/* Layers are raised once the strip is near, so the first frame of the wipe costs nothing, and dropped when it settles. */
#home [data-reveal="ribbon"].is-near:not(.is-in) .path-art, #home [data-reveal="ribbon"].is-playing .path-art,
#home [data-reveal="ribbon"].is-near:not(.is-in) .path-art img, #home [data-reveal="ribbon"].is-playing .path-art img { will-change: transform; }
#home [data-reveal="ribbon"].is-playing .path-art { animation: ribbon-frame var(--seg) var(--seg-ease) both; animation-delay: var(--seg-at); }
#home [data-reveal="ribbon"].is-playing .path-art img { animation: ribbon-picture 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; max-width: 100%; }
#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); }
/* Once the last line is typed the request runs along the card's foot, and the film lands as it arrives. */
#home.is-animated [data-reveal="code"]:not(.is-in) .reply { opacity: 0; }
#home [data-reveal="code"].is-playing .code-run i { animation: run-through 760ms cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--typed, 2200ms); }
#home [data-reveal="code"].is-playing .reply { animation: print-land 950ms var(--ease) both; animation-delay: calc(var(--typed, 2200ms) + 620ms); }
/* 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 .rivals-cover > * { 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(.hero-layer, .hero-deck, .h1 .w, .promise, .hero-start, .caret, .hero-sheet, .clip, .clip img, .nib), #home:not(.is-animated) .hero-layer a::before { animation: none; }
#home:not(.is-animated) .nib, #home.motion-settled .nib, #home.motion-settled .caret { display: none; }
#home.motion-settled *:not(.arr > i, .hero-start-go svg), #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; }
  /* A loop never loads here, and the rule above would stand its blank frame over the cover; the sent line would stay lit. */
  #home .poster-loop, #home .code-run { display: none; }
  #home .clip { clip-path: none !important; }
  .page[data-view="home"] .bar::before, .page[data-view="home"] .bar::after { animation: none !important; }
  /* The capsule still forms, but from .is-scrolled (bar-glass.css), not the scroll position. */
  .page[data-view="home"] .bar { animation-name: night-top, night-end, night-ink-in, night-ink-out !important; transition: --bar-lift 160ms ease !important; }
}

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

/* First visit (theme.js + intro.js): the page opens on paper, a brush paints the name through the wordmark's own mask, then the name
   glides into the header and the paper lifts away. Under the paper the hero stands finished, so the browser paints its headline and
   drawing at once; its entrance restarts from the first frame as the paper starts to lift. The rest of the page waits, paused. */
.intro { --intro-w: clamp(132px, 34vw, 196px); display: none; }
html:is([data-intro="wait"], [data-intro="write"], [data-intro="out"]) .intro { display: block; position: fixed; inset: 0; z-index: 55; pointer-events: none; }
html:is([data-intro="wait"], [data-intro="write"]) .intro { pointer-events: auto; }
.intro-paper { position: absolute; inset: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 34px 60px -34px var(--landing-shadow-deep); will-change: transform; }
.intro-word { position: absolute; left: 50%; top: 46vh; width: var(--intro-w); aspect-ratio: 2087 / 753; margin: calc(var(--intro-w) * -753 / 4174) 0 0 calc(var(--intro-w) / -2); transform-origin: 0 0; color: var(--signal); -webkit-mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; mask: url('/assets/landing/wordmark-mask-ui.7535f0e3339b.webp') center / contain no-repeat; will-change: transform; }
.intro-word svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro-word path { visibility: hidden; }
.intro-word :is(.intro-ridge, .intro-wash) { stroke: var(--signal-text); }
.intro-word :is(.intro-ridge, .intro-cover) { stroke-linecap: butt; }
/* A round paint brush drawn tip-first; intro.js places the tip, turns the holder about it and shapes the bristles each frame. Its shadow stays on the paper. */
.intro-brush { position: absolute; left: 0; top: 0; width: calc(var(--intro-w) * .86); aspect-ratio: 150 / 24; opacity: 0; will-change: opacity; }
.intro-brush svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 50%; will-change: transform; }
.intro-shadow { filter: blur(2.5px); }
.intro-shadow path { fill: var(--landing-shadow-deep); }
.intro-tool .brush-handle { fill: var(--ink); }
.intro-tool .brush-shine { fill: none; stroke: var(--paper); stroke-opacity: .4; stroke-width: 1.1; }
.intro-tool .brush-ferrule { fill: var(--ink-4); stroke: var(--ink); stroke-width: 1; }
.intro-tool .brush-rule { fill: none; stroke: var(--ink); stroke-width: .8; }
.intro-tool .brush-head { fill: color-mix(in srgb, var(--ink-4) 40%, var(--paper-2)); stroke: var(--ink); stroke-width: .8; }
.intro-tool .brush-hairs { fill: none; stroke: var(--ink); stroke-opacity: .3; stroke-width: .5; }
.intro-tool .brush-paint { fill: var(--signal); }
html:is([data-intro="wait"], [data-intro="write"]) #home *, html:is([data-intro="wait"], [data-intro="write"]) #home *::before, html:is([data-intro="wait"], [data-intro="write"]) #home *::after { animation-play-state: paused !important; }
html:is([data-intro="wait"], [data-intro="write"]) #home :is(.hero-layer, .hero-deck, .h1 .w, .promise, .hero-start, .caret, .hero-sheet, .clip, .clip img, .nib), html:is([data-intro="wait"], [data-intro="write"]) #home .hero-layer a::before { animation: none !important; }
html[data-intro] .page[data-view="home"] .bar .wordmark-logo { animation: none; }
@media screen { html:is([data-intro="wait"], [data-intro="write"], [data-intro="out"]) #wordmark .wordmark-logo { visibility: hidden; } }
@media (prefers-reduced-motion: reduce), print { .intro { display: none !important; } }