/* WebTechFusion motion layer and interactive project brief */
.scroll-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transform-origin:left;pointer-events:none}
.ambient-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.8}
.dark-shell .hero,.dark-shell .hero-bottom{z-index:1}
.dark-shell:after{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--pointer-x,70%) var(--pointer-y,40%),color-mix(in srgb,var(--primary) 17%,transparent),transparent 70%);pointer-events:none;z-index:0}
.headline-line{display:block;animation:headline-appear 900ms cubic-bezier(.16,1,.3,1) both}
.headline-line:nth-child(2){animation-delay:140ms}.headline-line:nth-child(3){animation-delay:280ms}
@keyframes headline-appear{from{opacity:0;filter:blur(14px);transform:translate3d(0,48px,0)}to{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}}
.hero-intro,.hero-actions,.hero-foot{animation:headline-appear 850ms cubic-bezier(.16,1,.3,1) both;animation-delay:430ms}
.hero-actions{animation-delay:520ms}.hero-foot{animation-delay:620ms}
.art-back{animation:art-back-float 8.5s ease-in-out infinite}.art-front{animation:art-front-float 7.3s ease-in-out infinite}.art-label{animation:art-label-float 5.6s ease-in-out infinite}.art-glow{animation:glow-pulse 7s ease-in-out infinite}
@keyframes art-back-float{0%,100%{transform:translate3d(var(--back-x,0px),var(--back-y,0px),0) rotate(5deg)}50%{transform:translate3d(var(--back-x,0px),calc(var(--back-y,0px) - 14px),0) rotate(6.5deg)}}
@keyframes art-front-float{0%,100%{transform:translate3d(var(--front-x,0px),var(--front-y,0px),0) rotate(-7deg)}50%{transform:translate3d(var(--front-x,0px),calc(var(--front-y,0px) + 16px),0) rotate(-5.5deg)}}
@keyframes art-label-float{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(2deg) translateY(-11px)}}
@keyframes glow-pulse{0%,100%{opacity:.65;scale:1}50%{opacity:1;scale:1.08}}
.studio-marquee{overflow:hidden;background:var(--accent);color:var(--navy);padding:17px 0;white-space:nowrap;position:relative}.marquee-track{display:flex;width:max-content;animation:marquee-flow 34s linear infinite}.marquee-track span{font:800 clamp(13px,1.3vw,18px)/1 var(--font-head);letter-spacing:.16em;padding-right:30px}.marquee-track i{font-style:normal;color:var(--primary);font-size:22px;padding:0 24px;vertical-align:-2px}@keyframes marquee-flow{to{transform:translateX(-50%)}}
.motion-ready [data-reveal]{transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s cubic-bezier(.16,1,.3,1)}
.motion-ready [data-reveal]:not(.is-visible){opacity:0;filter:blur(7px);transform:translate3d(0,38px,0)}
.motion-ready [data-reveal].is-visible{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
.concept-card{animation:card-arrive .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--card-index,0) * 90ms)}
@keyframes card-arrive{from{opacity:0;transform:translate3d(0,25px,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.concept-visual img{transition:transform .65s cubic-bezier(.16,1,.3,1),filter .65s}.concept-card:hover .concept-visual img{transform:translateY(-20px) scale(1.05)}
.concept-card .concept-open{transition:transform .3s,background .3s}.concept-card:hover .concept-open{transform:rotate(45deg);background:var(--primary)}
.value-grid article,.process-grid article{transition:background .4s,padding .4s}.value-grid article:hover{background:color-mix(in srgb,var(--primary) 7%,transparent)}.process-grid article:hover{background:color-mix(in srgb,var(--primary) 11%,transparent)}
.process-section{position:relative;overflow:hidden}.process-section:before{content:"";position:absolute;inset:0;background:radial-gradient(470px circle at var(--spot-x,85%) var(--spot-y,45%),color-mix(in srgb,var(--primary) 14%,transparent),transparent 75%);pointer-events:none}.process-section .container{position:relative}
.work-section{position:relative;overflow:hidden}.work-section:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px circle at var(--spot-x,70%) var(--spot-y,50%),color-mix(in srgb,var(--primary) 8%,transparent),transparent 75%)}.work-section .container{position:relative}
.contact-orbit{animation:orbit-drift 8s ease-in-out infinite}.orbit-one{animation:orbit-spin 18s linear infinite}.orbit-two{animation:orbit-spin 14s linear infinite reverse}.orbit-one:after,.orbit-two:after{content:"";position:absolute;width:12px;height:12px;background:var(--navy);border-radius:50%;top:48%;left:-6px}.orbit-two:after{background:var(--primary);top:12%}@keyframes orbit-spin{to{transform:rotate(360deg)}}@keyframes orbit-drift{50%{transform:translateY(-16px)}}
.button,.nav-contact,.motion-control,.theme-trigger{--mx:0px;--my:0px;--lift:0px;transform:translate3d(var(--mx),calc(var(--my) - var(--lift)),0);transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .25s}.button:hover,.nav-contact:hover{--lift:3px}
.motion-control{position:fixed;z-index:30;right:120px;bottom:22px;width:39px;height:39px;background:#fff;color:var(--navy);border:1px solid #dbe8e6;border-radius:50%;box-shadow:0 8px 26px #071a2540;display:grid;place-items:center;font-size:16px}
.interaction-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:98;pointer-events:none}
.fusion-cursor{position:fixed;left:0;top:0;z-index:99;pointer-events:none;opacity:0;transition:opacity .2s}.fusion-cursor.is-active{opacity:1}.cursor-ring{position:absolute;left:-21px;top:-21px;width:42px;height:42px;border:1.6px solid var(--accent);border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--navy) 6%,transparent);box-shadow:0 0 0 1px #0002;transform:scale(var(--cursor-scale,1));transition:transform .25s,background .25s,border-color .25s}.cursor-dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 15px var(--primary)}.cursor-label{font-size:7px;font-weight:800;letter-spacing:.12em;color:#fff}.fusion-cursor.is-hovering .cursor-ring{--cursor-scale:1.55;background:var(--navy);border-color:var(--primary)}.fusion-cursor.is-hovering .cursor-dot{opacity:0}
@media(hover:hover) and (pointer:fine){body.has-custom-cursor,body.has-custom-cursor a,body.has-custom-cursor button,body.has-custom-cursor label,body.has-custom-cursor input[type=radio]{cursor:none}}

/* Project Lab */
.lab-section{position:relative;overflow:hidden;background:#edf4f2}.lab-section:before{content:"";position:absolute;right:-180px;top:-250px;width:550px;height:550px;border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);border-radius:50%;box-shadow:0 0 0 75px color-mix(in srgb,var(--primary) 5%,transparent),0 0 0 150px color-mix(in srgb,var(--accent) 8%,transparent)}.lab-section .container{position:relative}
.lab-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:13%;align-items:end;padding:62px 0 54px}.lab-heading h2{font:800 clamp(46px,5vw,74px)/1.06 var(--font-head);letter-spacing:-.075em;margin:0}.lab-heading h2 em{font-style:normal;color:var(--primary)}.lab-heading>p{color:var(--muted);font-size:16px;line-height:1.8;max-width:430px;margin:0 0 6px}
.lab-shell{display:grid;grid-template-columns:.43fr .57fr;min-height:510px;box-shadow:0 28px 75px #09293816}.lab-side{background:var(--navy);color:#fff;padding:28px 32px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.lab-side:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--primary) 23%,transparent),transparent 55%),linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px);background-size:auto,35px 35px,35px 35px}.lab-side-top,.lab-side-bottom{position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;font-size:9px;font-weight:800;letter-spacing:.17em;color:#b8cdd1}.lab-side-bottom{align-items:center;justify-content:flex-start;max-width:240px;line-height:1.6}.pulse-dot{width:8px;height:8px;flex:none;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent);animation:pulse 2.5s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--accent) 4%,transparent)}}
.lab-orbit{height:330px;width:330px;align-self:center;position:relative;display:grid;place-items:center}.lab-orbit-one,.lab-orbit-two{position:absolute;inset:0;border:1px solid #64bcc979;border-radius:50%;animation:orbit-spin 23s linear infinite}.lab-orbit-two{inset:31px;border-style:dashed;animation-duration:31s;animation-direction:reverse}.lab-orbit-one:before,.lab-orbit-two:before{content:"";position:absolute;width:12px;height:12px;background:var(--accent);border-radius:50%;top:8%;left:17%}.lab-orbit-two:before{background:var(--primary);top:87%;left:74%}.lab-orbit strong{font:800 52px/.98 var(--font-head);letter-spacing:-.08em;position:relative}.lab-orbit strong span{color:var(--accent);font-size:30px;vertical-align:top;margin-left:8px}
.lab-form-wrap{background:#fff;padding:clamp(30px,4vw,58px);min-width:0}.lab-progress-label{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--primary)}.lab-progress-label span:last-child{color:#859da2}.lab-progress-track{height:3px;background:#e5edec;margin:17px 0 39px;overflow:hidden}.lab-progress-track span{display:block;height:100%;width:33.333%;background:var(--primary);transition:width .4s cubic-bezier(.16,1,.3,1)}.brief-step{border:0;margin:0;padding:0;min-width:0;animation:step-arrive .45s cubic-bezier(.16,1,.3,1) both}.brief-step legend{font:800 clamp(28px,2.8vw,39px)/1.2 var(--font-head);letter-spacing:-.06em;padding:0;max-width:510px}.brief-step>p{font-size:14px;color:var(--muted);line-height:1.65;margin:12px 0 24px}@keyframes step-arrive{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:translateX(0)}}
.brief-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.brief-option{position:relative;display:block}.brief-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}.brief-option span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:63px;padding:13px 15px;border:1px solid var(--line);font:700 13px/1.4 var(--font-head);transition:background .2s,border-color .2s,color .2s,transform .2s}.brief-option span b{font-size:17px;font-weight:400;color:var(--primary)}.brief-option:hover span{border-color:var(--primary);transform:translateY(-2px)}.brief-option input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}.brief-option input:checked+span b{color:var(--accent)}.brief-option input:focus-visible+span{outline:3px solid var(--primary);outline-offset:3px}
.lab-controls{display:flex;align-items:center;gap:15px;margin-top:31px;min-height:52px}.lab-controls .button{margin-left:auto;min-width:170px}.lab-controls .button:disabled{background:#d6e0df;color:#7b9094;cursor:not-allowed;box-shadow:none;transform:none}.lab-back,.brief-restart{border:0;background:transparent;color:var(--ink);font-size:12px;font-weight:800;padding:10px 0}.lab-back:hover,.brief-restart:hover{text-decoration:underline}.lab-controls #briefHint{font-size:11px;color:var(--muted)}
.brief-result{animation:step-arrive .55s both}.brief-result h3{font:800 clamp(30px,3vw,44px)/1.15 var(--font-head);letter-spacing:-.06em;margin:10px 0}.brief-result>p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 25px}.brief-result dl{margin:0 0 27px;border-top:1px solid var(--line)}.brief-result dl div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding:12px 0}.brief-result dt{font-size:10px;font-weight:800;letter-spacing:.13em;color:#779098}.brief-result dd{margin:0;font-size:13px;font-weight:700;text-align:right}.brief-result-actions{display:flex;flex-wrap:wrap;gap:9px}.brief-result-actions .button{min-height:46px}.lab-outline{border:1px solid var(--line);padding:0 14px;background:#fff;font-size:12px;font-weight:800;min-height:46px}.lab-outline:hover{border-color:var(--primary);color:var(--primary)}.brief-restart{display:inline-block;margin-top:14px}.brief-feedback{display:inline-block;margin-left:15px;font-size:11px;color:var(--primary)}
@media(max-width:1000px){.lab-heading{gap:6%}.lab-orbit{width:260px;height:260px}.lab-orbit strong{font-size:43px}.lab-side{padding:26px}}
@media(max-width:760px){.lab-heading{grid-template-columns:1fr;gap:20px;padding:45px 0 35px}.lab-heading>p{max-width:600px}.lab-shell{grid-template-columns:1fr}.lab-side{min-height:175px;flex-direction:row;align-items:stretch}.lab-side-top{display:block}.lab-side-top span{display:block;margin-bottom:8px}.lab-side-bottom{align-self:flex-end}.lab-orbit{position:absolute;right:15%;top:-85px;width:250px;height:250px;opacity:.7}.lab-orbit strong{font-size:35px}.lab-form-wrap{min-height:415px}.motion-control{right:112px}}
@media(max-width:540px){.lab-side{min-height:145px;padding:20px}.lab-orbit{right:-15px;top:-110px}.lab-side-bottom{max-width:150px;font-size:8px}.lab-form-wrap{padding:25px 20px}.brief-options{grid-template-columns:1fr}.brief-option span{min-height:48px}.lab-progress-track{margin-bottom:25px}.brief-step legend{font-size:29px}.lab-controls{flex-wrap:wrap}.lab-controls #briefHint{order:3;width:100%}.lab-controls .button{min-width:145px}.brief-result-actions .button{width:100%}.motion-control{right:110px;bottom:14px}}
@media(hover:none),(pointer:coarse){.fusion-cursor,.interaction-canvas{display:none!important}.concept-card:hover .concept-visual img{transform:none}}
@media(prefers-reduced-motion:reduce){.fusion-cursor,.interaction-canvas,.ambient-canvas{display:none!important}.motion-ready [data-reveal],.motion-ready [data-reveal]:not(.is-visible){opacity:1!important;transform:none!important;filter:none!important}.marquee-track,.headline-line,.hero-intro,.hero-actions,.hero-foot,.art-back,.art-front,.art-label,.art-glow,.contact-orbit,.orbit-one,.orbit-two,.lab-orbit-one,.lab-orbit-two,.pulse-dot,.concept-card,.brief-step,.brief-result{animation:none!important}.dark-shell:after,.work-section:before,.process-section:before{display:none}}
.motion-paused .fusion-cursor,.motion-paused .interaction-canvas,.motion-paused .ambient-canvas{display:none!important}.motion-paused .motion-ready [data-reveal],.motion-paused.motion-ready [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}.motion-paused .marquee-track,.motion-paused .headline-line,.motion-paused .hero-intro,.motion-paused .hero-actions,.motion-paused .hero-foot,.motion-paused .art-back,.motion-paused .art-front,.motion-paused .art-label,.motion-paused .art-glow,.motion-paused .contact-orbit,.motion-paused .orbit-one,.motion-paused .orbit-two,.motion-paused .lab-orbit-one,.motion-paused .lab-orbit-two,.motion-paused .pulse-dot,.motion-paused .concept-card,.motion-paused .brief-step,.motion-paused .brief-result{animation:none!important}.motion-paused .dark-shell:after,.motion-paused .work-section:before,.motion-paused .process-section:before{display:none}

/* Project Lab refinement: the frame stays still; feedback follows user actions. */
.lab-shell{min-height:570px}
.lab-side{gap:18px}
.lab-orbit{width:230px;height:230px}
.lab-orbit strong{font-size:40px}
.lab-orbit-one,.lab-orbit-two{animation:none}
.lab-live{position:relative;z-index:1;border-top:1px solid #ffffff35;padding-top:14px}
.lab-live-kicker{display:block;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:5px}
.lab-live-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #ffffff22}
.lab-live-row>span{font-size:9px;letter-spacing:.12em;color:#a8c2c9;font-weight:800;white-space:nowrap}
.lab-live-row strong{font-size:12px;line-height:1.4;text-align:right;font-weight:700;color:#fff}
.lab-form-wrap{display:flex;flex-direction:column;min-height:570px}
#briefForm{display:flex;flex-direction:column;flex:1}
.lab-controls{margin-top:auto;padding-top:28px}
.brief-step,.brief-result{animation:none}
.brief-option:hover span{transform:none}
.brief-restart+.brief-restart{margin-left:18px}
@media(max-width:760px){.lab-side{display:block;min-height:0}.lab-orbit{display:none}.lab-live{margin-top:25px}.lab-form-wrap{min-height:570px}}
@media(max-width:540px){.lab-side{padding:22px 20px}.lab-side-top{display:flex;justify-content:space-between}.lab-side-top span{margin:0}.lab-live{margin-top:20px}.lab-live-row strong{max-width:58%}.lab-form-wrap{min-height:640px}.lab-controls{margin-top:auto}.brief-restart+.brief-restart{margin-left:12px}}
