/* Let each image define the frame, with no letterboxing or image crop. */
.project .project-stage{min-height:0;background:transparent;border-radius:12px;overflow:visible}
.project .project-picture{overflow:hidden;border-radius:12px;background:transparent}
.project .project-picture img{display:block;width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;transform:none!important;mix-blend-mode:normal}
.project .project-picture:hover img{transform:none!important}
.project .project-info{position:relative;z-index:1}
.project .project-stage{align-self:center}
@media(hover:hover) and (pointer:fine){
 .motion .project .project-picture{transition:box-shadow .5s;cursor:zoom-in}
 .motion .project .project-picture:hover{box-shadow:var(--shadow-x,0px) var(--shadow-y,12px) 32px -12px #16243930}
 .motion .project.dark .project-picture:hover{box-shadow:var(--shadow-x,0px) var(--shadow-y,12px) 36px -12px #0009}
}
.reading-progress{position:fixed;top:0;left:0;right:0;height:2px;background:#0071e3;transform:scaleX(var(--read-progress,0));transform-origin:left;z-index:100;pointer-events:none}
.motion .hero-copy{opacity:calc(1 - var(--hero-progress,0)*.6);transform:translateY(calc(var(--hero-progress,0)*-26px));will-change:transform,opacity}
.motion .hero-product{transform:translateY(calc(var(--hero-progress,0)*18px)) scale(calc(1 + var(--hero-progress,0)*.08))!important;will-change:transform}
.motion .project .project-stage.visible{transform:perspective(1400px) translateY(var(--scroll-shift,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:opacity .8s,transform .55s cubic-bezier(.2,.7,.2,1);transform-origin:50% 50%}
.motion .project .project-head>*{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .85s cubic-bezier(.16,1,.3,1)}
.motion .project .project-head.visible>*{opacity:1;transform:none}
.motion .project .project-head>:nth-child(2){transition-delay:70ms}
.motion .project .project-head>:nth-child(3){transition-delay:140ms}
.motion .project .project-head>:nth-child(4){transition-delay:210ms}
.motion .project .project-head>:nth-child(5){transition-delay:280ms}
.project-picture .expand{transition:transform .35s,background .25s;transform:translate(var(--arrow-x,0px),var(--arrow-y,0px))}
.project-picture:hover .expand{background:#0071e3;transform:translate(var(--arrow-x,0px),var(--arrow-y,0px)) rotate(6deg)}
.overview-item{position:relative}
.overview-item:after{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:#0071e3;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.overview-item:hover:after,.overview-item:focus-visible:after{transform:scaleX(1)}
.overview-item:hover>span{transform:translateX(4px)}
.overview-item>span{transition:transform .3s}
.pill{transition:transform .25s,background .25s,box-shadow .25s}.pill:hover{box-shadow:0 7px 22px #0071e322;transform:translateY(-2px)}.pill:active{transform:scale(.97)}
.view-switch button{transition:background .25s,color .25s,box-shadow .25s,transform .25s}.view-switch button:active{transform:scale(.96)}
.project-nav a{position:relative}.project-nav a.active{transition:color .3s,border-color .3s}
@media(max-width:600px){.project .project-stage,.project .project-picture{border-radius:10px}.motion .hero-product{transform:translateY(calc(var(--hero-progress,0)*8px)) scale(calc(1 + var(--hero-progress,0)*.035))!important}.motion .project .project-stage.visible{transform:translateY(var(--scroll-shift,0px))}}
@media(prefers-reduced-motion:reduce){.reading-progress{display:none}.motion .hero-copy,.motion .hero-product,.motion .project .project-stage.visible,.motion .project .project-head>*{transform:none!important;opacity:1!important;transition:none!important}.overview-item:after{transition:none}.project-picture .expand{transform:none!important}}

/* A contained inspection area keeps zoomed images clear of navigation controls. */
.detail-viewport{position:absolute;inset:82px 70px 112px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none}
#lightbox .detail-viewport #lightbox-image{flex:none;max-width:100%;max-height:100%;width:auto;height:auto;transform-origin:center;will-change:transform}
.detail-viewport.zoomed{cursor:grab}.detail-viewport.dragging{cursor:grabbing}
.detail-controls{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;background:#29292d;border:1px solid #ffffff12;border-radius:30px;z-index:3}
.detail-controls button{flex-shrink:0;white-space:nowrap;min-width:38px;height:34px;border-radius:20px;background:transparent;color:#f5f5f7;font-size:18px}
.detail-controls button:hover:not(:disabled){background:#ffffff18}
.detail-controls button[data-zoom="reset"]{font-size:12px;padding:0 13px;border-left:1px solid #ffffff20;border-radius:0 20px 20px 0}
.detail-controls output{flex-shrink:0;font-size:12px;width:48px;text-align:center;font-variant-numeric:tabular-nums;color:#d2d2d7}
.lightbox-arrow{z-index:2}.detail-touch-hint{display:none}
@media(max-width:600px){.detail-viewport{inset:76px 0 154px}.detail-controls{bottom:70px}.detail-touch-hint{display:block;position:absolute;bottom:119px;width:100%;text-align:center;color:#aaaab1;font-size:10px}}
@media(prefers-reduced-motion:reduce){.motion .project .project-picture{transition:none!important;box-shadow:none!important}}