/* Motion study: the original Workshop colours, type, and artwork. */
.hero { position:relative; }
.workshop-scene { position:relative; transform-origin:50% 70%; }
.workshop-scene img { transform-origin:100% 60%; }
.workshop-scroll { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:13px; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.workshop-scroll svg { width:16px; height:30px; stroke-width:1.3; color:var(--red); }
.motion-ready:not(.motion-off) .workshop-scene img { transform:translate3d(0,calc(var(--hero-progress,0) * -35px),0) scale(calc(1 + var(--hero-progress,0) * .09)); will-change:transform; }
.motion-ready:not(.motion-off) .hero-visual .hand-note { transform:translateY(calc(var(--hero-progress,0) * -65px)) rotate(5deg); }
.motion-ready:not(.motion-off) .hero-visual figcaption { transform:translateY(calc(var(--hero-progress,0) * -12px)) rotate(-2deg); }
.motion-ready:not(.motion-off) .hero.is-arriving .workshop-scene { animation:workshop-arrive 1.3s cubic-bezier(.16,1,.3,1) both; }
.motion-ready:not(.motion-off) .hero.is-arriving .marked:after { transform-origin:left center; animation:underline-arrive .85s cubic-bezier(.65,0,.35,1) .2s both; }
.motion-ready:not(.motion-off) .hero.is-arriving .hand-note { animation:note-arrive .65s ease-out .4s both; }
.motion-ready:not(.motion-off) .hero.is-arriving figcaption { animation:caption-arrive .8s ease-out .55s both; }
.motion-ready:not(.motion-off) .hero.is-arriving .hand-note path { stroke-dasharray:1; animation:ink-arrive 1.1s ease-in-out .65s both; }
.motion-ready:not(.motion-off) .draw-on-view path { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1); }
.motion-ready:not(.motion-off) .draw-on-view.is-in-view path { stroke-dashoffset:0; }
.motion-ready:not(.motion-off) .reveal-on-view { opacity:.25; transform:translateY(22px); transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1); }
.motion-ready:not(.motion-off) .reveal-on-view.is-in-view,.motion-ready:not(.motion-off) .reveal-on-view:focus-within { opacity:1; transform:none; }
.motion-ready:not(.motion-off) dialog[open] { animation:dialog-arrive .24s cubic-bezier(.2,.8,.2,1) both; }
.motion-controls { position:fixed; z-index:24; bottom:20px; left:24px; display:flex; align-items:center; gap:0; border:1px solid #273c4533; border-radius:5px; background:#fff9edf5; box-shadow:0 3px 16px #273c4510; overflow:hidden; }
.motion-controls button,.motion-controls a { display:flex; align-items:center; gap:8px; min-height:42px; padding:10px 14px; background:transparent; font-size:11px; line-height:1.2; white-space:nowrap; }
.motion-controls button+button,.motion-controls a { border-left:1px solid #273c4526; }
.motion-controls button:hover,.motion-controls a:hover { background:var(--blue); }
.motion-controls :focus-visible { outline-offset:-4px; }
.motion-dot { width:7px; height:7px; border-radius:50%; background:var(--red); }
.motion-off .motion-dot { background:transparent; border:1px solid var(--muted); }
.motion-controls button:disabled { cursor:default; opacity:.65; }
.footer { padding-bottom:95px; }
.motion-off { scroll-behavior:auto; }
.motion-off *, .motion-off *:before, .motion-off *:after { animation:none!important; transition:none!important; }
.motion-off .hero-visual img { transform:none; }
.motion-off .reveal-on-view { opacity:1; transform:none; }
.motion-off .draw-on-view path { stroke-dashoffset:0; }
@keyframes workshop-arrive { from { opacity:0; transform:translateY(30px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes underline-arrive { from { transform:rotate(-2deg) scaleX(0); } to { transform:rotate(-2deg) scaleX(1); } }
@keyframes ink-arrive { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes note-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes caption-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes dialog-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media(min-width:901px) { .hero { padding-bottom:90px; } }
@media(max-width:900px) { .workshop-scroll { position:static; transform:none; justify-self:center; margin-top:3px; } .motion-ready:not(.motion-off) .workshop-scene img { transform:none; will-change:auto; } .motion-ready:not(.motion-off) .hero-visual .hand-note { transform:rotate(5deg); } .motion-ready:not(.motion-off) .hero-visual figcaption { transform:rotate(-2deg); } }
@media(max-width:650px) { .motion-controls { left:12px; bottom:12px; } .motion-controls button,.motion-controls a { min-height:40px; padding:9px 11px; font-size:10px; } .workshop-scroll { margin-top:-10px; } .header nav a.active { text-decoration:underline; text-underline-offset:6px; } }
@media(prefers-reduced-motion:reduce) { .workshop-scene img,.reveal-on-view { transform:none!important; opacity:1!important; } .draw-on-view path { stroke-dashoffset:0!important; } }