/* Motion grammar: quick response, measured entrance, scroll-driven publication depth. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-response:240ms;--motion-settle:700ms}
.motion-word{display:inline-block}
.site-header{position:sticky;top:0;isolation:isolate}
.site-header::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--lime);transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none}
.site-header.is-scrolled{box-shadow:0 8px 28px color-mix(in srgb,var(--night) 16%,transparent)}
.site-header{transition:box-shadow var(--motion-response) ease}
.site-nav a:not(.nav-action){position:relative}
.site-nav a:not(.nav-action)::after{content:"";position:absolute;inset:auto 0 -8px;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform 360ms var(--motion-ease)}
.site-nav a:is(:hover,:focus-visible,[aria-current=page])::after{transform:scaleX(1);transform-origin:left}
:is(.button,.nav-action,.text-link,.publication-strip a,.article-row,.portrait-name){transition:color var(--motion-response) ease,background-color var(--motion-response) ease,border-color var(--motion-response) ease,box-shadow 400ms var(--motion-ease)}
:is(.button,.text-link,.nav-action,.publication-strip a,.article-row,.hero-signature a) :is(.arrow,[aria-hidden=true]){display:inline-block;transition:transform 400ms var(--motion-ease)}
:is(.button,.text-link,.nav-action,.publication-strip a,.article-row,.hero-signature a):is(:hover,:focus-visible) :is(.arrow,[aria-hidden=true]){transform:translate(4px,-4px)}
.button.primary:is(:hover,:focus-visible){box-shadow:0 5px 22px color-mix(in srgb,var(--lime) 16%,transparent)}
.button:active{transform:translateY(1px)}
.article-row{position:relative}
.article-row::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--lime) 10%,transparent);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--motion-ease);pointer-events:none}
.article-row>*{position:relative}
.article-row:is(:hover,:focus-visible)::before{transform:scaleX(1)}
.article-row h3{transition:transform 450ms var(--motion-ease)}
.article-row:is(:hover,:focus-visible) h3{transform:translateX(6px);text-decoration:none}
.method-column{position:relative}
.method-column::before{content:"";position:absolute;inset:-1px 0 auto;height:2px;background:var(--launch-color-12);transform:scaleX(0);transform-origin:left;pointer-events:none}
[data-motion=on] .method-column.motion-seen::before{animation:method-rule 1100ms var(--motion-ease) both}
.method-column:nth-child(2)::before{animation-delay:100ms!important}
.method-column:nth-child(3)::before{animation-delay:200ms!important}
@keyframes method-rule{from{transform:scaleX(0);opacity:1}65%{transform:scaleX(1);opacity:1}to{transform:scaleX(1);opacity:.4}}
.creators-heading{position:relative}
.creators-heading::after{background:linear-gradient(90deg,var(--line),var(--line) 42%,var(--lime) 50%,var(--line) 58%,var(--line));background-size:260% 100%;background-position:100% 0}
[data-motion=on] .creators.motion-seen .creators-heading::after{animation:creator-signal 3200ms var(--motion-ease) 200ms both}
@keyframes creator-signal{0%{background-position:100% 0}100%{background-position:0 0}}
.portrait-name{border-top:1px solid transparent}
.portrait-name:is(:hover,:focus-visible){border-top-color:var(--lime);color:var(--lime);text-decoration:none}
.book-stage{perspective:1100px}
[data-motion=on] .book-stage .book-cover{transform:translate3d(0,var(--book-y,0px),0) rotateX(var(--book-rx,0deg)) rotateY(var(--book-ry,0deg)) rotate(var(--book-angle,-5deg));transition:transform 500ms var(--motion-ease)}
.book-stage::before{background:radial-gradient(ellipse at var(--stage-light,50%) 35%,var(--launch-color-13),var(--night) 75%)}
.book-stage::after{content:"";position:absolute;inset:0 9% 0 0;border-top:1px solid color-mix(in srgb,var(--lime) 32%,transparent);pointer-events:none;opacity:.65}
.faq summary::after{transition:transform 280ms var(--motion-ease)}
.faq details[open] summary::after{content:'+';transform:rotate(45deg)}
.faq summary:is(:hover,:focus-visible)::after{color:var(--launch-color-12)}
.motion-control{color:var(--quiet);background:none;border:1px solid var(--line);font:11px/1.5 var(--mono);padding:7px 10px;align-self:center;white-space:nowrap}
.motion-control:hover:not(:disabled){border-color:var(--lime);color:var(--paper)}
.motion-control:disabled{cursor:default;border-color:transparent;white-space:normal}
@media(max-width:900px){.site-header{position:relative}.site-header::after{display:none}}
@media(max-width:650px){.motion-control{margin-top:18px}.article-row:is(:hover,:focus-visible) h3{transform:none}}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition:none!important}
[data-motion=off]{scroll-behavior:auto}
[data-motion=off] :is(.button,.text-link,.nav-action,.publication-strip a,.article-row,.hero-signature a):is(:hover,:focus-visible) :is(.arrow,[aria-hidden=true]),[data-motion=off] .article-row:is(:hover,:focus-visible) h3{transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-word{transform:none!important}:is(.button,.text-link,.nav-action,.publication-strip a,.article-row,.hero-signature a):is(:hover,:focus-visible) :is(.arrow,[aria-hidden=true]),.article-row:is(:hover,:focus-visible) h3{transform:none}}
@media print{.motion-control{display:none}.site-header{position:static}.motion-word{opacity:1!important;transform:none!important}*{animation:none!important;transition:none!important}}