.project-gallery.motion-gallery{position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;padding:0!important;margin:0!important;overflow:hidden;background:#061321;color:#fff;border-block:1px solid #b0c8da1a;--gallery-gap:clamp(6px,1vw,18px)}
.motion-gallery::before,.motion-gallery::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2}.motion-gallery::before{background:linear-gradient(90deg,#061321 0%,#06132100 14%,#06132100 86%,#061321 100%)}.motion-gallery::after{background:linear-gradient(180deg,#061321e6 0%,#06132100 16%,#06132100 82%,#061321eb 100%),radial-gradient(ellipse at center,transparent 40%,#06132144 100%)}
.gallery-drift{position:absolute;inset:-2% -5%;display:flex;flex-direction:column;gap:var(--gallery-gap);justify-content:center;transform:translate3d(var(--drift-x,0px),var(--drift-y,0px),0) rotate(-3deg) scale(1.06);transition:transform 1.2s cubic-bezier(.2,.65,.2,1)}.gallery-lane{height:29%;flex-shrink:0;width:100%;position:relative}.gallery-track{display:flex;width:max-content;height:100%;animation:gallery-flow-reverse 100s linear infinite;will-change:transform}.lane-2 .gallery-track{animation-name:gallery-flow-reverse;animation-duration:115s}.lane-3 .gallery-track{animation-duration:130s}.gallery-group{display:flex;height:100%;gap:var(--gallery-gap);padding-right:var(--gallery-gap)}
.motion-gallery .gallery-photo{position:relative;display:block;flex:0 0 auto;width:23vw;height:100%;overflow:hidden;padding:0;border:1px solid #a6bfd22b;border-radius:6px;background:#102435;cursor:zoom-in;box-shadow:0 10px 30px #0004}.motion-gallery .gallery-photo:nth-child(3n+2){width:17vw}.motion-gallery .gallery-photo:nth-child(4n){width:28vw}.motion-gallery .gallery-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84);transform:scale(1.01);transition:transform 1.1s cubic-bezier(.2,.65,.2,1),filter .7s}.motion-gallery .gallery-photo:hover img{transform:scale(1.09);filter:saturate(1.08)}.motion-gallery .gallery-photo:focus-visible{outline:3px solid #84adff;outline-offset:-4px}.motion-gallery.is-paused .gallery-track,.motion-gallery.is-offscreen .gallery-track,.gallery-lane:focus-within .gallery-track{animation-play-state:paused}
.gallery-pause{position:absolute;right:clamp(14px,3vw,48px);bottom:clamp(12px,2.5vw,40px);z-index:3;display:grid;place-items:center;width:44px;height:44px;border:1px solid #abc4d34d;border-radius:50%;background:#081726aa;backdrop-filter:blur(12px);color:#fff;font:18px Inter,sans-serif;cursor:pointer;transition:border-color .3s,background .3s}.gallery-pause:hover{background:#1b3552;border-color:#abc4d3}.gallery-lightbox{position:fixed;inset:0;width:min(1200px,94vw);max-width:94vw;padding:50px 20px 20px;border:1px solid #a9c3d33a;background:#071421;color:#fff;max-height:92dvh;overflow:auto}.gallery-lightbox::backdrop{background:#020a13ed;backdrop-filter:blur(12px)}.gallery-lightbox>img{display:block;width:100%;height:auto;max-height:76dvh;object-fit:contain}.gallery-close{position:absolute;top:7px;right:12px;color:#fff;background:none;border:0;width:38px;height:38px;font:32px Inter;cursor:pointer}
@keyframes gallery-flow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}@keyframes gallery-flow-reverse{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@media(max-width:600px){.motion-gallery .gallery-photo{width:32vw;border-radius:3px}.motion-gallery .gallery-photo:nth-child(3n+2){width:24vw}.motion-gallery .gallery-photo:nth-child(4n){width:38vw}.gallery-pause{width:36px;height:36px;font-size:14px}.gallery-track{animation-duration:85s}.lane-2 .gallery-track{animation-duration:100s}.lane-3 .gallery-track{animation-duration:115s}}
@media(prefers-reduced-motion:reduce){.gallery-track{animation:none!important;will-change:auto}.gallery-drift{transition:none;transform:rotate(-3deg) scale(1.06)}.motion-gallery .gallery-photo img{transition:none}.gallery-pause{display:none}}

/* All rows flow left to right; inspecting a photograph freezes the gallery. */
.motion-gallery:has(.gallery-photo:hover) .gallery-track,.motion-gallery:focus-within .gallery-track{animation-play-state:paused}
.motion-gallery:has(.gallery-photo:hover) .gallery-drift{transform:rotate(-3deg) scale(1.06)}
.motion-gallery .gallery-photo{transition:transform .45s cubic-bezier(.2,.65,.2,1),box-shadow .45s;transform-origin:center}
@media(hover:hover){.motion-gallery .gallery-photo:hover{transform:scale(1.18);z-index:5;box-shadow:0 20px 55px #000a;border-color:#abc8e0}.motion-gallery .gallery-photo:hover img{transform:scale(1.01)}}