/* Topic-specific compositions and scroll-driven assembly scenes. */
.project-art { --scene-accent:#ccff48; position:relative; isolation:isolate; min-width:0; height:450px; margin:0; border:1px solid #ffffff20; border-radius:28px; background:radial-gradient(ellipse at 55% 45%,#263048 0,transparent 68%),#0e1522; overflow:hidden; }
.art-grid { position:absolute; inset:0; z-index:-1; opacity:.16; background-image:linear-gradient(#b9caff25 1px,transparent 1px),linear-gradient(90deg,#b9caff25 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse,black,transparent 75%); }
.art-orbit { position:absolute; inset:15% 9% 20%; border:1px solid #ccff4820; border-radius:50%; transform:rotateX(65deg) rotate(-30deg); animation:art-orbit 16s linear infinite; }
.art-body { position:absolute; inset:25px 20px 60px; perspective:1100px; }
.project-art figcaption { position:absolute; inset:auto 22px 20px; display:flex; justify-content:space-between; gap:15px; color:#bac5d6; font-size:9px; letter-spacing:.08em; }
.scene-chip { position:absolute; z-index:8; left:50%; bottom:0; transform:translateX(-50%); white-space:nowrap; padding:10px 15px; border:1px solid #ffffff26; border-radius:30px; color:#dce7fa; background:#101827ed; font-size:9px; box-shadow:0 12px 30px #0004; }
.software-cube { width:100%; height:100%; transform-style:preserve-3d; }
.code-slab { position:absolute; top:40%; left:50%; display:flex; justify-content:space-between; align-items:center; width:65%; height:140px; padding:20px; border:1px solid #ccff4870; border-radius:17px; background:linear-gradient(135deg,#384b33ef,#15282eee); box-shadow:0 20px 35px #0005,inset 0 1px #ffffff30; transform:translate(-50%,-50%) rotateX(55deg) rotateZ(-30deg); animation:slab-breathe 6s ease-in-out infinite; }
.code-slab b { color:#dcff9f; font:400 42px monospace; }.slab-label,.slab-dots { align-self:flex-start; color:#d4e4c6; font:10px monospace; }.slab-dots { align-self:flex-end; letter-spacing:3px; color:var(--scene-accent); }
.slab-0 { margin-top:75px; filter:brightness(.7); }.slab-1 { margin-top:15px; background:linear-gradient(135deg,#314c64ee,#1a2239ee); border-color:#8e76ff90; animation-delay:-2s; }.slab-2 { margin-top:-45px; animation-delay:-4s; }
.cube-ring { position:absolute; inset:8%; border:1px dashed #ccff4840; border-radius:50%; transform:rotateX(65deg); }
.art-mobile { --scene-accent:#b4a0ff; background:radial-gradient(ellipse at 50% 45%,#42336b,transparent 70%),#131222; }.art-mobile .art-orbit { border-color:#b4a0ff40; }
.device-fan { width:100%; height:100%; }
.scene-phone { position:absolute; left:50%; top:8%; width:150px; height:292px; padding:5px; overflow:hidden; border:1px solid #d8d1ffbb; border-radius:27px; background:#0c1019; box-shadow:0 25px 40px #0007; }
.scene-phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:22px; }.scene-island { position:absolute; z-index:3; top:11px; left:32%; width:36%; height:13px; border-radius:12px; background:#080b14; }
.phone-0 { transform:translateX(-118%) rotate(-14deg) scale(.84); top:14%; }.phone-1 { z-index:3; transform:translateX(-50%); animation:phone-hover 6s ease-in-out infinite; }.phone-2 { transform:translateX(18%) rotate(14deg) scale(.84); top:14%; }
.scene-window-bar { display:flex; align-items:center; gap:5px; height:29px; padding:0 12px; background:#111827; border-bottom:1px solid #ffffff18; }.scene-window-bar i { width:5px; height:5px; border-radius:50%; background:#ff8d75; }.scene-window-bar i:nth-child(2) { background:#e8cd70; }.scene-window-bar i:nth-child(3) { background:#a8d873; }.scene-window-bar span { margin-left:auto; color:#8390a4; font:8px monospace; }
.web-composition { position:absolute; top:13%; left:2%; width:90%; height:235px; border:1px solid #ffffff40; border-radius:12px; background:#121a26; box-shadow:0 28px 50px #0006; transform:rotateY(-13deg) rotateX(5deg) rotateZ(-4deg); }.web-composition > img { display:block; width:100%; height:calc(100% - 29px); object-fit:cover; object-position:top; border-radius:0 0 11px 11px; }
.web-floating { position:absolute; display:flex; align-items:center; justify-content:space-between; gap:20px; right:-15px; bottom:-28px; width:50%; padding:19px; border:1px solid #ccff4850; border-radius:13px; background:#1c2a25f5; box-shadow:0 10px 30px #0004; animation:panel-hover 7s ease-in-out infinite; }.web-floating span { font:9px monospace; color:#ddf0c9; }.web-floating b { color:var(--lime); font-size:25px; font-weight:400; }
.web-wireframe { position:absolute; top:-25px; right:-25px; width:90px; height:80px; padding:18px 12px; border:1px solid #ffffff2a; border-radius:12px; background:#2f3045ea; transform:translateZ(40px); }
.scene-line { display:block; width:90%; height:5px; margin:0 0 10px; border-radius:4px; background:#a5bbdb33; }.scene-line.short { width:55%; }
.art-restaurant { --scene-accent:#ffb76a; background:radial-gradient(ellipse,#62401f66,transparent 70%),#191410; }.art-restaurant .web-floating { background:#4a2d19ef; border-color:#ffb76a66; }.art-restaurant .web-floating b { color:#ffb76a; }.art-landing { background:radial-gradient(ellipse,#49315488,transparent 70%),#15121f; }.art-landing .web-composition { transform:rotateY(12deg) rotateZ(4deg); }
.dashboard-composition { position:absolute; top:14%; left:4%; width:90%; min-height:240px; border:1px solid #93beff50; border-radius:14px; background:#141e30; box-shadow:0 30px 55px #0007; transform:rotateY(-12deg) rotateX(8deg); }.dashboard-composition > .scene-window-bar { border-radius:14px 14px 0 0; }.dashboard-grid { display:grid; grid-template-columns:24% 1fr; min-height:210px; }.dashboard-sidebar { padding:22px 13px; border-right:1px solid #ffffff10; }.dashboard-sidebar b { display:block; margin-bottom:26px; color:var(--lime); font-size:22px; }.dashboard-main { padding:20px; }.dashboard-title { display:flex; justify-content:space-between; color:#d9e6f9; font-size:12px; }.dashboard-title span { color:#a7ffdf; }.dashboard-chart { display:flex; align-items:end; gap:8px; height:80px; margin-top:22px; border-bottom:1px solid #ffffff22; }.dashboard-chart i { flex:1; height:var(--bar); border-radius:4px 4px 0 0; background:linear-gradient(#b8d8ff,#5f55a3); transform-origin:bottom; animation:chart-rise 4s ease-in-out infinite alternate; }.dashboard-chart i:nth-child(2n) { animation-delay:-2s; background:linear-gradient(#d1f989,#4a907d); }.dashboard-rows { margin-top:20px; }.dashboard-floating { position:absolute; top:-18px; right:-14px; display:grid; place-items:center; width:62px; height:62px; border:1px solid #b4a0ff66; border-radius:17px; color:#d3caff; background:#302747; font-size:32px; animation:panel-hover 5s ease-in-out infinite; }
.art-dashboard { background:radial-gradient(ellipse,#173f5577,transparent 70%),#0e1522; }.art-portal .dashboard-floating { background:#183c33; color:#baffd4; }.art-platform .dashboard-composition { transform:rotateY(14deg) rotateX(7deg) rotateZ(3deg); }
.connection-map { position:relative; height:100%; }.connection-map svg { width:100%; height:100%; overflow:visible; }.connection-map path { fill:none; stroke:#a8ffcf88; stroke-width:1.5; stroke-dasharray:5 9; animation:connection-flow 12s linear infinite; }.connection-hub,.connection-node { position:absolute; display:grid; place-items:center; border:1px solid #b7ffce50; border-radius:16px; background:linear-gradient(135deg,#27453d,#141f29); box-shadow:0 12px 32px #0005; }.connection-hub { top:50%; left:50%; width:92px; height:92px; transform:translate(-50%,-50%) rotate(-12deg); color:#c3ffdc; font-size:50px; }.connection-node { width:62px; height:62px; color:#a5cbbf; font:11px monospace; }.node-0 { top:9%; left:6%; }.node-1 { top:9%; right:6%; }.node-2 { bottom:9%; left:6%; }.node-3 { bottom:9%; right:6%; }
.design-composition { position:relative; height:100%; }.type-tile { position:absolute; left:5%; top:9%; display:grid; place-content:center; width:60%; height:210px; border:1px solid #ffffff44; border-radius:14px; background:#d6e9d1; color:#14241d; font:95px/1 Georgia,serif; transform:rotate(-7deg); }.type-tile span { margin-top:16px; font:8px monospace; letter-spacing:.13em; }.swatch-tile { position:absolute; display:flex; gap:7px; top:10%; right:3%; width:115px; height:145px; padding:14px; border:1px solid #ffffff30; border-radius:15px; background:#1d2635; transform:rotate(9deg); }.swatch-tile i { flex:1; border-radius:9px; background:#ccff48; }.swatch-tile i:nth-child(2) { background:#8e76ff; }.swatch-tile i:nth-child(3) { background:#d5ead0; }.swatch-tile i:nth-child(4) { background:#ff9c62; }.component-tile { position:absolute; left:25%; right:2%; bottom:10%; display:flex; justify-content:space-between; align-items:center; padding:24px 18px; border:1px solid #ffffff40; border-radius:16px; background:#2b2345; color:#e5dfff; box-shadow:0 25px 45px #0005; animation:panel-hover 6s ease-in-out infinite; }.component-tile span { font-size:12px; }.component-tile b { font-size:25px; color:#ccff48; font-weight:400; }.design-cross { position:absolute; right:10%; bottom:40%; color:var(--lime); font-size:40px; }
.commerce-composition { position:relative; height:100%; }.product-tile { position:absolute; top:18%; width:42%; height:210px; padding:15px; border:1px solid #ffffff40; border-radius:16px; background:#24313e; box-shadow:0 20px 40px #0006; }.product-0 { left:0; transform:rotate(-12deg) scale(.9); }.product-1 { left:29%; z-index:2; transform:translateY(-22px); background:#3c304f; }.product-2 { right:-2%; transform:rotate(12deg) scale(.9); }.product-shape { margin:15px auto; width:90px; height:110px; border-radius:30% 55% 35% 60%; background:linear-gradient(135deg,#dbffd1,#3f8e6f); box-shadow:inset 7px 6px 15px #ffffff4d,12px 12px 20px #0004; transform:rotate(-14deg); }.shape-1 { border-radius:50%; background:linear-gradient(135deg,#eed4ff,#7e5eae); }.shape-2 { border-radius:20%; transform:rotate(20deg); background:linear-gradient(135deg,#ffe0a5,#bf713d); }.product-caption { display:flex; justify-content:space-between; align-items:center; color:#c3cfdd; font:10px monospace; }.product-caption b { color:var(--lime); font-size:25px; }
.ai-composition { position:absolute; inset:0 15%; overflow:hidden; border:1px solid #bca8ff66; border-radius:20px; box-shadow:0 25px 65px #0008; transform:rotate(-5deg); }.ai-composition > img { width:100%; height:100%; object-fit:cover; object-position:center; }.ai-scan { position:absolute; inset:0; background:linear-gradient(transparent 45%,#d4c0ff77 49%,#ddcfff 50%,transparent 52%); background-size:100% 200%; animation:ai-scan 6s ease-in-out infinite; }.ai-token { position:absolute; top:18px; right:18px; color:white; font-size:35px; filter:drop-shadow(0 0 15px #a688ff); }.ai-composition .scene-chip { max-width:94%; font-size:8px; bottom:16px; }
.page-mobile .service-hero { background:radial-gradient(ellipse at 85% 40%,#38274f,transparent 60%),var(--ink); }.page-connections .service-hero { background:radial-gradient(ellipse at 85% 40%,#173f38,transparent 60%),var(--ink); }.page-restaurant .service-hero { background:radial-gradient(ellipse at 85% 40%,#4a2c1a,transparent 60%),var(--ink); }.page-design .service-hero-grid { grid-template-columns:1fr 1fr; }
.scroll-assembly { position:relative; border-block:1px solid var(--line); background:radial-gradient(ellipse at 70% 50%,#252a43,transparent 65%),#0c111d; }
.assembly-sticky { padding:85px 0; overflow:clip; }.assembly-layout { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }.assembly-copy h2 { font-size:clamp(2.8rem,4.7vw,5rem); line-height:1.02; }.assembly-description { max-width:360px; margin:25px 0; color:#aeb8ca; font-size:13px; line-height:1.8; }.assembly-steps { list-style:none; margin:30px 0; padding:0; display:grid; gap:16px; }.assembly-steps li { display:flex; align-items:center; gap:14px; font-size:12px; color:#a6b0c4; transition:color .2s; }.assembly-steps li span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #ffffff20; border-radius:8px; font:9px monospace; }.assembly-steps .is-current { color:var(--lime); }.assembly-steps .is-current span { border-color:#ccff4870; background:#ccff480a; }.assembly-scroll-cue { font:9px Poppins,sans-serif; letter-spacing:.12em; color:#919eb2; text-transform:uppercase; }.assembly-scroll-cue > span { display:inline-block; margin-left:12px; color:var(--lime); animation:cue-scroll 1.7s ease-in-out infinite; }
.assembly-stage { position:relative; height:460px; perspective:1000px; transform-style:preserve-3d; }.assembly-stage-grid { position:absolute; inset:0; border-radius:50%; background-image:linear-gradient(#b7c6ff18 1px,transparent 1px),linear-gradient(90deg,#b7c6ff18 1px,transparent 1px); background-size:28px 28px; transform:rotateX(60deg) rotateZ(-30deg); mask-image:radial-gradient(ellipse,black,transparent 70%); }.assembly-stage-halo { position:absolute; inset:20%; background:#8e76ff20; border-radius:50%; filter:blur(35px); }
.assembly-layer { --travel:0; --layer-x:0px; --layer-y:0px; --layer-z:0px; position:absolute; top:48%; left:50%; width:74%; height:240px; overflow:hidden; border:1px solid #d2deff66; border-radius:17px; background:linear-gradient(135deg,#23334af5,#161d30fa); box-shadow:0 30px 55px #0005,inset 0 1px #ffffff30; opacity:calc(1 - var(--travel)); transform:translate3d(calc(-50% + var(--layer-x)),calc(-50% + var(--layer-y) + var(--travel) * 380px),var(--layer-z)) rotateX(calc(24deg + var(--travel) * 22deg)) rotateZ(calc(-12deg + var(--travel) * 30deg)) scale(calc(1 - var(--travel) * .2)); }
.layer-0 { --layer-x:-45px; --layer-y:55px; }.layer-1 { --layer-x:0px; --layer-y:0px; --layer-z:35px; background:linear-gradient(135deg,#393250f5,#1b2338fa); }.layer-2 { --layer-x:45px; --layer-y:-55px; --layer-z:70px; background:linear-gradient(135deg,#29453bf5,#182a2cfa); }
.assembly-layer-bar { position:relative; z-index:2; display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid #ffffff20; color:#d0ddf1; font:10px monospace; }.assembly-layer-bar > span:last-child { color:var(--lime); }.assembly-code { margin:28px 25px 20px; color:#c9dcb8; font:clamp(16px,2vw,26px) monospace; }.assembly-code-lines { margin:0 25px; }.assembly-wireframe { padding:20px; }.assembly-wireframe > div { height:55px; margin:12px 0; border:1px solid #b5cbff30; border-radius:8px; background:linear-gradient(120deg,#b5cbff0d,#b5cbff20); }.assembly-image { display:block; width:100%; height:calc(100% - 40px); object-fit:cover; object-position:top; }.assembly-type { padding:15px 25px; font:80px/1 Georgia,serif; color:#d4efd3; }.assembly-swatches { display:flex; gap:10px; margin:12px 25px; }.assembly-swatches i { width:45px; height:15px; border-radius:4px; background:#ccff48; }.assembly-swatches i:nth-child(2) { background:#8e76ff; }.assembly-swatches i:nth-child(3) { background:#e1eada; }.assembly-product { padding:25px; }.assembly-product > span { display:block; float:right; color:#dcffd4; font-size:60px; }.assembly-product .scene-line { width:50%; }.assembly-ai-mark { position:absolute; top:45%; left:45%; color:#e5d5ff; font-size:50px; }.assembly-progress { position:absolute; bottom:0; left:15%; right:15%; display:flex; align-items:center; gap:12px; color:#7e8fa8; font:9px monospace; }.assembly-progress i { flex:1; height:2px; background:#ffffff20; }.assembly-progress b { display:block; width:calc(var(--progress,1) * 100%); height:100%; background:var(--lime); box-shadow:0 0 15px #ccff4866; }
.assembly-mobile { background:radial-gradient(ellipse at 75% 50%,#3d2d61,transparent 60%),#10101e; }.assembly-mobile .assembly-layer { width:155px; height:315px; border-radius:27px; transform:translate3d(calc(-50% + var(--layer-x)),calc(-50% + var(--layer-y) + var(--travel) * 380px),var(--layer-z)) rotateY(calc(-14deg + var(--travel) * 25deg)) rotateZ(calc(var(--phone-rotation,0deg) + var(--travel) * 30deg)) scale(calc(1 - var(--travel) * .2)); }.assembly-mobile .layer-0 { --layer-x:-115px; --layer-y:25px; --phone-rotation:-12deg; }.assembly-mobile .layer-1 { --layer-x:0px; --layer-y:-5px; }.assembly-mobile .layer-2 { --layer-x:115px; --layer-y:25px; --phone-rotation:12deg; }.assembly-mobile .assembly-layer-bar { font-size:8px; padding:13px 10px; }.assembly-phone-screen { width:100%; height:calc(100% - 39px); object-fit:cover; object-position:top; }
.assembly-connections .assembly-layer { border-color:#99e3c966; }.assembly-connections .assembly-code { text-align:center; font-size:38px; margin-top:45px; }.assembly-ai .assembly-layer { border-color:#c0a4ff70; }
.scroll-assembly.motion-ready { height:240svh; }.motion-ready .assembly-sticky { position:sticky; top:85px; display:flex; align-items:center; height:calc(100svh - 85px); padding:20px 0; }.motion-ready .assembly-layout { width:100%; }
.app-store-badge { display:block; width:130px; height:auto; margin-top:22px; }.app-card-content .app-store-badge { max-width:100%; }.app-card-content { z-index:4; }.app-card-content > p { position:relative; }.app-card { min-height:385px; }
@keyframes art-orbit { to { transform:rotateX(65deg) rotate(330deg); } } @keyframes slab-breathe { 50% { translate:0 -9px; } } @keyframes phone-hover { 50% { translate:0 -10px; } } @keyframes panel-hover { 50% { translate:0 -9px; } } @keyframes chart-rise { from { scale:1 .8; } to { scale:1 1; } } @keyframes connection-flow { to { stroke-dashoffset:-140; } } @keyframes ai-scan { 0%,100% { background-position:0 -100%; } 50% { background-position:0 100%; } } @keyframes cue-scroll { 50% { translate:0 5px; } }
@media(max-width:991px) { .project-art { max-width:630px; width:100%; height:430px; }.page-design .service-hero-grid { grid-template-columns:1fr; }.assembly-layout { gap:30px; }.assembly-copy h2 { font-size:2.8rem; }.assembly-stage { height:390px; }.assembly-layer { width:78%; height:210px; }.assembly-mobile .assembly-layer { width:125px; height:265px; }.assembly-mobile .layer-0 { --layer-x:-85px; }.assembly-mobile .layer-2 { --layer-x:85px; } }
@media(max-width:700px) { .assembly-layout { grid-template-columns:1fr; gap:15px; }.assembly-copy .eyebrow { margin-bottom:14px; }.assembly-copy h2 { font-size:2.4rem; }.assembly-description { display:none; }.assembly-steps { display:flex; flex-wrap:wrap; gap:14px; margin:18px 0; }.assembly-steps li { font-size:10px; gap:6px; }.assembly-steps li span { width:23px; height:23px; font-size:8px; }.assembly-scroll-cue { display:none; }.assembly-stage { width:min(100%,430px); height:300px; margin:0 auto; }.assembly-layer { height:190px; width:72%; }.assembly-mobile .assembly-layer { width:115px; height:235px; }.assembly-mobile .layer-0 { --layer-x:-85px; --layer-y:15px; }.assembly-mobile .layer-2 { --layer-x:85px; --layer-y:15px; }.assembly-layer-bar { font-size:8px; padding:11px 12px; }.assembly-code { margin-top:20px; }.assembly-progress { bottom:0; }.motion-ready .assembly-sticky { top:80px; height:calc(100svh - 80px); }.scroll-assembly.motion-ready { height:210svh; }.assembly-sticky { padding:55px 0; } }
@media(max-width:575px) { .project-art { height:350px; border-radius:20px; }.art-body { inset:20px 15px 50px; }.scene-phone { width:115px; height:235px; border-radius:23px; }.scene-phone img { border-radius:18px; }.scene-island { height:10px; }.code-slab { width:70%; height:110px; padding:15px; }.code-slab b { font-size:30px; }.slab-label,.slab-dots { font-size:8px; }.slab-0 { margin-top:65px; }.slab-1 { margin-top:15px; }.slab-2 { margin-top:-35px; }.web-composition { height:195px; }.web-floating { bottom:-25px; padding:13px; }.web-floating span { font-size:8px; }.web-wireframe { top:-15px; right:-15px; width:75px; height:65px; padding:14px 10px; }.dashboard-composition { top:10%; min-height:200px; }.dashboard-grid { min-height:180px; }.dashboard-main { padding:15px; }.dashboard-chart { height:60px; }.dashboard-floating { width:47px; height:47px; font-size:24px; }.connection-node { width:45px; height:45px; border-radius:12px; font-size:9px; }.connection-hub { width:70px; height:70px; font-size:38px; }.type-tile { height:165px; font-size:75px; }.swatch-tile { width:88px; height:110px; padding:10px; gap:5px; }.component-tile { padding:17px 13px; bottom:5%; }.component-tile span { font-size:10px; }.product-tile { height:170px; padding:12px; }.product-shape { width:65px; height:85px; }.scene-chip { padding:8px 10px; font-size:8px; }.art-orbit { animation:none; }.project-art figcaption { font-size:8px; }.app-store-badge { width:120px; margin-top:18px; } }
@media(max-height:700px) and (max-width:700px) { .assembly-copy h2 { font-size:2rem; }.assembly-stage { height:245px; }.assembly-mobile .assembly-layer { height:200px; width:100px; }.assembly-steps { margin:12px 0; }.assembly-copy .eyebrow { font-size:8px; }.assembly-layer { height:155px; }.assembly-code { font-size:18px; }.assembly-type { font-size:50px; } }
.motion-off .scroll-assembly { height:auto; }.motion-off .assembly-sticky { position:static; height:auto; padding:65px 0; }.motion-off .assembly-layer { --travel:0 !important; }.motion-off .assembly-scroll-cue { display:none; }
@media(prefers-reduced-motion:reduce) { .scroll-assembly.motion-ready { height:auto; }.motion-ready .assembly-sticky { position:static; height:auto; padding:65px 0; }.assembly-layer { --travel:0 !important; }.assembly-scroll-cue { display:none; } }