.portfolio-scene{position:relative;isolation:isolate;z-index:1;margin-top:-180px;padding:440px 0 130px;overflow:hidden;color:#d9f5f8;background:linear-gradient(transparent 179px,#071f29 180px);scroll-margin-top:90px;perspective:1200px}
.portfolio-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(3,19,25,.22)),url('assets/images/portfolio-depth-v1.webp') center top/100% 100% no-repeat;mask-image:linear-gradient(transparent,rgba(0,0,0,.15) 35px,rgba(0,0,0,.55) 90px,#000 180px)}
.portfolio-atmosphere{transform:scale(var(--camera-scale,1));transform-origin:50% 0}
.portfolio-scene .display-frame{backdrop-filter:none}
.portfolio-scene .display-frame{translate:0 var(--depth-y,0px);rotate:x var(--depth-angle,0deg);scale:var(--depth-scale,1);transform-origin:50% 50%;backface-visibility:hidden}
.portfolio-scene .drift-key{translate:0 var(--depth-y,0px);rotate:x var(--depth-angle,0deg)}
.portfolio-content{position:relative;z-index:2;max-width:1160px}
.portfolio-heading{display:flex;justify-content:space-between;align-items:end;gap:48px;padding:0 4%}
.portfolio-index{display:flex;align-items:center;gap:20px;color:#b4d8df;font:500 11px/1.4 Manrope,sans-serif;letter-spacing:.22em;margin:0 0 28px}
.portfolio-index span{height:1px;width:100px;background:linear-gradient(#8ed3df,#8ed3df);opacity:.5}
.portfolio-heading h2{font-family:Unbounded,Manrope,sans-serif;font-weight:350;font-size:clamp(32px,4.2vw,58px);line-height:1.5;letter-spacing:.2em;margin:0;color:#d8f5f9;text-shadow:0 0 25px #65ccdc22}
.portfolio-link{display:inline-flex;align-items:center;gap:28px;min-height:44px;border:1px solid #a3eaf0;border-radius:28px;padding:0 21px;margin-top:32px;font:600 10px/1.4 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#e6fbff;background:#092e39aa;box-shadow:0 0 14px #73e3f333,inset 0 0 9px #a4ecf511;transition:background .25s,box-shadow .25s}
.portfolio-link svg{width:32px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2}
.portfolio-link:hover{background:#17505e;box-shadow:0 0 22px #73e3f34d}
.portfolio-link:focus-visible{outline:2px solid #e6fdff;outline-offset:5px}
.portfolio-manifesto{margin:0;padding:10px 0 10px 25px;border-left:1px solid #a5dce44d;font:500 10px/2.5 Manrope,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:#b5d8de}
.portfolio-showcase{margin-top:70px;scroll-margin-top:120px;outline:none}
.portfolio-empty{position:relative;height:540px}
.display-frame{position:absolute;border:1px solid #88d5df44;background:linear-gradient(130deg,#25434d38,#031820d9 40%,#09232bbf);box-shadow:inset 0 1px #b5faff22,0 22px 38px #00111766,0 0 20px #5dd1e00a;backdrop-filter:blur(3px)}
.display-primary{width:61%;aspect-ratio:16/10;left:0;top:0;transform:perspective(1100px) rotateY(5deg) rotateZ(-1deg)}
.display-secondary{width:35%;aspect-ratio:16/10;right:0;top:80px;transform:perspective(1100px) rotateY(-7deg) rotateZ(2deg)}
.display-tertiary{width:35%;aspect-ratio:16/10;right:6%;top:320px;transform:perspective(1100px) rotateY(-5deg) rotateZ(-1deg)}
.display-frame i{position:absolute;width:22px;height:22px;border-color:#b8faffaa;border-style:solid;border-width:0;filter:drop-shadow(0 0 4px #9befff55)}
.display-frame i:nth-child(1){left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}.display-frame i:nth-child(2){right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}.display-frame i:nth-child(3){left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}.display-frame i:nth-child(4){right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.portfolio-coming{position:absolute;left:0;bottom:0;max-width:260px;color:#a0c9d0;font:500 11px/1.8 Manrope,sans-serif;letter-spacing:.12em}
.portfolio-drift{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.drift-key{position:absolute;z-index:2;width:90px;height:86px;border-radius:15px;background:linear-gradient(135deg,#e8ffff,#4b8a97 8%,#164651 50%,#082935);border:1px solid #91dee9b3;box-shadow:inset 0 1px 2px #eaffff,3px 8px 0 #082c36,4px 9px 1px #7eddec99,0 15px 30px #00121bd9,0 0 18px #6eddf02b;transform:rotate(var(--tilt,-15deg));animation:depth-float var(--duration,7s) ease-in-out infinite;animation-delay:var(--delay,0s);animation-play-state:paused}
.drift-key span{position:absolute;inset:4px 6px 12px;border-radius:10px;background:linear-gradient(135deg,#3c727e,#143842 76%);box-shadow:inset 0 1px 2px #dfffff80,inset 0 -3px 7px #00202e66;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d6f8ff;text-shadow:0 0 5px #b2effb44}
.drift-key b{font:400 30px/1.15 Manrope,Arial,sans-serif}.drift-key small{font:500 10px/1.8 Manrope,sans-serif;letter-spacing:.02em}
.drift-key:after{content:'';position:absolute;inset:90% -10% -40%;background:radial-gradient(ellipse,#64d9ed33,transparent 65%);filter:blur(5px)}
.drift-command{left:19%;top:140px;--tilt:18deg}.drift-option{right:18%;top:220px;--tilt:-21deg;--delay:-3s;--duration:8s}
.drift-control{left:4%;top:340px;--tilt:15deg;--delay:-2s;--duration:9s;width:80px;height:74px}
.drift-enter{right:7%;top:540px;--tilt:-17deg;--delay:-4s;width:72px;height:68px}
.drift-shift{left:5%;top:870px;--tilt:12deg;--delay:-1s;width:58px;height:55px;opacity:.7}
.drift-plus{right:12%;top:1000px;--tilt:-13deg;--delay:-5s;width:60px;height:58px;opacity:.7}
.drift-command span,.drift-plus span{background:linear-gradient(145deg,#f0ffff,#b9dce4 60%,#6d9ea9);color:#12404a;text-shadow:none}
.portfolio-current{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#85efff;stroke-width:.7;opacity:.3;filter:drop-shadow(0 0 5px #7aedff)}
.current-highlight{stroke:#eaffff;stroke-width:1.7;stroke-dasharray:35 1700;animation:current-flow 16s linear infinite;animation-play-state:paused}
.portfolio-current>path:first-child{stroke:none}
.depth-code{position:absolute;top:230px;left:39%;color:#b3edfa;font:9px/1.8 monospace;opacity:.16}
.portfolio-scene.in-view .drift-key,.portfolio-scene.in-view .current-highlight{animation-play-state:running}
@keyframes depth-float{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-15px) rotate(calc(var(--tilt) + 2deg))}}
@keyframes current-flow{to{stroke-dashoffset:-1735}}
.portfolio-scene .project-list:not(:empty){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.portfolio-scene .project-card{display:block;border:1px solid #89dbe455;background:#071e27;color:#e3f7fa;overflow:hidden;border-radius:0}
.portfolio-scene .project-card:only-child{grid-column:1/-1;max-width:800px}
.portfolio-scene .project-visual{aspect-ratio:16/10;overflow:hidden;background:#102c35}
.portfolio-scene .project-visual img{width:100%;height:100%;object-fit:cover}
.portfolio-scene .project-card-body{padding:24px}.portfolio-scene .project-card h3{font:500 22px/1.3 Manrope,sans-serif;margin:10px 0}.portfolio-scene .project-card p,.portfolio-scene .project-card small{color:#b4d8df}
@media(max-width:700px){
 .portfolio-scene{margin-top:-90px;padding:270px 0 75px;background:linear-gradient(transparent 89px,#071f29 90px)}
 .portfolio-atmosphere{background-image:linear-gradient(180deg,transparent,#041b2344),url('assets/images/portfolio-depth-mobile-v1.webp');mask-image:linear-gradient(transparent,rgba(0,0,0,.4) 40px,#000 90px)}
 .portfolio-heading{display:block;padding:0}.portfolio-heading h2{font-size:29px;letter-spacing:.13em;line-height:1.6}.portfolio-index{font-size:9px;margin-bottom:18px}.portfolio-manifesto{margin-top:25px;font-size:8px;line-height:2;letter-spacing:.12em;padding-left:15px}.portfolio-link{margin-top:20px}
 .portfolio-showcase{margin-top:45px}.portfolio-empty{height:430px}.display-primary{width:86%;top:0}.display-secondary{width:59%;top:180px;right:0}.display-tertiary{width:44%;top:288px;right:50%}.portfolio-coming{max-width:145px;left:auto;right:0;font-size:9px;bottom:5px}
 .drift-key{width:65px;height:62px}.drift-key b{font-size:24px}.drift-key small{font-size:8px}.drift-command{left:17%;top:100px}.drift-option{right:15%;top:150px}.drift-control{left:4%;top:550px;width:47px;height:45px}.drift-enter{right:5%;top:400px;width:48px;height:45px}.drift-shift,.drift-plus,.depth-code{display:none}.portfolio-current{opacity:.18}
 .portfolio-scene .project-list:not(:empty){grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.portfolio-scene .drift-key,.portfolio-scene .current-highlight{animation:none!important}.portfolio-link{transition:none}}
@media(prefers-reduced-motion:reduce){.portfolio-wave{display:none}.portfolio-scene .display-frame,.portfolio-scene .drift-key{translate:none;rotate:none;scale:none}}
.portfolio-scene .drift-key{background:linear-gradient(125deg,#e9fbfd 0%,#a3c8cf 24%,#699da9 61%,#d5eef2 94%);border:1px solid #c0e5e9;border-radius:13px;box-shadow:inset 1px 1px 2px #fff,inset -2px -3px 3px #518591,0 3px 1px #285968,0 9px 16px #00182066,0 2px 12px #a7f3ff26;scale:var(--depth-scale,1)}
.portfolio-scene .drift-key span{inset:2px 5px 13px;background:linear-gradient(135deg,#fff,#e6f6f8 40%,#d0e7eb 78%,#f3ffff);color:#123e49;border-radius:9px;box-shadow:inset 0 1px 2px #fff,0 2px 3px #6194a533;text-shadow:none}
.portfolio-scene .drift-key b{font-weight:700}.portfolio-scene .drift-key small{font-weight:700}
.portfolio-scene .drift-key:after{inset:92% 8% -13%;background:radial-gradient(ellipse,#87e7f52a,transparent 70%);filter:none}
@media(prefers-reduced-motion:reduce){.portfolio-atmosphere{transform:none}.portfolio-scene .drift-key{scale:none}}
/* A broad luminous envelope follows scroll over the original pixels.
   Screen blending can only add light, never leave a dark trail. */
.ribbon-texture{display:none;position:absolute;inset:0;pointer-events:none;background:inherit;filter:brightness(1.35);mix-blend-mode:screen;opacity:.62;--ribbon-envelope:linear-gradient(transparent calc(var(--ribbon-reveal,0%) - 24%),#0003 calc(var(--ribbon-reveal,0%) - 15%),#000b calc(var(--ribbon-reveal,0%) - 7%),#000 var(--ribbon-reveal,0%),#000b calc(var(--ribbon-reveal,0%) + 7%),#0003 calc(var(--ribbon-reveal,0%) + 15%),transparent calc(var(--ribbon-reveal,0%) + 24%));mask-image:url('assets/images/ribbon-texture-mask.svg'),var(--ribbon-envelope);mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect;-webkit-mask-image:url('assets/images/ribbon-texture-mask.svg'),var(--ribbon-envelope);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-in}
.js .ribbon-texture{display:block}
.portfolio-current{display:none}
@media(prefers-reduced-motion:reduce){.js .ribbon-texture{display:none}}