/* Original CSS-built motion study. No video download, canvas, or animation library. */
.hero{padding-top:44px;padding-bottom:46px}
.kinetic-project{background:linear-gradient(140deg,#eeefe8,#d9ddd7 67%,#c7cdc7);border-top-width:5px;padding:24px;box-shadow:0 28px 60px #0004,inset 0 1px #fff}
.kinetic-project h2{font-size:31px;margin-bottom:14px}
.workshop{position:relative;height:348px;isolation:isolate;overflow:hidden;border:1px solid #b7bdb7;background:radial-gradient(ellipse at 50% 32%,#f4f3ec 0%,#d2d8cf 65%,#b2bcb2 100%);box-shadow:inset 0 2px 12px #27382d15}
.workshop-grid{position:absolute;inset:0;background:linear-gradient(#415e3910 1px,transparent 1px),linear-gradient(90deg,#415e3910 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(#0009,transparent 90%)}
.workshop-rail{position:absolute;z-index:5;top:16px;left:15px;right:15px;height:26px;border:1px solid #52555a;border-radius:3px;background:linear-gradient(#f2f2ef,#7b8084 32%,#c2c5c4 44%,#52565a 85%,#a4aaa7);box-shadow:0 4px 6px #0003,inset 0 1px #fff;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;gap:12px}
.workshop-rail span{margin-right:auto;font-size:8px;letter-spacing:.09em;color:#252a29;text-shadow:0 1px #fff9}.workshop-rail i{width:6px;height:6px;border:1px solid #5b6262;border-radius:50%;background:linear-gradient(135deg,#fff,#535b5b);box-shadow:0 0 0 2px #bcc0be}
.workshop-clamp{position:absolute;z-index:8;left:44%;top:9px;width:48px;height:65px;border:1px solid #7c2722;border-radius:4px 4px 11px 11px;background:linear-gradient(105deg,#bc352d,#ff9882 15%,#fc5a4b 36%,#ae3029 100%);box-shadow:3px 5px 6px #0004,inset 1px 0 #ffdbbf;transition:left .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.workshop-clamp:after{content:"";position:absolute;width:13px;height:15px;left:16px;bottom:-13px;border:3px solid #4c5255;border-top:0;border-radius:0 0 8px 8px;box-shadow:inset 1px 0 #eee}
.workshop-clamp span{position:absolute;right:9px;bottom:9px;font:500 22px/1 'Oswald',sans-serif;color:#4a221e;text-shadow:0 1px #ffc6a1}
.scene{position:absolute;inset:53px 16px 68px;transition:opacity .4s,transform .85s cubic-bezier(.22,1,.36,1);pointer-events:none}
.scene-input{opacity:1;transform:none}.scene-build{opacity:0;transform:translateY(26px) scale(.93)}.scene-ready{opacity:0;transform:translateY(32px) scale(.91)}
.paper{position:absolute;padding:18px;border:1px solid #aeafa6;width:54%;height:178px;background:linear-gradient(110deg,#fffef6,#ebe7dc);box-shadow:5px 11px 12px #222b272d,inset 0 1px #fff;transition:transform .85s cubic-bezier(.22,1,.36,1)}
.paper small{font-size:9px;letter-spacing:.1em}.paper strong{display:block;font:500 30px/1.12 'Oswald',sans-serif;letter-spacing:-.02em;margin-top:15px}.paper-number{position:absolute;right:11px;bottom:6px;color:#888b84;font:400 21px/1 'Oswald',sans-serif}.paper-lines{height:30px;margin-top:17px;background:repeating-linear-gradient(transparent 0 8px,#adb3a680 8px 9px);max-width:75%}
.paper-back{left:39%;top:10px;transform:rotate(12deg);background:#cacfc8}.paper-red{left:24%;top:28px;transform:rotate(-7deg);color:#4b2420;background:linear-gradient(115deg,#ff9b82,#fc5a4b 70%,#e0493d);border-color:#b94a40}.paper-red .paper-number{color:#a33d34}.paper-front{left:6%;top:46px;transform:rotate(-13deg)}
.build-frame{position:absolute;inset:13px 0 0;border:1px dashed #707e6b70}.build-frame>span{position:absolute;right:8px;top:7px;font-size:8px;color:#65735c;letter-spacing:.08em}.build-frame i{position:absolute;width:22%;height:1px;background:#6a7960;top:58%;left:24%}.build-frame i:nth-child(3){left:58%}.build-frame i:nth-child(4){top:28%;left:37%;height:70%;width:1px}
.module{position:absolute;padding:12px;background:#fffdf3;border:1px solid #b2b7aa;box-shadow:4px 7px 8px #29332930;transition:transform .85s cubic-bezier(.22,1,.36,1)}.module small{font-size:8px;letter-spacing:.05em;color:#657160}.module strong{font:400 25px/1.15 'Oswald',sans-serif;display:block;margin:7px 0 12px}.module-form{left:0;top:45px;width:36%;transform:rotate(-7deg)}.module-form>i{display:block;height:14px;border:1px solid #c5cabd;margin:7px 0;background:#e9ede2}.module-form b{display:block;background:#fc5a4b;color:#3c2723;padding:5px;font-size:9px;font-weight:500;margin-top:10px}.module-queue{left:38%;top:5px;width:34%;transform:rotate(7deg)}.module-queue>span{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ccd0c5;font-size:10px;padding:10px 0}.module-queue>span i{width:7px;height:7px;background:#fc5a4b;border-radius:50%}.module-status{right:0;top:113px;width:42%;background:#29372d;color:#f2f1df;transform:rotate(-5deg)}.module-status small{color:#c4cabe}.module-status strong{font-size:19px;max-width:80%;margin-bottom:0}.module-status b{position:absolute;bottom:9px;right:10px;font-size:19px;color:#d8e5a8}
.ready-screen{position:absolute;left:2%;right:2%;top:19px;border:1px solid #656961;border-radius:3px;overflow:hidden;background:#133a30;box-shadow:3px 12px 17px #1d2a2940;transform:rotate(-2deg);transition:transform .8s cubic-bezier(.22,1,.36,1)}.ready-bar{display:flex;justify-content:space-between;padding:10px 11px;background:linear-gradient(#4d524e,#282f2c);color:#e8ecdf;font-size:8px;letter-spacing:.08em;border-bottom:1px solid #737f6d}.ready-bar span:last-child{color:#d6e5b4}.ready-screen img{display:block;width:100%;height:157px;object-fit:cover;object-position:left top}.ready-caption{font-size:9px;padding:10px;background:#eeeee3;color:#404a3e;border-top:1px solid #a5b29b}
.ready-stamp{position:absolute;right:2px;top:4px;z-index:2;background:#f5f0e3;border:2px solid #95372d;color:#95372d;padding:7px 10px;transform:rotate(8deg) scale(.7);font:500 19px/1 'Oswald',sans-serif;box-shadow:3px 5px 8px #0003;opacity:0;transition:transform .5s .25s,opacity .4s .25s}.ready-stamp span{display:block;font:500 7px/1.6 'IBM Plex Sans',sans-serif;letter-spacing:.11em}
.workshop-floor{position:absolute;z-index:6;bottom:0;left:0;right:0;height:57px;border-top:1px solid #ffbb99;background:linear-gradient(120deg,#ffad90 0%,#fc5a4b 28%,#e14536 75%,#922e27);box-shadow:0 -3px 9px #0004,inset 0 -2px 1px #853429;display:flex;align-items:center;justify-content:space-between;padding:10px 17px;gap:10px;overflow:hidden}.workshop-floor:after{content:"";position:absolute;inset:-70% -20%;background:linear-gradient(110deg,transparent 43%,#fff5 48%,transparent 54%);transform:translateX(var(--sheen,-35%));pointer-events:none;transition:transform .8s}
.workshop-floor>span{font:500 16px/1 'Oswald',sans-serif;letter-spacing:.07em;color:#4c231e;text-shadow:0 1px #ffc79a}.workshop-floor>i{font-style:normal;font-size:7px;letter-spacing:.08em;max-width:63px;line-height:1.5;color:#4c231e}.floor-roller{width:28%;height:13px;border:1px solid #a32e24;border-radius:10px;background:repeating-linear-gradient(90deg,#671e18 0 2px,#b3372b 2px 4px);box-shadow:inset 0 2px 5px #0006,0 1px #ffa183}
.workshop[data-scene="1"] .scene-input,.workshop[data-scene="2"] .scene-input{opacity:0;transform:translateY(-35px) scale(.85)}.workshop[data-scene="1"] .scene-build{opacity:1;transform:none}.workshop[data-scene="1"] .workshop-clamp{left:65%;transform:translateY(5px)}.workshop[data-scene="1"]{--sheen:10%}
.workshop[data-scene="2"] .scene-build{opacity:0;transform:translateY(-23px) scale(.97)}.workshop[data-scene="2"] .scene-ready{opacity:1;transform:none}.workshop[data-scene="2"] .ready-screen{transform:rotate(0)}.workshop[data-scene="2"] .workshop-clamp{left:17%}.workshop[data-scene="2"] .ready-stamp{opacity:1;transform:rotate(8deg) scale(1)}.workshop[data-scene="2"]{--sheen:42%}
.scene-controls{display:flex;gap:4px;border-bottom:1px solid #aeb6ae;margin-top:16px;padding-bottom:10px}.scene-controls button{flex:1;padding:9px 5px;border:1px solid transparent;background:transparent;color:#586156;font-size:11px;cursor:pointer;transition:background .2s,color .2s}.scene-controls button span{font-size:9px;opacity:.7;margin-right:3px}.scene-controls button[aria-pressed="true"]{border-color:#ba4c3f;background:#fc5a4b;color:#3b211e;box-shadow:inset 0 1px #ffb49f}.scene-controls button:hover{border-color:#596652}.scene-caption{margin:11px 0 0;min-height:38px;font-size:12px;color:#424c42;line-height:1.6}.kinetic-project .motion-note{margin:4px 0 17px}
@media(min-width:1300px){.workshop{height:376px}.paper{height:196px}.paper-front{top:55px}.paper-red{top:34px}.module-status{top:135px}.ready-screen img{height:182px}}
@media(max-width:950px) and (min-width:701px){.kinetic-project{padding:17px}.kinetic-project h2{font-size:26px}.workshop{height:321px}.scene{left:10px;right:10px}.paper{padding:12px;height:158px}.paper strong{font-size:25px}.module{padding:9px}.module strong{font-size:20px}.module-status strong{font-size:17px}.workshop-rail span{font-size:7px}.ready-screen img{height:136px}.ready-caption{font-size:8px}.scene-controls button{font-size:10px}}
@media(max-width:700px){.hero{align-items:start}.kinetic-project h2{font-size:30px}.workshop{height:355px}.scene-caption{min-height:0}.module-form{top:49px}.ready-screen img{height:169px}}
@media(max-width:400px){.kinetic-project{padding:15px}.kinetic-project h2{font-size:26px}.workshop{height:320px}.scene{left:10px;right:10px}.paper{height:165px;padding:13px}.paper strong{font-size:26px}.module{padding:8px}.module strong{font-size:21px}.module-status strong{font-size:17px}.ready-screen img{height:138px}.ready-caption{font-size:8px}.scene-controls button{font-size:10px}.workshop-floor{padding:10px}.workshop-floor>span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.scene,.paper,.module,.workshop-clamp,.ready-screen,.ready-stamp,.workshop-floor:after,.scene-controls button{transition:none!important}.workshop-floor:after{display:none}}
@media(min-width:701px) and (max-height:800px){.hero{padding-top:32px;gap:40px}.kinetic-project .workshop{height:290px}.kinetic-project .scene{bottom:61px}.kinetic-project .paper{height:146px;padding:14px}.kinetic-project .paper-front{top:40px}.kinetic-project .paper-red{top:25px}.kinetic-project .paper strong{font-size:26px}.kinetic-project .module-form{top:20px}.kinetic-project .module-status{top:90px}.kinetic-project .ready-screen img{height:117px}.kinetic-project .workshop-floor{height:50px}.kinetic-project .project-label{margin-bottom:12px}.kinetic-project .scene-caption{min-height:30px}.kinetic-project .motion-note{font-size:9px}.hero h1{font-size:clamp(56px,6.4vw,82px)}}