/* Each service has a different stage, composition and motion vocabulary. */
.scene-instruction{font-size:12px;line-height:1.6;margin-top:15px;max-width:500px}.scene-button{background:var(--cream);border:1px solid var(--ink);border-radius:30px;padding:10px 18px;font-size:12px;margin-top:22px;transition:transform .2s}.scene-button:hover{transform:translateY(-3px)}.hero-explainer-video-production{grid-template-columns:.9fr 1.1fr;gap:40px}.hero-explainer-video-production h1{font-size:clamp(54px,6vw,94px)}.storyboard-scene{background:var(--warm);border:3px solid var(--ink);border-radius:14px;box-shadow:12px 12px 0 var(--ink);transform:rotate(3deg);overflow:hidden;position:relative}.board-top,.board-bottom{display:flex;justify-content:space-between;gap:15px;padding:15px 20px;border-bottom:2px solid var(--ink);font-size:9px;font-weight:700;letter-spacing:1px}.board-bottom{border-bottom:0;border-top:2px solid var(--ink);align-items:center}.board-bottom>span{margin-right:auto}.board-bottom i{width:7px;height:7px;border-radius:50%;background:var(--ink)}.story-panels{position:relative;aspect-ratio:1.42;background:var(--cream)}.story-panel{position:absolute;inset:0;padding:22px;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s}.panel-label{font-size:9px;letter-spacing:2px;position:absolute;bottom:12px;left:22px}.story-panel svg{width:100%;height:100%}.story-panels .panel-path,.story-panels .panel-click{opacity:0;transform:translateX(30px) rotate(3deg)}.story-panels[data-step="1"] .panel-question,.story-panels[data-step="2"] .panel-question,.story-panels[data-step="2"] .panel-path{opacity:0;transform:translateX(-30px) rotate(-3deg)}.story-panels[data-step="1"] .panel-path,.story-panels[data-step="2"] .panel-click{opacity:1;transform:none}.panel-question svg{animation:story-anticipation 5s ease-in-out infinite}.hero-motion-graphics{display:block;padding-top:70px;padding-bottom:60px;overflow:hidden}.hero-motion-graphics .hero-copy{max-width:800px}.hero-motion-graphics h1{font-size:clamp(80px,11vw,170px);max-width:1000px;position:relative;z-index:2}.hero-motion-graphics .hero-deck{max-width:490px}.hero-motion-graphics .world-scene{position:absolute;right:0;top:8%;width:46%;z-index:1}.hero-motion-graphics .hero-copy{pointer-events:none}.hero-motion-graphics .hero-copy a{pointer-events:auto}.hero-motion-graphics .hero-copy h1{background:linear-gradient(90deg,var(--cream) 50%,transparent);padding-right:20px}.kinetic-scene{position:relative;aspect-ratio:1/1;background:var(--orange);border:2px solid var(--ink);border-radius:50% 50% 18px 18px;overflow:hidden;isolation:isolate}.kinetic-grid{position:absolute;inset:0;background-image:linear-gradient(#20202020 1px,transparent 1px),linear-gradient(90deg,#20202020 1px,transparent 1px);background-size:40px 40px;transform:rotate(-12deg) scale(1.2)}.kinetic-word{position:absolute;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(55px,7vw,120px);letter-spacing:-5px;line-height:1;z-index:2}.word-one{left:15%;top:14%;transform:rotate(-12deg);animation:kinetic-nudge 6s ease-in-out infinite}.word-two{right:10%;top:38%;font-style:italic;color:var(--cream);animation:kinetic-scale 4s ease-in-out infinite}.word-three{left:10%;bottom:18%;transform:rotate(-8deg)}.kinetic-disk{position:absolute;width:35%;height:35%;border:2px solid var(--ink);border-radius:50%;background:var(--warm);right:-10%;top:8%;animation:disk-orbit 12s linear infinite}.kinetic-star{position:absolute;width:22%;height:22%;background:var(--cream);clip-path:polygon(50% 0,61% 35%,100% 30%,73% 54%,94% 85%,59% 72%,40% 100%,35% 65%,0 60%,29% 40%,10% 10%,43% 27%);left:8%;top:34%;animation:disk-orbit 16s linear infinite}.kinetic-line{position:absolute;width:120%;height:30%;left:-5%;top:40%;transform:rotate(-30deg);z-index:1}.kinetic-label{position:absolute;bottom:5%;right:7%;font-size:10px;letter-spacing:2px}.kinetic-scene.is-remixed .word-one{transform:rotate(9deg) translateY(8px)}.hero-2d-animation{grid-template-columns:1fr;display:flex;flex-direction:column;text-align:center;gap:0;padding-top:45px;padding-bottom:35px}.hero-2d-animation .hero-copy{max-width:950px}.hero-2d-animation h1{font-size:clamp(64px,8vw,122px);margin-bottom:20px}.hero-2d-animation .eyebrow{justify-content:center}.hero-2d-animation .hero-deck{max-width:600px;margin-inline:auto}.hero-2d-animation .hero-actions{justify-content:center;flex-direction:row}.hero-2d-animation .world-scene{width:min(100%,820px);margin-top:5px}.cartoon-scene{position:relative}.cartoon-scene svg{width:100%;display:block;max-height:510px}.cartoon-caption{position:absolute;bottom:7%;right:4%;font-size:9px;font-weight:700;letter-spacing:1px;transform:rotate(-4deg)}.cartoon-pal{transform-origin:40% 85%;animation:cartoon-bounce 4s ease-in-out infinite}.cartoon-hand{transform-origin:54% 52%}.is-waving .cartoon-hand{animation:wave-hand .35s ease-in-out 4 alternate}.cartoon-cloud{animation:cloud-drift 14s ease-in-out infinite}.cartoon-flower{transform-origin:75% 86%;animation:flower-sway 5s ease-in-out infinite}.hero-2d-animation .scene-caption{position:static;margin-top:16px}.world-2d-animation .studio-content>.fw-chapter:nth-of-type(2n){background:var(--warm);padding:45px;border:2px solid var(--ink);border-radius:35px 10px 30px 12px;margin:30px 0;transform:rotate(-.5deg)}.world-2d-animation .fw-faq{border:2px solid var(--ink);border-radius:24px;padding:35px}.hero-3d-animation{background:var(--ink);color:var(--cream);width:100%;padding-inline:max(5%,calc((100vw - 1380px)/2));grid-template-columns:1fr 1fr;min-height:740px;gap:35px;overflow:hidden}.hero-3d-animation .button{background:var(--orange);color:var(--ink);border-color:var(--orange)}.hero-3d-animation .text-link:focus-visible,.hero-3d-animation .scene-button:focus-visible{outline-color:var(--warm)}.hero-3d-animation .eyebrow{color:var(--warm)}.hero-3d-animation h1{font-size:clamp(56px,6vw,95px)}.hero-3d-animation .scene-caption{right:5%;color:#fff8efb0}.dimensional-scene{position:relative;aspect-ratio:1/1;perspective:850px;isolation:isolate}.spatial-grid{position:absolute;inset:20% -20% -5%;background-image:linear-gradient(#fff8ef12 1px,transparent 1px),linear-gradient(90deg,#fff8ef12 1px,transparent 1px);background-size:45px 45px;transform:rotateX(60deg) rotateZ(-20deg);transform-origin:50% 70%;mask-image:radial-gradient(ellipse,#000,transparent 70%)}.spatial-stage{position:absolute;inset:0;perspective:850px}.spatial-cube{--angle:0deg;position:absolute;width:190px;height:190px;left:calc(50% - 95px);top:calc(50% - 95px);transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(calc(-30deg + var(--angle))) rotateZ(-10deg);transition:transform .4s}.cube-face{position:absolute;width:190px;height:190px;border:1px solid #ffdebe88;backface-visibility:hidden;background:linear-gradient(140deg,#ffaf78,var(--orange));display:grid;place-items:center}.cube-face.front{transform:translateZ(95px)}.cube-face.back{transform:rotateY(180deg) translateZ(95px);background:#a93220}.cube-face.right{transform:rotateY(90deg) translateZ(95px);background:linear-gradient(130deg,#db4b28,#7d2418)}.cube-face.left{transform:rotateY(-90deg) translateZ(95px);background:#c54428}.cube-face.top{transform:rotateX(90deg) translateZ(95px);background:linear-gradient(45deg,#ffd8b2,#ff895c)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(95px);background:#842318}.cube-face.front i{width:70px;height:70px;border-radius:50%;background:var(--ink);box-shadow:inset 5px 8px 10px #0009}.spatial-ball{position:absolute;width:105px;height:105px;left:7%;top:12%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff0b9,#ffc857 35%,#b47a17 75%,#5b3d0a);box-shadow:20px 30px 45px #0004;animation:ball-float 7s ease-in-out infinite}.spatial-shadow{position:absolute;bottom:12%;left:20%;width:68%;height:8%;border-radius:50%;background:#0009;filter:blur(12px);z-index:-1}.spatial-orbit{position:absolute;inset:13% 2%;border:1px solid #fff8ef45;border-radius:50%;transform:rotate(-25deg) scaleY(.5)}.spatial-label{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:9px;white-space:nowrap;letter-spacing:2px;color:var(--warm)}.model-control{display:flex;align-items:center;justify-content:center;gap:20px;font-size:12px;margin-top:25px}.model-control input{width:150px;accent-color:var(--orange)}.world-3d-animation .studio-content .chapter-3{background:var(--neutral);padding:45px;border-radius:22px;box-shadow:10px 12px 0 var(--ink);margin:30px 0 40px}.hero-saas-explainer-videos{grid-template-columns:.85fr 1.15fr;gap:45px}.hero-saas-explainer-videos h1{font-size:clamp(48px,5.3vw,85px)}.saas-scene{position:relative;perspective:1000px;padding:25px 0 50px}.app-window{border:2px solid var(--ink);background:var(--cream);border-radius:14px;overflow:hidden;box-shadow:10px 12px 0 #202020;transform:rotateY(-9deg) rotateX(5deg) rotateZ(2deg);transition:transform .6s}.app-bar{display:flex;gap:6px;align-items:center;padding:14px;background:var(--neutral);border-bottom:2px solid var(--ink)}.app-bar>span{width:7px;height:7px;border:1px solid var(--ink);border-radius:50%;background:var(--orange)}.app-bar b{margin-left:auto;font-size:8px;letter-spacing:1px}.app-body{display:grid;grid-template-columns:55px 1fr;min-height:300px}.app-sidebar{background:var(--ink);padding:20px 12px;display:flex;align-items:center;flex-direction:column;gap:22px}.app-sidebar b{font:700 25px 'Bricolage Grotesque',sans-serif;color:var(--cream)}.app-sidebar i{height:16px;width:16px;border:1px solid var(--cream);border-radius:4px}.app-main{padding:24px}.app-greeting{font-size:12px;font-weight:700;display:block;margin-bottom:20px}.app-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}.app-metrics>div{border:1px solid var(--ink);border-radius:9px;background:var(--warm);padding:12px}.app-metrics>div+div{background:var(--orange)}.app-metrics span{font-size:7px;letter-spacing:1px;display:block}.app-metrics b{font-family:'Bricolage Grotesque',sans-serif;font-size:35px;line-height:1.3}.app-workflow{display:flex;align-items:center;margin:28px 0}.workflow-step{border:1px solid var(--ink);border-radius:6px;padding:10px 8px;font-size:7px;letter-spacing:.4px;transition:background .3s,transform .3s}.workflow-step:first-child{background:var(--orange);transform:translateY(-3px)}.app-workflow i{height:2px;flex:1;background:var(--ink);min-width:12px;position:relative}.app-workflow i:after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);top:-2px;left:0;animation:data-travel 3s ease-in-out infinite}.app-chart{height:65px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--ink)}.app-chart i{background:var(--ink);height:35%;width:13%;border-radius:4px 4px 0 0;transform-origin:bottom;transition:transform .5s}.app-chart i:nth-child(2){height:55%;background:var(--orange)}.app-chart i:nth-child(3){height:45%}.app-chart i:nth-child(4){height:75%;background:var(--orange)}.app-chart i:nth-child(5){height:60%}.app-chart i:nth-child(6){height:100%;background:var(--warm)}.app-toast{position:absolute;bottom:5%;right:-3%;background:var(--warm);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:12px 18px;border-radius:10px;font-size:12px;transform:rotate(-4deg);animation:toast-float 5s ease-in-out infinite}.app-pointer{position:absolute;width:28px;height:36px;clip-path:polygon(0 0,100% 60%,55% 67%,39% 100%);background:var(--orange);bottom:25%;right:18%;filter:drop-shadow(2px 2px 0 var(--ink))}.app-controls{font-size:11px;margin-top:8px}.app-controls>span{font-weight:700}.app-controls>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.app-controls button{border:1px solid var(--ink);border-radius:20px;background:var(--cream);padding:7px 12px;font-size:11px}.app-controls button[aria-pressed=true]{background:var(--ink);color:var(--cream)}.app-controls p{font-size:12px;margin-top:12px;min-height:40px}.scene-saas-explainer-videos[data-step="1"] .workflow-step:first-child,.scene-saas-explainer-videos[data-step="2"] .workflow-step:first-child{background:transparent;transform:none}.scene-saas-explainer-videos[data-step="1"] .workflow-step:nth-of-type(2),.scene-saas-explainer-videos[data-step="2"] .workflow-step:nth-of-type(3){background:var(--orange);transform:translateY(-3px)}.scene-saas-explainer-videos[data-step="1"] .app-window{transform:rotateY(0) rotateX(0) rotateZ(-2deg)}.scene-saas-explainer-videos[data-step="2"] .app-chart i{transform:scaleY(.75)}.world-saas-explainer-videos .studio-content>.chapter-2{background:#e9ece3;border:1px solid var(--ink);padding:40px;border-radius:15px;margin:35px 0}.world-motion-graphics .studio-content>.chapter-3{border-left:12px solid var(--orange);padding-left:35px}.world-explainer-video-production .studio-content>.chapter-3{background:var(--warm);padding:40px;border:2px solid var(--ink);border-radius:10px;box-shadow:7px 7px 0 var(--ink);margin:30px 0}.scene-button:focus-visible,.model-control input:focus-visible,.app-controls button:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px}
@keyframes story-anticipation{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes kinetic-nudge{0%,100%{translate:0 0}50%{translate:15px 5px}}@keyframes kinetic-scale{0%,100%{scale:1}50%{scale:1.12 .94}}@keyframes disk-orbit{to{rotate:360deg}}@keyframes cartoon-bounce{0%,100%{transform:scale(1,1)}50%{transform:translateY(-10px) scale(1.02,.98)}}@keyframes wave-hand{to{transform:rotate(15deg)}}@keyframes cloud-drift{50%{transform:translateX(25px)}}@keyframes flower-sway{50%{transform:rotate(8deg)}}@keyframes ball-float{50%{transform:translateY(-20px)}}@keyframes data-travel{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:100%;opacity:0}}@keyframes toast-float{50%{translate:0 -7px}}
@media(max-width:1000px){.hero-explainer-video-production,.hero-saas-explainer-videos{gap:25px;grid-template-columns:1fr 1fr}.hero-explainer-video-production h1,.hero-3d-animation h1{font-size:clamp(46px,6vw,70px)}.hero-saas-explainer-videos h1{font-size:clamp(43px,5.8vw,65px)}.app-main{padding:16px}.app-body{grid-template-columns:40px 1fr}.app-sidebar{padding:15px 7px}.app-workflow{margin:20px 0}.workflow-step{font-size:6px;padding:8px 5px}.app-toast{font-size:10px;padding:10px;right:0}.hero-motion-graphics .world-scene{top:13%;width:48%}.hero-motion-graphics h1{font-size:clamp(80px,11vw,130px)}.kinetic-word{font-size:clamp(55px,8vw,90px)}.hero-2d-animation .hero-actions{align-items:center}.hero-3d-animation{min-height:620px}.spatial-cube,.cube-face{width:145px;height:145px}.spatial-cube{left:calc(50% - 72px);top:calc(50% - 72px)}.cube-face.front{transform:translateZ(72px)}.cube-face.back{transform:rotateY(180deg) translateZ(72px)}.cube-face.right{transform:rotateY(90deg) translateZ(72px)}.cube-face.left{transform:rotateY(-90deg) translateZ(72px)}.cube-face.top{transform:rotateX(90deg) translateZ(72px)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(72px)}.spatial-ball{width:75px;height:75px}.model-control{flex-direction:column;gap:10px}.spatial-label{font-size:7px;letter-spacing:1px}}
@media(max-width:650px){.hero-explainer-video-production,.hero-saas-explainer-videos{display:flex;gap:40px}.hero-explainer-video-production h1,.hero-3d-animation h1,.hero-saas-explainer-videos h1{font-size:clamp(45px,11vw,68px)}.hero-motion-graphics{padding-top:40px}.hero-motion-graphics .world-scene{position:static;width:100%;max-width:430px;margin:25px auto 0}.hero-motion-graphics h1{font-size:clamp(65px,15vw,95px)}.hero-motion-graphics .hero-copy{pointer-events:auto}.hero-motion-graphics .hero-copy h1{background:none;padding:0}.kinetic-word{font-size:clamp(62px,16vw,92px)}.kinetic-scene{aspect-ratio:1.1}.hero-2d-animation .hero-copy{text-align:left}.hero-2d-animation .eyebrow{justify-content:flex-start}.hero-2d-animation h1{font-size:clamp(49px,12vw,80px)}.hero-2d-animation .hero-actions{justify-content:flex-start;gap:18px}.cartoon-caption{font-size:7px;bottom:3%;right:0}.cartoon-scene svg{max-height:380px}.world-2d-animation .studio-content>.fw-chapter:nth-of-type(2n){padding:25px;transform:none}.world-2d-animation .fw-faq{padding:25px 20px}.hero-3d-animation{width:100%;padding-top:40px;gap:15px}.hero-3d-animation .world-scene{max-width:400px}.dimensional-scene{aspect-ratio:1.05}.model-control{flex-direction:row;margin-top:10px}.hero-3d-animation .scene-caption{text-align:left}.hero-3d-animation .hero-actions{align-items:flex-start;flex-direction:column}.world-3d-animation .studio-content .chapter-3{padding:25px;box-shadow:5px 6px 0 var(--ink)}.app-window{transform:rotate(-2deg);box-shadow:6px 7px 0 var(--ink)}.app-main{padding:20px}.app-body{min-height:280px;grid-template-columns:45px 1fr}.app-bar b{font-size:7px}.app-greeting{font-size:11px}.app-workflow{margin:25px 0}.workflow-step{font-size:7px}.app-toast{right:0;bottom:2%;font-size:11px}.app-controls{margin-top:20px}.app-controls p{min-height:0}.world-saas-explainer-videos .studio-content>.chapter-2,.world-explainer-video-production .studio-content>.chapter-3{padding:25px}.world-motion-graphics .studio-content>.chapter-3{padding-left:20px}.board-top,.board-bottom{padding:12px;font-size:8px}.story-panel{padding:15px}.storyboard-scene{box-shadow:6px 7px 0 var(--ink);transform:rotate(1deg)}.scene-instruction{font-size:11px}}
@media(prefers-reduced-motion:reduce){.story-panel,.app-window,.app-chart i{transition:none}.spatial-cube{transition:none}.cartoon-pal,.cartoon-cloud,.cartoon-flower,.kinetic-word,.kinetic-disk,.kinetic-star,.spatial-ball,.app-workflow i:after,.app-toast{animation:none!important}}
