/* Gallery images become responsive windows into each project. */
body.journal .project-motion{--scroll-y:0px;--px:50%;--py:50%;--rx:0deg;--ry:0deg;--shift-x:0px;--shift-y:0px;position:relative;overflow:visible;isolation:isolate}
body.journal .project-motion .project-visual{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/10;width:100%;border-radius:2px;transform:perspective(1000px) translateY(0) rotateX(0deg) rotateY(0deg);transform-origin:50% 50%;box-shadow:0 0 0 1px #111b1409;transition:transform 700ms cubic-bezier(.22,.61,.36,1),box-shadow 700ms ease;background:#eeefea}
body.journal .project-motion .project-visual>img,body.journal .project-motion .project-visual>.bimx-viewport{display:block;width:100%;height:100%;max-height:none;object-fit:contain;transform:translate3d(0,var(--scroll-y),0) scale(1.045);transition:transform 1000ms cubic-bezier(.22,.61,.36,1),filter 800ms ease}
body.journal .project-motion .project-visual.bimx-index>.bimx-viewport{height:auto}
.project-light,.project-scan,.project-grid{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0}
.project-light{background:radial-gradient(ellipse at var(--px) var(--py),#ffffff38,transparent 64%),linear-gradient(180deg,transparent 52%,#07140c40);transition:opacity 700ms ease}
.project-light::before{content:"";position:absolute;inset:-60%;background:linear-gradient(105deg,transparent 40%,#ffffff05 44%,#ffffff66 49%,#ffffff08 54%,transparent 58%);transform:translateX(-55%)}
.project-scan{display:none;inset:0 auto 0 0;width:2px;background:#98ffbc;box-shadow:0 0 5px #b6ffd2,0 0 20px #4eff83,0 0 42px #30ff7470;transform:translateX(-20px)}
.project-motion-scanning .project-scan{display:block}
.project-grid{background-image:linear-gradient(#77ffac30 1px,transparent 1px),linear-gradient(90deg,#77ffac30 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(ellipse at var(--px) var(--py),#000,transparent 72%);transition:opacity 800ms ease}
.project-motion-architecture .project-grid{display:none}
.project-folio{position:absolute;z-index:3;left:18px;top:16px;font:500 13px/1.2 Arial,sans-serif;letter-spacing:.12em;padding:8px 10px;color:white;background:#1120189e;backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px);transition:opacity 450ms ease,transform 600ms cubic-bezier(.22,.61,.36,1);pointer-events:none}
.project-open{position:absolute;z-index:3;right:18px;bottom:18px;width:54px;height:54px;display:grid;place-items:center;border:1px solid #ffffffb3;border-radius:50%;background:#ffffffef;color:#13221a;font:32px/1 Arial,sans-serif;box-shadow:0 6px 24px #06160e2b;opacity:0;transform:translate(10px,16px) rotate(-35deg) scale(.75);transition:opacity 450ms ease,transform 700ms cubic-bezier(.16,1,.3,1);pointer-events:none}
body.journal .project-motion :is(footer,.index-caption){position:relative;transition:border-color 600ms ease}
body.journal .project-motion :is(footer,.index-caption)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:#20382a;transform:scaleX(0);transform-origin:left;transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
body.journal .project-motion-scanning :is(footer,.index-caption)::after{background:#2fbc68}
body.journal .project-motion h2{transition:transform 600ms cubic-bezier(.22,.61,.36,1),color 500ms ease}
body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-visual{transform:perspective(1000px) translateY(-6px) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 22px 36px -22px #0a231b80,0 0 0 1px #243c3024}
body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-visual>img,body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-visual>.bimx-viewport{transform:translate3d(var(--shift-x),calc(var(--shift-y) + var(--scroll-y)),0) scale(1.075);filter:brightness(1.045) saturate(1.08)}
.project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-light{opacity:1}
.project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-light::before{animation:project-sheen 1350ms cubic-bezier(.22,.61,.36,1) both}
.project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-grid{opacity:.7}
.project-motion-scanning:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-scan{animation:project-scan-pass 1450ms cubic-bezier(.22,.61,.36,1) both}
.project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) :is(.project-folio,.project-open){opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) :is(footer,.index-caption)::after{transform:scaleX(1)}
body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) h2{transform:translateX(4px);color:#173e28}
@keyframes project-sheen{from{transform:translateX(-55%)}to{transform:translateX(55%)}}
@keyframes project-scan-pass{0%{left:102%;opacity:0}12%{opacity:1}80%{opacity:1}100%{left:-2%;opacity:0}}
@media(hover:none),(pointer:coarse),(max-width:600px){
 .project-open{width:46px;height:46px;right:14px;bottom:14px;font-size:28px;opacity:1;transform:none}
 .project-folio{left:14px;top:14px}
 body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-visual{transform:translateY(-3px)}
 body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-visual>img,body.journal .project-motion:is(:hover,:focus-within,.motion-in-view,.motion-touch) .project-visual>.bimx-viewport{transform:translate3d(0,var(--scroll-y),0) scale(1.055)}
}
@media(prefers-reduced-motion:reduce){
 body.journal .project-motion *,body.journal .project-motion ::before,body.journal .project-motion ::after{animation:none!important;transition:none!important}
 body.journal .project-motion .project-visual,body.journal .project-motion .project-visual>img,body.journal .project-motion .project-visual>.bimx-viewport,body.journal .project-motion h2{transform:none!important}
 .project-light,.project-scan,.project-grid{display:none}
 .project-open{opacity:1;transform:none}
}

@media(prefers-reduced-motion:no-preference){
 body.journal .project-motion.project-arriving{animation:project-arrive 1000ms cubic-bezier(.16,1,.3,1) var(--arrival-delay,0ms) both}
 @keyframes project-arrive{from{opacity:.28;translate:0 var(--arrival-y,28px)}to{opacity:1;translate:0 0}}
}
/* The gateway's luminous scan reveals a digital reading of the actual project. */
.project-motion-scanning .project-scan,.project-motion-scanning .project-grid{display:none}
.project-motion-scanning .project-light::before{display:none}
.project-scan-scene{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity 350ms ease;transform:translate3d(var(--shift-x),calc(var(--shift-y) + var(--scroll-y)),0) scale(1.075)}
.project-scan-scene.is-scanning{opacity:1}
@media(hover:none),(pointer:coarse),(max-width:600px){.project-scan-scene{transform:translate3d(0,var(--scroll-y),0) scale(1.055)}}
@media(prefers-reduced-motion:reduce){.project-scan-scene{display:none}}

.bimx-viewport .project-scan-scene{transform:none}