/* Small stories, drawn with the same ink, paper and orange as the original illustrations. */
.course-drawing{position:relative}
.course-card:hover .course-drawing svg{transform:none}
.course-drawing .scene{overflow:visible;transition:none}
.scene-accent{stroke:var(--orange)}
.scene-light,.led-core,.board-led{fill:var(--paper)}
.robot-smile,.robot-hello,.rover-command,.rover-signal,.rover-trail,.arm-payload,.arm-success,.circuit-current,.led-halo,.led-rays,.board-current,.board-upload,.board-success,.code-lines,.code-stars{opacity:0}
.robot-eyes{transform-origin:125px 54px}
.robot-wave{transform-origin:175px 49px}
.wheel-one{transform-origin:90px 90px}.wheel-two{transform-origin:162px 90px}
.rover-head{transform-origin:134px 35px}
.arm-shoulder{transform-origin:125px 65px}.arm-elbow{transform-origin:100px 32px}
.claw-left{transform-origin:174px 47px}.claw-right{transform-origin:190px 39px}
.circuit-switch{transform-origin:65px 70px}
.led-halo{stroke:none;fill:#ff6c3e28}.led-core{stroke:none;fill:var(--orange);opacity:0}
.board-traces{stroke-width:1.2;opacity:.35}
.board-current,.circuit-current{stroke-width:3.2;stroke-dasharray:12 88;stroke-dashoffset:100}
.board-code{stroke-width:2}.code-lines{stroke-width:2}
.scene-replay{position:absolute;right:0;bottom:-12px;display:flex;align-items:center;gap:5px;padding:4px 6px;background:var(--paper);border:0;border-radius:3px;color:#777f6b;font-size:8px;line-height:1.4;letter-spacing:.3px}
.peach .scene-replay{background:#f4dfd2}.scene-replay>span{font-size:14px}
.scene-replay:hover,.scene-replay:focus-visible{color:var(--ink);background:#e6e9de}.scene-playing .scene-replay{color:#bd4826}
.scene-playing .scene *{animation-duration:4.2s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation-fill-mode:both;animation-iteration-count:1}
.scene-playing .robot-wave{animation-name:wave-hand}
.scene-playing .robot-eyes{animation-name:wake-eyes}
.scene-playing .robot-antenna .scene-light{animation-name:power-light}
.scene-playing .robot-mouth{animation-name:straight-mouth}
.scene-playing .robot-smile{animation-name:happy-mouth}
.scene-playing .robot-hello{animation-name:hello-spark}
.scene-playing .rover-command{animation-name:receive-command}
.scene-playing .rover-signal{animation-name:receive-signal}
.scene-playing .rover-drive{animation-name:drive-rover}
.scene-playing .rover-head{animation-name:look-ahead}
.scene-playing .wheel{animation-name:spin-wheel}
.scene-playing .rover-sensor,.scene-playing .rover-head .scene-light{animation-name:power-light}
.scene-playing .rover-trail{animation-name:rover-trail}
.scene-playing .arm-shoulder{animation-name:lift-arm}
.scene-playing .arm-elbow{animation-name:bend-elbow}
.scene-playing .claw-left{animation-name:close-claw}
.scene-playing .claw-right{animation-name:close-claw-right}
.scene-playing .arm-payload{animation-name:hold-part}
.scene-playing .arm-success{animation-name:arm-complete}
.scene-playing .circuit-switch{animation-name:close-switch}
.scene-playing .circuit-current{animation-name:flow-current;animation-timing-function:linear}
.scene-playing .led-core{animation-name:light-led}
.scene-playing .led-shell{animation-name:led-shell}
.scene-playing .led-halo{animation-name:led-glow;transform-origin:185px 60px}
.scene-playing .led-rays{animation-name:led-rays}
.scene-playing .board-upload{animation-name:upload-code}
.scene-playing .board-current{animation-name:board-current;animation-timing-function:linear}
.scene-playing .board-code{animation-name:chip-ready}
.scene-playing .board-led{animation-name:board-led}
.scene-playing .led-two{animation-delay:.22s}.scene-playing .led-three{animation-delay:.44s}
.scene-playing .board-success{animation-name:board-complete}
.scene-playing .block-one{animation-name:assemble-one}
.scene-playing .block-two{animation-name:assemble-two}
.scene-playing .block-three{animation-name:assemble-three}
.scene-playing .code-lines{animation-name:run-blocks}
.scene-playing .code-sprite{animation-name:game-jump;transform-origin:204px 88px}
.scene-playing .code-stars{animation-name:game-stars}
@keyframes wave-hand{0%,20%,90%,100%{transform:rotate(0)}35%,62%{transform:rotate(-70deg)}48%,75%{transform:rotate(-40deg)}}
@keyframes wake-eyes{0%,8%,20%,100%{transform:scaleY(1)}13%{transform:scaleY(.08)}}
@keyframes power-light{0%,10%,100%{fill:var(--paper);stroke:var(--ink)}25%,85%{fill:var(--orange);stroke:var(--orange)}}
@keyframes straight-mouth{0%,23%,100%{opacity:1}32%,90%{opacity:0}}
@keyframes happy-mouth{0%,23%,100%{opacity:0}32%,90%{opacity:1}}
@keyframes hello-spark{0%,35%,95%,100%{opacity:0;translate:0 4px}48%,80%{opacity:1;translate:0 0}}
@keyframes receive-command{0%,3%,35%,100%{opacity:0;translate:-5px 0}12%,26%{opacity:1;translate:0 0}}
@keyframes receive-signal{0%,15%,51%,100%{opacity:0}25%,40%{opacity:1}}
@keyframes drive-rover{0%,30%,100%{translate:0 0}65%,82%{translate:22px 0}}
@keyframes look-ahead{0%,18%,85%,100%{transform:rotate(0)}30%,70%{transform:rotate(10deg)}}
@keyframes spin-wheel{0%,30%{transform:rotate(0)}65%,82%{transform:rotate(150deg)}100%{transform:rotate(0)}}
@keyframes rover-trail{0%,35%,85%,100%{opacity:0;translate:0 0}55%,70%{opacity:1;translate:-5px 0}}
@keyframes lift-arm{0%,30%,100%{transform:rotate(0)}60%,82%{transform:rotate(-20deg)}}
@keyframes bend-elbow{0%,30%,100%{transform:rotate(0)}60%,82%{transform:rotate(12deg)}}
@keyframes close-claw{0%,8%,100%{transform:rotate(-14deg)}25%,88%{transform:rotate(10deg)}}
@keyframes close-claw-right{0%,8%,100%{transform:rotate(10deg)}25%,88%{transform:rotate(-8deg)}}
@keyframes hold-part{0%,12%,100%{opacity:0}24%,90%{opacity:1}}
@keyframes arm-complete{0%,54%,100%{opacity:0}68%,86%{opacity:1}}
@keyframes close-switch{0%,8%,100%{transform:rotate(0)}20%,92%{transform:rotate(45deg)}}
@keyframes flow-current{0%,20%{opacity:0;stroke-dashoffset:100}24%{opacity:1;stroke-dashoffset:100}82%{opacity:1;stroke-dashoffset:-100}94%,100%{opacity:0;stroke-dashoffset:-120}}
@keyframes light-led{0%,38%,100%{opacity:0}49%,90%{opacity:1}}
@keyframes led-shell{0%,38%,100%{stroke:var(--ink);fill:transparent}49%,90%{stroke:var(--orange);fill:#ff6c3e1f}}
@keyframes led-glow{0%,38%,100%{opacity:0;transform:scale(.6)}55%,85%{opacity:1;transform:scale(1)}}
@keyframes led-rays{0%,43%,100%{opacity:0}58%,87%{opacity:1}}
@keyframes upload-code{0%,4%,39%,100%{opacity:0;translate:0 6px}12%,25%{opacity:1;translate:0 0}34%{opacity:0;translate:0 -8px}}
@keyframes board-current{0%,23%{opacity:0;stroke-dashoffset:100}30%{opacity:1;stroke-dashoffset:100}80%{opacity:1;stroke-dashoffset:-100}95%,100%{opacity:0;stroke-dashoffset:-100}}
@keyframes chip-ready{0%,29%,100%{stroke:var(--ink)}42%,85%{stroke:var(--orange)}}
@keyframes board-led{0%,35%,100%{fill:var(--paper);stroke:var(--ink)}47%,85%{fill:var(--orange);stroke:var(--orange)}}
@keyframes board-complete{0%,60%,100%{opacity:0;stroke-dasharray:0 40}72%,90%{opacity:1;stroke-dasharray:40 0}}
@keyframes assemble-one{0%{translate:-13px -8px}20%,100%{translate:0 0}}
@keyframes assemble-two{0%,10%{translate:12px 0}32%,100%{translate:0 0}}
@keyframes assemble-three{0%,23%{translate:-12px 8px}44%,100%{translate:0 0}}
@keyframes run-blocks{0%,37%,100%{opacity:0;stroke-dasharray:0 40}52%,85%{opacity:1;stroke-dasharray:40 0}}
@keyframes game-jump{0%,45%,85%,100%{translate:0 0;transform:rotate(0)}62%{translate:0 -24px;transform:rotate(8deg)}75%{translate:0 0;transform:rotate(-4deg)}}
@keyframes game-stars{0%,55%,88%,100%{opacity:0;translate:0 6px}66%,78%{opacity:1;translate:0 0}}

/* Two identical groups make the join invisible. Only the visible strip is animated. */
.ticker{position:relative;padding:0;min-height:49px}
.ticker>.ticker-track{display:flex;gap:0;width:max-content;min-width:0;transform:none;justify-content:flex-start;animation:ticker-run 28s linear infinite;animation-play-state:paused}
.ticker-group{display:flex;align-items:center;justify-content:space-around;gap:48px;flex:none;min-width:1400px;padding:12px 24px}
.ticker.is-in-view:not(.is-paused)>.ticker-track{animation-play-state:running}
.ticker:hover>.ticker-track,.motion-paused .ticker>.ticker-track{animation-play-state:paused!important}
.ticker-toggle{position:absolute;right:12px;top:8px;width:33px;height:33px;border:1px solid #191b1940;border-radius:50%;background:var(--orange);box-shadow:0 0 0 7px var(--orange);color:var(--ink);display:grid;place-items:center}
.ticker-toggle span{font-size:13px;line-height:1;letter-spacing:-2px}
@keyframes ticker-run{to{transform:translateX(-50%)}}

/* A single scanner pass over the project photograph on hover. */
.hero-visual:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;clip-path:inset(0 round 140px 0 0 0);background:linear-gradient(transparent 46%,#ff6c3e17 49%,#ff6c3e99 50%,transparent 51%);background-size:100% 220%;background-position:0 140%}
/* The scanner is now part of the deliberate hero startup in delight.css. */
@keyframes project-scan{0%,100%{opacity:0;background-position:0 140%}15%{opacity:1}85%{opacity:1;background-position:0 -40%}}
@media(max-width:640px){.ticker-group{gap:32px;min-width:1100px;font-size:12px}.ticker-toggle{right:8px}.scene-replay{font-size:9px;min-height:27px;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.ticker>.ticker-track{animation:none;transform:none}.ticker-toggle,.scene-replay{display:none}.scene-playing .scene *{animation:none!important}.hero-visual:before{display:none}}