/* Original raster textures articulated through independent SVG layers. */
.motion-picture{--motion-play:paused;--motion-offset:0s;--look-x:0px;--look-y:0px;position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;isolation:isolate;background:#08151d}
.experience-page .motion-picture>img,.project-page .motion-picture>img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:1;filter:none;transform:none;animation:none}
.motion-picture.motion-ready>img{visibility:hidden}
.motion-art{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
.motion-picture.is-motion-visible{--motion-play:running}
.experience-page .coding-scene>.motion-picture{height:250px;aspect-ratio:auto}
.experience-page .project-editorial>.motion-picture{display:block;padding:0;margin:0;gap:0;z-index:auto;aspect-ratio:3/2}
.experience-page .engineering-world>.motion-picture{width:100%}
.motion-picture .puppet-part,.puppet-breathe,.puppet-gaze,.puppet-eye{transform-box:view-box}
.puppet-gaze{translate:var(--look-x) var(--look-y);transition:translate .25s ease-out}
.puppet-eye{transform-box:fill-box;transform-origin:center}
.puppet-breathe{transform-origin:50% 72%;animation:puppetBreathe 4.8s ease-in-out infinite}
.puppet-head{animation:puppetNod 6.4s ease-in-out infinite}
.puppet-eye{animation:puppetBlink 6.8s ease-in-out infinite}
.puppet-wave{animation:puppetWave 8s ease-in-out infinite}
.puppet-window{animation:puppetWindow 7s ease-in-out infinite}
.puppet-window.window-two{animation-duration:8.2s;animation-direction:reverse}
.puppet-lift{transform-box:view-box;animation:puppetLift 6.4s ease-in-out infinite}
.puppet-gear{transform:none}
.puppet-water{animation:puppetWater 5.2s ease-in-out infinite}
.puppet-steam{animation:puppetSteam 3.8s ease-in-out infinite;stroke-dasharray:45 100;stroke-dashoffset:70;opacity:0}
.puppet-cursor{animation:puppetCursor 1.2s steps(1) infinite}
.puppet-drop{animation:puppetDrop 1.08s linear infinite;animation-delay:var(--drop-delay);opacity:0}
.puppet-data-packet{stroke-dasharray:9 170;animation:puppetPacket 3.6s linear infinite;opacity:.7}
.puppet-chart-glint{animation:puppetGlint 3s ease-in-out infinite;opacity:0}
.motion-picture .puppet-part,.motion-picture .puppet-breathe,.motion-picture .puppet-eye,
.motion-picture .puppet-lift,.motion-picture .puppet-steam,.motion-picture .puppet-cursor,
.motion-picture .puppet-drop,.motion-picture .puppet-data-packet,.motion-picture .puppet-chart-glint{animation-play-state:var(--motion-play)}
.motion-picture .puppet-breathe,.motion-picture .puppet-head,.motion-picture .puppet-wave,
.motion-picture .puppet-window,.motion-picture .puppet-eye,.motion-picture .puppet-lift,.motion-picture .puppet-water{animation-delay:var(--motion-offset)}
body.motion-paused .motion-picture,body.is-booting .motion-picture,.motion-document-hidden .motion-picture{--motion-play:paused}
.motion-toggle{border:1px solid #b8decd55;border-radius:5px;background:none;color:inherit;padding:.65rem .85rem;font:inherit;font-size:.75rem;cursor:pointer;min-height:44px;margin:.5rem 1rem .5rem 0}
.motion-toggle:hover{background:#b8decd14;border-color:#b8decd}
.motion-toggle[hidden]{display:none}
.site-footer small{flex-wrap:wrap}
@keyframes puppetBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes puppetNod{0%,100%{transform:rotate(-1.5deg)}35%{transform:rotate(2.3deg)}65%{transform:rotate(-2.5deg)}}
@keyframes puppetBlink{0%,32%,35%,73%,76%,100%{transform:scaleY(1)}33.5%,74.5%{transform:scaleY(.08)}}
@keyframes puppetWave{0%,20%,65%,100%{transform:rotate(0)}30%,46%{transform:rotate(48deg)}38%,54%{transform:rotate(25deg)}}
@keyframes puppetWindow{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-13px) rotate(.5deg)}}
@keyframes puppetLift{0%,15%,85%,100%{transform:translateY(0) rotate(0)}40%,60%{transform:translateY(-23px) rotate(-1.2deg)}}
@keyframes puppetWater{0%,100%{transform:rotate(-2deg)}30%,65%{transform:rotate(7deg)}}
@keyframes puppetSteam{0%{stroke-dashoffset:70;opacity:0;transform:translateY(0)}30%{opacity:.35}75%{opacity:.2}100%{stroke-dashoffset:-85;opacity:0;transform:translateY(-16px)}}
@keyframes puppetCursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes puppetDrop{0%{transform:translate(530px,668px) rotate(-25deg) scale(.45);opacity:0}20%{opacity:.9}80%{opacity:.65}100%{transform:translate(580px,735px) rotate(-25deg) scale(.6);opacity:0}}
@keyframes puppetPacket{to{stroke-dashoffset:-179}}
@keyframes puppetGlint{0%,100%{opacity:0;transform:translateY(10px)}40%{opacity:.65}70%{opacity:0;transform:translateY(-20px)}}
@media(min-width:1650px){.experience-page .coding-scene>.motion-picture{height:280px}}
@media(max-width:1100px){.experience-page .coding-scene>.motion-picture{height:210px}}
@media(max-width:650px){.experience-page .coding-scene>.motion-picture{height:auto;aspect-ratio:3/2}.motion-toggle{font-size:.75rem;margin-left:0}}
@media(prefers-reduced-motion:reduce){.motion-picture .motion-art{display:none}.motion-picture.motion-ready>img{visibility:visible}.motion-picture *{animation:none!important;transition:none!important}}