.visual-scene{--reveal:50%;position:relative;isolation:isolate;margin:48px 0 64px;height:480px;overflow:hidden;border:1px solid #414940;border-radius:18px;background:radial-gradient(ellipse at 60% 70%,#45452a55,transparent 65%),#171c18}.scene-top{position:absolute;inset:18px 22px auto;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:5;font:11px 'Syne Mono',monospace;letter-spacing:.08em;color:#c7cebb}.motion-toggle{background:#161d16;color:#e5e7da;border:1px solid #65705c;border-radius:5px;padding:8px 12px;cursor:pointer;font:12px 'DM Sans',sans-serif}.motion-toggle:focus-visible,input:focus-visible{outline:3px solid #ffdc00;outline-offset:4px}.visual-scene figcaption{position:absolute;bottom:0;inset-inline:0;padding:16px 22px;background:#101612ed;border-top:1px solid #59634d;z-index:6;display:flex;justify-content:space-between;gap:20px;font-size:12px;line-height:1.5}.visual-scene figcaption span:first-child{color:#ffdc00}.visual-scene figcaption span:last-child{max-width:47%;color:#b7c3b4}.scene-frog{position:absolute;z-index:4;width:300px;aspect-ratio:1;background-size:400% 200%;background-repeat:no-repeat;pointer-events:none;bottom:62px;right:3%;filter:drop-shadow(0 12px 12px #0006)}.dev-frog{background-image:url('/assets/content/sapinho-dev.webp')}.marketing-frog{background-image:url('/assets/content/sapinho-marketing.webp')}.studio-grid{position:absolute;inset:0;background-image:linear-gradient(#a7b9980d 1px,transparent 1px),linear-gradient(90deg,#a7b9980d 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(transparent,#000)}.demo-browser{position:absolute;left:8%;top:80px;width:58%;height:310px;background:#1e2821;border:1px solid #9da785;border-radius:10px;box-shadow:12px 16px 0 #080c0955;transform:perspective(800px) rotateY(-6deg);transition:transform .6s,background .6s}.browser-bar{display:flex;gap:5px;align-items:center;height:32px;padding:0 14px;border-bottom:1px solid #68745b;font:10px 'Syne Mono',monospace}.browser-bar i{width:5px;height:5px;background:#a0ab8c;border-radius:50%}.browser-bar span{margin-left:auto;color:#c1c7b2}.demo-content{padding:20px 28px}.demo-kicker{font:10px 'Syne Mono',monospace;color:#ccdcad}.demo-content strong{display:block;color:#ffdc00;font:34px/1.1 Asimovian,sans-serif;margin:12px 0}.demo-line{width:60%;height:4px;background:#56634d;margin:8px 0}.demo-line.short{width:42%}.demo-cta{display:inline-block;background:#ffdc00;color:#151a13;font:11px 'DM Sans',sans-serif;padding:8px 12px;margin:7px 0;border-radius:4px}.demo-tiles{display:flex;gap:8px;margin-top:10px}.demo-tiles i{height:32px;flex:1;border-radius:4px;background:#35422d}.float-code{position:absolute;left:4%;top:330px;z-index:3;padding:13px 20px;background:#292136;border:1px solid #9678aa;border-radius:8px;color:#e3c3f4;font:12px 'Syne Mono',monospace;box-shadow:0 10px 20px #0005}.float-code span{display:block;font-size:10px;color:#b3a1bf;margin-top:4px}.dev-scene[data-phase="0"] .demo-browser{background:transparent;transform:perspective(800px) rotateY(-12deg) translateY(12px)}.dev-scene[data-phase="0"] .demo-content strong{color:transparent;outline:1px dashed #a2ae91}.dev-scene[data-phase="0"] .demo-cta{background:transparent;outline:1px dashed #a2ae91;color:transparent}.dev-scene[data-phase="0"] .demo-tiles i{background:transparent;border:1px dashed #a2ae91}.dev-scene[data-phase="1"] .demo-tiles i{transform:translateY(8px)}.demo-tiles i{transition:transform .5s}.comparison-art{position:absolute;width:350px;height:350px;left:9%;top:65px;border-radius:12px;overflow:hidden;border:1px solid #7c7869}.comparison-base,.comparison-enhanced{position:absolute;inset:0;background-image:url('/assets/content/campaign-concept.webp');background-size:200% 100%;background-position:left center}.comparison-enhanced{background-position:right center;clip-path:inset(0 0 0 calc(100% - var(--reveal)))}.comparison-divider{position:absolute;top:0;bottom:0;left:calc(100% - var(--reveal));width:2px;background:#fff2b2;transform:translateX(-1px)}.comparison-divider span{position:absolute;top:45%;left:-15px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#ffdc00;color:#101312;font-size:18px}.compare-label{position:absolute;top:12px;padding:5px 7px;background:#111b;font:9px 'Syne Mono',monospace;color:white;border-radius:3px}.compare-label.before{left:9px}.compare-label.after{right:9px}.marketing-frog{right:6%;bottom:108px;width:285px}.compare-control{position:absolute;left:54%;right:5%;bottom:83px;z-index:5}.compare-control label{display:block;font:12px 'Syne Mono',monospace;color:#d6dec8;margin-bottom:7px}.compare-control input{width:100%;accent-color:#ffdc00;cursor:ew-resize;height:26px}.marketing-scene figcaption{min-height:64px}.project-fan{position:absolute;left:8%;top:85px;width:58%;height:290px}.project-fan img{position:absolute;object-fit:cover;object-position:top;width:75%;height:235px;border:4px solid #e6e7da;border-radius:8px;box-shadow:0 16px 25px #0005;transform:rotate(-7deg);transition:transform .6s}.project-fan img+img{left:25%;top:35px;transform:rotate(7deg)}.project-scene[data-phase="1"] .project-fan img{transform:rotate(-3deg) translateY(-8px)}.project-scene[data-phase="1"] .project-fan img+img{transform:rotate(3deg) translateY(8px)}.project-shot{display:block;width:calc(100% + 56px);max-width:none;height:245px;object-fit:cover;object-position:top;margin:-28px -28px 24px;border-radius:12px 12px 0 0;background:#e8ebe2}.archive-scene{height:330px}.archive-frog{background-image:url('/assets/sapinho-turn-front-v1.webp');aspect-ratio:3/4;width:180px;right:8%;bottom:58px}.archive-statement{position:absolute;left:6%;top:100px;font:clamp(24px,3.2vw,44px)/1.2 Asimovian,sans-serif;color:#f2f0dd;z-index:2}.sound-ribbon{position:absolute;display:flex;gap:8px;align-items:center;inset:60px 3% 50px;opacity:.2}.sound-ribbon i{width:8px;flex:1;height:var(--height);background:#d5b9e7;border-radius:5px;animation:equalizer 2s ease-in-out infinite alternate;animation-delay:calc(var(--bar)*-.19s);animation-play-state:paused}.is-active:not(.is-paused) .sound-ribbon i{animation-play-state:running}.archive-thumbnail{display:block;margin:-28px -28px 24px;overflow:hidden;border-radius:12px 12px 0 0}.archive-thumbnail img{display:block;width:100%;height:210px;object-fit:cover;transition:transform .25s}.archive-cards article:hover .archive-thumbnail img{transform:scale(1.035)}@keyframes equalizer{to{transform:scaleY(.45)}}
@media(max-width:700px){.visual-scene{height:460px;margin:34px 0 48px}.scene-top{inset:12px 14px auto;font-size:9px}.motion-toggle{font-size:10px;padding:7px}.demo-browser{left:5%;top:62px;width:76%;height:270px;transform:none}.demo-content{padding:14px 18px}.demo-content strong{font-size:27px}.demo-tiles i{height:22px}.scene-frog{width:195px;bottom:70px;right:0}.float-code{left:4%;top:285px;font-size:10px;padding:10px}.float-code span{font-size:9px}.visual-scene figcaption{font-size:10px;gap:10px;padding:12px 14px}.visual-scene figcaption span:last-child{max-width:45%}.comparison-art{width:250px;height:250px;left:5%;top:58px}.marketing-frog{width:165px;bottom:108px;right:-1%}.compare-control{left:6%;right:6%;bottom:80px}.compare-control label{font-size:11px}.marketing-scene{height:470px}.marketing-scene figcaption{min-height:72px}.project-scene{height:380px}.project-fan{left:5%;top:65px;width:70%;height:240px}.project-fan img{height:180px}.project-scene .scene-frog{width:185px;bottom:55px;right:-3%}.archive-scene{height:290px}.archive-frog{width:140px;right:0;bottom:64px}.archive-statement{font-size:23px;top:85px;max-width:65%}.archive-scene figcaption{min-height:58px}.sound-ribbon{gap:4px}.project-shot{height:220px}}
@media(prefers-reduced-motion:reduce){.visual-scene *,.archive-cards *{animation:none!important;transition:none!important}.motion-toggle{display:none}.demo-browser{transform:none!important}}

.marketing-frog{bottom:140px}@media(max-width:700px){.marketing-frog{bottom:142px;width:145px}.comparison-art{max-width:90%}}

@media(max-width:700px){.archive-statement{max-width:53%;font-size:21px}.archive-frog{width:122px;right:1%}}