/* Slide 9, "From answering to doing". Final state is the default; the entrance only runs while the
   deck's own rules allow it (.slide[data-entrance-animation].is-active, not .motion-finished, not review,
   overview, print or reduced motion: those rules in visual-v2.css set animation:none!important). */
#v4-09 .body{justify-content:flex-start;padding-top:0}
#v4-09 .s09{display:flex;flex-direction:column;width:1680px;margin-top:64px}
#v4-09 .s09-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,384px);column-gap:48px;grid-template-rows:auto auto auto;row-gap:0}
#v4-09 .s09-step{display:grid;grid-row:span 3;grid-template-rows:subgrid;margin:0;padding:0}
#v4-09 .s09-draw{height:220px;margin:0 0 30px}
#v4-09 .s09-fig{display:block;width:384px;height:220px;overflow:visible}
#v4-09 .s09-head{font:400 40px/1.14 var(--serif);color:var(--ink);margin:0;align-self:end}
#v4-09 .s09-say{font:400 28px/1.4 var(--sans);color:var(--ink-soft);margin:10px 0 0;max-width:384px;text-wrap:balance}
#v4-09 .s09-axis{order:-1;display:none}
#v4-09 .s09-close{font:400 64px/1.12 var(--display);color:var(--ink);margin:52px 0 0;padding-top:34px;border-top:1px solid var(--rule);max-width:1680px;text-wrap:balance}

/* The timeline rail sits between the drawings and the heads: drawn as an absolutely placed SVG. */
#v4-09 .s09{position:relative}
#v4-09 .s09-axis{display:block;position:absolute;left:0;top:206px;width:1680px;height:24px;overflow:visible}

/* Entrance: the rail runs left to right while the four steps arrive in turn (450 ms apart), then the
   closing line. In the agent drawing the route draws out and back, its steps appear as it passes, and
   the check comes last. Everything is still by 2.6 s; the slide needs data-motion-duration="2800". */
#v4-09[data-entrance-animation].is-active .s09-rail{animation:s09-rail 1.2s cubic-bezier(.3,.1,.3,1) both}
#v4-09[data-entrance-animation].is-active .s09-rail-tip{animation:s09-fade .3s ease-out 1.65s both}
#v4-09[data-entrance-animation].is-active .s09-tick{animation:s09-fade .3s ease-out both;animation-delay:calc(var(--i) * 450ms)}
#v4-09[data-entrance-animation].is-active .s09-ln{animation:s09-draw .7s ease-out both;animation-delay:calc(var(--i) * 450ms)}
#v4-09[data-entrance-animation].is-active .s09-mk{animation:s09-fade .45s ease-out both;animation-delay:calc(var(--i) * 450ms + 250ms)}
#v4-09[data-entrance-animation].is-active .s09-txt{animation:s09-fade .45s ease-out both;animation-delay:calc(var(--i) * 450ms + 200ms)}
#v4-09[data-entrance-animation].is-active .s09-route{animation:s09-draw .75s ease-in-out both;animation-delay:1.5s}
#v4-09[data-entrance-animation].is-active .s09-box{animation:s09-fade .2s ease-out both;animation-delay:1.75s}
#v4-09[data-entrance-animation].is-active .s09-tip{animation:s09-fade .2s ease-out both;animation-delay:2.2s}
#v4-09[data-entrance-animation].is-active .s09-check{animation:s09-draw .35s ease-out both;animation-delay:2.3s}
#v4-09[data-entrance-animation].is-active .s09-close{animation:s09-fade .5s ease-out 2.1s both}
@keyframes s09-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes s09-fade{from{opacity:0}to{opacity:1}}
@keyframes s09-rail{from{stroke-dasharray:1668 1668;stroke-dashoffset:1668}to{stroke-dasharray:1668 1668;stroke-dashoffset:0}}