/* Home · who it's for (E3): the three drawings move by their layers, on
   art.v3's timeline (docs/design-studies/illustrations/v3, build.py). The
   keyframes below are motion.css's, word for word (test-website.js holds
   them so); the selectors are the page's, its drawings' ids prefixed by
   sync-web-art.py (bd- the builder, sw- the switcher, rc- the recruit).

   Nothing here runs by itself: every animation is paused, and page.js sets
   each to the builder film's clock (web/kit), so the row plays, pauses off
   screen and loops with site.js's other loops. On that one 7.2 s clock the
   two idle motions play once a loop, where the builder is quiet: the
   mouse's tail as the code types (0.4 s), the glint as the code resumes
   (5.6 s), so neither is cut at the seam. Without .xk-live (no
   script, or ?still) every card is its drawing as drawn: the still. */
#wfilm svg *{transform-box:view-box}
#bd-code-4,#bd-code-5,#bd-code-6,#bd-deploy-progress,#bd-deploy-done{transform-box:fill-box;transform-origin:0 50%}
#wfilm.xk-live #bd-code-4{animation:v3-code-4 7.2s both paused}
#wfilm.xk-live #bd-code-5{animation:v3-code-5 7.2s both paused}
#wfilm.xk-live #bd-code-6{animation:v3-code-6 7.2s both paused}
#wfilm.xk-live #bd-cursor{animation:v3-cursor 7.2s both paused}
#wfilm.xk-live #bd-deploy-progress{animation:v3-deploy-progress 7.2s both paused}
#wfilm.xk-live #bd-deploy-check{animation:v3-deploy-check 7.2s both paused}
#wfilm.xk-live #bd-deploy-done{animation:v3-deploy-done 7.2s both paused}
#wfilm.xk-live #bd-typing-hand{animation:v3-typing-hand 7.2s both paused}
#wfilm.xk-live #bd-key-option-glow{animation:v3-key-option-glow 7.2s both paused}
#wfilm.xk-live #bd-founder-eyes{animation:v3-founder-eyes 7.2s both paused}
#wfilm.xk-live #bd-sheet-window{animation:v3-sheet-window 7.2s both paused}
#wfilm.xk-live #bd-sheet-messy{animation:v3-sheet-messy 7.2s both paused}
#wfilm.xk-live #bd-panel{animation:v3-panel 7.2s both paused}
#wfilm.xk-live #bd-panel-h{animation:v3-panel-h 7.2s both paused}
#wfilm.xk-live #bd-panel-a{animation:v3-panel-a 7.2s both paused}
#wfilm.xk-live #bd-panel-n{animation:v3-panel-n 7.2s both paused}
#wfilm.xk-live #bd-sparks{animation:v3-sparks 7.2s both paused}
#wfilm.xk-live #bd-tidy-1{animation:v3-tidy-1 7.2s both paused}
#wfilm.xk-live #bd-tidy-2{animation:v3-tidy-2 7.2s both paused}
#wfilm.xk-live #bd-tidy-3{animation:v3-tidy-3 7.2s both paused}
#wfilm.xk-live #bd-tidy-4{animation:v3-tidy-4 7.2s both paused}
#wfilm.xk-live #bd-tidy-5{animation:v3-tidy-5 7.2s both paused}
#wfilm.xk-live #bd-tidy-6{animation:v3-tidy-6 7.2s both paused}
#wfilm.xk-live #sw-option-sheen{animation:v3-option-sheen 5.2s 5s both paused}
#wfilm.xk-live #sw-option-twinkle{animation:v3-option-twinkle 5.2s 5s both paused}
#wfilm.xk-live #rc-mouse-tail{animation:v3-mouse-tail 4.8s .4s both paused}
/* Reduce Motion plays the story gently (DECISIONS 2026-10-05): what enters
   fades in where it stands, nothing slides, and the two idle motions rest */
html.gentle #wfilm :is(#bd-sheet-window,#bd-panel,#bd-panel-h,#bd-panel-a,#bd-panel-n,#bd-tidy-1,#bd-tidy-2,#bd-tidy-3,#bd-tidy-4,#bd-tidy-5,#bd-tidy-6,#bd-founder-eyes,#bd-deploy-check){transform:none!important}
html.gentle #wfilm :is(#sw-option-sheen,#sw-option-twinkle,#rc-mouse-tail){animation:none}

@keyframes v3-code-4 {
  0% { opacity: 1; transform: scaleX(0); animation-timing-function: step-end }
  2.778% { opacity: 1; transform: scaleX(0); animation-timing-function: steps(8, end) }
  9.722% { opacity: 1; transform: scaleX(1); animation-timing-function: step-end }
  94.444% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  97.222% { opacity: 0; transform: scaleX(1); animation-timing-function: step-end }
  100% { opacity: 0; transform: scaleX(1) }
}
@keyframes v3-code-5 {
  0% { opacity: 1; transform: scaleX(0); animation-timing-function: step-end }
  11.389% { opacity: 1; transform: scaleX(0); animation-timing-function: steps(6, end) }
  16.667% { opacity: 1; transform: scaleX(1); animation-timing-function: step-end }
  94.444% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  97.222% { opacity: 0; transform: scaleX(1); animation-timing-function: step-end }
  100% { opacity: 0; transform: scaleX(1) }
}
@keyframes v3-code-6 {
  0% { opacity: 0; transform: scaleX(1); animation-timing-function: step-end }
  82.639% { opacity: 1; transform: scaleX(0); animation-timing-function: steps(5, end) }
  88.194% { opacity: 1; transform: scaleX(1); animation-timing-function: step-end }
  94.444% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  97.222% { opacity: 0; transform: scaleX(1); animation-timing-function: step-end }
  100% { opacity: 0; transform: scaleX(1) }
}
@keyframes v3-cursor {
  0% { opacity: 1; transform: translate(12px, -24px); animation-timing-function: step-end }
  2.778% { opacity: 0; transform: translate(12px, -24px); animation-timing-function: step-end }
  9.722% { opacity: 1; transform: translate(44px, -12px); animation-timing-function: step-end }
  11.389% { opacity: 0; transform: translate(44px, -12px); animation-timing-function: step-end }
  16.667% { opacity: 1; transform: translate(0, 0); animation-timing-function: step-end }
  82.639% { opacity: 0; transform: translate(0, 0); animation-timing-function: step-end }
  88.194% { opacity: 1; transform: translate(-10px, 12px); animation-timing-function: step-end }
  91.667% { opacity: 0; transform: translate(-10px, 12px); animation-timing-function: step-end }
  95.139% { opacity: 1; transform: translate(-10px, 12px); animation-timing-function: step-end }
  97.222% { opacity: 1; transform: translate(12px, -24px); animation-timing-function: step-end }
  100% { opacity: 1; transform: translate(12px, -24px) }
}
@keyframes v3-deploy-progress {
  0% { opacity: 0; transform: scaleX(0); animation-timing-function: step-end }
  18.056% { opacity: 1; transform: scaleX(0); animation-timing-function: linear }
  27.778% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  29.167% { opacity: 0; transform: scaleX(1); animation-timing-function: step-end }
  100% { opacity: 0; transform: scaleX(1) }
}
@keyframes v3-deploy-check {
  0% { opacity: 0; transform: scale(0.85); animation-timing-function: step-end }
  28.472% { opacity: 0; transform: scale(0.85); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  32.639% { opacity: 1; transform: scale(1); animation-timing-function: step-end }
  94.444% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  97.222% { opacity: 0; transform: scale(1); animation-timing-function: step-end }
  100% { opacity: 0; transform: scale(1) }
}
@keyframes v3-deploy-done {
  0% { opacity: 0; transform: scaleX(0); animation-timing-function: step-end }
  29.861% { opacity: 0; transform: scaleX(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  34.028% { opacity: 1; transform: scaleX(1); animation-timing-function: step-end }
  94.444% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  97.222% { opacity: 0; transform: scaleX(1); animation-timing-function: step-end }
  100% { opacity: 0; transform: scaleX(1) }
}
@keyframes v3-typing-hand {
  0% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  3.472% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  4.306% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  5.694% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  5.833% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  6.667% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  8.056% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  8.056% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  8.889% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  10.278% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  12.222% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  13.056% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  14.444% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  14.306% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  15.139% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  16.528% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  15.972% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  16.806% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  18.194% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  43.056% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  43.889% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  45.278% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  47.917% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  48.75% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  50.139% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  51.389% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  52.222% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  53.611% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  54.861% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  55.694% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  57.083% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  83.333% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  84.167% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  85.556% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  85.417% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  86.25% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  87.639% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  87.222% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  88.056% { opacity: 1; transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  89.444% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes v3-key-option-glow {
  0% { opacity: 0; animation-timing-function: step-end }
  43.056% { opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  44.167% { opacity: 0.5; animation-timing-function: step-end }
  65.972% { opacity: 0.5; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  68.75% { opacity: 0; animation-timing-function: step-end }
  100% { opacity: 0 }
}
@keyframes v3-founder-eyes {
  0% { opacity: 1; transform: translate(1px, 3px); animation-timing-function: step-end }
  34.028% { opacity: 1; transform: translate(1px, 3px); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) }
  36.111% { opacity: 1; transform: translate(0, 0); animation-timing-function: step-end }
  79.167% { opacity: 1; transform: translate(0, 0); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) }
  81.25% { opacity: 1; transform: translate(1px, 3px); animation-timing-function: step-end }
  100% { opacity: 1; transform: translate(1px, 3px) }
}
@keyframes v3-sheet-window {
  0% { opacity: 0; transform: translateY(10px) scale(0.94); animation-timing-function: step-end }
  34.722% { opacity: 0; transform: translateY(10px) scale(0.94); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  40.972% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: step-end }
  76.389% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  81.25% { opacity: 0; transform: translateY(10px) scale(0.94); animation-timing-function: step-end }
  100% { opacity: 0; transform: translateY(10px) scale(0.94) }
}
@keyframes v3-sheet-messy {
  0% { opacity: 1; animation-timing-function: step-end }
  58.333% { opacity: 1; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  60% { opacity: 0; animation-timing-function: step-end }
  100% { opacity: 0 }
}
@keyframes v3-panel {
  0% { opacity: 0; transform: translateY(-6px); animation-timing-function: step-end }
  43.056% { opacity: 0; transform: translateY(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  45.833% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  65.972% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  68.75% { opacity: 0; transform: translateY(-4px); animation-timing-function: step-end }
  100% { opacity: 0; transform: translateY(-4px) }
}
@keyframes v3-panel-h {
  0% { opacity: 0; transform: translateY(3px); animation-timing-function: step-end }
  47.917% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  49.583% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes v3-panel-a {
  0% { opacity: 0; transform: translateY(3px); animation-timing-function: step-end }
  51.389% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  53.056% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes v3-panel-n {
  0% { opacity: 0; transform: translateY(3px); animation-timing-function: step-end }
  54.861% { opacity: 0; transform: translateY(3px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  56.528% { opacity: 1; transform: translateY(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes v3-sparks {
  0% { opacity: 0; animation-timing-function: step-end }
  61.111% { opacity: 0; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  63.889% { opacity: 1; animation-timing-function: step-end }
  73.611% { opacity: 1; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  76.389% { opacity: 0; animation-timing-function: step-end }
  100% { opacity: 0 }
}
@keyframes v3-tidy-1 {
  0% { opacity: 0; transform: translateX(-6px); animation-timing-function: step-end }
  58.333% { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  61.389% { opacity: 1; transform: translateX(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes v3-tidy-2 {
  0% { opacity: 0; transform: translateX(-6px); animation-timing-function: step-end }
  58.889% { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  61.944% { opacity: 1; transform: translateX(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes v3-tidy-3 {
  0% { opacity: 0; transform: translateX(-6px); animation-timing-function: step-end }
  59.444% { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  62.5% { opacity: 1; transform: translateX(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes v3-tidy-4 {
  0% { opacity: 0; transform: translateX(-6px); animation-timing-function: step-end }
  60% { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  63.056% { opacity: 1; transform: translateX(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes v3-tidy-5 {
  0% { opacity: 0; transform: translateX(-6px); animation-timing-function: step-end }
  60.556% { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  63.611% { opacity: 1; transform: translateX(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes v3-tidy-6 {
  0% { opacity: 0; transform: translateX(-6px); animation-timing-function: step-end }
  61.111% { opacity: 0; transform: translateX(-6px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  64.167% { opacity: 1; transform: translateX(0); animation-timing-function: step-end }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes v3-option-sheen {
  0% { opacity: 0.5; transform: translateX(0); animation-timing-function: step-end }
  11.538% { opacity: 0.5; transform: translateX(0); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) }
  25% { opacity: 0.5; transform: translateX(110px); animation-timing-function: step-end }
  100% { opacity: 0.5; transform: translateX(110px) }
}
@keyframes v3-option-twinkle {
  0% { opacity: 0; transform: scale(0.9); animation-timing-function: step-end }
  21.154% { opacity: 0; transform: scale(0.9); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  25.962% { opacity: 1; transform: scale(1.05); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  33.654% { opacity: 0; transform: scale(0.95); animation-timing-function: step-end }
  100% { opacity: 0; transform: scale(0.95) }
}
@keyframes v3-mouse-tail {
  0% { opacity: 1; transform: rotate(0deg); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1) }
  2.5% { opacity: 1; transform: rotate(4deg); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) }
  5.833% { opacity: 1; transform: rotate(-2.5deg); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) }
  8.75% { opacity: 1; transform: rotate(1deg); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) }
  12.083% { opacity: 1; transform: rotate(0deg); animation-timing-function: step-end }
  100% { opacity: 1; transform: rotate(0deg) }
}