/* Motion direction: a held frame, a measured reveal, a continuous project image. */
:root{--motion-fast:180ms;--motion-medium:420ms;--motion-depth:850ms;--motion-ease:cubic-bezier(.22,1,.36,1)}
html{view-transition-name:none}
#app{view-transition-name:portfolio-page}
#scroll-progress{width:100%;transform:scaleX(0);transform-origin:left;transition:transform 100ms linear;box-shadow:none}
::view-transition-group(portfolio-page){animation-duration:var(--route-duration,560ms);animation-timing-function:var(--motion-ease)}
::view-transition-old(portfolio-page){animation:portfolio-out var(--motion-medium) ease both;mix-blend-mode:normal}
::view-transition-new(portfolio-page){animation:portfolio-in var(--route-duration,560ms) var(--motion-ease) both;mix-blend-mode:normal}
::view-transition-group(project-cover){animation-duration:var(--route-duration,560ms);animation-timing-function:var(--motion-ease)}
::view-transition-image-pair(project-cover){isolation:isolate}
::view-transition-old(project-cover),::view-transition-new(project-cover){height:100%;width:100%;mix-blend-mode:normal}
body.native-transition #app.page-enter{animation:none}
body.native-transition #app{pointer-events:none}
@keyframes portfolio-out{to{opacity:0}}
@keyframes portfolio-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.collection-card:focus-within .collection-open{opacity:1;transform:none}
.card-image:focus-visible img{filter:none}
@media(hover:hover) and (pointer:fine){
 .card-image.is-pointer-active{will-change:transform;transition:transform 120ms linear}
 .card-image.is-pointer-active img{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.025);transition:transform var(--motion-medium) var(--motion-ease)}
 .gallery-item button:hover img{transform:scale(1.015)}
}
.card-image,.gallery-item button{backface-visibility:hidden}
.lightbox img{opacity:1;transition:opacity var(--motion-fast),transform var(--motion-medium) var(--motion-ease)}
.lightbox.is-loading img{opacity:.3}
.lightbox.is-loading::after{content:'';position:absolute;top:50%;left:calc(50% - 22px);width:44px;height:1px;background:var(--accent);animation:held-frame 1s ease-in-out infinite;pointer-events:none}
@keyframes held-frame{50%{transform:scaleX(.25);opacity:.4}}
.opening-activate{position:absolute;z-index:5;right:var(--edge,22px);bottom:19%;min-height:44px;padding:12px 18px;border:1px solid var(--line,#7c8797);background:var(--bg,#090a0c);color:var(--fg,#eee);font:11px monospace;pointer-events:auto}
.opening-activate[hidden]{display:none}
.dress-intro-stage.is-loading .dress-intro-loading{opacity:.8}
.dress-intro-stage:not(.is-loading):not(.is-3d-ready):not(.is-3d-error) .dress-intro-loading{display:none}
body.ambient-static::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 70% 20%,rgba(111,141,172,.065),transparent 55%),radial-gradient(ellipse at 12% 75%,rgba(120,113,145,.035),transparent 60%)}
.menu-overlay.open .menu-link{transition-delay:calc(var(--menu-order,0) * 35ms)}
@media(max-width:700px),(pointer:coarse){
 .card-image,.card-image img{will-change:auto}
 .card-image.is-pointer-active img{transform:none}
 .opening-activate{bottom:24%;font-size:10px}
 .lightbox img{max-width:calc(100vw - 28px)}
}
@media(max-height:500px) and (max-width:900px){.hero-title-block{padding-bottom:1vh}.hero-title{font-size:clamp(32px,12vh,55px)}.hero-topline{display:none}.hero-work-link{margin-top:4px;padding-block:5px}.hero-inner{padding-top:calc(var(--header) + 12px)}}
.motion-off .card-image.is-pointer-active img{transform:none}
.motion-off .lightbox.is-loading::after{animation:none}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.lightbox.is-loading::after{animation:none}}
/* A single inspection stage: artwork above, controls in their own layout row. */
.glb-viewer,.native-content .glb-viewer{display:flex;flex-direction:column}
.glb-stage{position:relative;flex:1;min-height:180px;overflow:hidden;isolation:isolate}
.glb-stage::before{content:'';position:absolute;inset:20px;border:1px solid currentColor;opacity:.1;pointer-events:none}
.glb-stage canvas.is-focusing{cursor:crosshair}
.glb-status,.native-content .glb-status{position:absolute;top:16px;bottom:auto;left:24px;right:24px;margin:0;font:11px/1.7 monospace;z-index:1;text-wrap:balance;text-align:center;pointer-events:none}
.glb-toolbar,.native-content .glb-toolbar{position:relative;inset:auto;flex:none;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center;padding:14px 18px 18px;border-top:1px solid #ffffff20;background:#111216}
.glb-control-group{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.glb-toolbar button,.native-content .glb-toolbar button{font:11px/1.3 monospace;min-height:44px;padding:8px 12px;border-color:#565862;color:#e8e2d9;background:#15161a}
.glb-toolbar button[aria-pressed=true],.native-content .glb-toolbar button[aria-pressed=true]{background:#e8e2d9;color:#15161a}
.opening-inspect{position:absolute;z-index:5;right:var(--edge,22px);bottom:19%;min-height:44px;padding:12px 18px;border:1px solid var(--line,#7c8797);background:var(--bg,#090a0c);color:var(--fg,#eee);font:11px/1.5 monospace;pointer-events:auto}
.opening-activate{bottom:calc(19% + 56px)}
.opening-inspect:focus-visible,.opening-activate:focus-visible{outline:2px solid currentColor;outline-offset:4px}
body.spatial-modal-open{overflow:hidden}
.garment-inspector{box-sizing:border-box;width:calc(100vw - 48px);max-width:1280px;height:calc(100dvh - 48px);max-height:calc(100dvh - 48px);padding:0;border:1px solid #555862;background:#101014;color:#e8e2d9;overflow:auto}
.garment-inspector[open]{display:flex;flex-direction:column}
.garment-inspector::backdrop{background:#080a0eef}
.garment-inspector-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid #ffffff20}
.garment-inspector-header h2{margin:0;font:12px/1.5 monospace;text-transform:uppercase;letter-spacing:.08em}
.garment-inspector-header button{flex:none;width:44px;height:44px;font:24px/1 monospace;color:inherit;border:1px solid #555862;background:transparent;cursor:pointer}
.garment-inspector-header button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.garment-inspector .glb-viewer{position:relative;min-width:0;height:auto;min-height:0;flex:1;overflow:hidden;color:#e8e2d9;background:radial-gradient(ellipse at 50% 35%,#333138,#101014 75%)}
.garment-inspector .glb-stage canvas,.garment-inspector .glb-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.glb-viewer [hidden]{display:none!important}
.garment-inspector .glb-load{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:14px 25px;background:#121215e8;color:#eee8e2;white-space:nowrap}
.garment-inspector button{cursor:pointer;min-height:44px;border:1px solid currentColor;font-family:monospace}
.garment-inspector,.garment-inspector canvas{cursor:auto}
.garment-inspector .glb-stage canvas.is-focusing{cursor:crosshair}
.garment-inspector button:focus-visible,.garment-inspector canvas:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.garment-inspector .glb-stage{min-height:200px}
@media(max-width:700px){
 .opening-inspect{right:calc(17% + 22px);bottom:14%;font-size:10px}
 .opening-activate{right:calc(17% + 22px);bottom:calc(14% + 56px)}
 .garment-inspector{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
 .garment-inspector-header{padding:8px 14px}
 .glb-toolbar,.native-content .glb-toolbar{gap:8px;padding:10px 8px 12px;flex-direction:column}
 .glb-toolbar button,.native-content .glb-toolbar button{padding:7px 10px}
 .glb-status,.native-content .glb-status{font-size:10px;left:16px;right:16px}
}
/* Textured garment adapter retains the original volume-study composition. */
.garment-study-controls{width:100%}
.volume-garment .volume-stage{min-height:240px;flex:1;position:relative}
.volume-garment .glb-stage::before{display:none}
.volume-label,.volume-foot{position:absolute;z-index:2;left:24px;right:24px;font:10px/1.6 monospace;letter-spacing:.1em;color:#aaa6a1;pointer-events:none}
.volume-label{top:24px;display:flex;justify-content:space-between;gap:16px}
.volume-foot{bottom:24px}
.volume-garment .glb-status{top:auto;bottom:112px;font-size:11px;margin:0}
.volume-garment canvas{cursor:grab}
.volume-garment canvas:active{cursor:grabbing}
.volume-tools{position:absolute;z-index:3;right:24px;bottom:60px;display:flex;border:1px solid #ffffff29;background:#151519cc}
.volume-tools button{min-width:44px;min-height:44px;padding:0;border:0;color:#e9e5dd;background:transparent;font:20px monospace;cursor:pointer}
.volume-tools button+button{border-left:1px solid #ffffff29}
.volume-versions{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.volume-versions button{min-height:44px;padding:8px 14px;border:1px solid #81757b!important;color:#e9e5dd;background:#15161a;font:11px monospace}
.volume-versions button[aria-pressed=true]{background:#e9e5dd;color:#15161a}
.volume-preview-controls{padding:16px;flex:none}
.volume-preview-controls .volume-selector{display:flex;justify-content:space-around}
.volume-preview-controls .view-button{min-height:44px;padding:8px;border:1px solid #81757b;color:inherit;background:transparent;cursor:pointer}
.volume-preview-controls .view-button.is-active{background:#e9e5dd;color:#15161a}
.volume-preview-controls .construction-toggle{color:inherit;border:0;background:transparent;cursor:pointer;min-height:44px}
@media(max-width:700px){.volume-label,.volume-foot{left:20px;right:20px}.volume-tools{right:20px}}

.volume-garment .glb-load{top:auto;bottom:148px;transform:translateX(-50%);background:#f0ece4!important;color:#0c0e10!important;border-color:#f0ece4;min-height:44px;max-width:calc(100% - 40px);white-space:normal;text-align:center}
/* Separate activation, status and controls at every stage height. */
.native-content .study-stage:not(.volume-garment) .load-model{bottom:148px;max-width:calc(100% - 40px);white-space:normal}
.native-content .study-stage:not(.volume-garment) .model-status{bottom:112px;margin:0}
.native-content .study-stage:not(.volume-garment) .model-tools{bottom:60px}